:root{--highlight:#1565c0;--highlight-dark:#0d47a1;--highlight-light:#1976d2;--bg-page:#f0f4f8;--text-body:#263238;--text-muted:#607d8b;--sidebar-bg:#0d1b2a;--sidebar-text:#90caf9;--sidebar-hover:#1e3a5f;--sidebar-active-bg:#1565c0;--sidebar-active-text:#fff;--sidebar-w:244px;--topbar-h:60px;--card-bg:#fff;--card-border:#e2e8f0;--secondary:#fff;--border:#e2e8f0;--shadow:0 2px 8px #00000014;--shadow-hover:0 4px 16px #00000024;--danger:#c62828;--success:#2e7d32}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-page);color:var(--text-body);font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:14px}.shell{min-height:100vh;display:flex}.main-content{margin-left:var(--sidebar-w);flex-direction:column;flex:1;min-width:0;min-height:100vh;transition:margin-left .3s;display:flex}.page-content{flex:1;max-width:100%;padding:24px}.backdrop{z-index:95;background:#040a168c;display:none;position:fixed;inset:0}.sidebar{width:var(--sidebar-w);z-index:100;background:linear-gradient(#0b1f38 0%,#0a1830 55%,#070f1e 100%);border-right:1px solid #78b4ff1f;flex-direction:column;height:100vh;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;left:0;overflow:hidden;box-shadow:2px 0 24px #00000059}.sidebar-header{border-bottom:1px solid #78b4ff1a;flex-shrink:0;padding:20px 18px 16px;position:relative}.sidebar-logo{align-items:center;gap:12px;display:flex}.logo-icon{background:#fff;border-radius:12px;flex-shrink:0;place-items:center;width:44px;height:44px;display:grid;overflow:hidden;box-shadow:0 4px 14px #286ed273,inset 0 0 0 1px #ffffffb3}.logo-icon img{object-fit:contain;width:36px;height:36px}.logo-text{color:#eaf3ff;letter-spacing:.02em;font-size:14.5px;font-weight:800;line-height:1.15}.logo-text span{color:#6f9bc9;letter-spacing:.08em;text-transform:uppercase;margin-top:2px;font-size:9.5px;font-weight:600;display:block}.sidebar-close{color:#cfe2ff;cursor:pointer;background:#ffffff0f;border:1px solid #78b4ff33;border-radius:9px;justify-content:center;align-items:center;width:32px;height:32px;font-size:15px;line-height:1;display:none;position:absolute;top:16px;right:14px}.sidebar-close:hover{color:#fff;background:#ff5a6e33}.user-info{background:linear-gradient(135deg,#468cf029,#21d4cf14);border:1px solid #78b4ff29;border-radius:13px;flex-shrink:0;align-items:center;gap:10px;margin:12px;padding:11px 13px;display:flex}.user-avatar{color:#fff;background:linear-gradient(135deg,#1565c0,#3aa0ff);border-radius:11px;flex-shrink:0;place-items:center;width:38px;height:38px;font-size:16px;font-weight:800;display:grid;box-shadow:0 3px 10px #286ed280}.user-detail{flex:1;min-width:0}.uname{color:#fff;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:700;overflow:hidden}.urole{color:#7fb0e0;text-transform:capitalize;margin-top:1px;font-size:10.5px}.nav-section{flex:1;padding:10px 12px;overflow-y:auto}.nav-label{color:#96bef073;text-transform:uppercase;letter-spacing:.14em;padding:8px 10px;font-size:9.5px;font-weight:800}.nav-item{color:#a2c4e8;border-radius:12px;align-items:center;gap:13px;margin:3px 0;padding:9px 12px;font-size:13.5px;font-weight:600;text-decoration:none;transition:all .18s;display:flex;position:relative}.nav-item i{color:#7fb0e0;background:#78aae61a;border-radius:9px;flex-shrink:0;place-items:center;width:34px;height:34px;font-size:14px;transition:all .18s;display:grid}.nav-item:hover{color:#fff;background:#78aae61a;transform:translate(2px)}.nav-item:hover i{color:#bfe0ff;background:#78aae633}.nav-item.active{color:#fff;background:linear-gradient(100deg,#1565c0,#2f8ae0);box-shadow:0 6px 18px #1e6edc73}.nav-item.active i{color:#fff;background:#ffffff38}.nav-item.active:before{content:"";background:#5ad1ff;border-radius:0 4px 4px 0;width:4px;height:58%;position:absolute;top:50%;left:-12px;transform:translateY(-50%);box-shadow:0 0 10px #5ad1ff}.nav-section+.nav-section{border-top:1px solid #ffffff14;margin-top:8px;padding-top:4px}.sidebar-footer{border-top:1px solid #78b4ff1a;flex-shrink:0;padding:12px 14px 16px}.btn-logout{color:#ff9aa6;cursor:pointer;background:#ff5a6e14;border:1px solid #ff5a6e38;border-radius:11px;justify-content:center;align-items:center;gap:8px;width:100%;padding:11px;font-size:13px;font-weight:700;transition:all .18s;display:flex}.btn-logout:hover{color:#fff;background:#ff4d4d33;border-color:#ff5a6e80}.topbar{height:var(--topbar-h);border-bottom:2px solid var(--highlight);z-index:50;background:#fff;justify-content:space-between;align-items:center;padding:0 20px;display:flex;position:sticky;top:0;box-shadow:0 1px 4px #0000000f}.topbar-left{align-items:center;gap:10px;min-width:0;display:flex}.topbar-menu{width:40px;height:40px;color:var(--highlight-dark);cursor:pointer;background:#1565c01a;border:none;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;font-size:19px;line-height:1;display:none}.topbar-menu:hover{background:#1565c033}.topbar-title{color:var(--highlight-dark);white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:800;overflow:hidden}.topbar-right{align-items:center;gap:16px;display:flex}.topbar-time{color:var(--text-muted);white-space:nowrap;align-items:center;gap:6px;font-size:13px;font-weight:600;display:flex}.topbar-time i{color:var(--highlight)}.dash-logo-banner{background:linear-gradient(135deg,#42a5f5,#90caf9);border-radius:16px;align-items:center;gap:16px;margin-bottom:20px;padding:20px 24px;display:flex;box-shadow:0 4px 16px #1565c040}.dash-logo-img{object-fit:contain;background:#fff;border:2px solid #ffffff40;border-radius:12px;width:56px;height:56px;padding:4px}.dash-logo-info h1{color:#fff;letter-spacing:.5px;font-size:18px;font-weight:900}.dash-logo-info p{color:#ffffffbf;margin-top:3px;font-size:12px}.filter-bar{background:var(--secondary);border:1px solid var(--card-border);box-shadow:var(--shadow);border-radius:14px;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:20px;padding:16px 20px;display:flex}.filter-group{flex-direction:column;gap:5px;display:flex}.filter-group label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:700}.filter-group input,.filter-group select{border:2px solid var(--card-border);color:var(--text-body);background:#f8faff;border-radius:10px;min-width:140px;padding:8px 12px;font-size:13px;transition:border-color .2s}.filter-group input:focus,.filter-group select:focus{border-color:var(--highlight);background:#eef5ff;outline:none}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px;display:grid}.stat-card{background:var(--secondary);border:1px solid var(--card-border);cursor:pointer;box-shadow:var(--shadow);border-radius:16px;padding:16px 15px;transition:all .3s;position:relative;overflow:hidden}.stat-card:before{content:"";background:var(--card-accent,var(--highlight));border-radius:16px 16px 0 0;height:4px;position:absolute;top:0;left:0;right:0}.stat-card:hover{box-shadow:var(--shadow-hover);border-color:var(--highlight-light);transform:translateY(-4px)}.stat-card .stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;align-items:flex-end;min-height:2.6em;margin-bottom:7px;font-size:10.5px;font-weight:700;line-height:1.3;display:flex}.stat-card .stat-value{color:var(--text-body);white-space:nowrap;margin-bottom:4px;font-size:clamp(15px,1.3vw,21px);font-weight:800;line-height:1.15}.stat-card .stat-sub{color:var(--text-muted);font-size:10px;line-height:1.2}.stat-card .stat-icon{opacity:.08;color:var(--highlight);font-size:36px;position:absolute;top:50%;right:20px;transform:translateY(-50%)}.chart-card{background:var(--secondary);border:1px solid var(--card-border);box-shadow:var(--shadow);border-radius:16px;padding:20px}.chart-card h3{color:var(--text-body);align-items:center;gap:8px;margin-bottom:14px;font-size:15px;font-weight:700;display:flex}.chart-card h3 i{color:var(--highlight)}.btn{cursor:pointer;border:none;border-radius:10px;align-items:center;gap:6px;padding:9px 18px;font-size:13px;font-weight:700;transition:all .2s;display:inline-flex}.btn-primary{background:var(--highlight);color:#fff}.btn-primary:hover{background:var(--highlight-dark);transform:translateY(-1px)}.btn-secondary{color:var(--text-body);border:1px solid var(--border);background:#f1f5f9}.btn-secondary:hover{background:#e2e8f0}.btn-success{color:#fff;background:#2e7d32}.btn-danger{color:#fff;background:#c62828}.table-wrap{background:#fff;border:1px solid #e2e8f0;border-radius:16px;margin-bottom:16px;overflow:hidden;box-shadow:0 2px 8px #00000014}.table-header{background:#f8faff;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:14px 20px;display:flex}.table-title{color:#0d47a1;align-items:center;gap:8px;font-size:14px;font-weight:800;display:flex}.table-title i{color:#1565c0}.table-responsive{overflow-x:auto}.sim-table{border-collapse:collapse;width:100%;font-size:13px}.sim-table thead tr{background:#eef5ff}.sim-table thead th{text-align:left;color:#0d47a1;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;border-bottom:2px solid #bbdefb;padding:11px 14px;font-size:11px;font-weight:800}.sim-table tbody tr{border-bottom:1px solid #f1f5f9;transition:background .15s}.sim-table tbody tr:hover{background:#f8faff}.sim-table tbody td{color:#263238;vertical-align:middle;padding:10px 14px}.empty-state{text-align:center;color:#90a4ae;padding:48px 20px}.empty-state i{color:#cfd8dc;margin-bottom:12px;font-size:40px;display:block}.empty-state p{font-size:14px;font-weight:600}.pagination{background:#fafbfc;border-top:1px solid #f1f5f9;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:12px 20px;display:flex}.pagination-info{color:#90a4ae;font-size:12px;font-weight:600}.pagination-btns{gap:6px;display:flex}.page-btn{cursor:pointer;color:#1565c0;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;transition:all .15s}.page-btn:hover{background:#e3f2fd}.page-btn.active{color:#fff;background:#1565c0;border-color:#1565c0}.page-btn:disabled{opacity:.4;cursor:not-allowed}.badge{border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700;display:inline-block}.badge-info{color:#0d47a1;background:#e3f2fd}.badge-warning{color:#e65100;background:#fff8e1}@media (max-width:1024px){.sidebar{transform:translate(-100%);box-shadow:0 0 50px #0009}.sidebar.open{transform:translate(0)}.sidebar-close{display:flex}.main-content{margin-left:0}.topbar-menu{display:flex}.backdrop.show{display:block}}@media (max-width:560px){.page-content{padding:14px}.topbar{padding:0 12px}.topbar-title{font-size:14px}.topbar-time{font-size:11px}.stats-grid{grid-template-columns:repeat(3,1fr);gap:10px}.dash-logo-banner{padding:16px}}@media (max-width:380px){.stats-grid{grid-template-columns:repeat(2,1fr)}}