:root{
      --app-bg:#f5f7fb; --panel:#fff; --panel-2:#fff;
      --border:rgba(20,33,61,.10);
      --muted:rgba(20,33,61,.72); --muted-2:rgba(20,33,61,.58);
      --card:#fff; --card2:#fff; --shadow:0 18px 40px rgba(16,24,40,.10);
      --radius:16px; --text:#0f172a;
    }
    [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); }
    .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;
    }
    @media (min-width:992px){ .sidebar{ display:flex; flex-direction:column; } }
    .content{ flex:1; }
    .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; } }

    .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); }

    .brand{ display:flex; align-items:center; gap:10px; padding:10px 10px 14px; }
    .brand-mark{
      width:42px; height:42px; border-radius:14px;
      display:grid; place-items:center;
      background: color-mix(in srgb, var(--text) 7%, transparent);
      border:1px solid var(--border); 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;
      text-decoration:none;
    }
    .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;
    }
    .text-muted-3{ color:var(--muted-2)!important; }

    .btn{ border-radius:12px; }
    .form-control,.form-select,.input-group-text{ border-radius:12px; border:1px solid var(--border); }
    .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; }

    .table thead th{
      color:var(--muted); font-weight:800;
      border-bottom:1px solid var(--border);
      background: color-mix(in srgb, var(--card) 92%, transparent);
      white-space:nowrap;
    }
    .table td{ border-top:1px solid var(--border); vertical-align:middle; }

    /* Payslip preview */
    .payslip-wrap{ background:#fff; color:#111; border:1px solid #d7dee8; border-radius:12px; overflow:hidden; }
    .ps-topbar{ background:#123f6d; color:#fff; padding:10px 14px; font-weight:800; letter-spacing:.5px; text-align:center; }
    .ps-company{ text-align:center; padding:14px 14px 12px; border-bottom:1px solid #e3eaf3; }
    .ps-company .name{ font-weight:900; }
    .ps-company .meta{ font-size:.875rem; color:#6c757d; }
    .ps-grid{ width:100%; border-collapse:collapse; border:1px solid #000; }
    .ps-grid td,.ps-grid th{ padding:8px 10px; border:1px solid #000; vertical-align:top; }
    .ps-grid th{ background:#f3f7fc; font-weight:800; color:#142f4f; }
    .ps-meta th{ background:#eaf1fb; }
    .ps-emp tr:nth-child(even) td{ background:#fbfdff; }
    .ps-key-row th,.ps-key-row td{ background:#f7fafc; font-weight:700; }
    .ps-sec-head{ background:#dbe9f9; color:#123f6d; font-weight:900; letter-spacing:.2px; }
    .ps-ledger table{ width:100%; border-collapse:collapse; border:1px solid #000; }
    .ps-ledger table td{ border:1px solid #000; padding:8px 10px; }
    .ps-totals{ background:#f1f6fc; font-weight:900; color:#102f52; }
    .ps-netbar{ background:#123f6d; color:#fff; padding:10px 14px; font-weight:900; display:flex; justify-content:space-between; }

    .notif-dot{
      position:absolute; top:6px; right:6px;
      width:10px; height:10px; border-radius:999px;
      background:#dc3545; border:2px solid var(--card);
    }

    @media print{
      .no-print{ display:none!important; }
      body{ background:#fff!important; }
      .modal{ position: static; display:block; }
      .modal-dialog{ max-width: 100% !important; margin:0 !important; }
      .modal-content{ border:0 !important; }
    }
      .sidebar{overflow:hidden;}
    .sidebar-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:6px;margin-right:-6px;}
    .brand-mark{width:40px;height:40px;border-radius:12px;background:color-mix(in srgb, var(--app-bg) 85%, var(--panel));border:1px solid color-mix(in srgb, var(--text) 16%, transparent);}
      .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; }