/* ==========================================================================
   RentalMobil · Panel Admin & portal web (Mitra, Korporat)
   ========================================================================== */

/* ---------- Kerangka admin ---------- */
.adm{display:grid;grid-template-columns:256px minmax(0,1fr);min-height:100vh}
.sb{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--line);padding:14px 12px;overflow-y:auto;scrollbar-width:thin}
.sb-brand{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 10px}
.logo-sub{margin-left:8px;font-size:10.5px;font-weight:700;color:var(--ink-2);background:var(--surface-2);padding:3px 7px;border-radius:6px;letter-spacing:.02em;vertical-align:2px;border:1px solid var(--line)}
.sb-g{margin-top:14px}
.sb-gt{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding:0 10px 6px}
.sb-a{display:flex;align-items:center;gap:10px;width:100%;height:38px;padding:0 10px;border-radius:10px;font-weight:600;font-size:13.5px;color:var(--ink-2);transition:background .12s,color .12s;text-align:left}
.sb-a:hover{background:var(--surface-2);color:var(--ink)}
.sb-a.on{background:var(--brand-soft);color:var(--brand)}
.sb-a .count{margin-left:auto}
.sb-foot{margin-top:auto;padding-top:16px}
.me{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--surface-2)}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;height:64px;padding:0 24px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.topbar .ttl{font-size:16px;font-weight:800;letter-spacing:-.02em}
.search-k{display:flex;align-items:center;gap:10px;height:40px;padding:0 8px 0 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--ink-3);font-size:13px;min-width:280px;transition:border .15s}
.search-k:hover{border-color:var(--line-2)}
.search-k .kbd{margin-left:auto}
.icon-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--ink-2);position:relative;flex-shrink:0;transition:background .12s}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}
.icon-btn .ping{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--bad);border:2px solid var(--bg)}
.menu-btn{display:none!important}
.scrim{display:none}
.content{padding:24px;width:100%;max-width:1480px;margin:0 auto;animation:rise .3s var(--ease)}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.ph h2{font-size:24px;font-weight:800;letter-spacing:-.03em}
.ph p{color:var(--ink-2);margin-top:4px;font-size:14px}
.grid{display:grid;gap:16px}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g-12{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}

.tile-a{background:var(--surface-2);border-radius:12px;padding:10px 12px}
.mb{margin-bottom:16px}

/* ---------- KPI & grafik ---------- */
.kpi{padding:18px 20px;position:relative;overflow:hidden}
.kpi .k{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--ink-2)}
.kpi .v{font-size:28px;font-weight:800;letter-spacing:-.035em;margin-top:10px;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .d{font-size:12.5px;margin-top:6px;color:var(--ink-3)}
.kpi .sp{position:absolute;right:18px;top:18px;opacity:.9}
@media (min-width:1025px){.adm~.proto{left:auto;right:20px}}
.kpi.hot{background:var(--night);border-color:var(--night);color:#fff}
.kpi.hot .k,.kpi.hot .d{color:#9AA6C3}
.kpi.hot .li-ic{background:rgba(255,255,255,.08);color:var(--lime)}
.delta{font-weight:700}
.delta.up{color:var(--ok)}
.delta.down{color:var(--bad)}
.kpi.hot .delta.up{color:var(--lime)}
.chart{width:100%;height:auto;display:block;overflow:visible}
.legend{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12.5px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* ---------- Tabel & sel ---------- */
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line)}
.unit-cell{display:flex;align-items:center;gap:12px}
.unit-cell .th{width:62px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);padding:2px 5px;flex-shrink:0}
.plate{display:inline-flex;align-items:center;height:21px;padding:0 7px;border-radius:6px;background:var(--ink);color:var(--surface);font-weight:700;font-size:11px;letter-spacing:.05em;white-space:nowrap;font-variant-numeric:tabular-nums}
.who{display:flex;align-items:center;gap:10px}
.who .fw7{line-height:1.25}
.pill-ok,.pill-warn,.pill-bad{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600}
.pill-ok{color:var(--ok)}.pill-warn{color:var(--warn)}.pill-bad{color:var(--bad)}

/* ---------- Gantt ---------- */
.gantt{overflow-x:auto;border-radius:0 0 var(--r-lg) var(--r-lg)}
.g-head,.g-row{display:grid;grid-template-columns:230px minmax(0,1fr);min-width:1040px}
.g-head{position:sticky;top:0;background:var(--surface);z-index:4;border-bottom:1px solid var(--line)}
.g-days{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.g-day{padding:8px 0;text-align:center;font-size:11px;color:var(--ink-3);font-weight:600;border-left:1px solid var(--line)}
.g-day b{display:block;font-size:14px;color:var(--ink);line-height:26px;width:28px;margin:0 auto;border-radius:8px}
.g-day.today b{color:#fff;background:var(--brand)}
.g-day.we{background:var(--surface-2)}
.g-label{padding:8px 14px;border-right:1px solid var(--line);display:flex;align-items:center;gap:10px;min-width:0;position:sticky;left:0;background:var(--surface);z-index:3}
.g-row{border-bottom:1px solid var(--line)}
.g-row:last-child{border-bottom:0}
.g-track{position:relative;height:54px;background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:calc(100% / var(--n)) 100%;cursor:copy}
.g-bar{position:absolute;top:10px;height:34px;border-radius:9px;padding:0 10px;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;cursor:pointer;transition:transform .12s,box-shadow .12s;border:1px solid transparent;z-index:1}
.g-bar:hover{transform:translateY(-1px);box-shadow:var(--sh-2);z-index:2}
.g-bar small{font-weight:600;opacity:.75}
.g-bar.ok{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 28%,transparent)}
.g-bar.brand{background:var(--brand-soft);color:var(--brand);border-color:color-mix(in srgb,var(--brand) 28%,transparent)}
.g-bar.warn{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 28%,transparent)}
.g-bar.bad{background:var(--bad-soft);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.g-bar.violet{background:var(--violet-soft);color:var(--violet);border-color:color-mix(in srgb,var(--violet) 28%,transparent)}
.g-bar.info{background:var(--info-soft);color:var(--info);border-color:color-mix(in srgb,var(--info) 28%,transparent)}
.g-bar.mute{background:var(--mute-soft);color:var(--mute)}
.g-bar.block{background:repeating-linear-gradient(135deg,var(--surface-3) 0 6px,var(--surface-2) 6px 12px);color:var(--ink-2);border-color:var(--line-2);cursor:default}
.g-bar.svc{background:repeating-linear-gradient(135deg,var(--warn-soft) 0 6px,var(--surface) 6px 12px);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 28%,transparent);cursor:default}
.g-buf{position:absolute;top:21px;height:12px;border-radius:0 6px 6px 0;background:repeating-linear-gradient(90deg,var(--ink-3) 0 2px,transparent 2px 5px);opacity:.35;pointer-events:none}
.g-now{position:absolute;top:0;bottom:0;width:2px;background:var(--bad);z-index:2;pointer-events:none}

/* ---------- Split (antrian + detail) ---------- */
.split{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;align-items:start}
.q-item{display:flex;gap:12px;align-items:center;padding:14px 16px;border-top:1px solid var(--line);cursor:pointer;width:100%;text-align:left;transition:background .12s}
.q-item:hover{background:var(--surface-2)}
.q-item.on{background:var(--brand-soft)}
.idcard{aspect-ratio:1.586;border-radius:14px;position:relative;overflow:hidden;background:linear-gradient(135deg,#D9E4F6,#A9BFE6);box-shadow:var(--sh-2)}
.idcard.sim{background:linear-gradient(135deg,#F4E6CB,#DDB978)}
.idcard .pp{position:absolute;left:6%;top:26%;width:23%;height:56%;border-radius:8px;background:rgba(13,20,36,.22)}
.idcard .pp::after{content:"";position:absolute;left:28%;top:16%;width:44%;height:36%;border-radius:50%;background:rgba(13,20,36,.25)}
.idcard .ln{position:absolute;left:35%;height:7px;border-radius:4px;background:rgba(13,20,36,.24)}
.idcard .hd{position:absolute;left:6%;top:8%;font-weight:800;font-size:11px;color:rgba(13,20,36,.6);letter-spacing:.14em}
.idcard .zm{position:absolute;right:10px;bottom:10px}
.kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px 16px;font-size:13.5px;margin:0}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;font-weight:600;min-width:0}

/* ---------- GPS ---------- */
.gps{display:grid;grid-template-columns:320px minmax(0,1fr);height:calc(100vh - 64px - 130px);min-height:560px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.gps-side{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.gps-list{overflow-y:auto;flex:1}
.gps-map{position:relative;z-index:0;min-height:0}
.gps-u{display:flex;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);width:100%;text-align:left;transition:background .12s}
.gps-u:hover{background:var(--surface-2)}
.gps-u.on{background:var(--brand-soft)}
.gps-panel{position:absolute;left:16px;bottom:16px;z-index:500;width:min(560px,calc(100% - 32px));background:var(--surface);border-radius:18px;box-shadow:var(--sh-3);padding:16px;border:1px solid var(--line)}
.gps-ev{position:absolute;top:16px;right:16px;z-index:500;width:310px;background:var(--surface);border-radius:18px;box-shadow:var(--sh-3);border:1px solid var(--line);max-height:calc(100% - 32px);overflow:auto}
.gps-ev .ev{display:flex;gap:10px;padding:12px 14px;border-top:1px solid var(--line)}
.scrub{width:100%;accent-color:var(--brand)}
.stat3{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat3 div{background:var(--surface-2);border-radius:12px;padding:8px 10px}
.stat3 b{display:block;font-size:15px;font-weight:800}
.stat3 span{font-size:11px;color:var(--ink-3);font-weight:600}

/* ---------- Serah terima ---------- */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.shot{aspect-ratio:4/3;border-radius:12px;background:linear-gradient(160deg,var(--surface-2),var(--surface-3));display:grid;place-items:center;position:relative;overflow:hidden;padding:12px 8px 6px;border:0;width:100%}
.shot>span{position:absolute;left:6px;top:6px;font-size:10.5px;font-weight:700;background:var(--surface);padding:2px 7px;border-radius:6px;color:var(--ink-2);z-index:1}
.shot.dmg{box-shadow:inset 0 0 0 2px var(--bad)}
.shot.empty{border:1.5px dashed var(--line-2);background:var(--surface);color:var(--ink-3);font-size:12px;font-weight:600;cursor:pointer}
.shot.empty:hover{border-color:var(--brand);color:var(--brand)}
.shot .icn{color:var(--ink-3);width:30px;height:30px}
.dmg-pin{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--bad);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;box-shadow:0 0 0 4px color-mix(in srgb,var(--bad) 30%,transparent);z-index:2}
.fuelg{display:inline-flex;gap:3px;vertical-align:middle}
.fuelg i{width:10px;height:16px;border-radius:3px;background:var(--surface-3);display:block}
.fuelg i.on{background:var(--ok)}
.fuelg.low i.on{background:var(--warn)}
.diff{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.diff:first-child{border-top:0}
.charge{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}

/* ---------- Command palette ---------- */
.cmdk{position:fixed;left:50%;top:12vh;transform:translateX(-50%);width:min(620px,calc(100vw - 32px));background:var(--surface);border-radius:18px;box-shadow:var(--sh-3);z-index:501;overflow:hidden;animation:fadeIn .15s;border:1px solid var(--line)}
.cmdk .in{position:relative}
.cmdk .in .ic{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--ink-3)}
.cmdk input{width:100%;height:58px;border:0;outline:0;padding:0 20px 0 52px;font-size:16px;background:transparent}
.cmdk .res{max-height:52vh;overflow:auto;border-top:1px solid var(--line);padding:6px}
.cmdk .grp{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:10px 12px 4px}
.cmdk .it{display:flex;gap:12px;align-items:center;padding:9px 12px;border-radius:10px;width:100%;text-align:left;font-size:13.5px}
.cmdk .it.on{background:var(--brand-soft)}
.cmdk .it .faint{margin-left:auto;font-size:12px}
.cmdk .ft{display:flex;gap:14px;padding:10px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}

/* ---------- Portal (Mitra & Korporat) ---------- */
.pt-top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.pt-in{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:20px;height:66px}
.pt-nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1}
.pt-nav::-webkit-scrollbar{display:none}
.pt-nav button{height:36px;padding:0 14px;border-radius:10px;font-weight:600;font-size:13.5px;color:var(--ink-2);white-space:nowrap;display:flex;align-items:center;gap:8px;transition:background .12s,color .12s}
.pt-nav button:hover{background:var(--surface-2);color:var(--ink)}
.pt-nav button.on{background:var(--ink);color:var(--surface)}
.pt-main{max-width:1200px;margin:0 auto;padding:28px 24px 96px;animation:rise .3s var(--ease)}
.band{border-radius:24px;padding:28px;background:var(--night);color:#fff;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;width:520px;height:520px;right:-200px;top:-260px;border-radius:50%;background:radial-gradient(circle,rgba(46,91,255,.55),transparent 65%)}
.band::after{content:"";position:absolute;width:360px;height:360px;left:30%;bottom:-260px;border-radius:50%;background:radial-gradient(circle,rgba(198,242,107,.18),transparent 65%)}
.band>*{position:relative;z-index:1}
.band .muted{color:#9AA6C3}
.band .big{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums}
.ucard{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);overflow:hidden;text-align:left;width:100%;transition:box-shadow .15s}
.ucard:hover{box-shadow:var(--sh-2)}
.ucard .art{height:120px;display:grid;place-items:center;background:linear-gradient(160deg,color-mix(in srgb,var(--tint) 70%,var(--surface)),var(--surface-2));padding:8px 30px}
[data-theme="dark"] .ucard .art{background:linear-gradient(160deg,color-mix(in srgb,var(--tint) 16%,var(--surface-2)),var(--surface-2))}
.mcal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.mcal .dw{font-size:11.5px;font-weight:700;color:var(--ink-3);text-align:center;padding:4px 0}
.mc{min-height:78px;border-radius:12px;border:1px solid var(--line);padding:8px;font-size:12px;position:relative;background:var(--surface);text-align:left;display:flex;flex-direction:column;gap:4px;transition:border .12s,background .12s;min-width:0}
.mc:hover{border-color:var(--ink-3)}
.mc b{font-size:13px}
.mc.out{opacity:.35;pointer-events:none}
.mc.past{opacity:.55}
.mc.rent{background:var(--brand-soft);border-color:transparent}
.mc.blk{background:repeating-linear-gradient(135deg,var(--surface-3) 0 6px,var(--surface-2) 6px 12px);border-color:transparent}
.mc.svc{background:var(--warn-soft);border-color:transparent}
.mc.sel{box-shadow:inset 0 0 0 2px var(--brand)}
.mc.td b{color:#fff;background:var(--brand);border-radius:6px;padding:0 6px;align-self:flex-start}
.mc .tg{font-size:10.5px;font-weight:700;border-radius:6px;padding:2px 6px;background:var(--surface);align-self:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.slip{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);padding:24px}
.slip .row-l{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:13.5px;color:var(--ink-2)}
.slip .row-l b{color:var(--ink);font-weight:600}
.slip .tot{border-top:2px solid var(--ink);margin-top:8px;padding-top:12px;font-size:16px;font-weight:800;color:var(--ink)}
.formula{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;background:var(--surface-2);border-radius:10px;padding:10px 12px;color:var(--ink-2);overflow-x:auto}

/* ---------- Responsif ---------- */
@media (max-width:1240px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}.g-21,.g-12{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1024px){
  .adm{grid-template-columns:minmax(0,1fr)}
  .sb{position:fixed;left:0;top:0;bottom:0;width:280px;z-index:600;transform:translateX(-102%);transition:transform .25s var(--ease);box-shadow:var(--sh-3)}
  .adm.nav-open .sb{transform:none}
  .adm.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(6,10,20,.45);z-index:599}
  .menu-btn{display:grid!important}
  .search-k{min-width:0}
  .split,.gps{grid-template-columns:minmax(0,1fr)}
  .gps{height:auto}
  .gps-map{height:460px}
  .gps-side{max-height:280px;border-right:0;border-bottom:1px solid var(--line)}
  .gps-ev{position:static;width:auto;max-height:none;box-shadow:none;border-radius:0;border:0;border-top:1px solid var(--line)}
  .cmp,.g-3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .g-4,.g-2{grid-template-columns:minmax(0,1fr)}
  .content{padding:16px}
  .topbar{padding:0 12px;gap:6px}
  .hide-sm{display:none!important}
  .search-k{width:40px;padding:0;justify-content:center;border:0;background:none}
  .search-k span,.search-k .kbd{display:none}
  .ph h2{font-size:20px}
  .kv{grid-template-columns:minmax(0,1fr)}
  .kv dt{margin-top:6px}
  .pt-in{height:auto;flex-wrap:wrap;padding:10px 16px;gap:8px}
  .pt-nav{order:3;width:100%;flex:none}
  .pt-main{padding:20px 16px 96px}
  .band{padding:22px}
  .band .big{font-size:32px}
  .mc{min-height:54px;padding:6px}
  .mc .tg{display:none}
  .stat3{grid-template-columns:repeat(2,1fr)}
  .shots{grid-template-columns:repeat(2,1fr)}
}