.side{position:fixed;inset:0 auto 0 0;width:242px;background:linear-gradient(180deg,#141f38,#1b2846);color:#cbd3e4;display:flex;flex-direction:column;z-index:20}
.brand{display:flex;gap:12px;align-items:center;padding:20px;border-bottom:1px solid rgba(255,255,255,.08)}
.logo{width:42px;height:42px;flex:none;border-radius:12px;background:linear-gradient(135deg,#e5c276,#a8863a);color:#1c2440;font-weight:800;font-size:21px;display:flex;align-items:center;justify-content:center}
.bn{font-weight:700;color:#fff;font-size:14.5px;line-height:1.25}
.brand small{font-size:11px;color:#8fa0c4}
.side nav{padding:14px 12px;display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto}
.side nav button{display:flex;gap:11px;align-items:center;padding:10px 13px;border:none;background:none;color:#aab7d4;font-size:13.8px;font-weight:500;border-radius:10px;cursor:pointer;text-align:left;transition:.15s}
.side nav button:hover{background:rgba(255,255,255,.06);color:#fff}
.side nav button.active{background:linear-gradient(135deg,#d3ab5c,#a8863a);color:#fff;font-weight:600;box-shadow:0 6px 18px rgba(168,134,58,.35)}
.side nav svg{width:18px;height:18px;flex:none}
.side-foot{padding:15px 20px;font-size:11px;color:#7787ab;border-top:1px solid rgba(255,255,255,.08)}

.main{margin-left:242px;min-height:100vh;padding:26px 32px 56px}
.top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.top-left{display:flex;align-items:flex-end;gap:0;min-width:0}
.top h1{font-size:22px;font-weight:800;color:var(--navy)}
.crumb{font-size:13px;color:var(--muted);margin-top:3px;text-transform:capitalize}
.clock{font-weight:700;color:var(--navy);background:#fff;border:1px solid var(--line);padding:8px 14px;border-radius:10px;font-size:14px;font-variant-numeric:tabular-nums}

.ham{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:var(--card);border:1px solid var(--line);border-radius:10px;cursor:pointer;margin-right:10px;flex:none}
.ham svg{width:22px;height:22px;color:var(--ink)}

.foot-id{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.foot-org{font-size:11px;font-weight:600;color:#fbbf24;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Mobile ── */
@media(max-width:820px){
  .side{position:fixed;top:0;left:0;bottom:0;width:270px;transform:translateX(-100%);transition:transform .25s ease;z-index:30;box-shadow:4px 0 24px rgba(0,0,0,.35)}
  .side.open{transform:translateX(0)}
  .side-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:25}
  .side.open~.side-backdrop{display:block}
  .side nav{flex-direction:column;padding:14px 12px}
  .side-foot{display:flex}
  .main{margin-left:0;padding:16px 14px 60px;overflow-x:hidden;max-width:100vw}
  .ham{display:flex}
  .top{flex-direction:column;align-items:flex-start;gap:10px}
  .top h1{font-size:18px}
  .clock{font-size:12.5px;padding:7px 11px}
  .grid2{grid-template-columns:1fr!important}
  .grid2>.card{margin-bottom:16px}
  .form-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr);gap:8px}
  .stat{padding:14px 10px}
  .stat .lb{font-size:11.5px}
  .stat .vl{font-size:18px}
  .stat .sub{font-size:11px}
  .toolbar{gap:6px}
  .toolbar .btn{padding:7px 10px;font-size:12px}
  .tb-right{width:100%}
  .tb-right .btn{flex:1;justify-content:center}
  .toolbar .btn.sm{padding:5px 8px;font-size:11px}
  .card .toolbar{flex-direction:column!important;align-items:stretch!important;gap:6px}
  .card .toolbar .btn{justify-content:center;width:100%}
  .card .toolbar .badge{align-self:flex-start}
  .main{overflow-x:hidden}
  .card{overflow:hidden}
  table.tbl{display:table;width:100%;min-width:0}
  .tbl-wrap{overflow-x:auto}
  .tbl-wrap{margin:0 -14px;padding:0 14px}
  table.tbl{font-size:12px}
  .tbl th,.tbl td{padding:8px 8px}
  .ac{gap:4px;flex-wrap:wrap}
  .ac .btn{padding:5px 8px;font-size:11px}
  .modal{width:min(480px,96vw);border-radius:14px}
  .m-head{padding:14px 16px}
  .m-head h3{font-size:14.5px}
  .m-body{padding:16px}
  .m-foot{padding:12px 16px}
  .m-foot .btn{padding:8px 14px;font-size:12.5px}
  .login-card{padding:28px 20px}
  .bars{height:150px;padding:20px 4px 22px}
  .bar em{font-size:9.5px}
  .toast-root{right:10px;bottom:10px;left:10px}
  .toast{max-width:100%;font-size:12.5px;padding:10px 14px}
  .legend{gap:10px;font-size:11.5px}
}

@media(max-width:420px){
  .main{padding:12px 10px 56px}
  .top h1{font-size:16px}
  .stats{grid-template-columns:1fr 1fr;gap:6px}
  .stat{padding:10px 8px}
  .stat .vl{font-size:16px}
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar .btn{justify-content:center}
  .ac{flex-wrap:wrap}
  .modal{width:100vw;max-height:100vh;border-radius:12px}
  .login-card{border-radius:14px;padding:24px 16px}
  .foot-user{display:none}
  .side-foot{padding:12px 16px}
  .side-foot>div{display:none}
}