/* LEVE Finance -- tampilan formal putih (laporan keuangan), aksen hijau LEVE. HP: tab atas bisa digeser,
   laptop (>= 1024px): menu samping. */
:root{
  --bg:#FFFFFF; --soft:#F5F7F4; --line:#E1E7DF; --ink:#16211A; --muted:#667369;
  --brand:#2F4A36; --brand-2:#E8F0E7; --pos:#1E7A46; --neg:#B42318; --warn:#9A6200; --warn-bg:#FFF5DB;
  --font:'Poppins', system-ui, -apple-system, sans-serif; --mono:'IBM Plex Mono', ui-monospace, monospace;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--bg); color:var(--ink); font:14px/1.55 var(--font); -webkit-font-smoothing:antialiased; }
[hidden]{ display:none !important; }
button,input,select,textarea{ font:inherit; color:inherit; }
.muted{ color:var(--muted); } .small{ font-size:12px; } .err{ color:var(--neg); min-height:1.2em; margin:0; font-size:13px; }
.num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.pos{ color:var(--pos); } .neg{ color:var(--neg); }

.brand{ font-weight:700; font-size:18px; letter-spacing:.02em; color:var(--brand); }
.brand span{ font-weight:500; color:var(--muted); }

/* Login */
.login{ min-height:100vh; display:grid; place-items:center; padding:24px 16px; background:var(--soft); }
.login-card{ width:100%; max-width:340px; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:28px 24px; display:flex; flex-direction:column; gap:12px; }
.login-card input{ font:500 22px var(--mono); letter-spacing:.3em; text-align:center; padding:12px; border:1px solid var(--line); border-radius:10px; }

/* Tombol */
.btn{ border:1px solid var(--line); background:var(--bg); border-radius:9px; padding:9px 14px; font-weight:600; cursor:pointer; }
.btn.primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn.danger{ color:var(--neg); }
.btn:disabled{ opacity:.6; cursor:default; }
.btn:focus-visible,.icon:focus-visible,.nav button:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.icon{ border:1px solid var(--line); background:var(--bg); border-radius:8px; width:34px; height:34px; cursor:pointer; font-size:16px; line-height:1; }
.link{ border:none; background:none; color:var(--brand); font-weight:600; cursor:pointer; padding:0; }

/* Kerangka */
.app{ display:flex; flex-direction:column; min-height:100vh; }
.side{ position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--line); padding:10px 16px 0; }
.side .brand{ margin-bottom:6px; }
.nav{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; }
.nav::-webkit-scrollbar{ display:none; }
.nav button{ flex:none; border:none; background:none; padding:9px 12px; border-bottom:2px solid transparent; font-weight:500; color:var(--muted); cursor:pointer; white-space:nowrap; }
.nav button.on{ color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }
.badge{ display:inline-block; min-width:18px; padding:0 5px; border-radius:99px; background:var(--neg); color:#fff; font-size:11px; text-align:center; margin-left:4px; }
.side-foot{ display:none; }
.main{ flex:1; padding:16px 16px 60px; min-width:0; }
.top{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end; justify-content:space-between; margin-bottom:16px; }
.top h1{ margin:0; font-size:22px; font-weight:700; }
.periode{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.periode select,.pcustom input{ border:1px solid var(--line); border-radius:8px; padding:6px 8px; background:var(--bg); }
.plabel{ font-weight:600; min-width:150px; text-align:center; }
.loading{ padding:40px 0; text-align:center; color:var(--muted); }

@media (min-width:1024px){
  .app{ flex-direction:row; }
  .side{ width:230px; height:100vh; border-bottom:none; border-right:1px solid var(--line); padding:22px 14px; display:flex; flex-direction:column; }
  .side .brand{ margin:0 8px 18px; }
  .nav{ flex-direction:column; overflow:visible; }
  .nav button{ text-align:left; border-bottom:none; border-left:3px solid transparent; border-radius:0 8px 8px 0; padding:9px 12px; }
  .nav button.on{ border-left-color:var(--brand); background:var(--brand-2); }
  .side-foot{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; padding:12px 8px 0; border-top:1px solid var(--line); font-size:13px; }
  .main{ padding:26px 32px 60px; }
}

/* Kartu & angka ringkas */
.grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); margin-bottom:18px; }
.tile{ border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.tile .k{ font-size:12px; color:var(--muted); font-weight:500; }
.tile .v{ font-size:22px; font-weight:700; margin:2px 0; }
.tile .d{ font-size:12px; }
.card{ border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:18px; min-width:0; }
.card h2{ font-size:15px; margin:0 0 12px; font-weight:600; }
.card .sub{ margin:-8px 0 12px; font-size:12.5px; color:var(--muted); }
.row2{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:900px){ .row2{ grid-template-columns:1fr 1fr; } }
.alert{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:var(--warn-bg); border-radius:10px; padding:10px 14px; margin-bottom:12px; }
.alert b{ color:var(--warn); }

/* Tabel */
.tbl{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
th,td{ padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th{ font-size:11.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; background:var(--soft); white-space:nowrap; }
td.r,th.r{ text-align:right; }
tr.total td{ font-weight:700; border-top:2px solid var(--ink); }
tr.clickable{ cursor:pointer; } tr.clickable:hover td{ background:var(--soft); }
.tag{ display:inline-block; font-size:11px; font-weight:600; padding:1px 7px; border-radius:99px; background:var(--soft); color:var(--muted); }
.tag.auto{ background:var(--brand-2); color:var(--brand); }
.tag.warn{ background:var(--warn-bg); color:var(--warn); }
.tag.ok{ background:#E3F4EA; color:var(--pos); }
.empty{ padding:24px; text-align:center; color:var(--muted); }

/* Filter */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.filters select,.filters input{ border:1px solid var(--line); border-radius:8px; padding:7px 9px; background:var(--bg); min-width:0; }
.filters input[type=search]{ flex:1 1 180px; }
.bar-actions{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }

/* Grafik */
.chart{ width:100%; height:auto; display:block; }
.chart text{ fill:var(--muted); font:11px var(--font); }
.hbar{ display:grid; grid-template-columns:minmax(60px,110px) 1fr auto; gap:8px 10px; align-items:center; font-size:13px; }
.hbar .track{ height:12px; background:var(--soft); border-radius:6px; position:relative; overflow:hidden; }
.hbar .fill{ position:absolute; top:0; bottom:0; border-radius:6px; background:var(--brand); }
.hbar .fill.neg{ background:var(--neg); }

/* Panel form */
.panel-bg{ position:fixed; inset:0; background:rgba(15,25,18,.4); z-index:80; }
.panel{ position:fixed; left:0; right:0; bottom:0; max-height:92vh; z-index:81; background:var(--bg); border-radius:16px 16px 0 0; display:flex; flex-direction:column; box-shadow:0 -10px 30px rgba(0,0,0,.12); }
.panel-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line); font-weight:600; font-size:16px; }
.panel-body{ overflow-y:auto; padding:16px 18px 28px; display:flex; flex-direction:column; gap:12px; }
@media (min-width:1024px){ .panel{ left:auto; top:0; width:460px; max-height:none; border-radius:0; } }
.fld{ display:flex; flex-direction:column; gap:4px; }
.fld label{ font-size:12.5px; font-weight:600; }
.fld input,.fld select,.fld textarea{ border:1px solid var(--line); border-radius:8px; padding:9px 10px; background:var(--bg); width:100%; }
.fld .hint{ font-size:12px; color:var(--muted); }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.alok{ display:grid; grid-template-columns:1fr 1fr 34px; gap:6px; align-items:center; }
.panel-actions{ display:flex; gap:8px; justify-content:space-between; margin-top:6px; }

.toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 16px; border-radius:10px; font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s; z-index:99; }
.toast.show{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .toast{ transition:none; } }