:root{
  --nav: #0b1220;
  --nav-2: #111c32;
  --nav-line: rgba(255,255,255,.07);
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e6eaf1;
  --bg: #f4f6fb;
  --accent: #f59e0b;      /* safety amber */
  --accent-2: #14b8a6;    /* teal */
  --brand: #2563eb;
  --ok: #16a34a;
  --warn: #d97706;
  --bad: #dc2626;
  --sidebar-w: 250px;
}

*{ -webkit-font-smoothing:antialiased; }
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
}

/* ---------- Sidebar ---------- */
.wms-sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
  background:linear-gradient(180deg,var(--nav) 0%, var(--nav-2) 100%);
  color:#cbd5e1; display:flex; flex-direction:column; z-index:1040;
  border-right:1px solid var(--nav-line);
}
.wms-brand{
  display:flex; align-items:center; gap:.65rem;
  padding:1.1rem 1.15rem; border-bottom:1px solid var(--nav-line);
}
.wms-brand .logo{
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(135deg,var(--accent),#fb923c);
  display:grid; place-items:center; color:#1a1305; font-size:1.15rem;
  box-shadow:0 6px 16px rgba(245,158,11,.35);
}
.wms-brand h1{ font-size:1rem; margin:0; color:#fff; font-weight:700; letter-spacing:.2px; }
.wms-brand span{ font-size:.68rem; color:#94a3b8; letter-spacing:.14em; text-transform:uppercase; }

.wms-nav{ padding:.6rem .55rem; overflow-y:auto; flex:1; }
.wms-nav .grp{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:#5b6b83; padding:.9rem .7rem .35rem; }
.wms-nav a{
  display:flex; align-items:center; gap:.7rem; color:#b4c0d3; text-decoration:none;
  padding:.55rem .7rem; border-radius:9px; font-weight:500; font-size:.86rem;
  margin-bottom:2px; position:relative; transition:.12s;
}
.wms-nav a i{ font-size:1.02rem; width:20px; text-align:center; color:#7d8ba3; }
.wms-nav a:hover{ background:rgba(255,255,255,.05); color:#fff; }
.wms-nav a.active{ background:rgba(245,158,11,.14); color:#fff; }
.wms-nav a.active i{ color:var(--accent); }
.wms-nav a.active::before{
  content:""; position:absolute; left:-.55rem; top:8px; bottom:8px; width:3px;
  background:var(--accent); border-radius:0 3px 3px 0;
}
.wms-nav .badge-soft{ margin-left:auto; background:rgba(255,255,255,.08); color:#cbd5e1; font-weight:600; }

.wms-side-foot{ padding:.85rem 1rem; border-top:1px solid var(--nav-line); font-size:.72rem; color:#64748b; }

/* ---------- Topbar ---------- */
.wms-main{ margin-left:var(--sidebar-w); min-height:100vh; }
.wms-topbar{
  position:sticky; top:0; z-index:1030; background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:1rem; padding:.7rem 1.4rem;
}
.wms-topbar .crumb{ font-size:.78rem; color:var(--muted); }
.wms-topbar h2{ font-size:1.05rem; margin:0; font-weight:700; }
.wms-topbar .spacer{ flex:1; }
.wms-search{ position:relative; }
.wms-search i{ position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:#94a3b8; }
.wms-search input{ padding:.42rem .7rem .42rem 2rem; border:1px solid var(--line); border-radius:9px; background:#fff; width:230px; font-size:.83rem; }
.wms-icnbtn{ width:38px; height:38px; border-radius:9px; border:1px solid var(--line); background:#fff; color:#475569; display:grid; place-items:center; position:relative; }
.wms-icnbtn .dot{ position:absolute; top:8px; right:9px; width:7px; height:7px; background:var(--bad); border-radius:50%; border:2px solid #fff; }
.wms-avatar{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--brand),#60a5fa); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.8rem; }

.wms-content{ padding:1.5rem 1.4rem 3rem; }

/* ---------- Cards / stats ---------- */
.card{ border:1px solid var(--line); border-radius:14px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.card-header{ background:#fff; border-bottom:1px solid var(--line); font-weight:600; }
.stat{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.05rem 1.15rem; height:100%; }
.stat .lbl{ font-size:.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.stat .val{ font-size:1.7rem; font-weight:750; line-height:1.1; margin-top:.25rem; }
.stat .ico{ width:44px; height:44px; border-radius:11px; display:grid; place-items:center; font-size:1.25rem; }
.trend-up{ color:var(--ok); } .trend-down{ color:var(--bad); }
.soft-amber{ background:rgba(245,158,11,.13); color:#b45309; }
.soft-teal{ background:rgba(20,184,166,.13); color:#0f766e; }
.soft-blue{ background:rgba(37,99,235,.12); color:#1d4ed8; }
.soft-rose{ background:rgba(220,38,38,.11); color:#b91c1c; }
.soft-violet{ background:rgba(139,92,246,.13); color:#6d28d9; }

.section-title{ font-weight:700; font-size:1rem; margin:0; }
.pill{ font-size:.72rem; font-weight:600; padding:.22rem .55rem; border-radius:999px; }

table thead th{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; }
table tbody td{ vertical-align:middle; font-size:.86rem; }

.status-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:.35rem; }

/* module hero chip on each page */
.mod-chip{ font-size:.7rem; font-weight:700; letter-spacing:.05em; padding:.2rem .6rem; border-radius:6px; background:var(--ink); color:#fff; }

@media (max-width: 991px){
  .wms-sidebar{ transform:translateX(-100%); transition:.2s; }
  .wms-sidebar.open{ transform:none; }
  .wms-main{ margin-left:0; }
  .wms-search input{ width:150px; }
}