/* ===== TMU AMS — styles.css ===== */
:root{
  --bg:#12151A; --surface:#1B2027; --surface2:#232A33; --line:#333C47;
  --text:#E4E8ED; --muted:#8D98A6;
  --accent:#F2A50C; --accent-ink:#12151A;
  --ok:#35B67A; --warn:#E8912D; --danger:#E5484D; --info:#4C8DF6;
  --r:6px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text);
  font:15px/1.5 Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.disp{font-family:"Barlow Condensed",Inter,sans-serif;letter-spacing:.02em}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}

/* ---- Splash & Login ---- */
#splash,#login{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:60}
#splash.hidden,#login.hidden,.hidden{display:none !important}
.splash-mark{text-align:center}
.splash-mark .bar{width:64px;height:5px;background:var(--accent);margin:0 auto 16px}
.splash-mark h1{font-size:38px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.splash-mark p{color:var(--muted);font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin-top:6px}
.login-card{width:min(360px,90vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.login-card h2{font-size:26px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}
.login-card p.sub{color:var(--muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px}

/* ---- Layout ---- */
#app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
aside{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{padding:18px 16px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center}
.brand .bar{width:4px;height:30px;background:var(--accent);flex:none}
.brand b{font-family:"Barlow Condensed",sans-serif;font-size:21px;letter-spacing:.12em;text-transform:uppercase;display:block;line-height:1}
.brand span{color:var(--muted);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
nav{flex:1;overflow-y:auto;padding:10px 8px}
.nav-group{color:var(--muted);font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:14px 10px 6px}
nav button{
  display:flex;width:100%;gap:10px;align-items:center;text-align:left;
  background:none;border:0;border-radius:var(--r);padding:9px 10px;cursor:pointer;color:var(--muted);
}
nav button:hover{background:var(--surface2);color:var(--text)}
nav button.on{background:var(--surface2);color:var(--text);box-shadow:inset 3px 0 0 var(--accent)}
nav button .ic{width:18px;text-align:center;flex:none}
nav button .pill{margin-left:auto;background:var(--danger);color:#fff;font-size:10px;border-radius:99px;padding:1px 6px}
.me{border-top:1px solid var(--line);padding:12px 14px;font-size:12px}
.me b{display:block}
.me span{color:var(--muted)}

main{padding:22px 26px 60px;max-width:1400px}
header.page{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
header.page h2{font-size:30px;text-transform:uppercase;letter-spacing:.06em;line-height:1}
header.page .count{color:var(--muted);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding-bottom:4px}
header.page .sp{flex:1}

/* ---- Controls ---- */
.btn{background:var(--surface2);border:1px solid var(--line);border-radius:var(--r);padding:8px 14px;cursor:pointer}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.btn.primary:hover{filter:brightness(1.1)}
.btn.ghost{background:none}
.btn.danger{color:var(--danger);border-color:#5a2b2d}
.btn.sm{padding:4px 9px;font-size:13px}
input,select,textarea{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
button:focus-visible,nav button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.field{margin-bottom:14px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.toolbar input,.toolbar select{width:auto;min-width:150px}

/* ---- Table ---- */
.tablewrap{border:1px solid var(--line);border-radius:var(--r);overflow:auto;background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{
  text-align:left;padding:10px 12px;background:var(--surface2);color:var(--muted);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  position:sticky;top:0;
}
td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:middle}
tbody tr:hover{background:var(--surface2)}
td.act{white-space:nowrap;text-align:right}
.empty{padding:48px 20px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--text);font-size:17px;margin-bottom:6px}

/* ---- Signature: plat kode aset ---- */
.plate{
  display:inline-block;font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.06em;
  background:linear-gradient(180deg,#2C343E,#1E242B);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:3px;padding:3px 8px;white-space:nowrap;
}

/* ---- Badge & gauge ---- */
.badge{display:inline-block;font-size:11px;letter-spacing:.06em;padding:2px 8px;border-radius:99px;border:1px solid}
.b-ok{color:var(--ok);border-color:#265b45;background:#12251d}
.b-warn{color:var(--warn);border-color:#5c4322;background:#251c11}
.b-danger{color:var(--danger);border-color:#5a2b2d;background:#261416}
.b-mute{color:var(--muted);border-color:var(--line);background:var(--surface2)}
.b-info{color:var(--info);border-color:#27446f;background:#111c2c}
.gauge{height:5px;background:var(--surface2);border-radius:99px;overflow:hidden;min-width:80px;margin-top:5px}
.gauge i{display:block;height:100%;background:var(--ok)}
.gauge.warn i{background:var(--warn)} .gauge.danger i{background:var(--danger)}

/* ---- Cards / dashboard ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;border-top:2px solid var(--line)}
.stat.acc{border-top-color:var(--accent)} .stat.dg{border-top-color:var(--danger)} .stat.wn{border-top-color:var(--warn)} .stat.ok{border-top-color:var(--ok)}
.stat span{color:var(--muted);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.stat b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:34px;font-weight:600;line-height:1.15}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:18px}
.panel h3{font-size:19px;text-transform:uppercase;letter-spacing:.08em;padding:12px 16px;border-bottom:1px solid var(--line)}
.panel .body{padding:14px 16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.alert-row{display:flex;gap:12px;align-items:center;padding:10px 16px;border-top:1px solid var(--line)}
.alert-row:first-child{border-top:0}
.alert-row .txt{flex:1;min-width:0}
.alert-row .txt b{display:block;font-weight:500}
.alert-row .txt small{color:var(--muted)}

/* ---- Modal ---- */
#modal{position:fixed;inset:0;background:#000A;display:grid;place-items:center;z-index:70;padding:20px}
.sheet{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);width:min(680px,100%);max-height:88vh;display:flex;flex-direction:column}
.sheet h3{font-size:22px;text-transform:uppercase;letter-spacing:.08em;padding:16px 20px;border-bottom:1px solid var(--line)}
.sheet .body{padding:20px;overflow-y:auto}
.sheet .foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.cols .full{grid-column:1/-1}

/* ---- Toast ---- */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--surface2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r);padding:10px 16px;box-shadow:0 8px 24px #0008}
.toast.ok{border-left-color:var(--ok)} .toast.err{border-left-color:var(--danger)}

/* ---- Sync dot ---- */
.sync{display:flex;gap:7px;align-items:center;font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.sync i{width:7px;height:7px;border-radius:99px;background:var(--muted);display:block}
.sync.ok i{background:var(--ok)} .sync.busy i{background:var(--warn)} .sync.error i{background:var(--danger)}

/* ---- Mobile ---- */
.mobtop{display:none}
@media(max-width:860px){
  #app{grid-template-columns:1fr}
  aside{position:fixed;left:0;top:0;bottom:0;width:230px;z-index:50;transform:translateX(-100%);transition:transform .22s;height:100vh}
  aside.open{transform:none}
  .mobtop{display:flex;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:40}
  main{padding:16px 14px 60px}
  .grid2,.cols{grid-template-columns:1fr}
  header.page h2{font-size:24px}
  #scrim{position:fixed;inset:0;background:#000A;z-index:45}
}
@media(prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}