/* ══════════════════════════════════════════════════════════════════
   BALIKUN GROUP ERP — SHARED THEME KIT (CSS)
   "Copper Controls" design language — one file, linked from every module.

   Load order on every module page:
     <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800;900&family=Cormorant+Garamond:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/assets/theme.css">
     <script src="https://unpkg.com/lucide@0.454.0/dist/umd/lucide.min.js"></script>
     <script src="/assets/theme.js"></script>

   This file only holds tokens + reusable primitives (buttons, cards, panels,
   tiles, fields, chips, the entity mark, night toggle, bottom nav, loading
   overlay). Page-specific layout (the login card composition, the module
   grid, a payroll table, a staff form, …) stays in each module's own
   <style> block, built out of these primitives.
   ══════════════════════════════════════════════════════════════════ */

/* ── ENTITY THEME TOKENS — one attribute (data-entity) re-skins the whole app ── */
/* NEW: "GROUP" is the neutral pre-login lockup (no staff identified yet) — it shares
   CVB's palette (the app's primary/default look per the original spec) but carries its
   own wordmark ("Balikun Group") via ENTITY_INFO.GROUP in theme.js, so the ground/metal
   don't change here, only after auth resolves to a real entity, per the handoff's rule
   that the login screen starts on the default theme and re-themes only after auth. */
:root,[data-entity="CVB"],[data-entity="GROUP"]{
  --ground-deep:#082019;
  /* NEW: "dusk" header gradient — top of .app-header still opens on the entity's gold,
     but instead of a flat metal fill that hard-cuts into the page ground, it fades
     down through a warm transitional tone into the same solid color the ground ends
     on (--ground-deep), so header and body meet at similar brightness instead of a
     seam. See absensi/index.html's --gold-hdr / --gold-hdr-ink for how this is used. */
  --metal-dusk:linear-gradient(165deg,#dcae7c 0%,#b57c48 35%,#4a3a24 68%,#082019 100%);
  /* NEW: night default — dusk header text stays light cream; [data-night="0"] below
     flips this to var(--metal-ink) once the header itself turns light. */
  --gold-hdr-ink:var(--ink);
  /* NEW: full-screen celebration overlays (punch in / punch out / lembur) — always
     dark regardless of day/night (their text is fixed white), one gradient per
     entity per moment so the "vibe" is entity-branded, not a generic green screen.
     Confetti reuses --nav-on/--sand (already solid per-entity colors) via JS. */
  --celebrate-in:linear-gradient(160deg,#173325 0%,#2E6E48 100%);
  --celebrate-out:linear-gradient(160deg,#2b2410 0%,#8d5c33 100%);
  --celebrate-lembur:linear-gradient(160deg,#12201a 0%,#3a5c2e 45%,#5c4020 100%);
  --ground:radial-gradient(115% 60% at 22% 4%,#1d5546 0%,transparent 60%),radial-gradient(90% 50% at 92% 24%,#2a5c4b 0%,transparent 55%),linear-gradient(172deg,#124338 0%,#0f3a30 40%,#082019 100%);
  --metal:linear-gradient(160deg,#f6d6ab 0%,#dcae7c 24%,#b57c48 54%,#8d5c33 76%,#e6bd90 100%);
  --metal-sm:linear-gradient(160deg,#f2d0a9,#c08d5b 52%,#96643a);
  --metal-ink:#33200e; --metal-lift:0 14px 30px rgba(120,70,30,.32);
  --ink:#f4e9d8; --ink-2:rgba(244,233,216,.6); --ink-3:rgba(244,233,216,.45); --ink-4:rgba(244,233,216,.35);
  --sand:#cba97e; --sand-2:#c2a37c; --nav-on:#e8c69d;
  --hairline:rgba(230,196,155,.16); --hairline-strong:rgba(230,196,155,.20);
  --rim:inset 0 1px 0 rgba(246,214,171,.24);
  --glow:radial-gradient(70% 40% at 50% 84%,rgba(185,116,58,.14),transparent 70%);
  --card-shadow:0 24px 60px rgba(6,22,17,.42);
  --nav-scrim:linear-gradient(to top,rgba(7,26,20,.96),rgba(7,26,20,.5));
  --glass:rgba(255,255,255,.06); --glass-2:rgba(255,255,255,.055); --glass-hover:rgba(255,255,255,.09);
  --temple-op:.44; --temple-op-menu:.14;
  --panel-blur:blur(18px); --card-blur:blur(22px); --tile-blur:blur(14px); --nav-blur:blur(20px);
  --danger-bg:rgba(176,64,40,.18); --danger-border:rgba(214,120,88,.5); --danger-ink:#f3c3ab;
  --ok-bg:rgba(64,150,96,.16); --ok-border:rgba(100,190,130,.4); --ok-ink:#bfe8cc;
}
[data-entity="INP"]{
  --ground-deep:#250708;
  --metal-dusk:linear-gradient(165deg,#dcae6c 0%,#a5732f 36%,#6b2a1f 68%,#250708 100%);
  --celebrate-in:linear-gradient(160deg,#3a0f0e 0%,#8e2a20 100%);
  --celebrate-out:linear-gradient(160deg,#2e1608 0%,#9a761f 100%);
  --celebrate-lembur:linear-gradient(160deg,#250a08 0%,#7d1f1c 45%,#9a761f 100%);
  --ground:radial-gradient(115% 60% at 22% 4%,#7d1f1c 0%,transparent 60%),radial-gradient(90% 50% at 92% 24%,#8e2a20 0%,transparent 55%),linear-gradient(172deg,#5f1613 0%,#4a0f0f 42%,#250708 100%);
  --metal:linear-gradient(160deg,#fbeeb4 0%,#eed17a 24%,#c9a13c 54%,#9a761f 76%,#f2dfa2 100%);
  --metal-sm:linear-gradient(160deg,#f7e6a8,#d8b154 52%,#a67f22);
  --metal-ink:#33240a; --metal-lift:0 14px 30px rgba(150,110,20,.34);
  --ink:#fbeede; --ink-2:rgba(251,238,222,.6); --ink-3:rgba(251,238,222,.45); --ink-4:rgba(251,238,222,.35);
  --sand:#e0b98a; --sand-2:#d8b489; --nav-on:#f3d79a;
  --hairline:rgba(245,214,160,.18); --hairline-strong:rgba(245,214,160,.22);
  --rim:inset 0 1px 0 rgba(251,235,180,.26);
  --glow:radial-gradient(70% 40% at 50% 84%,rgba(201,161,60,.16),transparent 70%);
  --card-shadow:0 24px 60px rgba(30,5,6,.46);
  --nav-scrim:linear-gradient(to top,rgba(30,6,7,.96),rgba(30,6,7,.5));
  --temple-op:.38; --temple-op-menu:.12;
}
[data-entity="BKE"]{
  --ground-deep:#170f08;
  --metal-dusk:linear-gradient(165deg,#e3c489 0%,#bd9a52 35%,#5c4626 68%,#170f08 100%);
  --celebrate-in:linear-gradient(160deg,#241a0d 0%,#59401f 100%);
  --celebrate-out:linear-gradient(160deg,#241a0d 0%,#8f7135 100%);
  --celebrate-lembur:linear-gradient(160deg,#170f08 0%,#4d3a22 45%,#8f7135 100%);
  --ground:radial-gradient(115% 60% at 22% 4%,#59401f 0%,transparent 60%),radial-gradient(90% 50% at 92% 24%,#4d3a22 0%,transparent 55%),linear-gradient(172deg,#3d2c19 0%,#2e2114 42%,#170f08 100%);
  --metal:linear-gradient(160deg,#f8e6bd 0%,#e3c489 24%,#bd9a52 54%,#8f7135 76%,#ecd6a6 100%);
  --metal-sm:linear-gradient(160deg,#f2ddb2,#caa763 52%,#9b7a38);
  --metal-ink:#2e2310; --metal-lift:0 14px 30px rgba(130,100,40,.32);
  --ink:#f7ecd9; --ink-2:rgba(247,236,217,.6); --ink-3:rgba(247,236,217,.45); --ink-4:rgba(247,236,217,.35);
  --sand:#d3b587; --sand-2:#c8ae86; --nav-on:#eed6a6;
  --hairline:rgba(238,214,166,.17); --hairline-strong:rgba(238,214,166,.21);
  --rim:inset 0 1px 0 rgba(248,230,189,.24);
  --glow:radial-gradient(70% 40% at 50% 84%,rgba(189,154,82,.16),transparent 70%);
  --card-shadow:0 24px 60px rgba(18,11,5,.45);
  --nav-scrim:linear-gradient(to top,rgba(20,13,7,.96),rgba(20,13,7,.5));
  --temple-op:.40; --temple-op-menu:.13;
}
[data-entity="BSH"]{
  --ground-deep:#07161f;
  --metal-dusk:linear-gradient(165deg,#bcd4e8 0%,#7fa1c0 35%,#3a5568 68%,#07161f 100%);
  --celebrate-in:linear-gradient(160deg,#0d2436 0%,#22557f 100%);
  --celebrate-out:linear-gradient(160deg,#0a1e2c 0%,#587e9f 100%);
  --celebrate-lembur:linear-gradient(160deg,#07161f 0%,#1c4f7a 45%,#587e9f 100%);
  --ground:radial-gradient(115% 60% at 22% 4%,#1c4f7a 0%,transparent 60%),radial-gradient(90% 50% at 92% 24%,#22557f 0%,transparent 55%),linear-gradient(172deg,#153c5c 0%,#102f49 42%,#07161f 100%);
  --metal:linear-gradient(160deg,#e7f2fb 0%,#bcd4e8 24%,#7fa1c0 54%,#587e9f 76%,#d3e5f3 100%);
  --metal-sm:linear-gradient(160deg,#dcebf7,#93b3cd 52%,#5f88a8);
  --metal-ink:#10222e; --metal-lift:0 14px 30px rgba(30,80,120,.34);
  --ink:#eaf2f8; --ink-2:rgba(234,242,248,.6); --ink-3:rgba(234,242,248,.45); --ink-4:rgba(234,242,248,.35);
  --sand:#9dbcd4; --sand-2:#96b4cc; --nav-on:#c7ddef;
  --hairline:rgba(190,216,236,.17); --hairline-strong:rgba(190,216,236,.21);
  --rim:inset 0 1px 0 rgba(214,232,246,.24);
  --glow:radial-gradient(70% 40% at 50% 84%,rgba(127,161,192,.16),transparent 70%);
  --card-shadow:0 24px 60px rgba(4,16,24,.46);
  --nav-scrim:linear-gradient(to top,rgba(5,18,26,.96),rgba(5,18,26,.5));
  --temple-op:.34; --temple-op-menu:.11;
}
/* Day-mode override — metal/sand stay entity-colored (works on both grounds);
   only ground, glass and the text ramp move to the warm light values. */
[data-night="0"]{
  --ground-deep:#f6efe4;
  --metal-dusk:linear-gradient(165deg,#e9c79a 0%,#d4a86e 38%,#e8d3ab 70%,#f6efe4 100%);
  /* NEW: in day mode the whole page is already light, so the header's dusk fade needs
     dark ink text throughout (same pairing every other light-on-light surface uses),
     not the light --ink night mode needs. --gold-hdr-ink carries that flip. */
  --gold-hdr-ink:var(--metal-ink);
  --ground:#f6efe4;
  --ink:#241d16; --ink-2:rgba(36,29,22,.62); --ink-3:rgba(36,29,22,.46); --ink-4:rgba(36,29,22,.34);
  --hairline:rgba(120,96,64,.20); --hairline-strong:rgba(120,96,64,.30);
  --rim:inset 0 1px 0 rgba(255,255,255,.6);
  --glow:radial-gradient(70% 40% at 50% 84%,rgba(122,86,16,.05),transparent 70%);
  --card-shadow:0 4px 16px rgba(60,40,20,.08);
  --nav-scrim:linear-gradient(to top,#f6efe4,rgba(246,239,228,.9));
  --glass:#f7f1e6; --glass-2:#f3ecdf; --glass-hover:#efe4d0;
  --panel-blur:none; --card-blur:none; --tile-blur:none; --nav-blur:none;
  --danger-bg:rgba(176,64,40,.10); --danger-border:rgba(176,64,40,.35); --danger-ink:#8c3420;
  --ok-bg:rgba(46,110,72,.10); --ok-border:rgba(46,110,72,.35); --ok-ink:#2e6e48;
}

/* NEW: per-entity day-mode grounds — day mode used to flatten every entity to the same
   shared cream (#f6efe4). The owner asked for the "whole vibe" to change on login
   regardless of day/night, so each entity now gets its own light wash instead of one
   neutral tone. Higher specificity ([data-night="0"][data-entity="X"], two attribute
   selectors) wins over the shared [data-night="0"] block above regardless of source
   order. CVB/GROUP intentionally keep the shared cream above — that IS their tint. */
/* NEW: toned down — the previous version was nearly white with a faint red hint, which
   read as "too bright" against the night mode's deep maroon. Ground now carries visibly
   more of the red instead of just blush; metal/metal-sm get a day-specific step down too
   (buttons were the same glossy pale gold as night mode, which felt overexposed in
   daylight) — kept modest per "without going too overboard with brightness". */
[data-night="0"][data-entity="INP"]{
  --ground-deep:#dcaf9d;
  --metal-dusk:linear-gradient(165deg,#eecf8e 0%,#cf9a4a 40%,#dcaf9d 100%);
  --ground:radial-gradient(115% 60% at 22% 4%,rgba(178,50,40,.16) 0%,transparent 60%),radial-gradient(90% 50% at 92% 24%,rgba(178,60,44,.12) 0%,transparent 55%),linear-gradient(172deg,#f2ddd3 0%,#e8c5b8 45%,#dcaf9d 100%);
  --glass:#f3e0d5; --glass-2:#eed6c8; --glass-hover:#e2bda9;
  --nav-scrim:linear-gradient(to top,#f2ddd3,rgba(242,221,211,.9));
  --hairline:rgba(140,52,34,.22); --hairline-strong:rgba(140,52,34,.30);
  --metal:linear-gradient(160deg,#f2dc9c 0%,#ddb968 24%,#b68b34 54%,#87671b 76%,#e6cd8c 100%);
  --metal-sm:linear-gradient(160deg,#eed49a,#c99f52 52%,#9c7826);
}
/* END NEW */
[data-night="0"][data-entity="BKE"]{
  --ground-deep:#eadab9;
  --metal-dusk:linear-gradient(165deg,#eed6a6 0%,#caa763 40%,#eadab9 100%);
  --ground:radial-gradient(115% 60% at 22% 4%,rgba(122,86,40,.11) 0%,transparent 60%),radial-gradient(90% 50% at 92% 24%,rgba(110,80,45,.08) 0%,transparent 55%),linear-gradient(172deg,#f6efe1 0%,#f0e4cf 45%,#eadab9 100%);
  --glass:#f7f0e2; --glass-2:#f2e7d3; --glass-hover:#ebdac0;
  --nav-scrim:linear-gradient(to top,#f6efe1,rgba(246,239,225,.9));
  --hairline:rgba(90,64,28,.19); --hairline-strong:rgba(90,64,28,.27);
}
[data-night="0"][data-entity="BSH"]{
  --ground-deep:#dbe7f0;
  /* NEW: was #c7ddef (near-white ice blue) at the top stop — read as washed-out/"too
     bright" next to the day-mode ground. Now opens on BSH's own mid-tone metal blues
     (the 54%/76% stops of --metal) instead of its palest stop, same fix pattern used
     for the header itself, just deeper. */
  --metal-dusk:linear-gradient(165deg,#7fa1c0 0%,#587e9f 42%,#dbe7f0 100%);
  --ground:radial-gradient(115% 60% at 22% 4%,rgba(28,79,122,.10) 0%,transparent 60%),radial-gradient(90% 50% at 92% 24%,rgba(34,89,138,.08) 0%,transparent 55%),linear-gradient(172deg,#eef3f8 0%,#e6eff5 45%,#dbe7f0 100%);
  --glass:#eff4f9; --glass-2:#e8f0f5; --glass-hover:#dae5ee;
  --nav-scrim:linear-gradient(to top,#eef3f8,rgba(238,243,248,.9));
  --hairline:rgba(18,58,98,.17); --hairline-strong:rgba(18,58,98,.25);
}

/* ── base ─────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:'Figtree',sans-serif;background:var(--ground);color:var(--ink);min-height:100vh;overflow-x:hidden;transition:background .3s,color .3s}
a{color:inherit}
.shell{max-width:480px;margin:0 auto;position:relative;min-height:100vh;display:flex;flex-direction:column}

/* ── background temple watermark (optional on any screen) ───────── */
.temple{position:absolute;pointer-events:none}
.temple--login{bottom:6px;left:-10%;width:120%;opacity:var(--temple-op)}
.temple--menu{bottom:44px;left:-12%;width:124%;opacity:var(--temple-op-menu);-webkit-mask-image:radial-gradient(120% 100% at 50% 100%,#000 35%,transparent 85%);mask-image:radial-gradient(120% 100% at 50% 100%,#000 35%,transparent 85%)}
.temple--hero{right:-16%;bottom:-10%;width:88%;opacity:var(--temple-op);-webkit-mask-image:radial-gradient(100% 100% at 68% 88%,#000 42%,transparent 88%);mask-image:radial-gradient(100% 100% at 68% 88%,#000 42%,transparent 88%)}
.glow{position:absolute;inset:0;background:var(--glow);pointer-events:none}

/* ── copper/metal primitives ─────────────────────────────────── */
.cu{position:relative;overflow:hidden;background:var(--metal);color:var(--metal-ink);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.8),inset 0 -3px 7px rgba(0,0,0,.28),var(--metal-lift);border:0}
.cu::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(96deg,rgba(255,255,255,.10) 0 1px,rgba(0,0,0,.05) 1px 3px)}
.cu::after{content:"";position:absolute;inset:0;background:linear-gradient(108deg,transparent 32%,rgba(255,255,255,.45) 47%,transparent 61%)}
.cu>*{position:relative}
.cu:hover{filter:brightness(1.05)}
.cu:active{box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.cu-sm{background:var(--metal-sm);color:var(--metal-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 5px rgba(0,0,0,.24)}
.cu[disabled],.cu-sm[disabled],.cu.is-disabled,.cu-sm.is-disabled{filter:grayscale(.5) brightness(.85);cursor:not-allowed;pointer-events:none}

.btn{height:52px;border-radius:999px;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:'Figtree',sans-serif;text-decoration:none;border:0}
.btn>span{display:flex;align-items:center;gap:10px}
.btn:focus-visible{outline:2px solid var(--nav-on);outline-offset:2px}
.btn-inline{height:auto;padding:10px 17px;font-size:12px;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.8),inset 0 -2px 6px rgba(0,0,0,.26),0 8px 18px rgba(0,0,0,.22)}
.btn-ghost{font-size:12px;font-weight:700;color:var(--ink-2);padding:10px 22px;border-radius:999px;border:1px solid var(--hairline-strong);background:none;cursor:pointer;font-family:'Figtree',sans-serif}
.btn-ghost:hover{border-color:var(--nav-on);color:var(--ink)}
.btn-block{width:100%}

/* ── glass surfaces ───────────────────────────────────────────── */
.card{background:var(--glass);border:1px solid var(--hairline-strong);backdrop-filter:var(--card-blur);-webkit-backdrop-filter:var(--card-blur);border-radius:34px;padding:30px 24px 26px;box-shadow:var(--card-shadow),var(--rim);position:relative}
.panel{position:relative;border-radius:28px;overflow:hidden;background:var(--glass);border:1px solid var(--hairline-strong);backdrop-filter:var(--panel-blur);-webkit-backdrop-filter:var(--panel-blur);box-shadow:var(--rim)}
.tile{position:relative;padding:12px 10px;border-radius:20px;background:var(--glass-2);border:1px solid var(--hairline);backdrop-filter:var(--tile-blur);-webkit-backdrop-filter:var(--tile-blur);display:flex;flex-direction:column;gap:8px;min-height:98px;box-shadow:inset 0 1px 0 rgba(246,214,171,.2);text-decoration:none;cursor:pointer}
.tile:hover{background:var(--glass-hover);border-color:var(--nav-on)}
.tile-ico{width:32px;height:32px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tile-name{font-size:11px;font-weight:700;color:var(--ink);line-height:1.25}
/* NEW: "segera" tile — a module concept that's decided but not built yet (e.g. Slip Gaji) */
.tile.is-soon{cursor:default;opacity:.75}
.tile.is-soon:hover{background:var(--glass-2);border-color:var(--hairline)}
.tile-soon{position:absolute;top:10px;right:10px;font-size:6.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;background:var(--glass);border:1px solid var(--hairline);border-radius:999px;padding:2px 5px;color:var(--ink-3)}
/* END NEW */

/* Row card — used for list rows (staff row, store row, kasbon row, …) instead of a grid tile */
.row-card{background:var(--glass-2);border:1px solid var(--hairline);border-radius:20px;padding:14px 14px 14px 18px;display:flex;align-items:center;gap:12px;backdrop-filter:var(--tile-blur);-webkit-backdrop-filter:var(--tile-blur);box-shadow:inset 0 1px 0 rgba(246,214,171,.16);text-decoration:none;cursor:pointer}
.row-card:hover{background:var(--glass-hover);border-color:var(--nav-on)}
.row-ico{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.row-info{flex:1;min-width:0}
.row-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:2px}
.row-sub{font-size:11px;color:var(--ink-2);line-height:1.4}
.row-arr{color:var(--ink-3);flex-shrink:0}

.search{flex:1;display:flex;align-items:center;gap:9px;height:44px;padding:0 16px;border-radius:999px;background:var(--glass);border:1px solid var(--hairline)}
.search input{flex:1;border:0;background:none;outline:none;color:var(--ink);font-family:'Figtree',sans-serif;font-size:12.5px;width:100%}
.search input::placeholder{color:var(--ink-3)}
.field{width:100%;height:48px;padding:0 18px;border-radius:999px;border:1px solid var(--hairline-strong);background:var(--glass);color:var(--ink);font-family:'Figtree',sans-serif;font-size:14px;outline:none}
.field::placeholder{color:var(--ink-3)}
.field:focus-visible{outline:2px solid var(--nav-on);outline-offset:2px}
textarea.field{height:auto;min-height:96px;border-radius:18px;padding:12px 16px;resize:vertical}
select.field{-webkit-appearance:none;appearance:none}
.field-sm{height:40px;border-radius:14px;font-size:13px}

/* NEW: chip label bumped from --ink-3 (45% opacity) to --ink (full) — was reading as
   near-invisible grey on the darker entity grounds ("SEMUA, ABSEN... must have stronger
   color, stronger white") */
.chip{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 12px;border-radius:18px;flex:1;background:rgba(255,255,255,.05);border:1px solid var(--hairline);font-size:9.5px;color:var(--ink);font-weight:600;cursor:pointer}
/* END NEW */
.chip.is-active{border:0;font-weight:800}
.label{font-size:9.5px;font-weight:700;letter-spacing:1.4px;color:var(--ink-3);text-transform:uppercase;display:block}
.wordmark{font-family:'Cormorant Garamond',serif;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.err{margin-top:12px;padding:10px 13px;border-radius:18px;background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger-ink);font-size:12px;text-align:center;width:100%}
.ok{margin-top:12px;padding:10px 13px;border-radius:18px;background:var(--ok-bg);border:1px solid var(--ok-border);color:var(--ok-ink);font-size:12px;text-align:center;width:100%}
.mono{font-family:'JetBrains Mono',monospace}
.badge{font-size:9px;font-weight:800;padding:2px 8px;border-radius:999px;display:inline-block}
.badge-sm{min-width:15px;height:15px;border-radius:999px;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 3px}

/* ── page header bar (top bar every module page uses) ─────────── */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:20px 16px 0}
.topbar-brand{display:flex;align-items:center;gap:8px}
.topbar-wordmark{font-size:15.5px}
.topbar-right{display:flex;align-items:center;gap:14px}
.icon-ink{color:var(--ink)}
.icon-btn{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--glass-2);border:1px solid var(--hairline);cursor:pointer;color:var(--ink)}
.icon-btn:hover{background:var(--glass-hover)}
.back-btn{display:flex;align-items:center;gap:6px;color:var(--ink-2);font-size:12px;font-weight:700;cursor:pointer;text-decoration:none}
.back-btn:hover{color:var(--ink)}

/* ── mark / logo ──────────────────────────────────────────────
   NEW: marks render as a CSS mask (div + background:var(--metal), the source PNG as an
   alpha mask) instead of a colored <img>. This guarantees the mark is always painted in
   the exact same brushed-metal gradient as every button/tile/disc in the theme — "the
   golden color synchronized, blending seamlessly" — rather than a separately-baked PNG
   color that can drift from the theme or wash out against a similarly-toned day-mode
   ground (which is what was happening before: the old bronze/gold PNGs were close in
   tone to their own day backgrounds and needed a filter hack to stay legible). The mask
   source PNGs are solid white on transparent, so the mask reads purely from shape/alpha,
   not from any baked-in color — safe under both mask-mode:alpha and the luminance
   default. Entity-code disc is the fallback where no mark exists yet (BSH). ── */
.mark-img{height:68px;width:68px;display:none;margin:0 auto 12px;background:var(--metal);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.mark-disc{width:56px;height:56px;border-radius:18px;display:none;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:19px;letter-spacing:.03em;margin:0 auto 12px}
.mark-img-sm{height:23px;width:23px;display:none;background:var(--metal-sm);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.mark-disc-sm{width:23px;height:23px;border-radius:8px;display:none;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:7px;font-weight:700}
/* END NEW */

/* ── night toggle (login-size and header-size) ───────────────── */
.toggle{width:44px;height:24px;border-radius:999px;background:rgba(255,255,255,.14);position:relative;cursor:pointer;flex-shrink:0}
.toggle-thumb{position:absolute;top:2.5px;left:2.5px;width:19px;height:19px;border-radius:50%;background:var(--metal-sm);box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
[data-night="1"] .toggle-thumb{transform:translateX(20px)}
.toggle-sm{width:36px;height:20px}
.toggle-sm .toggle-thumb{width:15px;height:15px;top:2.5px;left:2.5px}
[data-night="1"] .toggle-sm .toggle-thumb{transform:translateX(16px)}

/* ── bottom nav (same 5 items on every module: Home/Modul/Riwayat/Order/Akun) ── */
.nav{position:relative;padding:11px 14px 20px;display:flex;justify-content:space-between;background:var(--nav-scrim);border-top:1px solid var(--hairline);backdrop-filter:var(--nav-blur);-webkit-backdrop-filter:var(--nav-blur)}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;font-size:9.5px;color:var(--ink-3);cursor:pointer;position:relative;text-decoration:none}
.nav-item.is-active{color:var(--nav-on);font-weight:700}
.nav-item.is-inert{cursor:default;opacity:.7}
/* NEW: compact nav for narrow-access accounts — Home + Modul only, see showMenu().
   space-between would otherwise fling two items to opposite screen edges. */
.nav.is-compact .nav-compact-hide{display:none}
.nav.is-compact{justify-content:center;gap:64px}
.nav.is-compact .nav-item{flex:0 0 auto}
/* END NEW */
.nav-pill{width:36px;height:26px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.nav-soon{position:absolute;top:-4px;right:6px;font-size:6.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;background:var(--glass-2);border:1px solid var(--hairline);border-radius:999px;padding:1px 4px;color:var(--ink-3)}

/* ── loading / verify overlay (every module makes GAS calls) ─── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;z-index:999}
.overlay.active{display:flex}
.overlay-card{padding:26px 34px;border-radius:26px;background:rgba(255,255,255,.09);border:1px solid var(--hairline-strong);text-align:center;color:var(--ink);font-size:13px}
.spinner{width:28px;height:28px;margin:0 auto 12px;border-radius:50%;border:2px solid rgba(255,255,255,.18);border-top-color:var(--nav-on);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── simple data table (payroll / kasbon / bank mutasi, etc.) ─── */
.dtable{width:100%;border-collapse:collapse;font-size:12.5px}
.dtable th{text-align:left;font-size:9.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-3);padding:0 10px 8px;border-bottom:1px solid var(--hairline)}
.dtable td{padding:10px;border-bottom:1px solid var(--hairline);color:var(--ink-2)}
.dtable tr:last-child td{border-bottom:0}

/* ════════════════════════════════════════════════════════════════════════════════════════
   BEGIN: v-design-refresh — Claude Design handoff "ERP Dashboard Design Refresh" (balikun-theme.css)
   Night = the reference (same grounds/metals as before, plus the new component tokens).
   Day   = direction 1A "Warm parchment": tinted per-unit grounds (never white), translucent glass
           panels that lift off the ground, darker text ramp, deeper-shaded metal with more lift.
   New tokens for every module: --text-2/-3 (4.5:1 text), --on-ink, --header/--header-ink (panel
   headers), --warn-*, --chart-1/--chart-grid, --brush/--bevel/--sheen, --backdrop, --scrim.
   Adapted: the handoff's --metal-dusk (pressed-metal state) is shipped as --metal-press, because
   --metal-dusk is already the header fade used by every module; the handoff's --temple-op (dashboard
   watermark) is shipped as --board-temple-op so the login/menu temple keeps its own opacity.
   "GROUP" (pre-login lockup) shares CVB's tokens, as before.
   ════════════════════════════════════════════════════════════════════════════════════════ */
[data-night="1"][data-entity="CVB"],[data-night="1"][data-entity="GROUP"]{
  --text-2: rgba(244,233,216,0.8); /* component text aliases — clear 4.5:1 on panels; --ink-2/-3 left as-is */
  --text-3: rgba(244,233,216,0.77); /* Balikun Souvenir · night */
  --ground: radial-gradient(115% 60% at 22% 4%,#1d5546 0%,transparent 60%),radial-gradient(90% 50% at 92% 24%,#2a5c4b 0%,transparent 55%),linear-gradient(172deg,#124338 0%,#0f3a30 40%,#082019 100%);
  --ground-deep: #082019;
  --glass: rgba(255,255,255,.06);
  --glass-2: rgba(255,255,255,.045);
  --glass-hover: rgba(255,255,255,.10);
  --ink: #f4e9d8;
  --ink-2: rgba(244,233,216,.6);
  --ink-3: rgba(244,233,216,.45);
  --ink-4: rgba(244,233,216,.35);
  --on-ink: #082019;
  --hairline: rgba(230,196,155,.16);
  --hairline-strong: rgba(230,196,155,.20);
  --metal: linear-gradient(160deg,#f6d6ab 0%,#dcae7c 24%,#b57c48 54%,#8d5c33 76%,#e6bd90 100%);
  --metal-sm: linear-gradient(160deg,#f2d0a9,#c08d5b 52%,#96643a);
  --metal-press: linear-gradient(160deg,#dcae7c,#b57c48 55%,#8d5c33);
  --metal-ink: #33200e;
  --metal-lift: 0 14px 30px rgba(120,70,30,.32);
  --sheen: linear-gradient(108deg,transparent 32%,rgba(255,255,255,.45) 47%,transparent 61%);
  --brush: repeating-linear-gradient(96deg,rgba(255,255,255,.10) 0 1px,rgba(0,0,0,.05) 1px 3px);
  --bevel: inset 0 -3px 7px rgba(0,0,0,.28);
  --rim: inset 0 1px 0 rgba(246,214,171,.24);
  --card-shadow: 0 24px 60px rgba(6,22,17,.42);
  --glow: radial-gradient(70% 40% at 50% 84%,rgba(185,116,58,.14),transparent 70%);
  --header: linear-gradient(118deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 100%);
  --header-ink: #f4e9d8;
  --danger-bg: rgba(176,64,40,.18);
  --danger-border: rgba(214,120,88,.5);
  --danger-ink: #f3c3ab;
  --ok-bg: rgba(70,160,105,.16);
  --ok-border: rgba(120,200,150,.42);
  --ok-ink: #bfe8cc;
  --warn-bg: rgba(220,170,60,.16);
  --warn-border: rgba(230,190,90,.45);
  --warn-ink: #f2d79a;
  --nav-on: #e8c69d;
  --sand: #cba97e;
  --chart-1: #e8c69d;
  --chart-grid: rgba(230,196,155,.16);
  --backdrop: rgba(0,0,0,.5);
  --scrim: linear-gradient(to top,rgba(7,26,20,.96),rgba(7,26,20,.5));
  --board-temple-op: 0.12;
  --nav-scrim: var(--scrim);
}
[data-night="1"][data-entity="INP"]{
  --text-2: rgba(251,238,222,0.66); /* component text aliases — clear 4.5:1 on panels; --ink-2/-3 left as-is */
  --text-3: rgba(251,238,222,0.64); /* Istana Naga Purba · night */
  --ground: radial-gradient(115% 60% at 22% 4%,#7d1f1c 0%,transparent 60%),radial-gradient(90% 50% at 92% 24%,#8e2a20 0%,transparent 55%),linear-gradient(172deg,#5f1613 0%,#4a0f0f 42%,#250708 100%);
  --ground-deep: #250708;
  --glass: rgba(255,255,255,.06);
  --glass-2: rgba(255,255,255,.045);
  --glass-hover: rgba(255,255,255,.10);
  --ink: #fbeede;
  --ink-2: rgba(251,238,222,.6);
  --ink-3: rgba(251,238,222,.45);
  --ink-4: rgba(251,238,222,.35);
  --on-ink: #250708;
  --hairline: rgba(245,214,160,.18);
  --hairline-strong: rgba(245,214,160,.22);
  --metal: linear-gradient(160deg,#fbeeb4 0%,#eed17a 24%,#c9a13c 54%,#9a761f 76%,#f2dfa2 100%);
  --metal-sm: linear-gradient(160deg,#f7e6a8,#d8b154 52%,#a67f22);
  --metal-press: linear-gradient(160deg,#eed17a,#c9a13c 55%,#9a761f);
  --metal-ink: #33240a;
  --metal-lift: 0 14px 30px rgba(150,110,20,.34);
  --sheen: linear-gradient(108deg,transparent 32%,rgba(255,255,255,.45) 47%,transparent 61%);
  --brush: repeating-linear-gradient(96deg,rgba(255,255,255,.10) 0 1px,rgba(0,0,0,.05) 1px 3px);
  --bevel: inset 0 -3px 7px rgba(0,0,0,.28);
  --rim: inset 0 1px 0 rgba(251,235,180,.26);
  --card-shadow: 0 24px 60px rgba(30,5,6,.46);
  --glow: radial-gradient(70% 40% at 50% 84%,rgba(201,161,60,.16),transparent 70%);
  --header: linear-gradient(118deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 100%);
  --header-ink: #fbeede;
  --danger-bg: rgba(176,64,40,.18);
  --danger-border: rgba(214,120,88,.5);
  --danger-ink: #f3c3ab;
  --ok-bg: rgba(70,160,105,.16);
  --ok-border: rgba(120,200,150,.42);
  --ok-ink: #bfe8cc;
  --warn-bg: rgba(220,170,60,.16);
  --warn-border: rgba(230,190,90,.45);
  --warn-ink: #f2d79a;
  --nav-on: #f3d79a;
  --sand: #e0b98a;
  --chart-1: #f3d79a;
  --chart-grid: rgba(245,214,160,.18);
  --backdrop: rgba(0,0,0,.5);
  --scrim: linear-gradient(to top,rgba(30,6,7,.96),rgba(30,6,7,.5));
  --board-temple-op: 0.12;
  --nav-scrim: var(--scrim);
}
[data-night="1"][data-entity="BKE"]{
  --text-2: rgba(247,236,217,0.69); /* component text aliases — clear 4.5:1 on panels; --ink-2/-3 left as-is */
  --text-3: rgba(247,236,217,0.66); /* Balidian Kos Elit · night */
  --ground: radial-gradient(115% 60% at 22% 4%,#59401f 0%,transparent 60%),radial-gradient(90% 50% at 92% 24%,#4d3a22 0%,transparent 55%),linear-gradient(172deg,#3d2c19 0%,#2e2114 42%,#170f08 100%);
  --ground-deep: #170f08;
  --glass: rgba(255,255,255,.06);
  --glass-2: rgba(255,255,255,.045);
  --glass-hover: rgba(255,255,255,.10);
  --ink: #f7ecd9;
  --ink-2: rgba(247,236,217,.6);
  --ink-3: rgba(247,236,217,.45);
  --ink-4: rgba(247,236,217,.35);
  --on-ink: #170f08;
  --hairline: rgba(238,214,166,.17);
  --hairline-strong: rgba(238,214,166,.21);
  --metal: linear-gradient(160deg,#f8e6bd 0%,#e3c489 24%,#bd9a52 54%,#8f7135 76%,#ecd6a6 100%);
  --metal-sm: linear-gradient(160deg,#f2ddb2,#caa763 52%,#9b7a38);
  --metal-press: linear-gradient(160deg,#e3c489,#bd9a52 55%,#8f7135);
  --metal-ink: #2e2310;
  --metal-lift: 0 14px 30px rgba(130,100,40,.32);
  --sheen: linear-gradient(108deg,transparent 32%,rgba(255,255,255,.45) 47%,transparent 61%);
  --brush: repeating-linear-gradient(96deg,rgba(255,255,255,.10) 0 1px,rgba(0,0,0,.05) 1px 3px);
  --bevel: inset 0 -3px 7px rgba(0,0,0,.28);
  --rim: inset 0 1px 0 rgba(248,230,189,.24);
  --card-shadow: 0 24px 60px rgba(18,11,5,.45);
  --glow: radial-gradient(70% 40% at 50% 84%,rgba(189,154,82,.16),transparent 70%);
  --header: linear-gradient(118deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 100%);
  --header-ink: #f7ecd9;
  --danger-bg: rgba(176,64,40,.18);
  --danger-border: rgba(214,120,88,.5);
  --danger-ink: #f3c3ab;
  --ok-bg: rgba(70,160,105,.16);
  --ok-border: rgba(120,200,150,.42);
  --ok-ink: #bfe8cc;
  --warn-bg: rgba(220,170,60,.16);
  --warn-border: rgba(230,190,90,.45);
  --warn-ink: #f2d79a;
  --nav-on: #eed6a6;
  --sand: #d3b587;
  --chart-1: #eed6a6;
  --chart-grid: rgba(238,214,166,.17);
  --backdrop: rgba(0,0,0,.5);
  --scrim: linear-gradient(to top,rgba(20,13,7,.96),rgba(20,13,7,.5));
  --board-temple-op: 0.12;
  --nav-scrim: var(--scrim);
}
[data-night="1"][data-entity="BSH"]{
  --text-2: rgba(234,242,248,0.72); /* component text aliases — clear 4.5:1 on panels; --ink-2/-3 left as-is */
  --text-3: rgba(234,242,248,0.69); /* Bos's House · night */
  --ground: radial-gradient(115% 60% at 22% 4%,#1c4f7a 0%,transparent 60%),radial-gradient(90% 50% at 92% 24%,#22557f 0%,transparent 55%),linear-gradient(172deg,#153c5c 0%,#102f49 42%,#07161f 100%);
  --ground-deep: #07161f;
  --glass: rgba(255,255,255,.06);
  --glass-2: rgba(255,255,255,.045);
  --glass-hover: rgba(255,255,255,.10);
  --ink: #eaf2f8;
  --ink-2: rgba(234,242,248,.6);
  --ink-3: rgba(234,242,248,.45);
  --ink-4: rgba(234,242,248,.35);
  --on-ink: #07161f;
  --hairline: rgba(190,216,236,.17);
  --hairline-strong: rgba(190,216,236,.21);
  --metal: linear-gradient(160deg,#e7f2fb 0%,#bcd4e8 24%,#7fa1c0 54%,#587e9f 76%,#d3e5f3 100%);
  --metal-sm: linear-gradient(160deg,#dcebf7,#93b3cd 52%,#5f88a8);
  --metal-press: linear-gradient(160deg,#bcd4e8,#7fa1c0 55%,#587e9f);
  --metal-ink: #10222e;
  --metal-lift: 0 14px 30px rgba(30,80,120,.34);
  --sheen: linear-gradient(108deg,transparent 32%,rgba(255,255,255,.45) 47%,transparent 61%);
  --brush: repeating-linear-gradient(96deg,rgba(255,255,255,.10) 0 1px,rgba(0,0,0,.05) 1px 3px);
  --bevel: inset 0 -3px 7px rgba(0,0,0,.28);
  --rim: inset 0 1px 0 rgba(214,232,246,.24);
  --card-shadow: 0 24px 60px rgba(4,16,24,.46);
  --glow: radial-gradient(70% 40% at 50% 84%,rgba(127,161,192,.16),transparent 70%);
  --header: linear-gradient(118deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 100%);
  --header-ink: #eaf2f8;
  --danger-bg: rgba(176,64,40,.18);
  --danger-border: rgba(214,120,88,.5);
  --danger-ink: #f3c3ab;
  --ok-bg: rgba(70,160,105,.16);
  --ok-border: rgba(120,200,150,.42);
  --ok-ink: #bfe8cc;
  --warn-bg: rgba(220,170,60,.16);
  --warn-border: rgba(230,190,90,.45);
  --warn-ink: #f2d79a;
  --nav-on: #c7ddef;
  --sand: #9dbcd4;
  --chart-1: #c7ddef;
  --chart-grid: rgba(190,216,236,.17);
  --backdrop: rgba(0,0,0,.5);
  --scrim: linear-gradient(to top,rgba(5,18,26,.96),rgba(5,18,26,.5));
  --board-temple-op: 0.12;
  --nav-scrim: var(--scrim);
}
[data-night="0"][data-entity="CVB"],[data-night="0"][data-entity="GROUP"]{
  --text-2: var(--ink-2);
  --text-3: var(--ink-3); /* Balikun Souvenir · day */
  --ground: radial-gradient(110% 60% at 18% 0%,rgba(255,248,232,0.55) 0%,transparent 62%),radial-gradient(80% 50% at 90% 30%,rgba(18,67,56,0.1) 0%,transparent 60%),linear-gradient(172deg,#ece6d2 0%,#dfdcc6 48%,#cdd0b8 100%);
  --ground-deep: #aebaa0;
  --glass: rgba(246,244,235,0.72);
  --glass-2: rgba(232,230,214,0.8);
  --glass-hover: rgba(246,244,235,0.88);
  --ink: #243129;
  --ink-2: #4f584d;
  --ink-3: #5f675a;
  --ink-4: #818677;
  --on-ink: #ece6d2;
  --hairline: rgba(11,26,20,0.14);
  --hairline-strong: rgba(11,26,20,0.24);
  --metal: linear-gradient(160deg,#f6d6ab 0%,#e2b180 28%,#c68c56 52%,#7b532f 78%,#e6bd90 100%);
  --metal-sm: linear-gradient(160deg,#f6d6ab,#c68c56 55%,#7b532f);
  --metal-press: linear-gradient(160deg,#d49f6b,#c68c56 55%,#9d6d41);
  --metal-ink: #1c241a;
  --metal-lift: 0 10px 22px rgba(84,98,83,0.26),0 2px 4px rgba(84,98,83,0.18);
  --sheen: linear-gradient(108deg,transparent 30%,rgba(255,255,255,0.42) 47%,transparent 62%);
  --brush: repeating-linear-gradient(96deg,rgba(255,255,255,.10) 0 1px,rgba(0,0,0,.05) 1px 3px);
  --bevel: inset 0 -3px 7px rgba(0,0,0,.2);
  --rim: inset 0 1px 0 rgba(255,255,255,.72);
  --card-shadow: 0 1px 2px rgba(84,98,83,0.14),0 18px 40px rgba(84,98,83,0.2);
  --glow: radial-gradient(70% 45% at 50% 90%,rgba(18,67,56,0.14),transparent 70%);
  --header: linear-gradient(118deg,#d0d2bc 0%,#e3dfca 100%);
  --header-ink: #243129;
  --danger-bg: rgba(176,64,42,0.13);
  --danger-border: rgba(163,56,31,0.42);
  --danger-ink: #a1371e;
  --ok-bg: rgba(46,122,76,0.14);
  --ok-border: rgba(46,122,76,0.4);
  --ok-ink: #2a6742;
  --warn-bg: rgba(176,122,16,.14);
  --warn-border: rgba(154,106,10,.42);
  --warn-ink: #805400;
  --nav-on: #7b532f;
  --sand: #775432;
  --chart-1: #7b532f;
  --chart-grid: rgba(11,26,20,0.14);
  --backdrop: rgba(11,26,20,.32);
  --scrim: rgba(246,244,235,0.72);
  --board-temple-op: 0.14;
  --nav-scrim: var(--scrim);
}
[data-night="0"][data-entity="INP"]{
  --text-2: var(--ink-2);
  --text-3: var(--ink-3); /* Istana Naga Purba · day */
  --ground: radial-gradient(110% 60% at 18% 0%,rgba(255,248,232,0.55) 0%,transparent 62%),radial-gradient(80% 50% at 90% 30%,rgba(95,22,19,0.1) 0%,transparent 60%),linear-gradient(172deg,#f0e1d2 0%,#e6d0c1 48%,#d9bcab 100%);
  --ground-deep: #c49a88;
  --glass: rgba(248,242,235,0.72);
  --glass-2: rgba(237,221,210,0.8);
  --glass-hover: rgba(248,242,235,0.88);
  --ink: #37211d;
  --ink-2: #634d46;
  --ink-3: #735d55;
  --ink-4: #907a71;
  --on-ink: #f0e1d2;
  --hairline: rgba(31,9,7,0.14);
  --hairline-strong: rgba(31,9,7,0.24);
  --metal: linear-gradient(160deg,#fcefb8 0%,#efd27e 28%,#cfa640 52%,#7f5d18 78%,#f3e0a4 100%);
  --metal-sm: linear-gradient(160deg,#fcefb8,#cfa640 55%,#7f5d18);
  --metal-press: linear-gradient(160deg,#dfbc5f,#cfa640 55%,#a37e2a);
  --metal-ink: #472d14;
  --metal-lift: 0 10px 22px rgba(105,74,65,0.26),0 2px 4px rgba(105,74,65,0.18);
  --sheen: linear-gradient(108deg,transparent 30%,rgba(255,255,255,0.42) 47%,transparent 62%);
  --brush: repeating-linear-gradient(96deg,rgba(255,255,255,.10) 0 1px,rgba(0,0,0,.05) 1px 3px);
  --bevel: inset 0 -3px 7px rgba(0,0,0,.2);
  --rim: inset 0 1px 0 rgba(255,255,255,.72);
  --card-shadow: 0 1px 2px rgba(105,74,65,0.14),0 18px 40px rgba(105,74,65,0.2);
  --glow: radial-gradient(70% 45% at 50% 90%,rgba(95,22,19,0.14),transparent 70%);
  --header: linear-gradient(118deg,#dcc1b1 0%,#e9d5c6 100%);
  --header-ink: #37211d;
  --danger-bg: rgba(176,64,42,0.13);
  --danger-border: rgba(163,56,31,0.42);
  --danger-ink: #9f361e;
  --ok-bg: rgba(46,122,76,0.14);
  --ok-border: rgba(46,122,76,0.4);
  --ok-ink: #296541;
  --warn-bg: rgba(176,122,16,.14);
  --warn-border: rgba(154,106,10,.42);
  --warn-ink: #7e5200;
  --nav-on: #7f5d18;
  --sand: #7c5b1d;
  --chart-1: #7f5d18;
  --chart-grid: rgba(31,9,7,0.14);
  --backdrop: rgba(31,9,7,.32);
  --scrim: rgba(248,242,235,0.72);
  --board-temple-op: 0.14;
  --nav-scrim: var(--scrim);
}
[data-night="0"][data-entity="BKE"]{
  --text-2: var(--ink-2);
  --text-3: var(--ink-3); /* Balidian Kos Elit · day */
  --ground: radial-gradient(110% 60% at 18% 0%,rgba(255,248,232,0.55) 0%,transparent 62%),radial-gradient(80% 50% at 90% 30%,rgba(61,44,25,0.1) 0%,transparent 60%),linear-gradient(172deg,#efe3cc 0%,#e3d3b6 48%,#d3c09e 100%);
  --ground-deep: #b99f78;
  --glass: rgba(248,242,232,0.72);
  --glass-2: rgba(235,223,202,0.8);
  --glass-hover: rgba(248,242,232,0.88);
  --ink: #32281c;
  --ink-2: #5d5141;
  --ink-3: #6d604f;
  --ink-4: #8a7d68;
  --on-ink: #efe3cc;
  --hairline: rgba(26,17,7,0.14);
  --hairline-strong: rgba(26,17,7,0.24);
  --metal: linear-gradient(160deg,#f9e8c0 0%,#e6c88d 28%,#c7a45d 52%,#795f2d 78%,#eed8a8 100%);
  --metal-sm: linear-gradient(160deg,#f9e8c0,#c7a45d 55%,#795f2d);
  --metal-press: linear-gradient(160deg,#d7b675,#c7a45d 55%,#9c7e43);
  --metal-ink: #3c2f19;
  --metal-lift: 0 10px 22px rgba(98,81,58,0.26),0 2px 4px rgba(98,81,58,0.18);
  --sheen: linear-gradient(108deg,transparent 30%,rgba(255,255,255,0.42) 47%,transparent 62%);
  --brush: repeating-linear-gradient(96deg,rgba(255,255,255,.10) 0 1px,rgba(0,0,0,.05) 1px 3px);
  --bevel: inset 0 -3px 7px rgba(0,0,0,.2);
  --rim: inset 0 1px 0 rgba(255,255,255,.72);
  --card-shadow: 0 1px 2px rgba(98,81,58,0.14),0 18px 40px rgba(98,81,58,0.2);
  --glow: radial-gradient(70% 45% at 50% 90%,rgba(61,44,25,0.14),transparent 70%);
  --header: linear-gradient(118deg,#d7c4a6 0%,#e7d8bd 100%);
  --header-ink: #32281c;
  --danger-bg: rgba(176,64,42,0.13);
  --danger-border: rgba(163,56,31,0.42);
  --danger-ink: #9f361e;
  --ok-bg: rgba(46,122,76,0.14);
  --ok-border: rgba(46,122,76,0.4);
  --ok-ink: #296541;
  --warn-bg: rgba(176,122,16,.14);
  --warn-border: rgba(154,106,10,.42);
  --warn-ink: #7e5200;
  --nav-on: #795f2d;
  --sand: #765e2f;
  --chart-1: #795f2d;
  --chart-grid: rgba(26,17,7,0.14);
  --backdrop: rgba(26,17,7,.32);
  --scrim: rgba(248,242,232,0.72);
  --board-temple-op: 0.14;
  --nav-scrim: var(--scrim);
}
[data-night="0"][data-entity="BSH"]{
  --text-2: var(--ink-2);
  --text-3: var(--ink-3); /* Bos's House · day */
  --ground: radial-gradient(110% 60% at 18% 0%,rgba(255,248,232,0.55) 0%,transparent 62%),radial-gradient(80% 50% at 90% 30%,rgba(21,60,92,0.1) 0%,transparent 60%),linear-gradient(172deg,#e7e5dc 0%,#d9dbd5 48%,#c5ccce 100%);
  --ground-deep: #a4b2ba;
  --glass: rgba(244,243,239,0.72);
  --glass-2: rgba(228,229,225,0.8);
  --glass-hover: rgba(244,243,239,0.88);
  --ink: #212b34;
  --ink-2: #4f575d;
  --ink-3: #5e6569;
  --ink-4: #7c8283;
  --on-ink: #e7e5dc;
  --hairline: rgba(8,19,30,0.14);
  --hairline-strong: rgba(8,19,30,0.24);
  --metal: linear-gradient(160deg,#eef6fc 0%,#c9dcec 28%,#94b3cd 52%,#4e6f8c 78%,#d8e8f4 100%);
  --metal-sm: linear-gradient(160deg,#eef6fc,#94b3cd 55%,#4e6f8c);
  --metal-press: linear-gradient(160deg,#afc8dd,#94b3cd 55%,#6e8ea9);
  --metal-ink: #283746;
  --metal-lift: 0 10px 22px rgba(78,91,100,0.26),0 2px 4px rgba(78,91,100,0.18);
  --sheen: linear-gradient(108deg,transparent 30%,rgba(255,255,255,0.42) 47%,transparent 62%);
  --brush: repeating-linear-gradient(96deg,rgba(255,255,255,.10) 0 1px,rgba(0,0,0,.05) 1px 3px);
  --bevel: inset 0 -3px 7px rgba(0,0,0,.2);
  --rim: inset 0 1px 0 rgba(255,255,255,.72);
  --card-shadow: 0 1px 2px rgba(78,91,100,0.14),0 18px 40px rgba(78,91,100,0.2);
  --glow: radial-gradient(70% 45% at 50% 90%,rgba(21,60,92,0.14),transparent 70%);
  --header: linear-gradient(118deg,#c9cecd 0%,#ddded7 100%);
  --header-ink: #212b34;
  --danger-bg: rgba(176,64,42,0.13);
  --danger-border: rgba(163,56,31,0.42);
  --danger-ink: #a1371e;
  --ok-bg: rgba(46,122,76,0.14);
  --ok-border: rgba(46,122,76,0.4);
  --ok-ink: #296541;
  --warn-bg: rgba(176,122,16,.14);
  --warn-border: rgba(154,106,10,.42);
  --warn-ink: #805400;
  --nav-on: #486883;
  --sand: #4a6881;
  --chart-1: #486883;
  --chart-grid: rgba(8,19,30,0.14);
  --backdrop: rgba(8,19,30,.32);
  --scrim: rgba(244,243,239,0.72);
  --board-temple-op: 0.14;
  --nav-scrim: var(--scrim);
}
/* day: the page is light, so panel/header text is the dark ink */
[data-night="0"]{--gold-hdr-ink:var(--header-ink,var(--metal-ink))}
[data-night="0"][data-entity]{--metal-dusk:var(--header)} /* day: module headers use the handoff's parchment header surface */
/* the label on large metal sits above the brush + sheen layers (the sheen was washing it out) */
.cu>*{position:relative;z-index:1}
/* END: v-design-refresh */

/* ════════════════════════════════════════════════════════════════════════════════════════
   BEGIN: v-shared-components — status badges, empty state, danger button promoted to shared.
   Collision-checked against leave, leave-approval, payslip, kasbon, payment, payroll:
   - .badge-ok/-warn/-danger: identical to kasbon's own final rules → no visual change there.
   - .empty-state: kasbon/payment/payroll define their own (page CSS loads after this file and
     wins); they only hold text, so the icon rule below does not touch them.
   - .btn-danger: no page uses this name yet (leave-approval's .btn-reject is left as-is).
   Deliberately NOT named .danger / .ok / .status-pill: kasbon and payroll already use
   .danger/.ok page-locally with different meanings.
   ════════════════════════════════════════════════════════════════════════════════════════ */
/* status badge — pair with the existing .badge: <span class="badge badge-warn">Menunggu</span> */
.badge-ok{background:var(--ok-bg);color:var(--ok-ink);border:1px solid var(--ok-border)}
.badge-warn{background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-border)}
.badge-danger{background:var(--danger-bg);color:var(--danger-ink);border:1px solid var(--danger-border)}
.badge-muted{background:var(--glass-2);color:var(--text-2);border:1px solid var(--hairline-strong)}
/* empty state — text only, or a Lucide icon + text: <div class="empty-state"><i data-lucide="inbox"></i>Belum ada kasbon.</div> */
.empty-state{text-align:center;padding:32px 16px;color:var(--ink-3);font-size:12px;line-height:1.5}
.empty-state>i,.empty-state>svg{display:block;margin:0 auto 10px;opacity:.4}
/* destructive action — combine with .btn or .btn-inline: <button class="btn btn-inline btn-danger">Tolak</button> */
.btn-danger{background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger-ink);box-shadow:none}
.btn-danger:hover{filter:brightness(1.08)}
.btn-danger:focus-visible{outline:2px solid var(--danger-border);outline-offset:2px}
/* END: v-shared-components */