body { background:#f4f6fb; font-family: Inter, system-ui, sans-serif; color:#1a1f36; }
.sidebar { width:230px; background:#0f1728; min-height:100vh; position:sticky; top:0; height:100vh; flex-shrink:0; }
.sidebar .brand { padding:20px; color:#fff; font-weight:700; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar .brand small { display:block; color:#6b7a99; font-weight:400; font-size:.75rem; }
.sidebar a { display:flex; gap:10px; padding:10px 20px; color:#8896b0; text-decoration:none; font-size:.9rem; border-left:3px solid transparent; }
.sidebar a:hover { background:rgba(255,255,255,.05); color:#fff; } .sidebar a.active { color:#a5b4fc; background:rgba(99,102,241,.14); border-left-color:#6366f1; }
.main { flex:1; padding:24px 28px; min-width:0; }
.panel { background:#fff; border:1px solid #eef2f6; border-radius:14px; padding:18px; margin-bottom:18px; box-shadow:0 2px 10px rgba(0,0,0,.03); }
.kpi { background:#fff; border:1px solid #eef2f6; border-radius:14px; padding:14px 16px; } .kpi .l { font-size:.72rem; text-transform:uppercase; color:#64748b; font-weight:600; letter-spacing:.4px; } .kpi .v { font-size:1.7rem; font-weight:700; }
.st { display:inline-block; font-size:.7rem; font-weight:700; border-radius:10px; padding:2px 9px; background:#e2e8f0; color:#334155; text-transform:capitalize; }
.st-ready,.st-dispatched,.st-packed,.st-picked { background:#d1fae5; color:#047857; } .st-new,.st-allocated,.st-picking { background:#dbeafe; color:#1d4ed8; }
.st-backorder,.st-unmapped { background:#fef3c7; color:#92400e; } .st-courier_issue { background:#fee2e2; color:#b91c1c; } .st-cancelled { background:#e2e8f0; color:#64748b; }
table.t { width:100%; font-size:.86rem; } table.t th { font-size:.7rem; text-transform:uppercase; color:#64748b; padding:8px; border-bottom:1px solid #eef2f6; text-align:left; white-space:nowrap; } table.t td { padding:9px 8px; border-bottom:1px solid #f4f6fb; vertical-align:top; }
table.t tr.click { cursor:pointer } table.t tr.click:hover { background:#f5f7ff }
.num { text-align:right; font-variant-numeric:tabular-nums; }
@media (max-width: 900px) { .sidebar { display: none; } .main { padding: 14px; } }