:root{
  --brand:#5b6ef5;
  --brand-mid:#4a5ce0;
  --brand-light:#818cf8;
  --brand-pale:#eef0fe;
  --brand-border:#c7d2fe;
  --surface:#fff;
  --bg:#f0f2f8;
  --text-primary:#1e2235;
  --text-secondary:#475569;
  --text-muted:#94a3b8;
  --border:#e2e8f0;
  --danger:#dc2626;
  --warning:#d97706;
  --success:#16a34a;
  --info:#0369a1
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
body{font-family:'Inter',sans-serif;background:var(--bg)}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--brand-border);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--brand-light)}

/* ── Sidebar ── */
.sidebar-collapsed{width:64px!important;min-width:64px!important}
.sidebar-collapsed .nav-label-text{display:none}
.sidebar-collapsed .nav-sep{display:none}
.sidebar-collapsed .nav-item{justify-content:center;padding:12px}
.sidebar-collapsed .nav-item i{margin:0}

#sidebar{background:#1e2235!important;border-right:none!important;box-shadow:4px 0 24px rgba(30,34,53,.25)!important}
#sidebar .nav-item{color:rgba(255,255,255,.55)!important}
#sidebar .nav-item:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
#sidebar .nav-item.bg-brand\/10,#sidebar .nav-item.shadow-inner{background:rgba(91,110,245,.3)!important;color:#fff!important}
#sidebar .nav-sep{color:rgba(255,255,255,.25)!important}
#sidebar .nav-sep div{background:rgba(255,255,255,.15)!important}

/* Avatar & user block in sidebar */
#sidebar #current-username{color:#fff!important}
#sidebar #current-role{color:var(--brand-light)!important}
#sidebar #avatar-initials{background:var(--brand)!important}
.sidebar > div:nth-child(2){background:rgba(255,255,255,.06)!important;border-bottom:1px solid rgba(255,255,255,.08)!important}

/* Sidebar top brand bar */
#sidebar > div:first-child{border-bottom:1px solid rgba(255,255,255,.08)!important}
#sidebar > div:first-child p{color:#fff!important}
#sidebar > div:first-child .text-slate-400{color:rgba(255,255,255,.4)!important}
#sidebar > div:first-child button{border-color:rgba(255,255,255,.15)!important;color:rgba(255,255,255,.5)!important}
#sidebar > div:first-child button:hover{background:rgba(255,255,255,.1)!important}

/* Float btn */
#sidebar-float-btn{background:var(--brand)!important}

/* Logout button in sidebar */
#sidebar > div:last-child button{color:#f87171!important}
#sidebar > div:last-child button:hover{background:rgba(248,113,113,.12)!important}

/* ── Header ── */
header{background:#fff!important;border-bottom:1px solid var(--border)!important;box-shadow:0 1px 4px rgba(0,0,0,.05)!important}
#page-title{color:var(--text-primary)!important;font-weight:900}

/* ── Tables ── */
.table-wrap{background:#fff;border-radius:20px;border:1px solid var(--border);overflow:auto;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.data-table{width:100%;border-collapse:collapse}
.data-table thead th{padding:13px 18px;background:var(--brand-pale);border-bottom:2px solid var(--brand-border);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--brand);white-space:nowrap}
.data-table tbody td{padding:12px 18px;font-size:13px;color:var(--text-primary);vertical-align:middle;border-bottom:1px solid #f1f5f9}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr:hover{background:var(--brand-pale)}
.col-note{max-width:180px;font-size:12px;color:var(--text-muted);font-weight:600}

/* ── Inputs ── */
.inp{display:block;width:100%;padding:10px 14px;border:2px solid var(--border);border-radius:12px;font-size:13px;font-weight:600;color:var(--text-primary);background:#f8fafc;transition:border-color .2s,background .2s;outline:none;font-family:inherit}
.inp:focus{border-color:var(--brand);background:#fff}
select.inp{cursor:pointer}
textarea.inp{resize:vertical}
.lbl{display:block;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:6px}

/* ── Buttons ── */
.btn-primary{display:inline-flex;align-items:center;padding:10px 20px;background:var(--brand);color:#fff;border-radius:12px;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.07em;transition:all .2s;border:none;cursor:pointer;box-shadow:0 4px 14px rgba(91,110,245,.3);font-family:inherit}
.btn-primary:hover{background:var(--brand-mid);box-shadow:0 6px 20px rgba(91,110,245,.4);transform:translateY(-1px)}
.btn-raised-white{display:inline-flex;align-items:center;padding:10px 16px;background:#fff;color:var(--text-secondary);border:2px solid var(--border);border-radius:12px;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.07em;transition:all .2s;cursor:pointer;font-family:inherit}
.btn-raised-white:hover{background:var(--brand-pale);border-color:var(--brand-border);color:var(--brand)}
.btn-edit{background:#eff6ff;color:#3b82f6;border:1px solid #bfdbfe;border-radius:10px;padding:7px 10px;cursor:pointer;font-size:11px;transition:all .2s}
.btn-edit:hover{background:#3b82f6;color:#fff}
.btn-delete{background:#fef2f2;color:#ef4444;border:1px solid #fecaca;border-radius:10px;padding:7px 10px;cursor:pointer;font-size:11px;transition:all .2s}
.btn-delete:hover{background:#ef4444;color:#fff}

/* ── Stat cards ── */
.stat-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:24px 16px;text-align:center;cursor:pointer;transition:all .2s;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.stat-card:hover{box-shadow:0 8px 24px rgba(91,110,245,.14);transform:translateY(-2px);border-color:var(--brand-border)}
.stat-val{font-size:28px;font-weight:900;color:var(--text-primary);line-height:1}
.stat-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-top:6px}

/* ── Toolbar ── */
.section-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.search-input{padding:10px 16px;border:2px solid var(--border);border-radius:12px;font-size:13px;font-weight:600;color:var(--text-primary);background:#fff;outline:none;transition:border-color .2s;min-width:220px;font-family:inherit}
.search-input:focus{border-color:var(--brand)}
.filter-select{padding:10px 14px;border:2px solid var(--border);border-radius:12px;font-size:12px;font-weight:700;color:var(--text-secondary);background:#fff;outline:none;cursor:pointer;transition:border-color .2s;font-family:inherit}
.filter-select:focus{border-color:var(--brand)}

/* ── VPP Tabs ── */
.vpp-tab{display:inline-flex;align-items:center;padding:8px 16px;border-radius:12px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);background:transparent;border:none;cursor:pointer;transition:all .2s;font-family:inherit}
.vpp-tab:hover{background:var(--brand-pale);color:var(--brand)}
.vpp-tab.active{background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(91,110,245,.3)}

/* ── Nav sidebar ── */
.nav-sep{display:flex;align-items:center;gap:8px;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);margin:16px 0 6px;padding:0 12px}

/* ── Modals ── */
.modal-content{animation:modal-in .2s ease}
@keyframes modal-in{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ── Toast ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;padding:12px 24px;border-radius:16px;font-weight:800;font-size:13px;display:flex;align-items:center;gap:10px;z-index:9999;transition:all .3s;white-space:nowrap;box-shadow:0 8px 32px rgba(0,0,0,.15);font-family:inherit}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast-success{background:#ecfdf5;color:#059669;border:2px solid #a7f3d0}
.toast-error{background:#fef2f2;color:#dc2626;border:2px solid #fecaca}
.toast-info{background:var(--brand-pale);color:var(--brand);border:2px solid var(--brand-border)}