/**
 * SiGaji — semantic design tokens (load before styles.css).
 * Legacy aliases (--blue, --bll, …) tetap di styles.css; file ini menambah
 * nama semantik + nilai yang berubah per tema dark/brand.
 */
:root {
  --font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --sigaji-topbar-h: 58px;
  --content-pad-x: 1.65rem;
  --content-pad-y: 1.5rem;

  /* Base palette — nilai sumber (styles.css alias ke sini; jangan circular) */
  --wh: #ffffff;
  --sidebar: #1e2330;
  --tx: #1e2330;
  --ink: #1e2330;
  --muted: #6b7280;
  --ink-body: #374151;
  --ink-subtle: #9ca3af;
  --bd: #dde1e9;

  --blue: #1a56a0;
  --blue-dark: #0d3d7a;
  --blue-light: #3b82f6;
  --bll: #e8f0fb;
  --indigo: #2563eb;
  --indigo-ink: #1d4ed8;

  --gr: #2d6a0a;
  --grb: #e8f4de;
  --am: #7d4800;
  --amb: #fef3e2;
  --rd: #9b2121;
  --rdb: #fdeaea;
  --pu: #5b21b6;
  --pul: #f5f0ff;
  --pub: #c4b5fd;

  --row-hover: #f8f9fc;

  /* Sidebar nav (kontras di atas --sidebar-bg gelap) */
  --sidebar-fg: #cbd5e1;
  --sidebar-fg-muted: #94a3b8;
  --sidebar-fg-hover: #e2e8f0;
  --sidebar-fg-active: #93c5fd;

  --bg: #f4f5f8;
  --surface: var(--wh);
  --surface-2: #f8fafc;

  /* Semantic color (alias ke legacy) */
  --color-primary: var(--blue);
  --color-purple-muted: #ede9fe;

  --color-text: var(--tx);
  --color-text-muted: var(--muted);
  --color-border: var(--bd);
  --color-primary-dark: var(--blue-dark);
  --color-primary-light: var(--blue-light);
  --color-primary-subtle: var(--bll);
  --color-success: var(--gr);
  --color-success-bg: var(--grb);
  --color-warning: var(--am);
  --color-warning-bg: var(--amb);
  --color-danger: var(--rd);
  --color-danger-bg: var(--rdb);
  --color-purple: var(--pu);
  --color-purple-bg: var(--pul);
  --color-purple-border: var(--pub);
  --color-border-light: #e5e7eb;
  --color-surface-muted: #f3f4f6;
  --color-surface: var(--surface);
  --color-surface-elevated: var(--surface-2);
  --color-bg: var(--bg);
  --color-bg-content: #eef1f6;
  --sigaji-sidebar-w: 228px;
  --content-bg: var(--color-bg-content);

  --color-primary-border: #c5d9f5;
  --color-success-border: var(--success-border, #b3d98f);
  --color-warning-border: var(--warn-border, #f5a623);
  --color-danger-border: #f5a3a3;

  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;

  /* Shadow (konsolidasi) */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-topbar: 0 1px 4px rgba(0, 0, 0, 0.06);

  /* Absensi status */
  --ab-hadir-bg: var(--color-success-bg);
  --ab-hadir-fg: var(--color-success);
  --ab-cuti-bg: var(--color-purple-muted);
  --ab-cuti-fg: var(--color-purple);
  --ab-izin-bg: var(--color-primary-subtle);
  --ab-izin-fg: var(--color-primary);
  --ab-sakit-bg: var(--color-warning-bg);
  --ab-sakit-fg: var(--color-warning);
  --ab-alpha-bg: var(--color-danger-bg);
  --ab-alpha-fg: var(--color-danger);
  --ab-libur-bg: var(--color-surface-muted);
  --ab-libur-fg: var(--ink-subtle);
  --ab-libnas-bg: #fef9c3;
  --ab-libnas-fg: #713f12;
  --ab-half-sakit-bg: #fff0e0;
  --ab-half-sakit-fg: #b45309;
  --ab-half-ijin-bg: #e0f0ff;
  --ab-half-ijin-fg: #0369a1;
  --ab-grid-head-bg: var(--sidebar);
  --ab-grid-head-fg: var(--wh);
  --ab-grid-head-border: var(--ink-body);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Table */
  --table-head-bg: #f1f5f9;
  --table-head-color: #475569;
  --table-head-border: #e2e8f0;
  --table-cell-border: #f1f5f9;
  --table-sticky-bg: var(--color-surface);
  --table-sticky-head-bg: var(--color-surface-elevated);
  --table-zebra: #fafbfc;
  --table-row-hover: var(--row-hover);
  --table-sticky-shadow: rgba(0, 0, 0, 0.04);

  /* Row semantics (payroll) */
  --row-prorate-bg: #fffbf5;
  --row-neto-neg-bg: #fef2f2;
  --row-pending-bg: #fffbeb;

  /* Money cells */
  --cell-money-color: var(--color-text);
  --cell-deduction-color: var(--color-danger);
  --cell-neto-color: var(--color-success);
}

/* ── Dark theme: remap tokens, bukan patch per-komponen ── */
[data-theme='dark'] {
  --bg: #0f172a;
  --tx: #e2e8f0;
  --ink: #e2e8f0;
  --muted: #94a3b8;
  --bd: #334155;
  --wh: #1e293b;
  --surface: #1e293b;
  --surface-2: #0f172a;
  --content-bg: #0f172a;

  --bll: #1e3a5f;
  --grb: #14532d;
  --amb: #451a03;
  --rdb: #450a0a;
  --pul: #2e1065;
  --row-hover: #273548;
  --row-border: #334155;

  --table-head-bg: #334155;
  --table-head-color: #cbd5e1;
  --table-head-border: #475569;
  --table-cell-border: #334155;
  --table-sticky-bg: #1e293b;
  --table-sticky-head-bg: #334155;
  --table-zebra: #1a2536;
  --table-row-hover: #273548;
  --table-sticky-shadow: rgba(0, 0, 0, 0.25);

  --row-prorate-bg: #2d2419;
  --row-neto-neg-bg: #3b1c1c;
  --row-pending-bg: #2d2819;

  --ink-muted: #94a3b8;
  --ink-subtle: #94a3b8;
  --ink-body: #cbd5e1;

  --sidebar-fg: #cbd5e1;
  --sidebar-fg-muted: #94a3b8;
  --sidebar-fg-hover: #e2e8f0;
  --sidebar-fg-active: #93c5fd;
  --border: rgba(148, 163, 184, 0.12);
  --color-border-light: #475569;
  --color-surface-muted: #273548;
  --color-bg-content: #0f172a;
  --color-primary-border: #1e3a5f;
  --color-purple-muted: #2e1065;
  --color-blue-50: #1e3a5f;
  --color-blue-100: #1e3a5f;
  --color-blue-200: #334155;
  --ab-libnas-bg: #422006;
  --ab-libnas-fg: #fde68a;
  --ab-grid-head-bg: #0f172a;
  --ab-grid-head-border: #475569;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-topbar: 0 1px 4px rgba(0, 0, 0, 0.25);

  /* Topbar (dark) — kontras jelas, bukan blok hitam polos */
  --topbar-bg: #1e293b;
  --topbar-border: #475569;
  --topbar-fg: #e2e8f0;
  --topbar-accent: #60a5fa;
  --color-text: #e2e8f0;
}

[data-theme='dark'] body,
[data-theme='dark'] .content {
  background: var(--color-bg) !important;
  color: var(--color-text);
}

[data-theme='dark'] .card {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme='dark'] .topbar {
  background: var(--topbar-bg) !important;
  border-bottom-color: var(--topbar-border) !important;
  color: var(--topbar-fg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 0 var(--topbar-border), var(--shadow-topbar) !important;
}

[data-theme='dark'] .topbar .alogo {
  color: var(--topbar-accent) !important;
}

[data-theme='dark'] .topbar .uname,
[data-theme='dark'] .topbar .sync-status,
[data-theme='dark'] .topbar .save-ind {
  color: var(--topbar-fg);
}

[data-theme='dark'] .topbar .rbadge {
  background: rgba(96, 165, 250, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(96, 165, 250, 0.25);
}

[data-theme='dark'] .topbar .periode-pill {
  background: rgba(96, 165, 250, 0.12);
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.3);
}

[data-theme='dark'] .topbar .btn-out,
[data-theme='dark'] .topbar .topbar-logout {
  border-color: #64748b !important;
  color: #e2e8f0 !important;
  background: rgba(15, 23, 42, 0.35);
}

[data-theme='dark'] .topbar .btn-out:hover,
[data-theme='dark'] .topbar .topbar-logout:hover {
  background: rgba(51, 65, 85, 0.6);
  border-color: #94a3b8 !important;
}

[data-theme='dark'] .topbar .toolbar-select,
[data-theme='dark'] .topbar .ui-pref-sel {
  background: #0f172a;
  border-color: #475569;
  color: #e2e8f0;
}

[data-theme='dark'] .topbar .notif-btn {
  color: #e2e8f0;
}

[data-theme='dark'] .topbar .nav-drawer-btn {
  background: rgba(96, 165, 250, 0.12);
  color: #93c5fd;
}

/* ── Brand PT: aksen warna PT, topbar tetap terang (nama PT selalu terbaca) ── */
[data-theme='brand'] {
  --ux-accent: #1a56a0;
  --color-primary: var(--ux-accent);
  --blue: var(--ux-accent);
  --color-primary-subtle: color-mix(in srgb, var(--ux-accent) 12%, white);
  --bll: color-mix(in srgb, var(--ux-accent) 12%, white);
}

[data-theme='brand'] .topbar,
.topbar.topbar--brand-accent {
  background: rgba(255, 255, 255, 0.97) !important;
  border-bottom: 3px solid var(--ux-accent, #1a56a0) !important;
  color: var(--tx, #1e2330) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

[data-theme='brand'] .topbar .alogo,
.topbar.topbar--brand-accent .alogo {
  color: var(--ux-accent, #1a56a0) !important;
}

[data-theme='brand'] .topbar .uname,
.topbar.topbar--brand-accent .uname {
  color: var(--tx, #1e2330) !important;
}

[data-theme='brand'] .topbar .rbadge,
.topbar.topbar--brand-accent .rbadge {
  color: var(--ux-accent, #1a56a0);
  background: var(--color-primary-subtle, #e8f0fb);
  border: 1px solid var(--color-primary-border, #c5d9f5);
}