/* THEME TOKENS (light default) */
    :root{
      --app-bg: #f5f7fb;
      --panel: #ffffff;
      --panel-2:#ffffff;
      --border: rgba(20, 33, 61, .10);
      --muted: rgba(20, 33, 61, .72);
      --muted-2: rgba(20, 33, 61, .58);
      --card: rgba(255,255,255,1);
      --card2: rgba(255,255,255,1);
      --shadow: 0 18px 40px rgba(16, 24, 40, .10);
      --radius: 16px;
      --text: #0f172a;
    }

    /* DARK TOKENS */
    [data-bs-theme="dark"]{
      --app-bg:#0b1220;
      --panel:#0f1b33;
      --panel-2:#0c172d;
      --border:rgba(255,255,255,.10);
      --muted:rgba(255,255,255,.72);
      --muted-2:rgba(255,255,255,.60);
      --card:rgba(255,255,255,.06);
      --card2:rgba(255,255,255,.08);
      --shadow:0 20px 60px rgba(0,0,0,.35);
      --text:#e8eefc;
    }

    body{ background: var(--app-bg); color: var(--text); }

    /* Layout */
    .app { display:flex; min-height:100vh; }
    .sidebar{
      width:280px;
      background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
      border-right: 1px solid var(--border);
      position: sticky; top:0; height:100vh;
      padding:18px;
      display:none;
      overflow:hidden;
    }
    @media (min-width: 992px){ .sidebar{ display:flex; flex-direction:column; } }
    .sidebar-scroll{
      flex:1;
      min-height:0;
      overflow-y:auto;
      overflow-x:hidden;
      padding-right:6px;
      margin-right:-6px;
    }
    .content{ flex:1; }

    /* Topbar */
    .topbar{
      position:sticky; top:0; z-index:1020;
      background: color-mix(in srgb, var(--app-bg) 85%, transparent);
      backdrop-filter: blur(10px);
      border-bottom:1px solid var(--border);
    }
    .topbar-inner{ padding:14px 16px; }
    @media (min-width: 992px){ .topbar-inner{ padding:14px 24px; } }

    /* Cards */
    .glass{
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .glass-soft{
      background: var(--card2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }

    /* Sidebar */
    .brand{ display:flex; align-items:center; gap:10px; padding:10px 10px 14px; }
    .brand-mark{
      width:40px; height:40px; border-radius:12px;
      display:grid; place-items:center;
      background: color-mix(in srgb, var(--app-bg) 85%, var(--panel));
      border:1px solid color-mix(in srgb, var(--text) 16%, transparent);
      color: var(--text);
    }

    .nav-link{
      color: color-mix(in srgb, var(--text) 78%, transparent);
      border-radius: 12px;
      padding: 10px 12px;
      display:flex; align-items:center; gap:10px;
    }
    .nav-link:hover{ background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
    .nav-link.active{
      background: color-mix(in srgb, var(--bs-primary) 16%, transparent);
      border: 1px solid color-mix(in srgb, var(--bs-primary) 22%, transparent);
      color: var(--text);
    }
    .nav-section-title{
      font-size:.75rem; color: var(--muted-2);
      text-transform: uppercase; letter-spacing:.08em;
      padding:14px 10px 8px;
    }

    /* Utilities */
    .text-muted-2{ color: var(--muted) !important; }
    .text-muted-3{ color: var(--muted-2) !important; }
    .btn{ border-radius: 12px; }

    /* Inputs: keep consistent in both themes */
    .form-control, .form-select{
      border-radius:12px;
      border:1px solid var(--border);
    }

    /* Table */
    .table thead th{ color: var(--muted); font-weight:600; border-bottom: 1px solid var(--border); }
    .table td{ border-top: 1px solid var(--border); vertical-align: middle; }

    .badge-soft{
      background: color-mix(in srgb, var(--text) 7%, transparent);
      border: 1px solid var(--border);
      color: var(--text);
      border-radius: 999px;
      padding: .35rem .6rem;
      font-size: .8rem;
    }

    /* Offcanvas */
    .offcanvas{
      background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
      color: var(--text);
    }

    /* Tiles */
    .tile{ text-decoration:none; color: inherit; }
    .tile:hover .glass-soft{ transform: translateY(-2px); transition: .18s ease; }
    .tile .icon{
      width:44px; height:44px; border-radius:14px;
      display:grid; place-items:center;
      background: color-mix(in srgb, var(--text) 7%, transparent);
      border:1px solid var(--border);
      flex:0 0 auto;
      color: var(--text);
    }
      .profile-icon-btn{
      border:0 !important;
      background:transparent !important;
      color: color-mix(in srgb, var(--text, #334155) 90%, transparent) !important;
      padding:.2rem .35rem;
      line-height:1;
    }
    .profile-icon-btn:hover,
    .profile-icon-btn:focus,
    .profile-icon-btn:active{
      border:0 !important;
      background:transparent !important;
      box-shadow:none !important;
      color: color-mix(in srgb, var(--text, #334155) 90%, transparent) !important;
    }
    .profile-icon-btn::after{ display:none !important; }
    .profile-icon-btn i{ font-size:1.25rem; }
      .theme-icon-btn{
      border:0 !important;
      background:transparent !important;
      color: color-mix(in srgb, var(--text, #334155) 90%, transparent) !important;
      padding:.2rem .35rem;
      line-height:1;
    }
    .theme-icon-btn:hover,
    .theme-icon-btn:focus,
    .theme-icon-btn:active{
      border:0 !important;
      background:transparent !important;
      box-shadow:none !important;
      color: color-mix(in srgb, var(--text, #334155) 90%, transparent) !important;
    }
    .theme-icon-btn i{ font-size:1.25rem; }