/* Tema profesional: sidebar gelap, kartu putih, angka tabular rata kanan, rugi merah dalam kurung. */
:root {
  --bg:#f5f6f8; --panel:#ffffff; --panel-2:#f9fafb; --line:#e5e7eb; --line-strong:#d1d5db; --text:#111827; --muted:#6b7280; --faint:#9ca3af;
  --primary:#1f4fd8; --primary-hover:#1a43b8; --primary-ink:#ffffff; --primary-soft:#eef3ff;
  --side:#0f172a; --side-text:#cbd5e1; --side-muted:#64748b; --side-hover:#1e293b; --side-active:#1f4fd8;
  --pos:#047857; --pos-soft:#ecfdf5; --neg:#b91c1c; --neg-soft:#fef2f2; --warn:#a16207; --warn-soft:#fefce8;
  --rev:#10b981; --cost:#f87171; --profit:#1f4fd8;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --radius:10px; color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0b1120; --panel:#111827; --panel-2:#0f172a; --line:#1f2937; --line-strong:#374151; --text:#f3f4f6; --muted:#9ca3af; --faint:#6b7280;
    --primary:#3b82f6; --primary-hover:#60a5fa; --primary-ink:#ffffff; --primary-soft:#172554;
    --side:#020617; --side-hover:#0f172a;
    --pos:#34d399; --pos-soft:#052e1f; --neg:#f87171; --neg-soft:#3b0d0d; --warn:#facc15; --warn-soft:#332a05;
    --rev:#34d399; --cost:#f87171; --profit:#93c5fd; --shadow:none; color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --bg:#0b1120; --panel:#111827; --panel-2:#0f172a; --line:#1f2937; --line-strong:#374151; --text:#f3f4f6; --muted:#9ca3af; --faint:#6b7280;
  --primary:#3b82f6; --primary-hover:#60a5fa; --primary-ink:#ffffff; --primary-soft:#172554;
  --side:#020617; --side-hover:#0f172a;
  --pos:#34d399; --pos-soft:#052e1f; --neg:#f87171; --neg-soft:#3b0d0d; --warn:#facc15; --warn-soft:#332a05;
  --rev:#34d399; --cost:#f87171; --profit:#93c5fd; --shadow:none; color-scheme:dark;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing:antialiased; }
h1, h2 { font-weight:650; letter-spacing:-.015em; margin:0; }
h1 { font-size:24px; } h2 { font-size:15px; }
code { font:12px ui-monospace, Menlo, monospace; background:var(--panel-2); padding:1px 5px; border-radius:4px; }

/* ---------- Kerangka ---------- */
#app { display:flex; min-height:100vh; }
aside { width:236px; flex:none; background:var(--side); color:var(--side-text); padding:18px 14px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:6px; }
.brand { display:flex; align-items:center; gap:10px; padding:4px 6px 18px; color:#fff; font-weight:650; font-size:15px; line-height:1.2; }
.brand img { width:40px; height:auto; flex:none; }
.brand small { display:block; font-weight:500; font-size:11.5px; color:var(--side-muted); }
.navlbl { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--side-muted); font-weight:600; padding:14px 10px 6px; }
nav a { display:flex; gap:11px; align-items:center; padding:8px 10px; color:var(--side-text); text-decoration:none; border-radius:7px; font-weight:500; font-size:13.5px; }
nav a svg { width:17px; height:17px; flex:none; opacity:.85; }
nav a:hover { background:var(--side-hover); color:#fff; }
nav a.on { background:var(--side-active); color:#fff; }
.side-foot { margin-top:auto; border-top:1px solid #1e293b; padding-top:12px; font-size:11.5px; color:var(--side-muted); padding-left:8px; }
main { flex:1; min-width:0; }
.topbar { position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.head { display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; padding:16px 32px; }
.crumbs { font-size:12px; color:var(--muted); margin-bottom:2px; }
.head-tools { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.content { padding:24px 32px 56px; }
.sub { color:var(--muted); font-size:12.5px; }
.lbl { font-size:12px; color:var(--muted); font-weight:500; }
.kicker { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); font-weight:600; margin-bottom:2px; }
.range { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
label.lbl { display:flex; flex-direction:column; gap:6px; }

/* ---------- Panel ---------- */
section.box { border:1px solid var(--line); background:var(--panel); margin-bottom:20px; border-radius:var(--radius); box-shadow:var(--shadow); }
.box > header { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line); }
.box > .pad { padding:20px; }
.box.toolbar > header { border-bottom:0; }

/* ---------- Kartu angka ---------- */
.kpi { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin-bottom:20px; }
.kpi > div { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); min-width:0; }
.kpi .lbl { display:block; }
@media (min-width:1000px) { #kpi, #lKpi { grid-template-columns:repeat(3,1fr); } }
/* Layar lebar: semua kartu dalam satu baris supaya tidak ada ruang kosong. */
@media (min-width:1700px) { #lKpi { grid-template-columns:repeat(6,1fr); } }
@media (min-width:2300px) { #kpi { grid-template-columns:repeat(9,1fr); } }
.kpi b { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:22px; font-weight:650; margin:6px 0 6px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.kpi small { color:var(--muted); font-size:12px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.kpi .wrap { white-space:normal; font-size:16px; }
.pill { display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:20px; font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.pill.good { background:var(--pos-soft); color:var(--pos); } .pill.bad { background:var(--neg-soft); color:var(--neg); } .pill.flat { background:var(--panel-2); color:var(--muted); }

/* ---------- Tabel ---------- */
.scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:13.5px; }
th, td { padding:11px 16px; white-space:nowrap; }
th { text-align:left; background:var(--panel-2); color:var(--muted); font-size:11.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; border-bottom:1px solid var(--line); }
th.num { text-align:right; }
th.sort { cursor:pointer; user-select:none; } th.sort:hover { color:var(--text); }
td { border-bottom:1px solid var(--line); }
td.num { text-align:right; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:var(--panel-2); }
tr.total td { font-weight:650; background:var(--primary-soft) !important; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); }
.empty { text-align:center; color:var(--muted); padding:36px; white-space:normal; }
.pos { color:var(--pos); } .neg { color:var(--neg); }
.badge { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11.5px; font-weight:600; background:var(--panel-2); color:var(--muted); border:1px solid var(--line); }
.badge.admin { background:var(--primary-soft); color:var(--primary); border-color:transparent; }
.badge.ok { background:var(--pos-soft); color:var(--pos); border-color:transparent; }
.badge.off { background:var(--warn-soft); color:var(--warn); border-color:transparent; }
.bar { display:inline-block; width:160px; height:6px; background:var(--line); vertical-align:middle; margin-right:10px; border-radius:6px; overflow:hidden; }
.bar i { display:block; height:100%; background:var(--primary); border-radius:6px; }

/* ---------- Grafik ---------- */
.legend { display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }
.legend span::before { content:""; display:inline-block; width:10px; height:10px; margin-right:7px; vertical-align:-1px; border-radius:3px; background:var(--c); }
.legend .ln::before { height:3px; vertical-align:3px; border-radius:2px; }
.chart { padding:16px 16px 6px; }
.chart svg { width:100%; height:auto; display:block; font:11px -apple-system, "Segoe UI", sans-serif; }
.chart .grid { stroke:var(--line); stroke-dasharray:3 4; } .chart .zero { stroke:var(--line-strong); }
.chart .ax { fill:var(--faint); }
.chart .rev { fill:var(--rev); } .chart .cost { fill:var(--cost); }
.chart .profit { stroke:var(--profit); stroke-width:2.5; fill:none; stroke-linejoin:round; } .chart .dot { fill:var(--panel); stroke:var(--profit); stroke-width:2; }
.chart .hit { fill:transparent; } .chart .hit:hover { fill:var(--primary-soft); opacity:.7; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:20px; }

/* ---------- Kartu kurs ---------- */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; padding:20px; }
.card { border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; background:var(--panel); }
.card .code { font-size:18px; font-weight:700; display:flex; justify-content:space-between; align-items:center; }
.card .val { font-size:24px; font-weight:650; font-variant-numeric:tabular-nums; margin:2px 0 6px; letter-spacing:-.02em; }
.card .row { display:flex; gap:8px; margin-top:14px; }

/* ---------- Form & tombol ---------- */
input, select, textarea { font:inherit; font-size:13.5px; color:var(--text); background:var(--panel); border:1px solid var(--line-strong); padding:7px 10px; border-radius:7px; min-height:36px; }
input[type=checkbox] { min-height:0; width:16px; height:16px; accent-color:var(--primary); }
input:disabled { background:var(--panel-2); color:var(--muted); }
select.compact { padding:3px 8px; font-size:12.5px; min-height:28px; border-radius:20px; font-weight:600; }
select.note-done { color:var(--pos); background:var(--pos-soft); border-color:transparent; }
select.note-todo { color:var(--warn); background:var(--warn-soft); border-color:transparent; }
input:focus-visible, select:focus-visible, button:focus-visible, summary:focus-visible, a:focus-visible { outline:2px solid var(--primary); outline-offset:1px; }
button, .btn { font:inherit; cursor:pointer; font-size:13px; font-weight:600; padding:8px 14px; min-height:36px; text-decoration:none; color:var(--text); border:1px solid var(--line-strong); border-radius:7px; background:var(--panel); display:inline-flex; align-items:center; justify-content:center; gap:6px; box-shadow:var(--shadow); }
button:hover, .btn:hover { background:var(--panel-2); }
button.primary, .btn.primary { background:var(--primary); color:var(--primary-ink); border-color:var(--primary); }
button.primary:hover, .btn.primary:hover { background:var(--primary-hover); }
button.danger { color:var(--neg); border-color:color-mix(in srgb, var(--neg) 40%, transparent); }
button.sm { padding:4px 10px; font-size:12px; min-height:28px; }
button:disabled { opacity:.5; cursor:not-allowed; }
.icon-btn { padding:0; width:36px; }
.icon-btn svg { width:17px; height:17px; }
.chips { display:inline-flex; padding:3px; gap:2px; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; flex-wrap:wrap; }
.chips button { border:0; box-shadow:none; background:transparent; min-height:28px; padding:4px 11px; font-size:12.5px; color:var(--muted); border-radius:6px; }
.chips button:hover { background:var(--panel); color:var(--text); }
.filters { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; padding:4px 20px 20px; }
.bulk { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:10px 20px; background:var(--primary-soft); border-bottom:1px solid var(--line); font-size:13px; }
.pager { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 20px; border-top:1px solid var(--line); }

/* ---------- Menu ---------- */
details.menu { position:relative; display:inline-block; }
details.menu summary { list-style:none; cursor:pointer; padding:3px 10px; font-size:12px; font-weight:600; border:1px solid var(--line-strong); border-radius:7px; background:var(--panel); }
details.menu summary::-webkit-details-marker { display:none; }
details.menu > div { position:absolute; right:0; top:calc(100% + 6px); z-index:20; background:var(--panel); border:1px solid var(--line); border-radius:9px; box-shadow:0 12px 32px rgba(16,24,40,.16); min-width:170px; padding:5px; display:flex; flex-direction:column; }
details.menu > div button { border:0; box-shadow:none; justify-content:flex-start; font-weight:500; font-size:13px; padding:7px 10px; min-height:0; border-radius:6px; }
#userMenu > summary { border:0; background:none; padding:2px 4px; font-size:13px; }
.userchip { display:flex; gap:10px; align-items:center; text-align:left; line-height:1.25; }
.userchip .lbl { font-size:11.5px; text-transform:capitalize; }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--primary); color:var(--primary-ink); display:grid; place-items:center; font-weight:700; font-size:12.5px; }

/* ---------- Dialog ---------- */
dialog { background:var(--panel); color:var(--text); border:1px solid var(--line); padding:0; border-radius:14px; width:min(560px, calc(100vw - 32px)); box-shadow:0 24px 64px rgba(0,0,0,.25); }
dialog::backdrop { background:rgba(15,23,42,.55); backdrop-filter:blur(2px); }
dialog form { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:24px; }
dialog h2 { font-size:18px; }
.full { grid-column:1/-1; }
.preview { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; padding:14px 16px; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; font-variant-numeric:tabular-nums; font-size:13px; }
.preview span { display:flex; justify-content:space-between; gap:8px; color:var(--muted); }
.preview b { color:var(--text); font-weight:600; }
.actions { grid-column:1/-1; display:flex; justify-content:flex-end; gap:8px; padding-top:4px; }
.err { color:var(--neg); font-size:12.5px; min-height:1em; }
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#111827; color:#fff; padding:10px 16px; border-radius:8px; z-index:100; max-width:calc(100vw - 32px); box-shadow:0 12px 32px rgba(0,0,0,.25); font-size:13px; }

/* ---------- Masuk ---------- */
.auth { min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr; background:var(--panel); }
.auth .hero { background:radial-gradient(1200px 600px at 0% 0%, #1e3a8a 0%, #0f172a 55%); color:#e2e8f0; padding:48px 56px; display:flex; flex-direction:column; justify-content:space-between; }
.auth .hero .brand { padding:0; }
.auth .hero h1 { font-size:40px; line-height:1.1; color:#fff; letter-spacing:-.025em; }
.auth .hero p { color:#94a3b8; max-width:440px; font-size:15px; }
.auth .hero .facts { display:flex; gap:28px; font-size:12.5px; color:#94a3b8; }
.auth .hero .facts b { display:block; color:#fff; font-size:15px; }
.auth form { align-self:center; justify-self:center; width:min(380px, 100% - 32px); display:flex; flex-direction:column; gap:16px; }
.auth form h1 { font-size:26px; }
.auth-logo { width:96px; height:auto; align-self:flex-start; margin-bottom:8px; }
.auth form button.primary { min-height:42px; font-size:14px; }
.check { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); }
[hidden] { display:none !important; }

@media (max-width:860px) {
  #app { flex-direction:column; }
  aside { width:auto; height:auto; position:static; padding:12px 16px; gap:4px; }
  .brand { padding:0 0 8px; } .navlbl, .side-foot { display:none; }
  nav { display:flex; gap:4px; overflow-x:auto; } nav a { white-space:nowrap; }
  .head { padding:12px 16px; } .content { padding:16px 16px 40px; }
  .userchip > span:last-child { display:none; }
  dialog form { grid-template-columns:1fr; }
  .auth { grid-template-columns:1fr; } .auth .hero { padding:28px 20px; gap:20px; } .auth .hero h1 { font-size:30px; } .auth .hero .facts { display:none; }
  .auth form { padding:28px 0; }
}