/**
 * SiGaji — komponen UI berulang (ganti inline hex di JS).
 * Semua warna lewat token agar dark/brand ikut.
 */

/* ── Form inline (komponen gaji, master) ── */
.inp-bordered,
.comp-inp {
  padding: 5px 8px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  font-family: inherit;
  font-size: 12px;
  outline: none;
}
.inp-bordered:focus,
.comp-inp:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.lembur-inp-date { width: 135px; }
.lembur-inp-jam { width: 65px; }
.lembur-inp-amt { min-width: 90px; }
.p-var-drill { padding: 0.65rem 1rem; }
.snap-field-disabled {
  background: var(--color-surface-muted) !important;
  color: var(--color-text-muted) !important;
  cursor: not-allowed;
}

/* ── Gaji summary panel ── */
.gs-row-total {
  border-top: 1px solid var(--color-primary-border);
  padding-top: 3px;
  font-weight: 700;
  margin-top: 0.25rem;
}
.gs-divider {
  border-top: 1px solid var(--color-border-light);
  padding-top: 4px;
  margin-top: 0.25rem;
}
.thr-callout {
  background: var(--color-purple-bg);
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 10px;
  color: var(--color-purple);
  margin-top: 2px;
}
.thr-callout-lg {
  background: var(--color-purple-bg);
  border: 1px solid var(--color-purple-border);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--color-purple);
  font-weight: 700;
  margin-top: 0.25rem;
}

/* ── Approval & rekonsiliasi ── */
.approval-pending-card {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-warning);
  padding: 0.85rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
}
.approval-done-card {
  border: 1px solid var(--color-border);
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.4rem;
}
.approval-done-card.is-approved {
  border-left: 3px solid var(--color-success);
}
.approval-done-card.is-rejected {
  border-left: 3px solid var(--color-danger);
}
.recon-panel {
  border-radius: var(--radius-md);
  margin-top: 0.75rem;
  padding: 0.85rem;
  border: 1.5px solid;
}
.recon-panel.is-refund {
  background: var(--color-success-bg);
  border-color: var(--color-success);
}
.recon-panel.is-owe {
  background: var(--color-warning-bg);
  border-color: var(--color-warning);
}
.recon-panel-title.is-refund { color: var(--color-success); }
.recon-panel-title.is-owe { color: var(--color-warning); }
.recon-panel-amount.is-refund { color: var(--color-success); }
.recon-panel-amount.is-owe { color: var(--color-danger); }

/* ── Master: snapshot guard, HK radio ── */
.snap-guard-blocking {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border) !important;
  color: var(--color-danger);
}
.snap-guard-warn {
  background: var(--row-prorate-bg);
  border-color: var(--color-warning-border) !important;
  color: var(--color-warning);
}
.hk-radio-label {
  border: 1.5px solid var(--color-border);
  transition: border-color 0.15s, background 0.15s;
}
.hk-radio-active {
  border-color: var(--color-primary) !important;
  background: var(--color-primary-subtle) !important;
}
.hk-radio-idle {
  border-color: var(--color-border) !important;
  background: var(--wh) !important;
}
.border-bottom-muted {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-surface-muted);
}
.master-jab-badge {
  background: var(--color-primary-subtle);
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11px;
  color: var(--color-primary);
  font-weight: 700;
}
.cuti-sisa-ok { color: var(--color-success); }
.cuti-sisa-warn { color: var(--color-warning); }
.cuti-sisa-danger { color: var(--color-danger); }
.backup-latest-row {
  background: var(--color-success-bg);
  border-color: var(--success-border, var(--color-success-border));
}

/* ── Absensi: status sel & rekap ── */
.ab-stat-pill {
  padding: 3px 12px;
  border-radius: 20px;
  font-weight: 700;
}
.ab-stat-pill.is-hadir { background: var(--ab-hadir-bg); color: var(--ab-hadir-fg); }
.ab-stat-pill.is-cuti { background: var(--ab-cuti-bg); color: var(--ab-cuti-fg); }
.ab-stat-pill.is-warn { background: var(--ab-sakit-bg); color: var(--ab-sakit-fg); }
.ab-stat-pill.is-brand { background: var(--ab-izin-bg); color: var(--ab-izin-fg); }
.ab-stat-pill.is-danger { background: var(--ab-alpha-bg); color: var(--ab-alpha-fg); }

.ab-mobile-stat {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}
.ab-mobile-stat.is-hadir { background: var(--ab-hadir-bg); color: var(--ab-hadir-fg); }
.ab-mobile-stat.is-cuti { background: var(--ab-cuti-bg); color: var(--ab-cuti-fg); }
.ab-mobile-stat.is-warn { background: var(--ab-sakit-bg); color: var(--ab-sakit-fg); }
.ab-mobile-stat.is-brand { background: var(--ab-izin-bg); color: var(--ab-izin-fg); }
.ab-mobile-stat.is-danger { background: var(--ab-alpha-bg); color: var(--ab-alpha-fg); }

.ab-total-h { background: var(--ab-hadir-bg); border-left: 2px solid var(--color-border-light); }
.ab-total-c { background: var(--ab-cuti-bg); }
.ab-total-s { background: var(--ab-sakit-bg); }
.ab-total-i { background: var(--ab-izin-bg); }
.ab-total-a { background: var(--ab-alpha-bg); }

.ab-grid-head {
  background: var(--ab-grid-head-bg);
  color: var(--ab-grid-head-fg);
}
.ab-grid-head-sticky {
  position: sticky;
  top: 0;
  z-index: 8;
  background: var(--ab-grid-head-bg);
  color: var(--ab-grid-head-fg);
  border-right: 1px solid var(--ab-grid-head-border);
  box-shadow: 1px 0 0 var(--ab-grid-head-border);
}
.ab-grid-sum-head {
  background: var(--color-primary-dark);
  color: var(--wh);
}
.ab-zebra-even { background: var(--table-zebra); }
.ab-zebra-odd { background: var(--wh); }
.ab-kar-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 800;
  color: var(--color-primary);
}

.p-empty-pad { padding: 2rem; }
.p-empty-sm { padding: 0.5rem; }
.p-empty-md { padding: 1.25rem; }

/* ── Info box tone (ganti inline hex di JS) ── */
.info-box.is-danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}
.info-box.is-warn {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}
.sysstatus-table .border-bottom-muted {
  width: 38%;
}

/* ── Form inline (mobile, filter) ── */
.select-inline-bordered {
  padding: 6px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  font-family: inherit;
  font-size: 12px;
  outline: none;
  background: var(--wh);
}
.font-mono { font-family: monospace; }

/* ── Mobile ── */
.mob-card-bordered {
  border: 1px solid var(--color-border-light);
  margin-bottom: 0.85rem;
}
.mob-leave-split {
  border: 1px solid var(--color-border-light);
  padding: 0.75rem;
}
.mob-notif-unread { background: var(--color-blue-50); }
.mob-list-row {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--color-surface-muted);
}
.mob-list-row-sm {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-surface-muted);
}
.mob-preview-cloud {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-border-light);
}
.mob-radius-warn { color: var(--ab-half-sakit-fg); }

/* ── Slip gaji ── */
.slip-prorate-badge {
  background: var(--color-warning-bg);
  padding: 2px 7px;
  border-radius: 5px;
}
.slip-thr-box {
  background: var(--color-purple-bg);
  border: 1.5px solid var(--color-purple-border);
}
.slip-thr-box-sm {
  background: var(--color-purple-bg);
  border: 1px solid var(--color-purple-border);
}
.slip-thr-heading {
  color: var(--color-purple);
  text-transform: uppercase;
}
.slip-thr-divider {
  color: var(--color-purple);
  border-top: 1px solid var(--color-purple-border);
  padding-top: 4px;
}
.slip-thr-bruto-row {
  border-top: 1.5px solid var(--color-purple);
  padding-top: 6px;
}
.slip-pph-note {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-left: 3px solid var(--color-success);
  border-radius: 6px;
  padding: 0.65rem 0.9rem;
}
.slip-ineligible {
  padding: 2rem;
  background: var(--color-danger-bg);
}
.slip-terbilang {
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  padding: 8px 10px;
}
.slip-recon-lebih {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
}
.slip-recon-kurang {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
}
.slip-thr-total {
  background: linear-gradient(90deg, var(--color-purple), #7c3aed);
}
.slip-pot-warn { color: var(--ab-half-sakit-fg); }
.slip-terbilang-italic { font-style: italic; }

/* ── Laporan & THR ── */
.row-period-active { background: var(--color-success-bg); }
.thr-mode-btn {
  padding: 3px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--color-border);
  background: var(--wh);
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.thr-mode-btn.is-manual {
  border-color: var(--color-purple);
  background: var(--color-purple);
  color: var(--wh);
}
.thr-manual-inp {
  width: 120px;
  padding: 4px 8px;
  border: 1.5px solid var(--color-purple-border);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  color: var(--color-purple);
  font-weight: 700;
}
.thr-val-manual { color: var(--color-purple); }
.thr-val-auto { color: var(--color-primary); }
.text-dash-muted { color: var(--color-slate-300); }

/* ── Tunjangan variabel ── */
/* Sel berisi nilai + tombol; buat nilai mengisi lebar sel & rata kanan agar
   angka lurus ke bawah (gaya kolom uang) dan tombol Edit/Simpan sejajar. */
.tunjvar-cell-wrap { flex-wrap: nowrap; width: 100%; }
.tunjvar-val {
  flex: 1 1 auto;
  min-width: 76px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.tunjvar-inp-narrow {
  flex: 1 1 auto;
  max-width: 100px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── Variance laporan ── */
.cell-delta-up { color: var(--color-success); }
.cell-delta-down { color: var(--color-danger); }
.cell-delta-warn { color: var(--color-warning); }

/* ── Absensi grid ── */
.ab-grid-table {
  border-collapse: collapse;
  min-width: max-content;
}
.ab-grid-table .ab-sticky-no {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 44px;
  min-width: 44px;
  padding: 5px 6px;
  border-right: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-surface-muted);
  box-shadow: 1px 0 0 var(--color-border-light);
}
.ab-grid-table .ab-sticky-name {
  position: sticky;
  left: 44px;
  z-index: 3;
  min-width: 272px;
  width: 272px;
  max-width: 320px;
  padding: 5px 10px;
  border-right: 2px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-surface-muted);
  box-shadow: 1px 0 0 var(--color-border-light);
  vertical-align: middle;
}
.ab-grid-table .ab-sticky-jab {
  position: sticky;
  left: 316px;
  z-index: 3;
  min-width: 112px;
  padding: 5px 8px;
  white-space: nowrap;
  border-right: 2px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-surface-muted);
  box-shadow: 1px 0 0 var(--color-border-light);
}
.ab-grid-table thead .ab-sticky-no,
.ab-grid-table thead .ab-sticky-name,
.ab-grid-table thead .ab-sticky-jab {
  z-index: 7;
  vertical-align: bottom;
}
.ab-grid-table tr.ab-row-even .ab-sticky-no,
.ab-grid-table tr.ab-row-even .ab-sticky-name,
.ab-grid-table tr.ab-row-even .ab-sticky-jab {
  background: var(--wh);
}
.ab-grid-table tr.ab-row-odd .ab-sticky-no,
.ab-grid-table tr.ab-row-odd .ab-sticky-name,
.ab-grid-table tr.ab-row-odd .ab-sticky-jab {
  background: var(--table-zebra);
}
.ab-day-th {
  position: sticky;
  top: 0;
  z-index: 6;
  padding: 4px 3px;
  min-width: 36px;
  border-right: 1px solid var(--ab-grid-head-border);
  text-align: center;
}
.ab-day-th.is-normal {
  background: var(--ab-grid-head-bg);
  color: var(--color-slate-300);
}
.ab-day-th.is-libur {
  background: var(--ink-body);
  color: var(--ab-libur-fg);
}
.ab-day-th.is-libnas {
  background: var(--ab-libnas-bg);
  color: var(--ab-libnas-fg);
}
.ab-day-mon-lbl { font-size: 8px; opacity: 0.85; }
.ab-cell {
  padding: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid var(--color-surface-muted);
}
.ab-cell.ab-st-hadir { background: var(--ab-hadir-bg); color: var(--ab-hadir-fg); }
.ab-cell.ab-st-cuti { background: var(--ab-cuti-bg); color: var(--ab-cuti-fg); }
.ab-cell.ab-st-izin { background: var(--ab-izin-bg); color: var(--ab-izin-fg); }
.ab-cell.ab-st-sakit { background: var(--ab-sakit-bg); color: var(--ab-sakit-fg); }
.ab-cell.ab-st-setengah_sakit { background: var(--ab-half-sakit-bg); color: var(--ab-half-sakit-fg); }
.ab-cell.ab-st-setengah_ijin { background: var(--ab-half-ijin-bg); color: var(--ab-half-ijin-fg); }
.ab-cell.ab-st-alpha { background: var(--ab-alpha-bg); color: var(--ab-alpha-fg); }
.ab-cell.ab-st-libur { background: var(--ab-libur-bg); color: var(--ab-libur-fg); }
.ab-cell.ab-st-libnas { background: var(--ab-libnas-bg); color: var(--ab-libnas-fg); }
.ab-cell.is-clickable { cursor: pointer; }
.ab-cell.is-readonly { opacity: 0.88; cursor: not-allowed; }
.ab-kar-name { line-height: 1.25; word-break: break-word; white-space: normal; }
.ab-kar-nik { word-break: break-all; }