/* ── Design tokens ────────────────────────────────── */
    :root {
      --inin-blue:       #0082C8;
      --inin-blue-dark:  #0a5d90;
      --inin-blue-light: #e8f4fb;
      --inin-warning:       #FFE0B2;
      --inin-warning-dark:  #FFCC80;
      --inin-warning-light: #FFF3E0;
      --sidebar-w:       260px;
      --topbar-h:        56px;
      --font-main:       'Source Sans 3', sans-serif;
      --font-display:    'Source Serif 4', serif;
      --radius:          10px;
      --shadow-card:     0 2px 12px rgba(0,0,0,.08);
    }

    /* ── Reset / base ─────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    body {
      font-family: var(--font-main);
      /*background: #f0f6fb;*/
      background: #f5f5f5;
      color: #1e2d3d;
      margin: 0;
    }

    /* ── Top-bar ──────────────────────────────────────── */
    #topbar {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: var(--topbar-h);
      background: var(--inin-blue);
      display: flex;
      align-items: center;
      padding: 0 1.25rem;
      z-index: 1040;
      box-shadow: 0 2px 8px rgba(0,0,0,.18);
    }

    /* Logo zone */
    #topbar .brand {
      display: flex;
      align-items: center;
      gap: .65rem;
      text-decoration: none;
      flex-shrink: 0;
    }
    #topbar .brand .logo-circle {
      width: 36px; height: 36px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.55);
      background: rgba(255,255,255,.15);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.15rem;
      color: #fff;
    }
    #topbar .brand .brand-text {
      line-height: 1.15;
    }
    #topbar .brand .brand-text strong {
      display: block;
      font-size: .95rem;
      font-weight: 700;
      color: #fff;
      letter-spacing: .03em;
    }
    #topbar .brand .brand-text span {
      font-size: .6rem;
      color: rgba(255,255,255,.75);
      font-weight: 300;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    /* Center nav links */
    #topbar .top-links {
      display: flex;
      align-items: center;
      gap: .25rem;
      margin-left: 2rem;
    }
    #topbar .top-links a {
      display: flex;
      align-items: center;
      gap: .4rem;
      color: rgba(255,255,255,.88);
      text-decoration: none;
      font-size: .82rem;
      padding: .35rem .75rem;
      border-radius: 6px;
      transition: background .18s, color .18s;
      white-space: nowrap;
    }
    #topbar .top-links a:hover {
      background: rgba(255,255,255,.15);
      color: #fff;
    }
    #topbar .top-links a i { font-size: 1rem; }

    /* Right section */
    #topbar .top-right {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: .5rem;
    }
    #topbar .top-right a,
    #topbar .top-right button {
      display: flex;
      align-items: center;
      gap: .4rem;
      color: rgba(255,255,255,.88);
      text-decoration: none;
      font-size: .82rem;
      padding: .35rem .75rem;
      border-radius: 6px;
      background: none;
      border: none;
      cursor: pointer;
      transition: background .18s, color .18s;
      white-space: nowrap;
    }
    #topbar .top-right a:hover,
    #topbar .top-right button:hover {
      background: rgba(255,255,255,.15);
      color: #fff;
    }

    /* Hamburger – only on small screens */
    #sidebarToggle {
      display: none;
      border: none;
      background: none;
      color: #fff;
      font-size: 1.4rem;
      padding: .25rem .5rem;
      cursor: pointer;
      margin-right: .5rem;
    }

    /* ── Page wrapper ─────────────────────────────────── */
    #wrapper {
      display: flex;
      min-height: 100vh;
      padding-top: var(--topbar-h);
    }

    /* ── Sidebar ──────────────────────────────────────── */
    #sidebar {
      width: var(--sidebar-w);
      flex-shrink: 0;
      background: #fff;
      border-right: 1px solid #dde8f0;
      display: flex;
      flex-direction: column;
      position: fixed;
      top: var(--topbar-h);
      left: 0;
      bottom: 0;
      overflow-y: auto;
      z-index: 1030;
      transition: transform .28s ease;
    }

    /* Sidebar backdrop (mobile) */
    #sidebarBackdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.4);
      z-index: 1025;
    }
    #sidebarBackdrop.show { display: block; }

    /* Sidebar user card */
    .sidebar-user {
      padding: 1.25rem 1rem .9rem;
      border-bottom: 2px solid #e8edf2;
    }
    .sidebar-user .avatar {
      width: 42px; height: 42px;
      border-radius: 50%;
      background: var(--inin-warning-light);
      border: 2px solid var(--inin-warning);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem;
      color: var(--inin-blue);
      flex-shrink: 0;
    }
    .sidebar-user .user-info strong {
      font-size: .82rem;
      display: block;
      color: #1e2d3d;
    }
    .sidebar-user .user-info span {
      font-size: .74rem;
      color: #7a8fa0;
    }

    /* Sidebar nav */
    .sidebar-nav { padding: .75rem 0; }
    .sidebar-nav .nav-section-title {
      font-size: .99rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #6d7e8e;
      padding: .9rem 1.1rem .3rem;
    }
    .sidebar-nav .nav-item { padding: .05rem .6rem; }
    .sidebar-nav .nav-link {
      display: flex;
      align-items: center;
      gap: .7rem;
      font-size: 1.25rem;
      color: #263340;
      padding: .55rem .75rem;
      border-radius: 8px;
      text-decoration: none;
      transition: background .17s, color .17s;
    }
    .sidebar-nav .nav-link i {
      font-size: 1.05rem;
      color: #7a9ab5;
      flex-shrink: 0;
      transition: color .17s;
    }
    .sidebar-nav .nav-link:hover {
      background: var(--inin-blue-light);
      color: var(--inin-blue-dark);
    }
    .sidebar-nav .nav-link:hover i { color: var(--inin-blue); }
    .sidebar-nav .nav-link.active {
      background: var(--inin-blue);
      color: #fff;
      font-weight: 600;
    }

    .sidebar-nav .nav-link.active i { color: rgba(255,255,255,.85); }
    
    .nav-link.active i {color: #ffffff !important;}

    /* Collapse arrow */
    .sidebar-nav .nav-link[data-bs-toggle="collapse"] .chevron {
      margin-left: auto;
      font-size: .7rem;
      transition: transform .22s;
      color: #a0b5c5;
    }
    .sidebar-nav .nav-link[data-bs-toggle="collapse"]:not(.collapsed) .chevron {
      transform: rotate(90deg);
    }
    .sidebar-sub { padding-left: 2.4rem; }
    .sidebar-sub .nav-link { font-size: .79rem; padding: .42rem .75rem; }

    /* Sidebar footer */
    .sidebar-footer {
      margin-top: auto;
      padding: .75rem 1rem;
      border-top: 2px solid #e8edf2;
      font-size: 1rem;
      color: #a0b0be;
      text-align: center;
    }

    /* ── Main content ─────────────────────────────────── */
    #mainContent {
      flex: 1;
      margin-left: var(--sidebar-w);
      padding: 1.75rem 2rem 2.5rem;
      min-height: calc(100vh - var(--topbar-h));
      transition: margin-left .28s ease;
    }

    /* Breadcrumb */
    .breadcrumb-bar {
      display: flex;
      align-items: center;
      gap: .4rem;
      font-size: .78rem;
      color: #7a8fa0;
      margin-bottom: 1.4rem;
    }
    .breadcrumb-bar a { color: var(--inin-blue); text-decoration: none; }
    .breadcrumb-bar a:hover { text-decoration: underline; }
    .breadcrumb-bar .sep { color: #c0cdd8; }

    .title {
      font-family: var(--font-display);
      font-size: 2.0rem;
      font-weight: 600;
      color: #102840;
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: .6rem;
    }
    
    .subtitle {
      font-family: var(--font-display);
      font-size: 1.58rem;
      font-weight: 600;
      color: #102840;
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: .6rem;
    }

    .subtitle-ii {
      font-family: var(--font-display);
      font-size: 1.3rem;
      font-weight: 600;
      color: #102840;
      margin-bottom: 0.0rem;
      display: flex;
      align-items: center;
      gap: .6rem;
    }


    /* Page title */
    .page-title {
      font-family: var(--font-display);
      font-size: 1.55rem;
      font-weight: 600;
      color: #102840;
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: .6rem;
    }
    .page-title i { color: var(--inin-blue); font-size: 1.35rem; }

    /* Stat cards */
    .stat-card {
      background: #fff;
      border-radius: var(--radius);
      padding: 1.2rem 1.4rem;
      box-shadow: var(--shadow-card);
      border-left: 4px solid var(--inin-blue);
      display: flex;
      align-items: center;
      gap: 1rem;
      transition: transform .18s, box-shadow .18s;
    }
    .stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.11); }
    .stat-card .stat-icon {
      width: 48px; height: 48px;
      border-radius: 10px;
      background: var(--inin-blue-light);
      display: flex; align-items: center; justify-content: center;
      color: var(--inin-blue);
      font-size: 1.4rem;
      flex-shrink: 0;
    }
    .stat-card .stat-label { font-size: .75rem; color: #7a8fa0; margin-bottom: .15rem; }
    .stat-card .stat-value { font-size: 1.45rem; font-weight: 700; color: #102840; line-height: 1; }
    .stat-card .stat-delta { font-size: .72rem; color: #36b37e; margin-top: .2rem; }
    .stat-card .stat-delta.down { color: #e05252; }

    /* Content card */
    .content-card {
      background: #fff;
      border-radius: var(--radius);
      box-shadow: var(--shadow-card);
      padding: 1.4rem 1.6rem;
    }
    .content-card .card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.1rem;
      padding-bottom: .75rem;
      border-bottom: 1px solid #edf2f7;
    }
    .content-card .card-head h6 {
      font-size: .88rem;
      font-weight: 700;
      color: #102840;
      margin: 0;
      display: flex; align-items: center; gap: .5rem;
    }
    .content-card .card-head h6 i { color: var(--inin-blue); }

    /* Table tweaks */
    .table thead th {
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: #7a8fa0;
      border-color: #edf2f7;
      background: #f7fafc;
    }
    .table tbody td { font-size: .82rem; border-color: #f0f4f8; vertical-align: middle; }
    .table tbody tr:hover { background: var(--inin-blue-light); }

    /* Badge variants */
    .badge-status {
      font-size: .68rem;
      font-weight: 600;
      padding: .28em .65em;
      border-radius: 20px;
    }
    .badge-active   { background: #d4f5e8; color: #1a7a4a; }
    .badge-pending  { background: #fff3cd; color: #8a6200; }
    .badge-inactive { background: #f2e5e5; color: #7a2222; }

    /* ── Responsive ───────────────────────────────────── */
    @media (max-width: 991.98px) {
      #sidebarToggle { display: block; }

      #sidebar {
        transform: translateX(calc(-1 * var(--sidebar-w)));
      }
      #sidebar.open { transform: translateX(0); }

      #mainContent { margin-left: 0; }

      #topbar .top-links { display: none; }
    }

    @media (max-width: 575.98px) {
      #mainContent { padding: 1.1rem 1rem 2rem; }
      .page-title { font-size: 1.25rem; }
    }