/* ============================================================
   hermes-design.css — Hermes Console Design System
   Reusable stylesheet untuk semua HTML di /var/www/html/.
   Cukup <link rel="stylesheet" href="hermes-design.css"> lalu
   pakai token + class di bawah. Dark, data-dense, Indonesia.

   MARKUP CONTRACT — hamburger nav (pure CSS, no JS):
     <aside class="sidebar">
       <input type="checkbox" id="navCheck" class="nav-check">
       <div class="brand">
         <div class="logo-mark">H</div>
         <div><h1>…</h1><small>…</small></div>
         <label for="navCheck" class="nav-toggle" aria-label="Buka menu">
           <span class="bar"></span><span class="bar"></span><span class="bar"></span>
         </label>
       </div>
       <label for="navCheck" class="nav-overlay"></label>
       <nav class="nav" id="nav">
         <a href="#…">…</a>  (berulang)
       </nav>
     </aside>
   Buka/tutup via :checked (checkbox hack). id navCheck harus unik per halaman.
   ============================================================ */

:root{
  /* --- Existing tokens (dari DESIGN.md) --- */
  --canvas:#020617; --surface:#0f172a; --surface-raised:#1e293b;
  --primary:#e2e8f0; --secondary:#64748b; --tertiary:#22c55e;
  --tertiary-muted:#10b981; --accent-blue:#38bdf8; --danger:#f87171;
  --on-tertiary:#020617; --border:#334155; --border-subtle:#1e293b;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:9999px;

  /* --- Semantic status --- */
  --warning:#fbbf24; --warning-muted:#b45309;
  --success:#22c55e; --info:#38bdf8; --info-muted:#0ea5e9;

  /* --- Elevation --- */
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --shadow-md:0 10px 30px -12px rgba(0,0,0,.65);
  --shadow-glow:0 0 0 1px rgba(34,197,94,.35), 0 14px 36px -14px rgba(34,197,94,.4);
  --shadow-blue:0 0 0 1px rgba(56,189,248,.30), 0 14px 36px -14px rgba(56,189,248,.35);

  /* --- Motion --- */
  --dur:.18s; --ease:cubic-bezier(.4,0,.2,1);

  /* --- Spacing --- */
  --sp-2xs:2px; --sp-xs:4px; --sp-sm:8px; --sp-md:16px; --sp-lg:24px; --sp-xl:32px;

  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--canvas); color:var(--primary);
  font-family:var(--font-body); font-size:1rem; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* cegah scroll horizontal di level halaman */
}

/* ---------- Layout ---------- */
.wrap{max-width:1280px; margin:0 auto; padding:var(--sp-lg); display:block}
/* layout 2-kolom (sidebar + konten) hanya berlaku bila .wrap punya .sidebar di dalamnya.
   Tanpa sidebar (mis. halaman backtester), .wrap tetap block => semua elemen tumpuk vertikal. */
.wrap:has(.sidebar){display:grid; grid-template-columns:240px 1fr; gap:var(--sp-xl)}
.wrap > *{min-width:0} /* cegah grid blowout: item bisa menyusut */
.nav{min-width:0}

/* ---------- Hamburger (mobile only, pure-CSS checkbox hack) ---------- */
.nav-check{display:none}
.nav-toggle{margin-left:auto; width:42px; height:42px; border:1px solid var(--border);
  border-radius:var(--r-md); background:var(--surface-raised); cursor:pointer; flex-direction:column;
  gap:4px; align-items:center; justify-content:center; display:none; transition:background var(--dur) var(--ease)}
.nav-toggle .bar{width:18px; height:2px; background:var(--primary); border-radius:2px; transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}

/* ---------- Sidebar nav (desktop) ---------- */
.sidebar{position:static; align-self:start; display:flex; flex-direction:column; gap:var(--sp-xs);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-md)}
.brand{display:flex; align-items:center; gap:var(--sp-sm); padding:var(--sp-sm) 0 var(--sp-md)}
.logo-mark{width:40px; height:40px; border-radius:var(--r-lg); background:var(--tertiary); color:var(--on-tertiary);
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:1.25rem}
.brand h1{font-family:var(--font-display); font-size:1rem; font-weight:600; letter-spacing:-.01em}
.brand small{color:var(--secondary); font-size:.7rem; font-family:var(--font-mono)}
.nav a{display:block; padding:10px 12px; border-radius:var(--r-sm); color:var(--secondary);
  text-decoration:none; font-size:.875rem; font-weight:500; transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.nav a:hover{background:var(--surface-raised); color:var(--primary)}
.nav a.active{background:var(--surface-raised); color:var(--tertiary); box-shadow:inset 2px 0 0 var(--tertiary)}

/* ---------- Main / sections ---------- */
main{display:flex; flex-direction:column; gap:var(--sp-xl)}
section{scroll-margin-top:var(--sp-lg)}
.sec-head{display:flex; align-items:baseline; gap:var(--sp-sm); margin-bottom:var(--sp-md)}
.sec-head h2{font-family:var(--font-display); font-size:1.25rem; font-weight:600}
.sec-head .tag{font-family:var(--font-mono); font-size:.7rem; color:var(--tertiary); border:1px solid var(--border); padding:2px 8px; border-radius:var(--r-full)}
.sec-head .sub{color:var(--secondary); font-size:.8rem; margin-left:auto}

/* ---------- Card ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:var(--sp-lg)}
.card.deep{box-shadow:var(--shadow-md)}
.grid{display:grid; gap:var(--sp-md)}
/* base column counts — didefinisikan sebelum @media biar media query bisa override */
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-5{grid-template-columns:repeat(5,1fr)}

/* ---------- Typography utilities ---------- */
.t-display{font-family:var(--font-display); font-size:2.5rem; font-weight:700; letter-spacing:-.02em}
.t-h1{font-family:var(--font-display); font-size:1.875rem; font-weight:600; letter-spacing:-.02em}
.t-h2{font-family:var(--font-display); font-size:1.25rem; font-weight:600}
.t-stat{font-family:var(--font-display); font-size:2rem; font-weight:600; font-variant-numeric:tabular-nums}
.t-body{font-size:1rem}
.t-sm{font-size:.875rem; color:var(--secondary)}
.t-cap{font-size:.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--secondary)}
.t-micro{font-size:.625rem; color:var(--secondary)}
.t-mono{font-family:var(--font-mono); font-size:.8125rem; overflow-wrap:anywhere}
.t-label{font-family:var(--font-mono); font-size:.7rem; color:var(--tertiary); min-width:90px; display:inline-block}

/* ---------- Buttons ---------- */
.btn{font-family:var(--font-body); font-weight:600; font-size:.9rem; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:var(--sp-sm); border-radius:var(--r-md); padding:12px 16px;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--tertiary); color:var(--on-tertiary)}
.btn-primary:hover{background:var(--tertiary-muted); box-shadow:var(--shadow-glow)}
.btn-ghost{background:transparent; color:var(--primary); border:1px solid var(--border)}
.btn-ghost:hover{background:var(--surface-raised)}
.btn-blue{background:var(--accent-blue); color:var(--on-tertiary)}
.btn-blue:hover{box-shadow:var(--shadow-blue)}
.btn-danger{background:transparent; color:var(--danger); border:1px solid var(--danger)}
.btn-danger:hover{background:rgba(248,113,113,.1)}
.btn-sm{padding:8px 12px; font-size:.8rem}
.btn-row{display:flex; gap:var(--sp-sm); flex-wrap:wrap; align-items:center}

/* ---------- Form ---------- */
.field{display:flex; flex-direction:column; gap:var(--sp-xs)}
.field label{font-size:.75rem; font-weight:600; color:var(--secondary)}
.input,select.input{background:var(--canvas); border:1px solid var(--border); color:var(--primary);
  border-radius:var(--r-md); padding:11px 14px; font-family:var(--font-body); font-size:.9rem; width:100%;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.input:focus{outline:none; border-color:var(--tertiary); box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.input::placeholder{color:var(--secondary)}
.toggle{display:inline-flex; align-items:center; gap:var(--sp-sm); cursor:pointer; font-size:.85rem}
.switch{width:42px; height:24px; border-radius:var(--r-full); background:var(--border); position:relative; transition:background var(--dur) var(--ease)}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--primary); transition:transform var(--dur) var(--ease)}
.toggle input{display:none}
.toggle input:checked + .switch{background:var(--tertiary)}
.toggle input:checked + .switch::after{transform:translateX(18px); background:var(--on-tertiary)}

/* ---------- Badge & status ---------- */
.badge{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:600;
  padding:4px 10px; border-radius:var(--r-full); font-family:var(--font-mono)}
.badge-green{background:rgba(34,197,94,.14); color:var(--tertiary)}
.badge-blue{background:rgba(56,189,248,.14); color:var(--info)}
.badge-amber{background:rgba(251,191,36,.14); color:var(--warning)}
.badge-red{background:rgba(248,113,113,.14); color:var(--danger)}
.badge-ghost{background:var(--surface-raised); color:var(--secondary)}
.dot{width:8px; height:8px; border-radius:50%}
.dot-green{background:var(--tertiary); box-shadow:0 0 8px var(--tertiary)}
.dot-red{background:var(--danger); box-shadow:0 0 8px var(--danger)}
.dot-amber{background:var(--warning); box-shadow:0 0 8px var(--warning)}
.dot-blue{background:var(--info); box-shadow:0 0 8px var(--info)}

/* ---------- Stat tile ---------- */
.stat{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:var(--sp-md);
  display:flex; flex-direction:column; gap:var(--sp-xs); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.stat:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.stat .k{font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--secondary); display:flex; align-items:center; gap:6px}
.stat .v{font-family:var(--font-display); font-size:1.9rem; font-weight:600; font-variant-numeric:tabular-nums}
.stat .d{font-size:.75rem; font-family:var(--font-mono)}
.up{color:var(--tertiary)} .down{color:var(--danger)}
.spark{width:100%; height:34px; margin-top:auto}

/* ---------- Tabs / segmented ---------- */
.seg{display:inline-flex; background:var(--canvas); border:1px solid var(--border); border-radius:var(--r-md); padding:4px; gap:4px}
.seg button{background:transparent; border:none; color:var(--secondary); font-family:var(--font-body); font-weight:600;
  font-size:.82rem; padding:8px 14px; border-radius:var(--r-sm); cursor:pointer; transition:all var(--dur) var(--ease)}
.seg button.on{background:var(--surface-raised); color:var(--tertiary)}
.panel{margin-top:var(--sp-md)}
.panel[hidden]{display:none}

/* ---------- Progress ---------- */
.meter{height:10px; border-radius:var(--r-full); background:var(--canvas); border:1px solid var(--border); overflow:hidden}
.meter > i{display:block; height:100%; background:linear-gradient(90deg,var(--tertiary-muted),var(--tertiary)); border-radius:var(--r-full)}
.meter.blue > i{background:linear-gradient(90deg,var(--info-muted),var(--info))}
.meter.amber > i{background:linear-gradient(90deg,var(--warning-muted),var(--warning))}

/* ---------- Table ---------- */
table{width:100%; border-collapse:collapse; font-size:.875rem}
th{text-align:left; color:var(--secondary); font-weight:600; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; padding:10px 12px; border-bottom:1px solid var(--border)}
td{padding:12px; border-bottom:1px solid var(--border-subtle); font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--surface-raised)}
td.mono{font-family:var(--font-mono); font-size:.8rem; color:var(--secondary)}

/* ---------- Divider / skeleton / empty ---------- */
.divider{height:1px; background:var(--border-subtle); margin:var(--sp-md) 0}
.skel{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-raised) 50%,var(--surface) 75%);
  background-size:200% 100%; animation:sh 1.4s infinite; border-radius:var(--r-sm); height:14px}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.empty{text-align:center; padding:var(--sp-xl); color:var(--secondary); border:1px dashed var(--border); border-radius:var(--r-xl)}
.empty svg{opacity:.5; margin-bottom:var(--sp-sm)}

/* ---------- Toast ---------- */
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0;
  background:var(--tertiary); color:var(--on-tertiary); font-weight:600; font-size:.85rem; padding:10px 18px;
  border-radius:var(--r-full); box-shadow:var(--shadow-glow); transition:all var(--dur) var(--ease); pointer-events:none}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ============================================================
   RESPONSIVE  — mobile nav = hamburger dropdown (pure CSS)
   ============================================================ */
@media(max-width:860px){
  /* tablet / foldable: layout 1 kolom, nav hamburger dropdown */
  .wrap{grid-template-columns:1fr; gap:var(--sp-lg); padding:var(--sp-md)}
  .sidebar{position:relative; z-index:60; gap:0; margin-bottom:var(--sp-md); padding:0;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden}
  .brand{padding:var(--sp-sm) var(--sp-md); align-items:center; position:relative; z-index:65}
  .nav-toggle{display:flex}
  /* overlay nutup pas tap di luar (hidden saat tertutup, fixed full-screen saat buka) */
  .nav-overlay{display:none; position:fixed; inset:0; z-index:55; background:transparent; cursor:default}
  .nav-check:checked ~ .nav-overlay{display:block}
  .nav{display:flex!important; flex-direction:column; gap:2px; padding:0; position:relative; z-index:65;
       max-height:0; overflow:hidden; transition:max-height .25s var(--ease),padding .25s var(--ease);
       background:transparent; border:0; box-shadow:none}
  .nav-check:checked ~ .nav{max-height:520px; padding:var(--sp-xs) var(--sp-sm) var(--sp-sm)}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap; padding:13px 14px; font-size:.9rem; box-shadow:none!important;
        min-height:44px; display:flex!important; align-items:center; border-radius:var(--r-sm)}
  .nav a.active{box-shadow:none; background:var(--surface-raised); color:var(--tertiary)}
  /* hamburger -> X saat checkbox checked */
  .nav-check:checked ~ .brand .nav-toggle .bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-check:checked ~ .brand .nav-toggle .bar:nth-child(2){opacity:0}
  .nav-check:checked ~ .brand .nav-toggle .bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .sec-head{flex-wrap:wrap; row-gap:var(--sp-sm)}
  .sec-head .sub{margin-left:0; width:100%; order:3}
  .btn{min-height:44px}
  .input{min-height:44px}
  .field label{margin-bottom:2px}
  /* grid: 4/3 kolom -> 2, 2 kolom -> 1. !important agar menang dari .cols-* base */
  .cols-4,.cols-3{grid-template-columns:repeat(2,1fr)!important}
  .cols-2,.cols-5{grid-template-columns:1fr!important}
  .stat .v{font-size:1.6rem}
}
@media(max-width:680px){
  /* HP: header & tipe nyusut, tabel bisa scroll */
  .card{padding:var(--sp-md)}
  .t-display{font-size:1.9rem; line-height:1.05}
  .sec-head h2{font-size:1.1rem}
  #table .card{overflow-x:auto!important; overflow-y:hidden!important}
  #table table{min-width:460px}
}
@media(max-width:420px){
  /* layar sangat sempit (iPhone SE, dll): semua grid 1 kolom */
  .cols-4,.cols-3,.cols-2,.cols-5{grid-template-columns:1fr!important}
  .t-display{font-size:1.6rem}
  .stat .v{font-size:1.4rem}
}