/* ============== Pai Admin — desktop design system ============== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap');

:root{
  --bg:#F5F7F4;
  --panel:#FFFFFF;
  --ink:#13160F;
  --ink-2:#5B6157;
  --ink-3:#8A9085;
  --line:#E7EAE3;
  --line-2:#DBDFD6;

  --green:#0E8A4C;
  --green-press:#0B7341;
  --green-50:#E9F5EC;
  --green-100:#D3ECDA;
  --green-ink:#0A5E36;

  --side:#0E1A12;          /* deep forest sidebar */
  --side-2:#16271C;
  --side-line:#243a2d;
  --side-ink:#A7B8AC;
  --side-ink-2:#6E8275;

  --accent:#4E5AE8;
  --accent-50:#ECEEFC;
  --amber:#E0922B;
  --amber-50:#FBF0DE;
  --red:#D8503C;
  --red-50:#FBEAE6;
  --blue:#2F74D0;
  --blue-50:#E7F0FB;

  --r:14px;
  --r-sm:10px;
  --shadow:0 1px 2px rgba(20,30,18,0.04), 0 4px 16px rgba(20,30,18,0.05);
  --shadow-pop:0 12px 40px rgba(20,30,18,0.18);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  font-family:'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-size:14px;
}
#root{ height:100%; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; border:3px solid var(--bg); }
*::-webkit-scrollbar-track{ background:transparent; }

/* ---------- app shell ---------- */
.app{ display:flex; height:100vh; overflow:hidden; }

/* sidebar */
.side{
  width:248px; flex:none; background:var(--side); color:var(--side-ink);
  display:flex; flex-direction:column; padding:0; overflow-y:auto;
}
.side-logo{ display:flex; align-items:center; gap:9px; padding:22px 22px 18px; }
.side-logo .mark{ width:34px; height:34px; border-radius:10px; background:var(--green); display:flex; align-items:center; justify-content:center; }
.side-logo .name{ font-size:21px; font-weight:800; color:#fff; letter-spacing:-0.02em; }
.side-logo .name small{ display:block; font-size:11px; font-weight:700; color:var(--side-ink-2); letter-spacing:0.06em; text-transform:uppercase; margin-top:-2px; }

.side-sec{ padding:14px 14px 4px; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--side-ink-2); }
.nav-item{
  display:flex; align-items:center; gap:12px; margin:1px 10px; padding:10px 12px; border-radius:10px;
  color:var(--side-ink); font-weight:600; font-size:14.5px; cursor:pointer; transition:background .14s, color .14s;
  position:relative;
}
.nav-item:hover{ background:var(--side-2); color:#E8F1EA; }
.nav-item.on{ background:var(--green); color:#fff; }
.nav-item .badge{ margin-left:auto; background:var(--red); color:#fff; font-size:11px; font-weight:800; padding:1px 7px; border-radius:99px; }
.nav-item.on .badge{ background:rgba(255,255,255,0.25); }

.side-user{ margin-top:auto; padding:14px; border-top:1px solid var(--side-line); display:flex; align-items:center; gap:10px; }
.side-user .av{ width:38px; height:38px; border-radius:10px; background:var(--side-2); display:flex; align-items:center; justify-content:center; font-size:18px; flex:none; }

/* main */
.main{ flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }
.topbar{
  height:68px; flex:none; background:var(--panel); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:16px; padding:0 26px;
}
.topbar h1{ font-size:21px; font-weight:800; letter-spacing:-0.02em; margin:0; }
.topbar .sub{ font-size:13px; color:var(--ink-3); font-weight:600; margin-top:1px; }
.content{ flex:1; overflow-y:auto; padding:24px 26px 40px; }

/* search */
.search{ display:flex; align-items:center; gap:10px; background:var(--bg); border:1px solid var(--line); border-radius:11px; height:42px; padding:0 14px; width:280px; color:var(--ink-3); }
.search input{ border:none; background:transparent; outline:none; font:inherit; font-size:14px; flex:1; color:var(--ink); font-weight:600; }
.search input::placeholder{ color:var(--ink-3); font-weight:600; }

.ic-btn{ width:42px; height:42px; border-radius:11px; border:1px solid var(--line); background:var(--panel); display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; transition:background .14s; flex:none; }
.ic-btn:hover{ background:var(--bg); }
.ic-btn .dot{ position:absolute; top:9px; right:10px; width:8px; height:8px; border-radius:50%; background:var(--red); border:2px solid var(--panel); }

/* ---------- cards ---------- */
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); }
.card-pad{ padding:20px; }
.card-h{ display:flex; align-items:center; gap:12px; margin-bottom:4px; }
.card-h h3{ font-size:16px; font-weight:800; margin:0; letter-spacing:-0.01em; }
.card-h .act{ margin-left:auto; display:flex; gap:8px; }

.grid{ display:grid; gap:18px; }

/* KPI */
.kpi{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; box-shadow:var(--shadow); }
.kpi .lab{ font-size:13px; color:var(--ink-2); font-weight:700; display:flex; align-items:center; gap:8px; }
.kpi .val{ font-size:28px; font-weight:800; letter-spacing:-0.02em; margin:8px 0 6px; }
.kpi .delta{ font-size:12.5px; font-weight:800; display:inline-flex; align-items:center; gap:3px; }
.up{ color:var(--green); } .down{ color:var(--red); }

/* badges */
.badge-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; padding:4px 10px; border-radius:99px; white-space:nowrap; }
.b-green{ background:var(--green-50); color:var(--green-ink); }
.b-amber{ background:var(--amber-50); color:#9A6510; }
.b-red{ background:var(--red-50); color:#A4341F; }
.b-blue{ background:var(--blue-50); color:#1F58A8; }
.b-gray{ background:var(--bg); color:var(--ink-2); }
.dotmark{ width:7px; height:7px; border-radius:50%; }

/* tables */
.tbl{ width:100%; border-collapse:collapse; }
.tbl th{ text-align:left; font-size:11.5px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-3); padding:0 16px 12px; border-bottom:1px solid var(--line); }
.tbl td{ padding:14px 16px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; }
.tbl tr.row{ cursor:pointer; transition:background .12s; }
.tbl tr.row:hover{ background:var(--bg); }
.tbl tr:last-child td{ border-bottom:none; }
.tnum{ font-variant-numeric:tabular-nums; }

.av-pic{ width:36px; height:36px; border-radius:50%; background:var(--green-50); display:flex; align-items:center; justify-content:center; font-size:16px; flex:none; font-weight:800; color:var(--green-ink); }

/* tabs / segmented */
.tabs{ display:flex; gap:4px; background:var(--bg); border:1px solid var(--line); border-radius:11px; padding:4px; }
.tabs .t{ padding:8px 16px; border-radius:8px; font-size:13.5px; font-weight:700; color:var(--ink-2); cursor:pointer; transition:background .14s, color .14s; white-space:nowrap; }
.tabs .t.on{ background:var(--panel); color:var(--ink); box-shadow:var(--shadow); }

.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip2{ padding:7px 14px; border:1px solid var(--line); border-radius:99px; font-size:13px; font-weight:700; color:var(--ink-2); cursor:pointer; background:var(--panel); }
.chip2.on{ background:var(--green); color:#fff; border-color:var(--green); }

/* buttons */
.btn2{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 18px; border-radius:11px; font-weight:700; font-size:14px; cursor:pointer; border:1px solid transparent; font-family:inherit; transition:background .14s, transform .1s; white-space:nowrap; }
.btn2:active{ transform:scale(.98); }
.btn-pri{ background:var(--green); color:#fff; }
.btn-pri:hover{ background:var(--green-press); }
.btn-line{ background:var(--panel); color:var(--ink); border-color:var(--line-2); }
.btn-line:hover{ background:var(--bg); }
.btn-red{ background:var(--red-50); color:#A4341F; }
.btn-sm{ height:34px; padding:0 12px; font-size:13px; border-radius:9px; }

/* drawer */
.scrim{ position:fixed; inset:0; background:rgba(15,25,18,0.34); z-index:50; animation:fade .2s ease; }
.drawer{ position:fixed; top:0; right:0; bottom:0; width:460px; max-width:94vw; background:var(--panel); z-index:51; box-shadow:var(--shadow-pop); display:flex; flex-direction:column; animation:slideIn .28s cubic-bezier(.2,.85,.25,1); }
@keyframes slideIn{ from{ transform:translateX(40px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes fade{ from{opacity:0;} to{opacity:1;} }
.drawer-h{ padding:20px 24px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; flex:none; }
.drawer-b{ flex:1; overflow-y:auto; padding:24px; }
.drawer-f{ padding:16px 24px; border-top:1px solid var(--line); display:flex; gap:12px; flex:none; }

.muted{ color:var(--ink-2); } .muted-2{ color:var(--ink-3); }
@keyframes pgin{ from{ transform:translateY(6px); } to{ transform:none; } }
.fade{ animation:pgin .26s ease both; }

/* progress */
.bar{ height:8px; border-radius:99px; background:var(--bg); overflow:hidden; }
.bar > span{ display:block; height:100%; border-radius:99px; background:var(--green); }

/* misc layout helpers */
.row{ display:flex; align-items:center; }
.gap8{ gap:8px; } .gap12{ gap:12px; } .gap16{ gap:16px; }
.spread{ display:flex; align-items:center; justify-content:space-between; }