/* ==============================================================
   KALKULATOR UMROH MANDIRI - versi standalone, siap digabung
   - Seluruh markup berada di satu elemen: <div id="ku">
   - Seluruh gaya diberi ruang-nama di bawah #ku agar tidak bentrok
     dengan gaya halaman induk
   - Atribut tema (data-theme) dipasang pada #ku, bukan pada <html>
   - Pustaka luar: SheetJS (Excel) dan jsPDF (kuotasi PDF)
   ============================================================== */

/* ===========================================================================
   LAPISAN 1 — DESIGN TOKEN
   Layout: satu kolom terpusat. Rail langkah di atas, satu kartu di tengah,
   total menempel di bawah layar. Halaman admin memakai kerangka yang sama.
   Di produksi seluruh nilai di blok ini berasal dari tabel `themes` dan
   disajikan lewat GET /api/v1/theme.css.
   =========================================================================== */
#ku{
  color-scheme: light;
  --brand:#146356;  --brand-ink:#0b3d34;  --brand-wash:#e4efec;
  --accent:#9a6a12;  --accent-wash:rgba(154,106,18,.10);
  --bg:#f2f6f4;  --surface:#ffffff;  --surface-2:#f7faf9;
  --ink:#0d1f1b;  --ink-soft:#5d6f6a;  --rule:#dde6e3;
  --flag:#8a5a00;  --flag-bg:#fdf4e0;
  --ok:#126b4f;    --ok-bg:#e3f3ec;

  --radius:14px;  --radius-sm:9px;
  --lift:0 1px 2px rgba(11,61,52,.04), 0 10px 30px rgba(11,61,52,.07);

  --f-display:'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --f-body:'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-num:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark){
#ku:not([data-theme="light"]){
    color-scheme: dark;
    --brand:#5fd3b9; --brand-ink:#8eecd4; --brand-wash:#14312b;
    --accent:#e8b55c; --accent-wash:rgba(232,181,92,.13);
    --bg:#071311; --surface:#102421; --surface-2:#0c1b19;
    --ink:#e6f0ed; --ink-soft:#8ca39d; --rule:#1d3a35;
    --flag:#e8b55c; --flag-bg:#2a2214;
    --ok:#5fd3b9; --ok-bg:#12302a;
    --lift:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.4);
  }
}
#ku[data-theme="dark"]{
  color-scheme: dark;
  --brand:#5fd3b9; --brand-ink:#8eecd4; --brand-wash:#14312b;
  --accent:#e8b55c; --accent-wash:rgba(232,181,92,.13);
  --bg:#071311; --surface:#102421; --surface-2:#0c1b19;
  --ink:#e6f0ed; --ink-soft:#8ca39d; --rule:#1d3a35;
  --flag:#e8b55c; --flag-bg:#2a2214;
  --ok:#5fd3b9; --ok-bg:#12302a;
  --lift:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.4);
}
/* ===========================================================================
   LAPISAN 2 — KOMPONEN
   =========================================================================== */
#ku, #ku *{box-sizing:border-box}
#ku{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased}
#ku h1, #ku h2, #ku h3{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.015em;line-height:1.15}
#ku .n{font-family:var(--f-num);font-variant-numeric:tabular-nums}
#ku .bar{position:static;z-index:30;
  background:var(--surface);border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:10px;padding:10px 16px;flex-wrap:wrap}
#ku .mark{font-family:var(--f-display);font-weight:800;font-size:17px;color:var(--brand);
  margin-right:auto;display:flex;align-items:center;gap:8px}
#ku .mark em{font-style:normal;width:7px;height:7px;border-radius:50%;background:var(--accent)}
#ku .tog{border:1px solid var(--rule);background:var(--surface-2);color:var(--ink);
  border-radius:99px;padding:6px 13px;font:600 13px var(--f-body);cursor:pointer}
#ku .tog:hover{border-color:var(--brand)}
#ku .tog:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#ku .tog.on{background:var(--brand);border-color:var(--brand);color:var(--surface)}
#ku[data-theme="dark"] .tog.on{color:var(--bg)}
@media (prefers-color-scheme: dark){
#ku:not([data-theme="light"]) .tog.on{color:var(--bg)}}
#ku .shell{max-width:800px;margin:0 auto;padding-inline:16px;padding-block:22px 28px}
#ku .intro{margin-bottom:20px}
#ku .eyebrow{font:700 11px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
#ku .intro h1, #ku .intro h2{font-size:clamp(25px,5.4vw,33px);margin:7px 0 9px}
#ku .intro p{color:var(--ink-soft);margin:0;max-width:60ch;font-size:14.5px}
#ku .rail{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;margin-bottom:14px}
#ku .rail button{flex:0 0 auto;display:flex;align-items:center;gap:7px;white-space:nowrap;
  border:1px solid var(--rule);background:var(--surface);color:var(--ink-soft);
  border-radius:99px;padding:7px 13px;font:600 12.5px var(--f-body);cursor:pointer}
#ku .rail button i{font-style:normal;font-family:var(--f-num);font-size:11px;opacity:.65}
#ku .rail button:hover{border-color:var(--brand);color:var(--ink)}
#ku .rail button.now{background:var(--brand);border-color:var(--brand);color:var(--surface)}
#ku .rail button.past{border-color:var(--brand);color:var(--brand)}
#ku[data-theme="dark"] .rail button.now{color:var(--bg)}
@media (prefers-color-scheme: dark){
#ku:not([data-theme="light"]) .rail button.now{color:var(--bg)}}
#ku .sheet{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:20px;box-shadow:var(--lift)}
#ku .sheet h2{font-size:20px}
#ku .sheet .lede{color:var(--ink-soft);font-size:13.5px;margin:6px 0 18px;max-width:58ch}
#ku .pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:12px}
#ku .fld{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
#ku .fld>label, #ku .fld>span.lab{font:700 12px var(--f-body)}
#ku .fld .hint{font-size:11.5px;color:var(--ink-soft);font-weight:500}
#ku .step{display:flex;border:1px solid var(--rule);border-radius:var(--radius-sm);
  overflow:hidden;background:var(--surface-2)}
#ku .step button{width:46px;border:0;background:var(--brand-wash);color:var(--brand);
  font:600 20px var(--f-body);cursor:pointer;line-height:1}
#ku .step button:hover{background:var(--brand);color:var(--surface)}
#ku .step button:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
#ku[data-theme="dark"] .step button:hover{color:var(--bg)}
@media (prefers-color-scheme: dark){
#ku:not([data-theme="light"]) .step button:hover{color:var(--bg)}}
#ku .step input{flex:1;min-width:0;border:0;background:transparent;text-align:center;color:var(--ink);
  font:600 15px var(--f-num);font-variant-numeric:tabular-nums}
#ku select, #ku input[type=text], #ku textarea{width:100%;padding:10px 12px;border:1px solid var(--rule);
  border-radius:var(--radius-sm);background:var(--surface-2);color:var(--ink);
  font:400 14px var(--f-body)}
#ku select:focus-visible, #ku input:focus-visible, #ku textarea:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
#ku .picks{display:flex;flex-direction:column;gap:9px}
#ku .pick{display:flex;gap:11px;align-items:flex-start;padding:12px 13px;cursor:pointer;
  border:1.5px solid var(--rule);border-radius:var(--radius-sm);background:var(--surface-2)}
#ku .pick:hover{border-color:var(--brand)}
#ku .pick.sel{border-color:var(--brand);background:var(--brand-wash)}
#ku .pick input{margin:3px 0 0;accent-color:var(--brand);flex:0 0 auto}
#ku .pick .body{flex:1;min-width:0}
#ku .pick .nm{font-weight:700;font-size:14px}
#ku .pick .mt{color:var(--ink-soft);font-size:12.5px;margin-top:2px}
#ku .pick .amt{flex:0 0 auto;text-align:right}
#ku .pick .amt b{font-family:var(--f-num);font-size:13.5px;color:var(--brand);font-variant-numeric:tabular-nums}
#ku .pick .amt small{display:block;color:var(--ink-soft);font-size:11px}
#ku .rate{color:var(--accent);letter-spacing:1.5px;font-size:11px}
#ku .flag{background:var(--flag-bg);border:1px solid var(--flag);color:var(--flag);
  border-radius:var(--radius-sm);padding:10px 12px;font-size:12.5px;margin-top:13px;line-height:1.5}
#ku .good{background:var(--ok-bg);border:1px solid var(--ok);color:var(--ok);
  border-radius:var(--radius-sm);padding:11px 13px;font-size:12.5px;margin-top:14px;line-height:1.6}
#ku .good b{font-family:var(--f-num)}
#ku .walink{margin-top:8px;word-break:break-all}
#ku .walink a{color:inherit;font-family:var(--f-num);font-size:13px;font-weight:600}
#ku .wamsg{margin-top:9px}
#ku .wamsg summary{cursor:pointer;font-weight:600;font-size:12.5px}
#ku .wamsg textarea{margin-top:8px;font:400 12px var(--f-body);line-height:1.5;resize:vertical}
#ku .docref{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border:1px dashed var(--rule);border-radius:var(--radius-sm);
  padding:9px 12px;font-size:12.5px;color:var(--ink-soft);margin-bottom:15px}
#ku .docref b{color:var(--ink);font-family:var(--f-num)}
#ku .ledger{border-top:1px solid var(--rule)}
#ku .entry{display:flex;gap:14px;justify-content:space-between;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--rule);font-size:13.5px}
#ku .entry .what{color:var(--ink-soft);min-width:0}
#ku .entry b{font-family:var(--f-num);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px}
#ku .entry.adm .what{color:var(--ink)}
#ku .mix{margin-top:16px}
#ku .mix h3{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-soft);
  font-family:var(--f-body);font-weight:700;margin-bottom:8px}
#ku .mixbar{display:flex;height:11px;border-radius:99px;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--rule)}
#ku .mixbar i{display:block;height:100%}
#ku .mixkey{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:9px;font-size:11.5px;color:var(--ink-soft)}
#ku .mixkey span{display:flex;align-items:center;gap:6px}
#ku .mixkey u{width:9px;height:9px;border-radius:3px;text-decoration:none;flex:0 0 auto}
#ku .grand{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;
  background:var(--brand);color:var(--surface);border-radius:var(--radius);padding:16px 18px;margin-top:18px}
#ku[data-theme="dark"] .grand{color:var(--bg)}
@media (prefers-color-scheme: dark){
#ku:not([data-theme="light"]) .grand{color:var(--bg)}}
#ku .grand .cap{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;opacity:.85}
#ku .grand .big{font-family:var(--f-num);font-weight:600;font-size:clamp(23px,5.6vw,30px);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
#ku .grand .each{font-family:var(--f-num);font-weight:600;font-size:16px}
#ku .intake{background:var(--surface-2);border:1px solid var(--rule);
  border-radius:var(--radius-sm);padding:14px;margin-top:16px}
#ku .intake h3{font-size:14px;font-family:var(--f-display)}
#ku .intake>p{color:var(--ink-soft);font-size:12.5px;margin:4px 0 13px}
/* Satu baris aksi dipakai di semua langkah */
#ku .acts{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
#ku .acts>*{flex:1 1 170px;padding:12px 14px;border-radius:var(--radius-sm);text-align:center;
  font:700 14px var(--f-body);cursor:pointer;text-decoration:none;
  border:1.5px solid var(--brand);background:transparent;color:var(--brand)}
#ku .acts>.fill{background:var(--brand);border-color:var(--brand);color:var(--surface)}
#ku[data-theme="dark"] .acts>.fill{color:var(--bg)}
@media (prefers-color-scheme: dark){
#ku:not([data-theme="light"]) .acts>.fill{color:var(--bg)}}
#ku .acts>*:disabled{opacity:.35;cursor:not-allowed}
#ku .acts>*:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#ku .dock{position:sticky;bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:5;margin-top:16px;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--radius);padding:12px 16px;
  display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;box-shadow:var(--lift)}
#ku .dock .cap{font:700 11px var(--f-body);text-transform:uppercase;letter-spacing:.09em;color:var(--ink-soft)}
#ku .dock .tot{font-family:var(--f-num);font-weight:600;font-size:21px;color:var(--brand);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
#ku .dock .ea{font-size:12.5px;color:var(--ink-soft);font-family:var(--f-num);margin-left:auto}
#ku .tail{color:var(--ink-soft);font-size:11.5px;margin-top:22px;line-height:1.7;text-align:center}
/* ---------- Admin ---------- */
#ku .atabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
#ku .card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:18px;box-shadow:var(--lift);margin-bottom:16px}
#ku .card h2{font-size:17px}
#ku .card>p.note{color:var(--ink-soft);font-size:12.5px;margin:5px 0 14px;max-width:66ch}
#ku .tblwrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--radius-sm)}
#ku table.tbl{border-collapse:collapse;width:100%;min-width:520px;font-size:13px}
#ku table.tbl th{background:var(--surface-2);color:var(--ink-soft);text-align:left;
  font:700 11px var(--f-body);text-transform:uppercase;letter-spacing:.07em;
  padding:9px 10px;border-bottom:1px solid var(--rule);white-space:nowrap}
#ku table.tbl td{padding:6px 10px;border-bottom:1px solid var(--rule);vertical-align:middle}
#ku table.tbl tr:last-child td{border-bottom:0}
#ku table.tbl td.r{text-align:right}
#ku table.tbl input{padding:6px 8px;font:500 13px var(--f-num);text-align:right;min-width:92px}
#ku table.tbl input.txt{text-align:left;font-family:var(--f-body);min-width:150px}
#ku table.tbl .ro{font-family:var(--f-num);color:var(--ink-soft);white-space:nowrap}
#ku .sub{color:var(--ink-soft);font-size:11.5px}
#ku .knob{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
#ku .knob>span.k{font:700 11px var(--f-body);text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-soft);min-width:72px}
#ku .chipset{display:flex;gap:6px;flex-wrap:wrap}
#ku .swatches{display:flex;gap:5px;align-items:center;flex-wrap:wrap;font-size:11.5px;color:var(--ink-soft)}
#ku .sw{width:18px;height:18px;border-radius:5px;border:1px solid var(--rule)}
#ku .drop{border:1.5px dashed var(--rule);border-radius:var(--radius-sm);padding:18px;
  text-align:center;background:var(--surface-2)}
#ku .drop label{display:inline-block;margin-top:10px;background:var(--brand);color:var(--surface);
  padding:10px 18px;border-radius:99px;font:700 13.5px var(--f-body);cursor:pointer}
#ku[data-theme="dark"] .drop label{color:var(--bg)}
@media (prefers-color-scheme: dark){
#ku:not([data-theme="light"]) .drop label{color:var(--bg)}}
#ku .drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#ku .drop p{margin:0;color:var(--ink-soft);font-size:12.5px}
/* Form tambah data */
#ku .adder{margin-top:14px;border:1px solid var(--rule);border-radius:var(--radius-sm);background:var(--surface-2)}
#ku .adder>summary{cursor:pointer;padding:11px 14px;font:700 13px var(--f-body);color:var(--brand);list-style:none}
#ku .adder>summary::-webkit-details-marker{display:none}
#ku .adder>summary:hover{background:var(--brand-wash)}
#ku .adder[open]>summary{border-bottom:1px solid var(--rule)}
#ku .adderbody{padding:14px}
#ku .adderbody .fld{margin-bottom:0}
#ku .adderbody .pair{gap:12px}
#ku .adderbody input, #ku .adderbody select{background:var(--surface)}
#ku .addbtn{margin-top:14px;padding:10px 20px;font-size:13.5px;
  background:var(--brand);border-color:var(--brand);color:var(--surface)}
#ku[data-theme="dark"] .addbtn{color:var(--bg)}
@media (prefers-color-scheme: dark){
#ku:not([data-theme="light"]) .addbtn{color:var(--bg)}}
#ku .xbtn{border:1px solid var(--rule);background:transparent;color:var(--ink-soft);
  width:26px;height:26px;border-radius:7px;cursor:pointer;font-size:15px;line-height:1;padding:0}
#ku .xbtn:hover{border-color:var(--flag);color:var(--flag)}
#ku .xbtn:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
#ku .diff{margin-top:14px}
#ku .diff .entry b{color:var(--brand)}
@media (max-width:520px){
#ku .sheet{padding:16px}
#ku .acts>*{flex:1 1 100%} }
@media (prefers-reduced-motion: reduce){
#ku, #ku *{transition:none!important;animation:none!important}}
/* ===========================================================================
   LAPISAN 3 — CETAK / SIMPAN PDF
   Mode gelap dipaksa terang: mencetak latar gelap boros tinta dan tak terbaca.
   =========================================================================== */
#ku .printhead, #ku .printfoot{display:none}
@media print{
@page{ size:A4; margin:14mm 12mm }
#ku, #ku[data-theme="dark"]{
    color-scheme:light;
    --bg:#fff; --surface:#fff; --surface-2:#fff;
    --ink:#111; --ink-soft:#555; --rule:#bbb;
    --brand:#0b3d34; --brand-wash:#eef3f1; --accent:#7a5400;
    --lift:none; --radius:6px; --radius-sm:5px;
  }
#ku{background:#fff;font-size:10.8pt}
#ku .bar, #ku .intro, #ku .rail, #ku .acts, #ku .dock, #ku .tail, #ku .sheet .lede, #ku .intake>p, #ku .good, #ku #adminView{display:none!important}
#ku .shell{max-width:none;padding:0}
#ku .sheet{border:0;box-shadow:none;padding:0}
#ku .printhead{display:block;border-bottom:2px solid var(--brand);padding-bottom:9px;margin-bottom:15px}
#ku .printhead .co{font-family:var(--f-display);font-weight:800;font-size:19pt;color:var(--brand)}
#ku .printhead .kind{font-size:10pt;color:var(--ink-soft)}
#ku .printhead .meta{display:flex;justify-content:space-between;gap:16px;font-size:8.5pt;
    color:var(--ink-soft);margin-top:7px}
#ku .entry{padding:6px 0;font-size:10pt;break-inside:avoid}
#ku .grand{background:var(--brand-wash)!important;color:var(--ink)!important;
    border:1px solid var(--brand);break-inside:avoid}
#ku .grand .big, #ku .grand .each{color:var(--brand)}
#ku .mix, #ku .intake, #ku .docref{break-inside:avoid}
#ku .intake input{border:0;border-bottom:1px solid var(--rule);border-radius:0;padding-inline:0}
#ku .printfoot{display:block!important;margin-top:16px;padding-top:9px;border-top:1px solid var(--rule);
    font-size:8pt;color:var(--ink-soft);line-height:1.6}
}


/* ===== Integrasi husnulislam: netralkan gaya situs yang bocor ke #ku ===== */
#ku .eyebrow{display:block}
#ku .eyebrow::before, #ku .eyebrow::after{content:none;display:none}
#ku .step{padding:0;background:var(--surface-2)}
#ku .card{transform:none!important;transition:none;position:static}
#ku .note{text-align:left}
#ku details{padding:0;box-shadow:none}
#ku .wamsg{background:transparent;border:0;border-radius:0}
#ku summary{display:block;padding:0;justify-content:initial}
#ku summary::after{content:none}
#ku .adder>summary{padding:11px 14px}
#ku h2{color:var(--ink)}
#ku a{text-decoration:underline}