/* =====================================================================
   DESIGN KIT — KOMPONEN
   Butuh tokens.css dimuat lebih dulu. Font: Plus Jakarta Sans (UI) +
   IBM Plex Mono (angka) — link Google Fonts ada di demo.html / README.
   ===================================================================== */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--page); color:var(--ink);
  font:14px/1.5 "Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.num,[data-num],table td.num,table td.r{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
h1,h2,h3,h4{margin:0}
button{font:inherit}

/* ---------------------------------------------------------- layout shell */
.frame{
  display:grid; grid-template-columns:var(--sb-w) minmax(0,1fr); gap:16px;
  max-width:1640px; margin:0 auto; padding:16px; min-height:100vh;
  transition:grid-template-columns 420ms cubic-bezier(.22,1,.36,1);
}
.rail{
  display:flex; flex-direction:column; gap:4px;
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--sh-sm); padding:18px 14px 14px; position:sticky; top:16px;
  height:calc(100vh - 32px); color:var(--ink); overflow:hidden;
}
.rail>*{align-self:stretch}
.rail .logo{display:flex; align-items:center; gap:10px; padding:2px 6px 10px; font-size:15px; font-weight:800; letter-spacing:-.01em}
.rail .logo img{width:38px; height:38px; padding:4px; border-radius:11px; background:var(--card-2); border:1px solid var(--line); object-fit:contain}
.rail .logo span{font-size:13px; line-height:1.2; color:var(--ink)}
.rail .logo span small{display:block; font-size:10.5px; font-weight:600; color:var(--ink-3)}

.sb-collapse{
  display:flex; align-items:center; gap:12px; width:100%; border:0; background:transparent;
  color:var(--ink-2); font-size:12.5px; font-weight:600; padding:9px 12px; border-radius:11px; cursor:pointer; text-align:left;
}
.sb-collapse:hover{background:var(--card-2); color:var(--ink)}
.sb-collapse .ic{width:22px; text-align:center; font-size:15px; transition:transform 300ms}
.sb-label{font-size:10.5px; font-weight:700; letter-spacing:.09em; color:var(--ink-3); padding:14px 12px 6px; text-transform:uppercase}

.rail-menu{display:flex; flex-direction:column; gap:3px}
.rail-menu button{
  position:relative; display:flex; align-items:center; gap:12px; width:100%;
  border:0; background:transparent; border-radius:12px; min-height:42px; padding:10px 12px;
  color:var(--ink-2); font-size:13px; font-weight:600; cursor:pointer; text-align:left;
}
.rail-menu button>span:first-child{width:22px; font-size:16px; text-align:center; color:var(--ink-3)}
.rail-menu button:hover:not(.on){background:var(--card-2); color:var(--ink)}
.rail-menu button.on{background:var(--brand-soft); color:var(--brand); font-weight:700}
.rail-menu button.on>span:first-child{color:var(--brand)}
.rail-menu button.on::before{
  content:""; position:absolute; left:-14px; top:9px; bottom:9px; width:4px;
  border-radius:0 4px 4px 0; background:var(--brand);
}
.rail .sp{flex:1}

.sb-user{margin-top:auto; display:flex; align-items:center; gap:10px; padding:12px 10px; border-top:1px solid var(--line)}
.sb-user img,.sb-user .av{
  width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0;
  background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; font-weight:800;
}
.sb-user .who{min-width:0; flex:1}
.sb-user .who b{display:block; font-size:13px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sb-user .who span{display:block; font-size:11px; color:var(--ink-3)}
.sb-user .out{
  border:1px solid var(--line-2); background:var(--card); color:var(--ink-2); width:32px; height:32px;
  border-radius:10px; cursor:pointer; font-size:14px; flex-shrink:0; display:grid; place-items:center;
}
.sb-user .out:hover{color:var(--neg); border-color:var(--neg)}

/* sidebar diciutkan */
.sb-collapsed .frame{grid-template-columns:82px minmax(0,1fr)}
.sb-collapsed .rail{padding-left:12px; padding-right:12px}
.sb-collapsed .rail .logo span,.sb-collapsed .sb-label,.sb-collapsed .sb-collapse .tx,
.sb-collapsed .sb-user .who,.sb-collapsed .sb-user .out{display:none}
.sb-collapsed .sb-collapse .ic{transform:rotate(180deg)}
.sb-collapsed .rail-menu button{justify-content:center; padding:10px; font-size:0}
.sb-collapsed .rail-menu button>span:not(:first-child){display:none}
.sb-collapsed .rail-menu button>span:first-child{font-size:17px}
.sb-collapsed .rail-menu button.on::before{left:-12px}
.sb-collapsed .rail .logo,.sb-collapsed .rail .sb-collapse,.sb-collapsed .rail .sb-user{justify-content:center}
.sb-collapsed .sb-user{padding:12px 0}

.main{
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:22px 28px 30px; box-shadow:var(--sh-sm); min-width:0;
}
.topbar{display:flex; align-items:center; gap:10px; flex-wrap:nowrap; padding:0 0 18px; margin:0 0 20px; border-bottom:1px solid var(--line)}
.topbar .hd{min-width:0; flex:1; order:0}
.topbar .hd h1{font-size:24px; font-weight:800; letter-spacing:-.025em; line-height:1.15; color:var(--ink)}
.topbar .hd p{font-size:12.5px; color:var(--ink-2); margin:3px 0 0}
.cari{
  order:1; width:260px; max-width:30vw; min-width:150px; height:40px;
  background:var(--card-2); border:1px solid var(--line); border-radius:12px; padding:0 14px;
  font:inherit; font-size:13px; color:var(--ink); outline:0;
}

/* sakelar tema — pill dengan knob geser */
.tema-switch{
  order:2; width:52px; height:30px; border-radius:999px; padding:0; border:1px solid var(--line-2);
  background:var(--card-2); position:relative; font-size:0; flex-shrink:0; cursor:pointer;
}
.tema-switch::after{
  content:"\2600"; position:absolute; top:2px; left:3px; width:24px; height:24px; border-radius:50%;
  background:var(--card); box-shadow:0 1px 3px rgba(0,0,0,.18); font-size:13px; line-height:24px;
  text-align:center; color:#e39b16; transition:left 260ms cubic-bezier(.22,1,.36,1);
}
:root[data-theme="dark"] .tema-switch::after{left:23px; content:"\263E"; color:#c9cfdb; background:#2a303c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tema-switch::after{left:23px; content:"\263E"; color:#c9cfdb; background:#2a303c}}

.ikon-btn{
  order:3; width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:var(--card-2);
  color:var(--ink-2); position:relative; cursor:pointer; font-size:16px; flex-shrink:0; display:grid; place-items:center;
}
.ikon-btn:hover{color:var(--ink); border-color:var(--line-2)}
.ikon-btn .dot{position:absolute; top:7px; right:8px; min-width:8px; height:8px; border-radius:999px; background:var(--neg); box-shadow:0 0 0 2px var(--card-2)}
.ikon-btn .dot[data-n]:not([data-n="0"]){min-width:16px; height:16px; top:-5px; right:-5px; font-size:9.5px; font-weight:800; color:#fff; line-height:16px; text-align:center; padding:0 4px}
.ikon-btn .dot[data-n="0"]{display:none}

/* ------------------------------------------------------------- tombol */
.btn-dark{
  order:4; font-weight:700; font-size:13px; color:var(--pill-ink); background:var(--pill); border:0;
  border-radius:999px; height:40px; padding:0 17px; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
}
.btn-dark:hover{filter:brightness(1.06)}
.btn-ghost{
  order:5; font-weight:600; font-size:12.5px; color:var(--ink-2); background:var(--card);
  border:1px solid var(--line-2); border-radius:999px; height:40px; padding:0 14px; cursor:pointer;
}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand)}
.btn-mini{
  font-weight:700; font-size:11.5px; border-radius:9px; padding:6px 11px; cursor:pointer;
  border:1px solid var(--line-2); background:var(--card); color:var(--ink-2);
}
.btn-mini.pri{background:var(--pill); color:var(--pill-ink); border-color:transparent}
.btn-mini:hover{border-color:var(--brand)}

/* --------------------------------------------------------------- grid */
.grid{display:grid; gap:14px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.gside{grid-template-columns:1.5fr 1fr}
@media(max-width:1000px){.g3,.g4,.gside{grid-template-columns:1fr 1fr}}

/* --------------------------------------------------------------- kartu */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:var(--sh-sm)}
.card h3{font-size:15px; font-weight:750; letter-spacing:-.01em; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; gap:10px}
.kl{font-size:10.5px; color:var(--ink-3); font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.big{font-size:26px; font-weight:800; letter-spacing:-.02em; margin:4px 0}
.sub{font-size:12px; color:var(--ink-2)}

/* kartu hero — gradasi brand, dipakai untuk sorotan angka utama */
.card-hero{
  background:linear-gradient(140deg,var(--hero-a),var(--hero-b)); border:0; color:#fff;
  box-shadow:0 18px 40px -18px color-mix(in srgb,var(--hero-a) 70%,transparent);
  position:relative; overflow:hidden;
}
.card-hero::after{
  content:""; position:absolute; right:-60px; top:-70px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%); pointer-events:none;
}
.card-hero *{color:#fff}
.card-hero .kl,.card-hero .sub{color:rgba(255,255,255,.78)}

/* --------------------------------------------------------------- kpi */
.kpi{background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:15px; box-shadow:var(--sh-sm); position:relative; overflow:hidden}
.kpi::after{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--brand)}
.kpi.k-pos::after{background:var(--pos)}
.kpi.k-warn::after{background:var(--c-amber)}
.kpi.k-neg::after{background:var(--neg)}
.kpi.klik{cursor:pointer; transition:transform .15s}
.kpi.klik:hover{transform:translateY(-2px)}

/* --------------------------------------------------------------- badge/pill */
.pill{display:inline-block; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px}
.pill-neutral{background:var(--card-2); color:var(--ink-2); border:1px solid var(--line)}
.pill-brand{background:var(--brand-soft); color:var(--brand)}
.pill-pos{background:var(--pos-soft); color:var(--pos)}
.pill-warn{background:var(--warn-soft); color:var(--warn)}
.pill-neg{background:var(--neg-soft); color:var(--neg)}
.badge{display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 7px;
  border-radius:999px; background:var(--brand-soft); color:var(--brand); font-size:11px; font-weight:800}
.badge.ok{background:var(--pos-soft); color:var(--pos)}

/* --------------------------------------------------------------- baris/list */
.list{display:flex; flex-direction:column; gap:2px}
.row{display:flex; align-items:center; gap:11px; padding:10px 6px; border-radius:11px; cursor:pointer}
.row:hover{background:var(--card-2)}
.row .ic{width:32px; height:32px; border-radius:10px; display:grid; place-items:center; font-weight:800; font-size:11px; color:#fff; flex-shrink:0; background:var(--brand)}
.row .tx{flex:1; min-width:0}
.row .tx b{font-size:12.5px; font-weight:700; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .tx span{font-size:11px; color:var(--ink-3)}
.row .rt{font-size:12px; font-weight:800; white-space:nowrap; text-align:right}
.row .rt.pos{color:var(--pos)}
.row .rt.neg{color:var(--neg)}

.dq-row{
  width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  background:var(--card-2); border:1px solid transparent; cursor:pointer; text-align:left; font:inherit; color:inherit;
}
.dq-row:hover{border-color:var(--line-2)}
.dq-row .chev{color:var(--ink-3); margin-left:auto}

/* --------------------------------------------------------------- barra progres */
.bar{height:9px; border-radius:999px; background:var(--card-2); overflow:hidden; margin-top:6px}
.bar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--c-violet),var(--c-coral)); transition:width .8s cubic-bezier(.16,1,.3,1)}
.brow{display:grid; grid-template-columns:130px 1fr 92px; align-items:center; gap:10px; font-size:12px; margin-bottom:8px}
.brow.klik{cursor:pointer; border-radius:9px; padding:3px 6px; margin:0 -6px 5px; transition:background .15s}
.brow.klik:hover{background:var(--card-2)}
.brow .bn{color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brow .bv{text-align:right; font-weight:700}
.btrack{height:18px; background:var(--card-2); border-radius:6px; overflow:hidden; border:1px solid var(--line)}
.bfill{height:100%; border-radius:5px; background:linear-gradient(90deg,var(--c-blue),#7aa8ff); transition:width .8s cubic-bezier(.16,1,.3,1)}

/* --------------------------------------------------------------- tabel */
table.t{width:100%; border-collapse:collapse; font-size:12px; table-layout:fixed}
table.t td:first-child{width:38%; color:var(--ink-2)}
table.t th{text-align:left; font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); padding:8px 10px; border-bottom:1px solid var(--line-2)}
table.t td{padding:10px; border-bottom:1px solid var(--line); vertical-align:middle; line-height:1.4; word-break:break-word}
table.t tr:last-child td{border-bottom:0}
table.t .r{text-align:right}
table.t tbody tr:hover{background:var(--card-2)}

/* --------------------------------------------------------------- form */
label.f{display:block; font-size:11px; font-weight:700; color:var(--ink-3); margin:10px 0 4px; text-transform:uppercase; letter-spacing:.03em}
input.f,select.f,textarea.f{width:100%; background:var(--card-2); border:1px solid var(--line); border-radius:11px; padding:10px 12px; font-size:13px; color:var(--ink); outline:0; font-family:inherit}
input.f:focus,select.f:focus,textarea.f:focus{border-color:var(--brand)}
textarea.f{min-height:110px; resize:vertical; line-height:1.55}
.seg{display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.seg button{flex:1; background:var(--card-2); border:0; border-right:1px solid var(--line); color:var(--ink-2); font:inherit; font-size:12px; font-weight:600; padding:9px 6px; cursor:pointer}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--brand); color:#fff}

/* --------------------------------------------------------------- tabs */
.tabs{display:flex; gap:6px; overflow-x:auto; margin:14px 0; padding-bottom:2px}
.tabs button{white-space:nowrap; border:1px solid var(--line-2); background:var(--card); color:var(--ink-2); border-radius:999px; padding:9px 16px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer}
.tabs button.on{background:var(--pill); color:var(--pill-ink); border-color:transparent}

/* --------------------------------------------------------------- panel detail (sheet/modal) */
.sheet{position:fixed; inset:0; background:rgba(10,14,25,.45); backdrop-filter:blur(3px); display:none; z-index:80; padding:24px; overflow-y:auto}
.sheet.on{display:block}
.sheet-in{max-width:900px; margin:0 auto; background:var(--card); border:1px solid var(--line-2); border-radius:22px; box-shadow:var(--sh-md); padding:22px}
.sheet-in.wide{max-width:1200px}
.sheet h2{font-size:19px; font-weight:800; letter-spacing:-.02em; margin-bottom:3px}
.xclose{float:right; border:0; background:var(--card-2); color:var(--ink-2); width:32px; height:32px; border-radius:10px; cursor:pointer; font-size:15px}

/* --------------------------------------------------------------- toast */
#toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:120; display:flex; flex-direction:column; gap:8px; align-items:center}
#toast div{background:var(--pill); color:var(--pill-ink); padding:11px 18px; border-radius:999px; font-size:12.5px; font-weight:700; box-shadow:var(--sh-md); animation:toastIn .25s cubic-bezier(.22,1,.36,1)}
#toast div.bad{background:var(--neg); color:#fff}
@keyframes toastIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

.kosong{text-align:center; padding:38px 18px; color:var(--ink-3); font-size:13px}

/* --------------------------------------------------------------- login */
.login{display:grid; grid-template-columns:1fr 1fr; min-height:100vh; background:var(--page)}
.login-story{
  align-self:stretch; color:#fff; padding:clamp(35px,7vw,110px); display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
  background:radial-gradient(ellipse at 18% 12%,rgba(255,255,255,.14),transparent 55%), linear-gradient(150deg,var(--hero-a),var(--hero-b));
}
.login-story>div,.login-story>span{font-size:12px; letter-spacing:.18em}
.login-story strong{font-size:clamp(100px,15vw,230px); line-height:1.1; letter-spacing:-.09em; color:rgba(255,255,255,.16)}
.login-story h2{font-size:clamp(30px,3vw,48px); line-height:1.2; margin:24px 0}
.login-story p{max-width:400px; color:rgba(255,255,255,.82); line-height:1.8}
.login-story>span{margin-top:60px; display:block}
.login-fitur{display:flex; gap:26px; margin-top:40px}
.login-fitur div{display:flex; flex-direction:column; align-items:center; gap:7px; font-size:11px; color:rgba(255,255,255,.85); text-align:center; max-width:90px}
.login-fitur i{font-style:normal; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.35); font-size:17px}

.login-card{width:100%; max-width:520px; justify-self:center; align-self:center; padding:36px 34px; background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:var(--sh-md)}
.login-card h1{font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--ink)}
.login-card>p{color:var(--ink-2); margin:4px 0 22px}
.login-users{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.login-user{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:16px 8px; border:1px solid var(--line); border-radius:14px; background:var(--card); cursor:pointer}
.login-user[aria-pressed="true"]{border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-soft); background:var(--brand-soft)}
.login-user .avatar{width:44px; height:44px; border-radius:50%; background:var(--card-2); display:grid; place-items:center; font-weight:800; color:var(--ink-2)}
.password-field{display:flex; border:1px solid var(--line); border-radius:10px; background:var(--card-2); overflow:hidden}
.password-field input{width:100%; border:0; padding:14px; background:transparent; min-width:0; font:inherit; color:var(--ink); outline:0}
.login-submit{width:100%; padding:15px; border:0; border-radius:10px; background:var(--pill); color:var(--pill-ink); margin:14px 0; cursor:pointer; font-weight:700; font-size:14px}
.login-submit:disabled{opacity:.5; cursor:default}
.login-error{color:var(--neg); font-size:13px; margin-top:10px}
.login-note{margin-top:28px; font-size:11px; color:var(--ink-3)}

@media(max-width:760px){
  .login{grid-template-columns:1fr}
  .login-story{padding:28px}
  .login-story strong,.login-story p,.login-story>span{display:none}
  .login-story h2{font-size:26px; margin:15px 0 0}
  .login-card{padding:30px 20px}
}

/* --------------------------------------------------------------- responsif umum */
@media(max-width:760px){
  body{padding:0}
  .frame{display:block; gap:0; padding:0}
  .rail{position:relative; height:auto; border-radius:0; border-width:0 0 1px; padding:12px; flex-direction:row; align-items:center}
  .sb-label,.sb-collapse .tx,.sb-user .who{display:none}
  .rail-menu{flex-direction:row; overflow-x:auto}
  .sb-user{position:absolute; top:14px; right:12px; border:0; padding:0; margin:0; gap:8px}
  .main{border-radius:0; border:0; padding:16px}
  .g2,.g3,.g4,.gside{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.frame,.tema-switch::after,.sb-collapse .ic{transition:none}}