:root{
  --bg:#F3F6F8;
  --surface:#FFFFFF;
  --ink:#0A1628;
  --ink-hover:#132A44;
  --ink-active:#0F3D34;
  --primary:#0FBE8F;
  --primary-dark:#0A9670;
  --trace-green:#2FE0AD;
  --trace-blue:#3FBEE8;
  --trace-amber:#F2B705;
  --accent:#F2B705;
  --success:#12A97E;
  --danger:#E23F55;
  --warning:#F2B705;
  --info:#2EAEDB;
  --text:#101B2D;
  --text-muted:#5E6B80;
  --border:#E1E7EC;
  --radius:10px;
}

*{box-sizing:border-box;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:14.5px;
}

h1,h2,h3,h4,.brand,.font-display{
  font-family:'Space Grotesk', 'IBM Plex Sans', sans-serif;
}

a{ text-decoration:none; }

/* ---------- Layout ---------- */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:252px;
  flex-shrink:0;
  background:var(--ink);
  color:#8FA3B8;
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; bottom:0; left:0;
  z-index:100;
  border-right:1px solid rgba(255,255,255,.04);
}

.sidebar-brand{
  padding:22px 20px 14px;
  display:flex;
  align-items:center;
  gap:11px;
}

.sidebar-brand .mark{
  width:36px;height:36px;border-radius:9px;
  background:linear-gradient(135deg, var(--primary), #0A9670);
  display:flex;align-items:center;justify-content:center;
  color:#04140F;font-weight:700;font-size:17px;
  flex-shrink:0;
  box-shadow:0 0 0 3px rgba(15,190,143,.14);
}

.sidebar-brand .name{
  color:#fff;
  font-weight:700;
  font-size:16px;
  line-height:1.2;
  font-family:'Space Grotesk', sans-serif;
}
.sidebar-brand .sub{
  font-size:11px;
  color:#5E7288;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.monitor-trace{ width:100%; height:26px; padding:0 4px; margin-bottom:6px; }

.sidebar-nav{ padding:8px 12px 14px; flex:1; overflow-y:auto; border-top:1px solid rgba(255,255,255,.06); margin-top:4px; padding-top:14px; }
.sidebar-nav .nav-section{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:#4B5F75;
  font-weight:600;
  margin:16px 10px 7px;
}
.sidebar-nav .nav-section:first-child{ margin-top:4px; }
.sidebar-nav a{
  display:flex;
  align-items:center;
  gap:10px;
  color:#9DAEC0;
  padding:9px 12px;
  border-radius:8px;
  font-size:13.5px;
  font-weight:500;
  margin-bottom:2px;
  border-left:3px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.sidebar-nav a:hover{ background:var(--ink-hover); color:#fff; }
.sidebar-nav a.active{
  background:var(--ink-active);
  color:#fff;
  border-left:3px solid var(--primary);
}
.sidebar-nav a.active i{ color:var(--primary); }
.sidebar-nav a i{ font-size:16px; width:18px; text-align:center; color:#5E7288; }

.sidebar-footer{
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.06);
}
.sidebar-footer .user{
  display:flex; align-items:center; gap:10px;
}
.sidebar-footer .avatar{
  width:32px;height:32px;border-radius:8px;
  background:rgba(15,190,143,.16);
  color:var(--primary);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;
  font-family:'Space Grotesk', sans-serif;
}
.sidebar-footer .uname{ color:#fff; font-size:13px; font-weight:600; }
.sidebar-footer .urole{ color:#5E7288; font-size:11px; text-transform:capitalize; }
.sidebar-footer a.logout{
  color:#7A8DA1; font-size:12.5px; margin-top:9px; display:inline-flex; align-items:center; gap:5px;
}
.sidebar-footer a.logout:hover{ color:var(--danger); }

/* ---------- Main ---------- */
.main{
  margin-left:252px;
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.topbar{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:16px 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky; top:0; z-index:50;
}
.topbar h1{
  font-size:19px;
  font-weight:700;
  margin:0;
  color:var(--text);
  letter-spacing:-.01em;
}

.content{ padding:26px 30px 44px; }

/* ---------- Cards ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(16,27,45,.03);
}
.card-header{
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.card-header h2{ font-size:15.5px; font-weight:700; margin:0; }
.card-body{ padding:20px; }

/* ---------- KPI stat cards ---------- */
.stat-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-top:3px solid var(--primary);
  border-radius:var(--radius);
  padding:18px 20px;
  position:relative;
  overflow:hidden;
}
.stat-card .label{ font-size:12px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em;}
.stat-card .value{
  font-size:27px; font-weight:600; margin-top:6px;
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:-.01em;
}
.stat-card .icon{
  position:absolute; top:16px; right:16px;
  width:38px;height:38px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;
}
.stat-card .delta{ font-size:12px; margin-top:6px; color:var(--text-muted); }

.bg-teal{ background:rgba(15,190,143,.12); color:var(--primary); }
.bg-amber{ background:rgba(242,183,5,.14); color:#9A6E00; }
.bg-green{ background:rgba(18,169,126,.12); color:var(--success); }
.bg-red{ background:rgba(226,63,85,.1); color:var(--danger); }

/* ---------- Badges ---------- */
.badge-soft-primary{ background:rgba(15,190,143,.12); color:var(--primary-dark); }
.badge-soft-success{ background:rgba(18,169,126,.12); color:var(--success); }
.badge-soft-warning{ background:rgba(242,183,5,.16); color:#8A6300; }
.badge-soft-danger{ background:rgba(226,63,85,.1); color:var(--danger); }
.badge-soft-secondary{ background:#EEF1F3; color:var(--text-muted); }
[class*="badge-soft-"]{
  font-weight:600; font-size:11.5px; padding:5px 10px; border-radius:6px;
}

/* ---------- Buttons ---------- */
.btn{ border-radius:8px; font-weight:600; font-size:13.5px; }
.btn-primary{ background:var(--primary); border-color:var(--primary); color:#04140F; }
.btn-primary:hover{ background:var(--primary-dark); border-color:var(--primary-dark); color:#04140F; }
.btn-outline-primary{ color:var(--primary-dark); border-color:var(--primary); }
.btn-outline-primary:hover{ background:var(--primary); border-color:var(--primary); color:#04140F; }
.btn-success{ background:var(--success); border-color:var(--success); }
.btn-danger, .btn-outline-danger:hover{ background:var(--danger); border-color:var(--danger); }
.btn-outline-danger{ color:var(--danger); border-color:var(--danger); }

/* ---------- Tables ---------- */
.table thead th{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--text-muted);
  border-bottom:1px solid var(--border);
  font-weight:700;
  padding:10px 14px;
  white-space:nowrap;
  background:#FAFBFC;
}
.table tbody td{
  padding:12px 14px;
  vertical-align:middle;
  border-bottom:1px solid var(--border);
  font-size:13.5px;
}
.table tbody tr:hover{ background:#F8FBFA; }
.table tbody tr:last-child td{ border-bottom:none; }

.low-stock-row{ background:rgba(226,63,85,.04); }

/* ---------- Auth page ---------- */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 20% 15%, rgba(15,190,143,.16), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(46,174,219,.12), transparent 45%),
    var(--ink);
}
.auth-card{
  width:380px;
  background:var(--surface);
  border-radius:14px;
  padding:34px 32px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}

/* ---------- Misc ---------- */
.text-muted-sm{ color:var(--text-muted); font-size:12.5px; }
.form-label{ font-size:13px; font-weight:600; color:var(--text); }
.form-control, .form-select{ font-size:13.5px; border-radius:8px; }
.form-control:focus, .form-select:focus{ border-color:var(--primary); box-shadow:0 0 0 .2rem rgba(15,190,143,.14); }
.section-title{ font-size:16px; font-weight:700; margin-bottom:14px; }
.required:after{ content:" *"; color:var(--danger); }

@media (max-width: 900px){
  .sidebar{ transform:translateX(-100%); transition:transform .2s ease; }
  .sidebar.open{ transform:translateX(0); }
  .main{ margin-left:0; }
}