:root{
  --navy:#1F2A44; --navy-2:#172036; --accent:#2E5AAC; --accent-2:#3D6FCC;
  --ink:#1A2233; --muted:#6B7280; --line:#E2E7F0; --bg:#F4F6FB; --card:#FFFFFF;
  --ok:#1E7F4F; --ok-bg:#E0F2E8; --low:#B9770E; --low-bg:#FCEFD6;
  --out:#C0392B; --out-bg:#FBE0DD; --neutral:#5B6473; --neutral-bg:#EAEDF3;
  --radius:10px; --shadow:0 1px 2px rgba(20,30,60,.06),0 6px 20px rgba(20,30,60,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.45;
}
.mono,.kpi-value,.count{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; gap:24px;
  background:linear-gradient(120deg,var(--navy),var(--navy-2));
  color:#fff; padding:0 22px; height:58px; position:sticky; top:0; z-index:20;
  box-shadow:0 2px 12px rgba(15,22,40,.18);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px; font-size:15px}
.logo{color:var(--accent-2); font-size:18px; transform:translateY(1px)}
.nav{display:flex; gap:4px; margin-left:8px}
.nav a{
  color:#c5cee3; text-decoration:none; padding:8px 14px; border-radius:7px;
  font-weight:500; font-size:13.5px; transition:.15s;
}
.nav a:hover{background:rgba(255,255,255,.08); color:#fff}
.nav a.active{background:var(--accent); color:#fff}
.userbox{margin-left:auto; display:flex; align-items:center; gap:14px}
.uname{color:#c5cee3; font-size:13px}

/* ---------- layout ---------- */
.wrap{max-width:1320px; margin:26px auto; padding:0 22px}
.page-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.page-head h2{margin:0; font-size:22px; letter-spacing:-.3px}
.foot{text-align:center; color:var(--muted); padding:26px; font-size:12px}
.muted{color:var(--muted)} .center{text-align:center} .num{text-align:right}
.spacer{flex:1}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid transparent; border-radius:8px; padding:9px 16px;
  font:inherit; font-weight:600; font-size:13.5px; transition:.15s; text-decoration:none;
}
.btn-sm{padding:5px 10px; font-size:12px}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-2)}
.btn-ghost{background:transparent; border-color:rgba(255,255,255,.25); color:#fff}
.wrap .btn-ghost{border-color:var(--line); color:var(--ink)}
.wrap .btn-ghost:hover{background:#fff}
.btn-block{width:100%; justify-content:center; margin-top:6px}
.btn-danger-ghost{background:transparent; border-color:var(--out); color:var(--out)}
.btn-danger-ghost:hover{background:var(--out-bg)}

/* ---------- KPI cards ---------- */
.kpis{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:22px}
.kpi{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px;
  border-top:3px solid var(--accent);
}
.kpi-label{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.6px}
.kpi-value{font-size:24px; font-weight:600}
.kpi-accent{border-top-color:var(--ok)} .kpi-accent .kpi-value{color:var(--ok)}
.kpi-warn{border-top-color:var(--low)} .kpi-warn .kpi-value{color:var(--low)}
.kpi-danger{border-top-color:var(--out)} .kpi-danger .kpi-value{color:var(--out)}

/* ---------- cards / grids ---------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow)}
.card h3{margin:0 0 14px; font-size:15px}
.stack{display:flex; flex-direction:column; gap:12px}

/* ---------- tables ---------- */
table{border-collapse:collapse; width:100%}
.mini th,.mini td{padding:8px 10px; text-align:left; border-bottom:1px solid var(--line); font-size:13px}
.mini th{color:var(--muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.5px}
.table-wrap{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:auto}
.grid{min-width:1180px}
.grid th{
  position:sticky; top:0; background:var(--accent); color:#fff; text-align:left;
  padding:11px 10px; font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; font-weight:600; white-space:nowrap;
}
.grid th.num{text-align:right}
.grid td{padding:9px 10px; border-bottom:1px solid var(--line); font-size:13px; white-space:nowrap}
.grid tbody tr:nth-child(even){background:#FAFBFE}
.grid tbody tr:hover{background:#EEF3FC; cursor:pointer}
.grid td.desc{white-space:normal; min-width:200px}

/* ---------- status pills ---------- */
.pill{display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.4px}
.pill-ok{background:var(--ok-bg); color:var(--ok)}
.pill-low{background:var(--low-bg); color:var(--low)}
.pill-out{background:var(--out-bg); color:var(--out)}
.pill-neutral{background:var(--neutral-bg); color:var(--neutral)}
.row-out td{background:var(--out-bg) !important}
.row-low td{background:var(--low-bg) !important}

/* ---------- toolbar / search ---------- */
.toolbar{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.search{
  flex:1; max-width:560px; padding:11px 14px; border:1px solid var(--line);
  border-radius:9px; font:inherit; font-size:14px; background:#fff;
}
.search:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(46,90,172,.15)}
.count{color:var(--muted); font-size:13px}

/* ---------- modal ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(18,24,40,.55); display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px; z-index:50}
.modal-overlay[hidden]{display:none}
.modal{background:#fff; border-radius:14px; width:min(820px,100%); box-shadow:0 24px 60px rgba(10,15,30,.4); overflow:hidden}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 22px; background:var(--navy); color:#fff}
.modal-head h3{margin:0; font-size:16px}
.modal-x{background:none; border:none; color:#cdd6ea; font-size:26px; line-height:1; cursor:pointer}
.modal-x:hover{color:#fff}
.modal-body{padding:22px}
.form-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.form-grid label{display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:600; color:var(--muted)}
.form-grid .span2{grid-column:span 2} .form-grid .span4{grid-column:span 4}
.form-grid input,.form-grid select{
  padding:9px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:13.5px; color:var(--ink); background:#fff;
}
.form-grid input:focus,.form-grid select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(46,90,172,.13)}
.modal-foot{display:flex; align-items:center; gap:10px; margin-top:20px}
.form-error{color:var(--out); margin:12px 0 0; font-size:13px; font-weight:600}

/* ---------- inline forms in user table ---------- */
.inline-form{display:inline-flex; gap:6px; align-items:center; margin:4px 0}
.inline-form input{padding:5px 8px; border:1px solid var(--line); border-radius:6px; font:inherit; font-size:12px}
.row-actions{white-space:nowrap; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.link{cursor:pointer; color:var(--accent); font-size:12px}
details summary{list-style:none}

/* ---------- alerts ---------- */
.alert{background:var(--out-bg); color:var(--out); border:1px solid #f0bcb5; padding:11px 14px; border-radius:9px; margin-bottom:16px; font-weight:600; font-size:13px}
.alert-ok{background:var(--ok-bg); color:var(--ok); border-color:#bfe3cd}

/* ---------- login ---------- */
.login-body{background:radial-gradient(1200px 600px at 50% -10%,#2a3a5e,var(--navy)); min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center}
.login-card{background:#fff; border-radius:16px; padding:34px 32px; width:min(380px,92vw); box-shadow:0 30px 70px rgba(8,12,28,.45)}
.login-head{text-align:center; margin-bottom:22px}
.login-head .logo{font-size:30px; display:block; margin-bottom:8px}
.login-head h1{margin:0; font-size:19px; letter-spacing:-.2px}
.login-head p{margin:6px 0 0; color:var(--muted); font-size:13px}
.login-card form{display:flex; flex-direction:column; gap:14px}
.login-card label{display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:600; color:var(--muted)}
.login-card input{padding:11px 13px; border:1px solid var(--line); border-radius:9px; font:inherit; font-size:14px}
.login-card input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(46,90,172,.15)}
.login-foot{color:#9fb0d4}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .kpis{grid-template-columns:repeat(2,1fr)} .grid-2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:repeat(2,1fr)} .form-grid .span4{grid-column:span 2}
  .nav .uname{display:none}
}
@media(max-width:560px){ .kpis{grid-template-columns:1fr} .nav a{padding:8px 9px} }