/* /assets/theme.css — shared design system for Endrich Tools */
:root, :root[data-theme="dark"]{
  --bg:#090E1A; --surface:#121A2E; --surface-2:#0D1424; --surface-soft:#0F1830; --input-focus:#16213C;
  --line:rgba(255,255,255,.09);
  --text:#F3F5FA; --muted:#8B93A8;
  --accent:#2DD9A8; --accent-soft:rgba(45,217,168,.14);
  --accent-2:#3B6FF6; --accent-2-soft:rgba(59,111,246,.14); --accent-2-text:#8FB3FF;
  --green-ok:#2DD9A8; --amber:#F2B84B; --red:#F2716B;
  --soft-neutral:rgba(255,255,255,.06); --soft-green:rgba(45,217,168,.14);
  --soft-blue:rgba(59,111,246,.14); --soft-red:rgba(242,113,107,.14); --soft-amber:rgba(242,184,75,.14);
  --radius:18px; --radius-sm:12px;
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Work Sans',system-ui,sans-serif;
}
:root[data-theme="light"]{
  --bg:#F5F7FB; --surface:#FFFFFF; --surface-2:#FFFFFF; --surface-soft:#F7F9FC; --input-focus:#FFFFFF;
  --line:#E4E8F0;
  --text:#10151F; --muted:#6B7280;
  --accent:#16A38A; --accent-soft:#E3FBF3;
  --accent-2:#2E5FE0; --accent-2-soft:#E8EEFE; --accent-2-text:#2E5FE0;
  --green-ok:#16A38A; --amber:#B8860B; --red:#C0392B;
  --soft-neutral:#ECEEF3; --soft-green:#DFF7EF;
  --soft-blue:#E8EEFE; --soft-red:#FBEAE8; --soft-amber:#FBF0DA;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
button, input, select, textarea{font-family:inherit;}
html,body{margin:0; padding:0; height:100%; overscroll-behavior-y:none;}
body{
  font-family:var(--font-body); background:var(--bg); color:var(--text);
  display:flex; justify-content:center;
}

/* ---------- access gate (injected by gate.js) ---------- */
#dg-gate{
  width:100%; max-width:460px; min-height:100vh; background:var(--surface-2); color:var(--text);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 28px; text-align:center; box-shadow:0 0 60px rgba(0,0,0,.35);
}
#dg-gate .mark{
  width:64px; height:64px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:24px; color:var(--surface-2);
  margin-bottom:20px;
}
#dg-gate h1{font-family:var(--font-display); font-size:22px; margin:0 0 8px;}
#dg-gate p{font-size:13px; color:var(--text); opacity:.7; margin:0 0 26px; line-height:1.5;}
#dg-gate input{
  width:100%; padding:14px 16px; border-radius:12px; border:1.5px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:var(--text); font-family:var(--font-display);
  font-size:18px; font-weight:700; text-align:center; letter-spacing:1px; outline:none;
  text-transform:uppercase; margin-bottom:14px;
}
#dg-gate input::placeholder{color:var(--text); opacity:.35; font-family:var(--font-body); font-weight:400; letter-spacing:0;}
#dg-gate input:focus{border-color:var(--accent);}
#dg-gate button{
  width:100%; padding:14px; border-radius:12px; border:none; background:var(--accent);
  color:var(--surface-2); font-weight:700; font-size:14px; font-family:var(--font-body); cursor:pointer;
}
#dg-gate button:disabled{opacity:.6;}
#dg-gate .err{color:var(--red); font-size:12.5px; margin-top:12px; min-height:16px; font-weight:600;}
#dg-gate .foot{font-size:11px; color:var(--text); opacity:.4; margin-top:28px;}

#dg-checking{
  width:100%; max-width:460px; min-height:100vh; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center;
}
#dg-checking .mark{
  width:52px; height:52px; border-radius:50%; background:var(--accent); display:flex;
  align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800;
  color:var(--surface-2); font-size:20px; opacity:.85;
}

#shell{display:none;}
#shell.unlocked{
  width:100%; max-width:460px; min-height:100vh; background:var(--bg);
  display:flex; flex-direction:column; position:relative;
  box-shadow:0 0 60px rgba(0,0,0,.35);
}

/* ---------- top bar ---------- */
#topbar{
  background:var(--surface-2); color:var(--text); padding:14px 18px;
  padding-top:calc(14px + env(safe-area-inset-top));
  display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:20;
  border-bottom:1px solid var(--line);
}
#topbar .mark{
  width:32px; height:32px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--surface-2);
  flex-shrink:0;
}
#topbar .titles{line-height:1.15;}
#topbar .titles b{font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:.2px;}
#topbar .titles span{display:block; font-size:11px; color:var(--accent-2-text); font-weight:600; letter-spacing:.4px;}

/* ---------- main scroll area ---------- */
#main{flex:1; overflow-y:auto; padding:16px 16px 100px; -webkit-overflow-scrolling:touch;}
.view{display:none; animation:fadeIn .18s ease;}
.view.active{display:block;}
@keyframes fadeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

h2.page-title{
  font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--text);
  margin:4px 0 2px;
}
p.page-sub{font-size:12.5px; color:var(--muted); margin:0 0 16px; line-height:1.4;}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; margin-bottom:14px;
}
.card-title{
  font-size:11px; font-weight:700; color:var(--accent-2-text); letter-spacing:.6px;
  text-transform:uppercase; margin:0 0 12px;
}

/* hero calculator */
.hero{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:20px 18px;
  margin-bottom:14px; color:var(--text);
}
.hero label{font-size:11.5px; color:var(--accent-2-text); font-weight:600; letter-spacing:.3px;}
.hero-input-row{display:flex; align-items:center; gap:8px; margin-top:8px;}
.hero-input-row span.prefix{font-family:var(--font-display); font-size:20px; color:var(--text); opacity:.7;}
.hero-input-row input{
  flex:1; background:transparent; border:none; border-bottom:2px solid rgba(255,255,255,.2);
  color:var(--text); font-family:var(--font-display); font-size:26px; font-weight:700;
  padding:6px 2px; outline:none; min-width:0;
}
.hero-input-row input:focus{border-bottom-color:var(--accent);}
.hero-result{margin-top:16px; padding-top:14px; border-top:1px dashed var(--line);}
.hero-result .num{font-family:var(--font-display); font-size:34px; font-weight:800; color:var(--accent);}
.hero-result .lbl{font-size:11.5px; color:var(--text); opacity:.75;}

/* assumption / setting rows */
.arow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line);}
.arow:last-child{border-bottom:none;}
.arow .name{font-size:13.5px; font-weight:500;}
.arow input{
  width:96px; text-align:right; padding:7px 9px; border-radius:9px;
  border:1px solid var(--line); background:var(--surface-soft); color:var(--text);
  font-weight:700; font-family:var(--font-body); font-size:13.5px; outline:none;
}
.arow input:focus{border-color:var(--accent);}
.arow.total{padding-top:12px; margin-top:2px; border-top:2px solid var(--line); border-bottom:none;}
.arow.total .name{font-weight:700;}
.arow .name.locked{color:var(--muted);}
.arow .value-locked{font-weight:700; color:var(--text); font-size:13.5px;}
.check-line{font-size:11.5px; margin-top:8px; font-weight:600;}
.check-ok{color:var(--green-ok);}
.check-bad{color:var(--red);}

/* generic list row (month lists, item lists, etc.) */
.mrow{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line);}
.mrow:last-child{border-bottom:none;}
.mrow .mname{width:64px; font-size:12.5px; font-weight:600; color:var(--text); flex-shrink:0;}
.mrow .minput-wrap{flex:1; min-width:0;}
.mrow input.minput{
  width:100%; padding:8px 10px; border-radius:9px; border:1px solid var(--line);
  font-size:13px; font-family:var(--font-body); color:var(--text); outline:none; background:var(--surface-soft);
}
.mrow input.minput:focus{border-color:var(--accent); background:var(--input-focus);}
.mrow .msub{font-size:10.5px; color:var(--muted); margin-top:3px; line-height:1.3;}
.status-chip{
  flex-shrink:0; font-size:10.5px; font-weight:700; padding:6px 10px; border-radius:999px;
  border:none; cursor:pointer; font-family:var(--font-body);
}
.status-belum{background:var(--soft-neutral); color:var(--muted);}
.status-sudah{background:var(--soft-green); color:var(--green-ok);}

.totals-row{display:flex; justify-content:space-between; align-items:baseline; padding:12px 0 2px;}
.totals-row .t-lbl{font-size:12px; color:var(--muted); font-weight:600;}
.totals-row .t-val{font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--text);}

.status-banner{
  border-radius:var(--radius-sm); padding:12px 14px; font-size:12.5px; font-weight:600; line-height:1.4;
  margin-top:4px;
}
.status-banner.ok{background:var(--soft-green); color:var(--green-ok);}
.status-banner.warn{background:var(--soft-red); color:var(--red);}

/* eligibility question groups (e.g. Pajak tab) */
.qgroup{margin-bottom:14px;}
.qgroup:last-of-type{margin-bottom:10px;}
.qlabel{font-size:12px; font-weight:700; color:var(--text); margin-bottom:8px;}
.qoptions{display:flex; flex-wrap:wrap; gap:8px;}
.qbtn{
  border:1.5px solid var(--line); background:var(--surface-soft); color:var(--text);
  border-radius:999px; padding:8px 14px; font-size:12.5px; font-weight:600;
  font-family:var(--font-body); cursor:pointer; transition:all .15s ease;
}
.qbtn.active{background:var(--accent-2); border-color:var(--accent-2); color:#fff;}
.qcheck-row{display:flex; align-items:flex-start; gap:10px; font-size:12.5px; color:var(--text); line-height:1.4; margin-top:4px; cursor:pointer;}
.qcheck-row input{margin-top:3px; flex-shrink:0;}

/* small explanatory caption under a row (doesn't warrant a full status-banner) */
.caption-note{font-size:10.5px; color:var(--muted); margin:-4px 0 10px; line-height:1.4;}

/* two-box target comparison (e.g. Dana Darurat minimum/ideal) */
.darurat-target-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0;}
.darurat-target-box{background:var(--soft-amber); border-radius:var(--radius-sm); padding:10px 12px; text-align:center;}
.darurat-target-box .lbl{font-size:10px; color:var(--amber); font-weight:700; text-transform:uppercase; letter-spacing:.3px;}
.darurat-target-box .val{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--text); margin-top:4px;}

/* 2-option toggle switch */
.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0; flex-wrap:wrap;}
.toggle-row > span{font-size:12px; color:var(--muted); font-weight:600;}
.toggle-switch{display:flex; background:var(--soft-neutral); border-radius:999px; padding:3px; gap:2px;}
.toggle-opt{border:none; background:none; padding:6px 12px; border-radius:999px; font-size:11.5px; font-weight:700; font-family:var(--font-body); color:var(--muted); cursor:pointer;}
.toggle-opt.active{background:var(--accent-2); color:#fff;}

/* progress bar */
.progress-wrap{margin-top:10px;}
.progress-track{height:10px; border-radius:999px; background:var(--soft-neutral); overflow:hidden;}
.progress-fill{height:100%; background:linear-gradient(90deg,var(--accent-2),var(--accent)); border-radius:999px; transition:width .3s ease;}
.progress-label{display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); margin-top:6px; font-weight:600;}

/* stat cards */
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px;}
.stat-grid-4{grid-template-columns:repeat(4,1fr);}
.stat-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:10px 8px; text-align:center;}
.stat-card .v{font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--text); line-height:1.2;}
.stat-card .l{font-size:9.5px; color:var(--muted); font-weight:600; margin-top:2px; line-height:1.2;}

.add-btn{
  width:100%; background:linear-gradient(180deg,var(--accent-2),#2F5FE0); color:#fff; border:none; border-radius:var(--radius-sm);
  padding:13px; font-family:var(--font-body); font-weight:700; font-size:13.5px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:16px;
}
.add-btn:active{opacity:.85;}

.client-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:13px 14px; margin-bottom:10px; cursor:pointer;
}
.client-card .row1{display:flex; justify-content:space-between; align-items:flex-start; gap:8px;}
.client-card .nama{font-weight:700; font-size:14px; color:var(--text);}
.client-card .proyek{font-size:12px; color:var(--muted); margin-top:1px;}
.client-card .nilai{font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--text); text-align:right; flex-shrink:0;}
.client-card .sisa-lbl{font-size:9.5px; color:var(--muted); text-align:right;}
.row2{display:flex; justify-content:space-between; align-items:center; margin-top:10px;}
.badge-group{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.badge{font-size:10.5px; font-weight:700; padding:5px 10px; border-radius:999px;}
.badge-belum{background:var(--soft-neutral); color:var(--muted);}
.badge-menunggu{background:var(--soft-amber); color:var(--amber);}
.badge-partial{background:var(--soft-blue); color:var(--accent-2-text);}
.badge-lunas{background:var(--soft-green); color:var(--green-ok);}
.overdue-tag{font-size:10.5px; color:var(--red); font-weight:700;}
.empty-state{text-align:center; padding:40px 20px; color:var(--muted);}
.empty-state .big{font-size:34px; margin-bottom:8px;}
.empty-state p{font-size:13px; line-height:1.5; margin:4px 0 0;}

/* bottom sheet */
#overlay{
  position:fixed; inset:0; background:rgba(4,7,14,.6); z-index:40; opacity:0; pointer-events:none;
  transition:opacity .2s ease; display:flex; justify-content:center;
}
#overlay.open{opacity:1; pointer-events:auto;}
#sheet{
  position:fixed; left:50%; bottom:0; z-index:50; background:var(--surface-2);
  width:100%; max-width:460px; border-radius:20px 20px 0 0; border:1px solid var(--line); border-bottom:none;
  padding:18px 18px calc(20px + env(safe-area-inset-bottom));
  transition:transform .25s ease; max-height:88vh; overflow-y:auto;
  transform:translate(-50%,105%);
}
#sheet.open{transform:translate(-50%,0);}
#sheet .sheet-handle{width:36px; height:4px; background:var(--line); border-radius:99px; margin:0 auto 14px;}
#sheet h3{font-family:var(--font-display); font-size:17px; margin:0 0 14px; color:var(--text);}
.field{margin-bottom:12px;}
.field label{display:block; font-size:11.5px; font-weight:700; color:var(--muted); margin-bottom:5px; letter-spacing:.2px;}
.field input, .field select{
  width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--line);
  font-family:var(--font-body); font-size:14px; color:var(--text); outline:none; background:var(--surface-soft);
}
.field input:focus, .field select:focus{border-color:var(--accent);}
.field .field-err{font-size:11px; color:var(--red); margin-top:5px; font-weight:600; min-height:14px;}
.field-row{display:flex; gap:10px;}
.field-row .field{flex:1;}
.sheet-actions{display:flex; gap:10px; margin-top:18px;}
.btn{flex:1; padding:13px; border-radius:12px; border:none; font-weight:700; font-size:13.5px; font-family:var(--font-body); cursor:pointer;}
.btn-primary{background:linear-gradient(180deg,var(--accent-2),#2F5FE0); color:#fff;}
.btn-ghost{background:var(--soft-neutral); color:var(--text);}
.btn-danger{background:var(--soft-red); color:var(--red);}

/* bottom nav */
#bottomnav{
  position:sticky; bottom:0; z-index:20; background:var(--surface-2);
  border-top:1px solid var(--line); display:flex;
  padding-bottom:env(safe-area-inset-bottom);
}
.navbtn{
  flex:1; border:none; background:none; padding:10px 2px 8px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--muted);
  font-family:var(--font-body); font-size:9.5px; font-weight:600;
}
.navbtn svg{width:20px; height:20px;}
.navbtn.active{color:var(--text);}
.navbtn.active svg{color:var(--accent);}
.navbtn .dot{width:4px; height:4px; border-radius:50%; background:var(--accent); opacity:0; margin-top:-2px;}
.navbtn.active .dot{opacity:1;}

#loading{
  position:fixed; inset:0; background:var(--bg); z-index:100; display:flex; flex-direction:column;
  align-items:center; justify-content:center; color:var(--accent); gap:12px;
}
#loading .mark{width:52px; height:52px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; color:var(--surface-2); font-size:20px;}
#loading span{font-size:12px; color:var(--text); opacity:.7; font-weight:600; letter-spacing:.3px;}

/* ---------- Beranda (dashboard home) ---------- */
.greeting-card{
  background:linear-gradient(135deg,var(--surface-2),var(--accent-2-soft)); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px; margin-bottom:16px;
}
.greeting-card .hi{font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--text); margin-bottom:4px;}
.greeting-card .sub{font-size:12.5px; color:var(--muted); line-height:1.4; max-width:280px;}

.section-label{font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin:4px 0 10px;}

.quick-stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px;}
.quick-stat-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px;}
.quick-stat-card .icon{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:10px;}
.quick-stat-card .icon svg{width:17px; height:17px;}
.quick-stat-card .icon.blue{background:var(--accent-2-soft); color:var(--accent-2);}
.quick-stat-card .icon.green{background:var(--accent-soft); color:var(--accent);}
.quick-stat-card .val{font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--text); line-height:1.2;}
.quick-stat-card .lbl{font-size:11px; color:var(--muted); font-weight:600; margin-top:2px;}
.quick-stat-card .sub{font-size:10px; color:var(--muted); margin-top:4px;}

.tool-link-row{
  display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:14px; margin-bottom:10px; cursor:pointer;
}
.tool-link-row .icon{
  width:40px; height:40px; border-radius:12px; background:var(--accent-2-soft); color:var(--accent-2);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.tool-link-row .icon svg{width:19px; height:19px;}
.tool-link-row .body{flex:1; min-width:0;}
.tool-link-row .title{font-weight:700; font-size:14px; color:var(--text);}
.tool-link-row .desc{font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.35;}
.tool-link-row .chev{color:var(--muted); flex-shrink:0;}

/* ---------- Profil ---------- */
.profile-header{display:flex; align-items:center; gap:14px; margin-bottom:20px;}
.profile-avatar{
  width:56px; height:56px; border-radius:50%; background:var(--accent); color:var(--surface-2);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display);
  font-weight:800; font-size:20px; flex-shrink:0;
}
.profile-header .name{font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--text);}
.profile-header .hint{font-size:11.5px; color:var(--muted); margin-top:2px;}

::-webkit-scrollbar{width:0; height:0;}