:root { color-scheme: light; --navy:#17235d; --blue:#3647aa; --orange:#f27622; }
* { box-sizing: border-box; }
body { background: radial-gradient(circle at 90% 5%, rgba(99,102,241,.08), transparent 28%), #f8fafc; }
.nav-link { display:flex; align-items:center; gap:.85rem; border-radius:1rem; padding:.82rem 1rem; color:#c7d2fe; font-size:.9rem; font-weight:600; transition:.2s ease; }
.nav-link svg { width:1.25rem; height:1.25rem; fill:currentColor; }
.nav-link:hover { background:rgba(255,255,255,.08); color:#fff; transform:translateX(2px); }
.nav-link.active { background:linear-gradient(110deg,#4656c5,#6673da); color:#fff; box-shadow:0 10px 25px rgba(0,0,0,.18); }
@media(min-width:1024px){
  #sidebar,#appShell,.sidebar-brand,.nav-link,.sidebar-logout { transition:all .3s cubic-bezier(.4,0,.2,1); }
  html.sidebar-collapsed #sidebar { width:5rem; }
  html.sidebar-collapsed #appShell { padding-left:5rem; }
  html.sidebar-collapsed .sidebar-brand { justify-content:center; padding-left:1rem; padding-right:1rem; }
  html.sidebar-collapsed .brand-logo-full { display:none; }
  html.sidebar-collapsed .brand-logo-compact { display:grid; }
  html.sidebar-collapsed .nav-section-title,html.sidebar-collapsed .nav-label,html.sidebar-collapsed .nav-meta { display:none; }
  html.sidebar-collapsed #sidebar nav { padding-left:.65rem; padding-right:.65rem; }
  html.sidebar-collapsed .nav-link,html.sidebar-collapsed .sidebar-logout { justify-content:center; gap:0; padding-left:.75rem; padding-right:.75rem; }
  html.sidebar-collapsed .nav-link svg { width:1.35rem; height:1.35rem; flex:none; }
}
.app-card { border:1px solid rgba(226,232,240,.85); border-radius:1.5rem; background:rgba(255,255,255,.94); padding:1.5rem; box-shadow:0 12px 35px rgba(28,39,94,.07); }
.metric-card { position:relative; overflow:hidden; border:1px solid #eef2f7; border-radius:1.4rem; background:#fff; padding:1.35rem; box-shadow:0 10px 28px rgba(28,39,94,.06); }
.metric-card:after { content:""; position:absolute; right:-24px; top:-24px; width:70px; height:70px; border-radius:50%; background:rgba(99,102,241,.05); }
.metric-card .metric-icon { display:grid; width:2.5rem; height:2.5rem; place-items:center; border-radius:.85rem; font-size:1.15rem; font-weight:800; }
.metric-card p { margin-top:1rem; color:#64748b; font-size:.78rem; font-weight:700; }
.metric-card strong { display:block; margin-top:.3rem; color:var(--navy); font-family:Manrope,sans-serif; font-size:1.65rem; }
.metric-card small { color:#94a3b8; font-size:.7rem; }
.eyebrow { color:#4f46e5; font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.page-heading { margin-top:.3rem; color:var(--navy); font-family:Manrope,sans-serif; font-size:clamp(1.55rem,3vw,2.1rem); font-weight:800; }
.page-subtitle { margin-top:.45rem; color:#64748b; font-size:.92rem; }
.card-title { margin-top:.3rem; color:var(--navy); font-family:Manrope,sans-serif; font-size:1.2rem; font-weight:800; }
.button-primary,.button-secondary { display:inline-flex; align-items:center; gap:.5rem; border-radius:.85rem; padding:.72rem 1.05rem; font-size:.875rem; font-weight:700; transition:.2s ease; }
.button-primary { background:linear-gradient(115deg,#3647aa,#5b65ce); color:white; box-shadow:0 9px 22px rgba(54,71,170,.22); }
.button-primary:hover { transform:translateY(-1px); box-shadow:0 12px 28px rgba(54,71,170,.3); }
.button-primary:disabled { cursor:not-allowed; opacity:.55; transform:none; }
.button-secondary { border:1px solid #e2e8f0; background:#fff; color:#475569; }
.button-secondary:hover { border-color:#c7d2fe; background:#eef2ff; color:#3647aa; }
.form-label { display:block; margin-bottom:.5rem; color:#334155; font-size:.8rem; font-weight:700; }
.form-label span { color:#ef4444; }
.form-input { width:100%; border:1px solid #dbe3ee; border-radius:.85rem; background:#fff; padding:.72rem .9rem; color:#1e293b; font-size:.9rem; outline:none; transition:.18s ease; }
.form-input::placeholder { color:#a5b4c5; }
.form-input:focus { border-color:#6673da; box-shadow:0 0 0 4px rgba(99,102,241,.11); }
.form-input.invalid { border-color:#fb7185; box-shadow:0 0 0 4px rgba(244,63,94,.08); }
.field-error,.field-validation-error { display:block; min-height:1.1rem; padding-top:.3rem; color:#e11d48; font-size:.74rem; font-weight:600; }
.section-heading { display:flex; align-items:center; gap:1rem; }
.section-heading h3 { color:var(--navy); font-family:Manrope,sans-serif; font-size:1.05rem; font-weight:800; }
.section-heading p { margin-top:.2rem; color:#94a3b8; font-size:.78rem; }
.section-number { display:grid; width:2.8rem; height:2.8rem; place-items:center; flex:none; border-radius:1rem; background:#eef2ff; color:#4f46e5; font-family:Manrope,sans-serif; font-size:.76rem; font-weight:800; }
.mini-stat { border-radius:1.15rem; background:#fff; padding:1.05rem 1.25rem; box-shadow:0 8px 22px rgba(28,39,94,.05); }
.mini-stat span { color:#64748b; font-size:.75rem; font-weight:600; }
.mini-stat strong { float:right; color:var(--navy); font-family:Manrope,sans-serif; font-size:1.15rem; }
.data-table { width:100%; min-width:760px; border-collapse:collapse; }
.data-table th { background:#f8fafc; padding:.85rem 1.25rem; color:#64748b; font-size:.69rem; font-weight:800; letter-spacing:.08em; text-align:left; text-transform:uppercase; }
.data-table td { border-top:1px solid #f1f5f9; padding:1rem 1.25rem; font-size:.84rem; vertical-align:middle; }
.data-table tbody tr { transition:background .16s ease; }
.data-table tbody tr:hover { background:#fafbff; }
.status-badge { display:inline-flex; align-items:center; gap:.4rem; border-radius:999px; padding:.35rem .65rem; font-size:.7rem; font-weight:800; }
.status-badge:before { content:""; width:.38rem; height:.38rem; border-radius:50%; background:currentColor; }
.status-draft { background:#f1f5f9; color:#64748b; }.status-pending { background:#fff7ed;color:#d97706;}.status-approved { background:#ecfdf5;color:#059669;}.status-rejected { background:#fff1f2;color:#e11d48;}
.detail-label { color:#94a3b8; font-size:.69rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.detail-value { margin-top:.35rem; color:#1e293b; font-size:.92rem; font-weight:700; }
.dropdown-menu { position:absolute; z-index:80; top:calc(100% + .4rem); left:0; right:0; max-height:15rem; overflow:auto; border:1px solid #e2e8f0; border-radius:1rem; background:#fff; padding:.4rem; box-shadow:0 18px 40px rgba(28,39,94,.16); }
.dropdown-option { width:100%; border-radius:.7rem; padding:.65rem .75rem; text-align:left; font-size:.84rem; }
.dropdown-option:hover,.dropdown-option.active { background:#eef2ff;color:#3647aa; }
@media(max-width:640px){.app-card{padding:1.15rem}.data-table th,.data-table td{padding:.8rem 1rem}}