/* =====================================================================
   Polesan tampilan & gerak (dimuat setelah styles.css).
   Semua animasi mengikuti prefers-reduced-motion (lihat bagian akhir).
   ===================================================================== */
:root {
  --spring: cubic-bezier(.34, 1.36, .5, 1);      /* sedikit memantul, untuk pil & tombol */
  --ease-out-soft: cubic-bezier(.16, 1, .3, 1);   /* melambat halus di akhir */
  --ring-prio: 214 158 46;                        /* emas untuk Prioritas tinggi */
}
:root.dark { --ring-prio: 232 186 92; }

/* Ikon di dalam tombol tidak menangkap klik: seluruh tombol (tulisan + panah) selalu bisa ditekan,
   termasuk di Safari/Mac yang kadang melewatkan klik pada <svg>. */
button svg, [role="button"] svg, a svg, .th svg, label.btn svg { pointer-events: none; }

/* ---------- Tekan: umpan balik halus untuk semua tombol ---------- */
.btn, .seg > button, .fsel-btn, .chip, .tab, .icon-btn, .flag-btn, .side-link, .bottom-nav button {
  transition-property: transform, background-color, color, box-shadow, border-color, opacity;
  transition-duration: 180ms; transition-timing-function: var(--ease-out-soft);
}
.btn:active:not(:disabled), .seg > button:active, .fsel-btn:active, .tab:active, .icon-btn:active, .flag-btn:active { transform: scale(.965); transition-duration: 80ms; }
.has-ripple { position: relative; overflow: hidden; isolation: isolate; }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; background: currentColor; opacity: .16; transform: scale(0); animation: ripple 620ms var(--ease-out-soft) forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- Pil yang meluncur di grup .seg ---------- */
.seg.has-glider { position: relative; isolation: isolate; }
.seg-glider { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: rgb(var(--fg)); pointer-events: none; opacity: 0;
  box-shadow: 0 6px 16px -8px rgb(var(--fg) / .55), inset 0 1px 0 rgb(255 255 255 / .12);
  transition: transform 460ms var(--spring), width 460ms var(--spring), height 300ms var(--ease-out-soft), opacity 200ms; }
.seg.has-glider > button { position: relative; z-index: 1; }
.seg.glide-live > button[aria-pressed="true"] { background: transparent !important; box-shadow: none !important; color: rgb(var(--bg)); }
.seg > button .ic { transition: transform 300ms var(--spring); }
.seg > button[aria-pressed="true"] .ic { transform: scale(1.08); }
.seg-prio .ic, .seg-flag .ic { width: 14px; height: 14px; }
.seg-prio:not([aria-pressed="true"]) .ic { color: rgb(var(--ring-prio)); }
.seg-flag:not([aria-pressed="true"]) .ic { color: rgb(var(--bad)); }

/* ---------- Baris filter Dinas / CV ---------- */
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.filter-reset { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: rgb(var(--subtle)); font: 600 .8125rem var(--font-sans); cursor: pointer; animation: tp-pop 320ms var(--spring); }
.filter-reset:hover { color: rgb(var(--bad)); background: rgb(var(--bad) / .07); }
.filter-reset .ic { width: 14px; height: 14px; }

.fsel { position: relative; }
.fsel-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 0 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgb(var(--line-strong) / .8); background: rgb(var(--surface) / .85); color: rgb(var(--muted));
  font: 600 .8125rem var(--font-sans); white-space: nowrap; max-width: min(78vw, 340px);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 2px rgb(var(--fg) / .04); }
.fsel-btn:hover { border-color: rgb(var(--fg) / .35); color: rgb(var(--fg)); box-shadow: 0 6px 18px -12px rgb(var(--fg) / .45); }
.fsel-btn:focus-visible { outline: 2px solid rgb(var(--accent-ink) / .55); outline-offset: 2px; }
.fsel-ic { width: 15px; height: 15px; opacity: .7; flex: none; }
.fsel-k { color: rgb(var(--subtle)); font-weight: 600; }
.fsel-k::after { content: ":"; }
.fsel-v { color: rgb(var(--fg)); font-weight: 700; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fsel-chev { width: 15px; height: 15px; flex: none; transition: transform 380ms var(--spring); }
.fsel.open .fsel-chev { transform: rotate(180deg); }
.fsel.is-set .fsel-btn { background: rgb(var(--fg)); border-color: rgb(var(--fg)); color: rgb(var(--bg)); box-shadow: 0 8px 20px -12px rgb(var(--fg) / .7); }
.fsel.is-set .fsel-k, .fsel.is-set .fsel-v { color: rgb(var(--bg)); }
.fsel.is-set .fsel-ic { opacity: 1; }
.fsel.is-set .fsel-btn { animation: chip-set 420ms var(--spring); }
@keyframes chip-set { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: none; } }

.fsel-pop { position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; min-width: 250px; max-width: min(92vw, 360px); padding: 6px;
  border-radius: 18px; border: 1px solid rgb(var(--line)); background: rgb(var(--surface) / .96);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 24px 48px -20px rgb(0 0 0 / .32), 0 4px 12px -4px rgb(0 0 0 / .08);
  transform-origin: 24px -6px; opacity: 0; transform: translateY(-6px) scale(.96);
  transition: opacity 160ms var(--ease-out-soft), transform 260ms var(--spring); }
.fsel.open .fsel-pop { opacity: 1; transform: none; }
.fsel-search-wrap { padding: 4px 4px 6px; }
.fsel-search { width: 100%; height: 36px; padding: 0 12px; border-radius: 12px; border: 1px solid rgb(var(--line)); background: rgb(var(--bg) / .6); color: rgb(var(--fg)); font: 500 .8125rem var(--font-sans); }
.fsel-list { max-height: min(52vh, 340px); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 1px; }
.fsel-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px 8px 12px; border: 0; border-radius: 12px; background: transparent; color: rgb(var(--fg)); font: 500 .875rem var(--font-sans); text-align: left; cursor: pointer; }
.fsel.open .fsel-opt { animation: opt-in 300ms var(--ease-out-soft) backwards; animation-delay: calc(min(var(--i, 0), 10) * 18ms); }
@keyframes opt-in { from { opacity: 0; transform: translateY(-4px); } }
.fsel-opt:hover, .fsel-opt:focus-visible { background: rgb(var(--fg) / .06); outline: none; }
.fsel-opt-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsel-n { font: 700 .6875rem var(--font-sans); color: rgb(var(--subtle)); background: rgb(var(--fg) / .06); border-radius: 99px; padding: 2px 7px; font-variant-numeric: tabular-nums; }
.fsel-ok { width: 16px; height: 16px; opacity: 0; transform: scale(.4); transition: opacity 160ms, transform 320ms var(--spring); color: rgb(var(--accent-ink)); }
.fsel-opt[aria-selected="true"] { font-weight: 700; background: rgb(var(--fg) / .05); }
.fsel-opt[aria-selected="true"] .fsel-ok { opacity: 1; transform: none; }
.fsel-none { padding: 12px; font-size: .8125rem; color: rgb(var(--subtle)); }
@media (pointer: coarse) { .fsel-btn { height: 42px; } .fsel-opt { min-height: 46px; } }
@media (max-width: 639px) { .fsel-pop { position: fixed; left: 12px; right: 12px; top: auto; bottom: 96px; max-width: none; transform-origin: 50% 100%; transform: translateY(12px) scale(.98); } }

/* ---------- Judul kolom List: panah berputar & mudah ditekan ---------- */
.th[data-sort] { position: relative; justify-self: start; max-width: 100%; border-radius: 8px; padding: 0 6px; margin: 0 -6px; height: 28px; align-self: center; }
.th[data-sort]:hover { background: rgb(var(--fg) / .05); }
.th[data-sort] .ic { transition: opacity 160ms, transform 380ms var(--spring); }
.th[data-sort] .ic.is-up { transform: rotate(180deg); }
.th.is-on { color: rgb(var(--fg)); }
.is-anim .th.is-on .ic { animation: th-pop 420ms var(--spring); }
@keyframes th-pop { 0% { scale: .5; } 60% { scale: 1.25; } 100% { scale: 1; } }

/* ---------- Tanda Prioritas tinggi / Ada masalah ---------- */
.pcard-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.flag-btns { display: flex; gap: 4px; }
.flag-btn { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; border: 1px solid rgb(var(--line)); background: rgb(var(--surface) / .7); color: rgb(var(--subtle)); cursor: pointer; padding: 0; }
.flag-btn .ic { width: 15px; height: 15px; transition: transform 360ms var(--spring); }
.flag-btn:hover { color: rgb(var(--fg)); border-color: rgb(var(--line-strong)); }
.flag-btn:hover .ic { transform: scale(1.15) rotate(-8deg); }
.flag-btn.prio.is-on { color: rgb(var(--ring-prio)); border-color: rgb(var(--ring-prio) / .45); background: rgb(var(--ring-prio) / .12); }
.flag-btn.prio.is-on .ic { fill: currentColor; }
.flag-btn.prob.is-on { color: rgb(var(--bad)); border-color: rgb(var(--bad) / .4); background: rgb(var(--bad) / .1); }
.flag-btn.prob.is-on .ic { fill: rgb(var(--bad) / .25); }
.flag-btn.is-on .ic { animation: flag-pop 460ms var(--spring); }
@keyframes flag-pop { 0% { transform: scale(.4) rotate(-30deg); } 70% { transform: scale(1.2); } 100% { transform: none; } }
/* Di perangkat mouse, tombol tanda yang belum aktif hanya muncul saat kartu disorot (supaya kartu tetap bersih). */
@media (hover: hover) and (pointer: fine) {
  .pcard .flag-btn:not(.is-on) { opacity: 0; transform: translateY(-2px); transition: opacity 200ms, transform 260ms var(--ease-out-soft); }
  .pcard:hover .flag-btn:not(.is-on), .pcard:focus-within .flag-btn:not(.is-on) { opacity: 1; transform: none; }
}

.pcard-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.flag-tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px 0 8px; border-radius: 99px; font: 700 .6875rem var(--font-sans); letter-spacing: .04em; text-transform: uppercase; animation: tp-pop 380ms var(--spring); }
.flag-tag .ic { width: 12px; height: 12px; }
.flag-tag.prio { color: rgb(var(--ring-prio)); background: rgb(var(--ring-prio) / .13); box-shadow: inset 0 0 0 1px rgb(var(--ring-prio) / .3); }
.flag-tag.prio .ic { fill: currentColor; }
.flag-tag.prob { color: rgb(var(--bad)); background: rgb(var(--bad) / .1); box-shadow: inset 0 0 0 1px rgb(var(--bad) / .28); }
@keyframes tp-pop { from { opacity: 0; transform: scale(.85); } }

.pcard.is-prio { box-shadow: 0 0 0 1.5px rgb(var(--ring-prio) / .55), 0 18px 40px -24px rgb(var(--ring-prio) / .7), var(--shadow); }
.pcard.is-prob { box-shadow: 0 0 0 1.5px rgb(var(--bad) / .5), 0 18px 40px -24px rgb(var(--bad) / .6), var(--shadow); }
.pcard.is-prio.is-prob { box-shadow: 0 0 0 1.5px rgb(var(--bad) / .5), 0 0 0 4px rgb(var(--ring-prio) / .28), var(--shadow); }
/* Garis tipis di atas kartu: emas (prioritas) atau merah dengan kilau bergerak (ada masalah). */
.pcard.is-prio .pcard-main, .pcard.is-prob .pcard-main { position: relative; }
.pcard.is-prio .pcard-main::before, .pcard.is-prob .pcard-main::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, rgb(var(--ring-prio) / .2), rgb(var(--ring-prio)), rgb(var(--ring-prio) / .2)); }
.pcard.is-prob .pcard-main::before { background: linear-gradient(90deg, rgb(var(--bad) / .35) 0%, rgb(var(--bad)) 40%, rgb(255 255 255 / .9) 50%, rgb(var(--bad)) 60%, rgb(var(--bad) / .35) 100%); background-size: 250% 100%; animation: prob-sheen 2.8s linear infinite; }
@keyframes prob-sheen { from { background-position: 100% 0; } to { background-position: -150% 0; } }

.flag-dot { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 6px; vertical-align: -3px; }
.flag-dot .ic { width: 12px; height: 12px; }
.flag-dot.prio { color: rgb(var(--ring-prio)); background: rgb(var(--ring-prio) / .14); }
.flag-dot.prio .ic { fill: currentColor; }
.flag-dot.prob { color: rgb(var(--bad)); background: rgb(var(--bad) / .1); }
.prow.is-prio::after { content: ""; position: absolute; right: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px 0 0 3px; background: rgb(var(--ring-prio)); }
.prow.is-prob[data-tone]::before { background: rgb(var(--bad)) !important; }

.flag-toggle.prio.is-on { color: rgb(var(--ring-prio)); border-color: rgb(var(--ring-prio) / .45); background: rgb(var(--ring-prio) / .1); }
.flag-toggle.prio.is-on .ic { fill: currentColor; }
.flag-toggle.prob.is-on { color: rgb(var(--bad)); border-color: rgb(var(--bad) / .4); background: rgb(var(--bad) / .08); }

/* ---------- Gerak umum: kartu terangkat saat disorot ---------- */
@media (hover: hover) and (pointer: fine) {
  .pcard { transition: transform 360ms var(--ease-out-soft), box-shadow 360ms var(--ease-out-soft); }
  .pcard:hover { transform: translateY(-3px); }
  .set-card, .card.card-pad { transition: box-shadow 320ms var(--ease-out-soft), transform 320ms var(--ease-out-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .seg-glider, .fsel-pop, .fsel-chev, .fsel-opt, .flag-btn .ic, .flag-tag, .ripple, .pcard, .pcard.is-prob .pcard-main::before, .th[data-sort] .ic, .filter-reset { animation: none !important; transition: none !important; }
}

/* ---------- Backup & kapasitas ---------- */
.notice-stack { display: grid; gap: 8px; }
.notice-stack:empty { display: none; }
.notice-stack .notice { margin-bottom: 0; animation: notice-in 480ms var(--spring); }
.notice-stack { margin-bottom: 16px; }
@keyframes notice-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.bk-ok { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; padding: 1px 8px 1px 6px; border-radius: 99px; background: rgb(var(--ok) / .12); color: rgb(var(--ok)); font-weight: 700; font-size: .75rem; }
.bk-ok .ic { width: 12px; height: 12px; }
.bk-device { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgb(var(--line-strong)); }
.bk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; }
.bk-sub { display: block; font-size: .8125rem; color: rgb(var(--subtle)); }
.cap-meter { display: grid; gap: 6px; }
.cap-top { display: flex; justify-content: space-between; gap: 10px; font-size: .8125rem; font-weight: 600; color: rgb(var(--muted)); }
.cap-top b { color: rgb(var(--fg)); }
.cap-bar { height: 8px; border-radius: 99px; background: rgb(var(--fg) / .07); overflow: hidden; }
.cap-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, rgb(var(--ok)), rgb(var(--ok) / .75)); animation: cap-grow 900ms var(--ease-out-soft) backwards; }
.cap-meter.is-warn .cap-bar i { background: linear-gradient(90deg, rgb(var(--warn)), rgb(var(--warn) / .75)); }
.cap-meter.is-bad .cap-bar i { background: linear-gradient(90deg, rgb(var(--bad)), rgb(var(--bad) / .75)); }
@keyframes cap-grow { from { width: 0; } }
.cap-sub { font-size: .75rem; color: rgb(var(--subtle)); }
@media (prefers-reduced-motion: reduce) { .notice-stack .notice, .cap-bar i { animation: none !important; } }

/* ---------- Kapasitas CV ---------- */
.cap-cv { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: rgb(var(--fg) / .035); }
.cap-cv-top { display: flex; justify-content: space-between; font-size: .8125rem; font-weight: 600; color: rgb(var(--muted)); }
.cap-cv-top b { color: rgb(var(--fg)); }
.cap-cv-boxes { display: flex; gap: 4px; }
.cap-cv-boxes i { flex: 1; height: 8px; border-radius: 4px; background: rgb(var(--fg) / .09); }
.cap-cv-boxes i.on { background: rgb(var(--accent-bar)); animation: box-in 420ms var(--spring) backwards; animation-delay: calc(var(--i) * 60ms); }
.cap-cv-boxes i.over { background: rgb(var(--bad)); animation: box-in 420ms var(--spring) backwards; animation-delay: calc(var(--i) * 60ms); }
@keyframes box-in { from { transform: scaleY(.2); opacity: 0; } }
.lvl-warn .cap-cv-boxes i.on { background: rgb(var(--warn)); }
.lvl-full .cap-cv-boxes i.on, .lvl-over .cap-cv-boxes i.on { background: rgb(var(--bad) / .85); }
.cap-cv-sub { font-size: .75rem; color: rgb(var(--subtle)); }
.lvl-full .cap-cv-sub, .lvl-over .cap-cv-sub { color: rgb(var(--bad)); font-weight: 600; }
.cap-hint { display: flex; gap: 8px; align-items: flex-start; margin-top: 4px; padding: 9px 11px; border-radius: 12px; font-size: .8125rem; font-weight: 500; line-height: 1.45; background: rgb(var(--ok) / .08); color: rgb(var(--fg)); animation: tp-pop 300ms var(--spring); }
.cap-hint .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.cap-hint.lvl-warn, .cap-hint.lvl-full { background: rgb(var(--warn) / .1); }
.cap-hint.lvl-over { background: rgb(var(--bad) / .09); color: rgb(var(--bad)); }
@media (prefers-reduced-motion: reduce) { .cap-cv-boxes i, .cap-hint { animation: none !important; } }

/* ---------- Versi RAB & addendum ---------- */
.ver-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ver-title { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; }
.ver-title .ic { width: 18px; height: 18px; color: rgb(var(--accent-ink)); }
.ver-line { display: flex; gap: 0; overflow-x: auto; list-style: none; margin: 0; padding: 4px 2px 8px; scrollbar-width: thin; }
.ver-line li { position: relative; flex: none; padding-right: 26px; animation: opt-in 420ms var(--ease-out-soft) backwards; animation-delay: calc(var(--i) * 50ms); }
.ver-line li:not(:last-child)::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 2px; background: rgb(var(--line-strong)); }
.ver-line button { display: grid; gap: 1px; min-width: 132px; padding: 10px 14px; text-align: left; border-radius: 14px; border: 1px solid rgb(var(--line)); background: rgb(var(--surface)); color: rgb(var(--fg)); cursor: pointer; font: inherit; transition: border-color 200ms, box-shadow 260ms var(--ease-out-soft), transform 260ms var(--spring); }
.ver-line button:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -16px rgb(var(--fg) / .5); }
.ver-line button b { font-size: .8125rem; }
.ver-line button .num { font-weight: 700; font-size: .9375rem; }
.ver-line button small { font-size: .72rem; color: rgb(var(--subtle)); }
.ver-line button.is-on { border-color: rgb(var(--accent-ink) / .55); box-shadow: 0 0 0 3px rgb(var(--accent-ink) / .12); }
.ver-line li.is-now button { border-style: dashed; }
.ver-line li.is-dirty button small { color: rgb(var(--warn)); font-weight: 700; }
.ver-compare { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.ver-compare .field { min-width: 180px; }
.ver-arrow { padding-bottom: 10px; color: rgb(var(--subtle)); }
.ver-arrow .ic { width: 16px; height: 16px; }
.ver-table tbody tr { animation: opt-in 320ms var(--ease-out-soft) backwards; animation-delay: calc(min(var(--i), 14) * 20ms); }
.ver-table tr.k-baru td:first-child, .ver-table tr.k-tambah td:first-child { box-shadow: inset 3px 0 0 rgb(var(--ok)); }
.ver-table tr.k-kurang td:first-child, .ver-table tr.k-hapus td:first-child { box-shadow: inset 3px 0 0 rgb(var(--bad)); }
.ver-table tr.k-hapus td { color: rgb(var(--subtle)); }
.ver-table td.chg { font-weight: 700; color: rgb(var(--accent-ink)); }
.ver-log summary { cursor: pointer; font-weight: 600; font-size: .875rem; }
.ver-log ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: .875rem; }
.chip b.pos, .mini-table .pos { color: rgb(var(--ok)); }
@media (prefers-reduced-motion: reduce) { .ver-line li, .ver-table tbody tr { animation: none !important; } }

/* ---------- Tukang: absensi & upah ---------- */
.att-list { display: grid; gap: 6px; }
.att-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 8px 10px; border-radius: 14px; background: rgb(var(--fg) / .025); animation: opt-in 360ms var(--ease-out-soft) backwards; animation-delay: calc(min(var(--i), 12) * 30ms); }
.att-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.att-who small { display: block; font-size: .75rem; color: rgb(var(--subtle)); }
.att-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none; background: rgb(var(--accent-bar) / .12); color: rgb(var(--accent-ink)); font-weight: 800; }
.att-seg button { min-width: 44px; justify-content: center; font-weight: 800; }
.att-seg button[data-att="A"][aria-pressed="true"] { color: rgb(var(--bg)); }
.att-dot { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; font-size: .75rem; font-weight: 800; }
.att-dot.a-H { background: rgb(var(--ok) / .14); color: rgb(var(--ok)); }
.att-dot.a-S { background: rgb(var(--warn) / .14); color: rgb(var(--warn)); }
.att-dot.a-L { background: rgb(var(--accent-bar) / .16); color: rgb(var(--accent-ink)); }
.att-dot.a-A { background: rgb(var(--fg) / .06); color: rgb(var(--subtle)); }
.mini-table th.c, .mini-table td.c { text-align: center; padding-left: 4px; padding-right: 4px; }
.pay-table tbody tr { animation: opt-in 320ms var(--ease-out-soft) backwards; animation-delay: calc(min(var(--i), 14) * 24ms); }
.pay-table tfoot td { font-weight: 700; border-top: 1.5px solid rgb(var(--fg) / .5); }
.kb-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: .875rem; }
.kb-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgb(var(--bad) / .05); }
.wk-list { display: grid; }
.wk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid rgb(var(--line)); }
.wk-row small { display: block; font-size: .75rem; color: rgb(var(--subtle)); }
.wk-rate { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: rgb(var(--subtle)); }
.wk-rate input { width: 8.5rem; height: 36px; text-align: right; }
@media (prefers-reduced-motion: reduce) { .att-row, .pay-table tbody tr { animation: none !important; } }

/* ---------- Rekap pajak per CV ---------- */
.tc-row { cursor: pointer; animation: opt-in 320ms var(--ease-out-soft) backwards; animation-delay: calc(min(var(--i), 12) * 30ms); }
.tc-row:hover td { background: rgb(var(--fg) / .03); }
.tc-chev { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; transition: transform 300ms var(--spring); }
.tc-row.is-open .tc-chev { transform: rotate(90deg); }
.tc-item td { font-size: .8125rem; background: rgb(var(--fg) / .02); animation: opt-in 260ms var(--ease-out-soft) backwards; }
.tc-table tfoot td { font-weight: 700; border-top: 1.5px solid rgb(var(--fg) / .5); }
@media (prefers-reduced-motion: reduce) { .tc-row, .tc-item td { animation: none !important; } }
#fin-taxcv { padding: 0 18px 18px; }
@media (min-width: 640px) { #fin-taxcv { padding: 0 24px 22px; } }

/* ---------- HP: filter Dinas & CV berdampingan dalam satu baris ---------- */
@media (max-width: 639px) {
  .filter-row { flex-wrap: nowrap; }
  .filter-row > .fsel { flex: 1 1 0; min-width: 0; }
  .filter-row .fsel-btn { width: 100%; max-width: none; padding: 0 10px; gap: 5px; }
  .filter-row .fsel-v { flex: 1; text-align: left; }
  .filter-row .fsel-ic { display: none; }
  .filter-reset { flex: none; width: 38px; padding: 0; justify-content: center; font-size: 0; }
  .filter-reset .ic { width: 16px; height: 16px; }
}