/* Small custom CSS the Tailwind CDN build can't easily express via utility classes. */

/* Real Filament color tokens, copied verbatim from the compiled admin panel's
   runtime <style> block (app/Providers/Filament/AdminPanelProvider.php ->
   colors([...]) + Filament's default palette). filament-theme.css (the
   compiled theme.css asset, also copied verbatim from public/build/assets/)
   expects these as RGB triplets consumed via rgb(var(--x) / <alpha-value>) -
   this is what makes .fi-badge/.fi-btn/.fi-sidebar-* etc. render in the
   correct real colors instead of Tailwind's default palette. */
:root {
  --danger-50:254, 242, 242;  --danger-100:254, 226, 226;  --danger-200:254, 202, 202;  --danger-300:252, 165, 165;  --danger-400:248, 113, 113;  --danger-500:239, 68, 68;  --danger-600:220, 38, 38;  --danger-700:185, 28, 28;  --danger-800:153, 27, 27;  --danger-900:127, 29, 29;  --danger-950:69, 10, 10;
  --gray-50:250, 250, 250;  --gray-100:244, 244, 245;  --gray-200:228, 228, 231;  --gray-300:212, 212, 216;  --gray-400:161, 161, 170;  --gray-500:113, 113, 122;  --gray-600:82, 82, 91;  --gray-700:63, 63, 70;  --gray-800:39, 39, 42;  --gray-900:24, 24, 27;  --gray-950:9, 9, 11;
  --info-50:239, 246, 255;  --info-100:219, 234, 254;  --info-200:191, 219, 254;  --info-300:147, 197, 253;  --info-400:96, 165, 250;  --info-500:59, 130, 246;  --info-600:37, 99, 235;  --info-700:29, 78, 216;  --info-800:30, 64, 175;  --info-900:30, 58, 138;  --info-950:23, 37, 84;
  --primary-50:244, 244, 247;  --primary-100:233, 234, 239;  --primary-200:199, 202, 215;  --primary-300:165, 170, 191;  --primary-400:98, 107, 142;  --primary-500:31, 43, 94;  --primary-600:28, 39, 85;  --primary-700:23, 32, 71;  --primary-800:19, 26, 56;  --primary-900:15, 21, 46;  --primary-950:9, 13, 28;
  --success-50:240, 253, 244;  --success-100:220, 252, 231;  --success-200:187, 247, 208;  --success-300:134, 239, 172;  --success-400:74, 222, 128;  --success-500:34, 197, 94;  --success-600:22, 163, 74;  --success-700:21, 128, 61;  --success-800:22, 101, 52;  --success-900:20, 83, 45;  --success-950:5, 46, 22;
  --warning-50:255, 251, 235;  --warning-100:254, 243, 199;  --warning-200:253, 230, 138;  --warning-300:252, 211, 77;  --warning-400:251, 191, 36;  --warning-500:245, 158, 11;  --warning-600:217, 119, 6;  --warning-700:180, 83, 9;  --warning-800:146, 64, 14;  --warning-900:120, 53, 15;  --warning-950:69, 26, 3;
}

html, body {
  font-family: Figtree, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Filament-style chip for T-code badges (T1..T5), colored via data-tcode */
.t-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.5rem; padding: 0 0.4rem; border-radius: 0.375rem; font-size: 0.7rem; font-weight: 600; cursor: help; }
.t-chip[data-tcode="T1"] { background: #fef3c7; color: #92400e; }
.t-chip[data-tcode="T2"] { background: #fed7aa; color: #9a3412; }
.t-chip[data-tcode="T3"] { background: #fecaca; color: #991b1b; }
.t-chip[data-tcode="T4"] { background: #fde68a; color: #854d0e; }
.t-chip[data-tcode="T5"] { background: #fecaca; color: #7f1d1d; }

/* Small "contoh" tag next to example (unconfirmed) fine amounts: T2, T3, T5 */
.contoh-tag { display: inline-flex; align-items: center; margin-left: 0.25rem; padding: 0.05rem 0.3rem; border-radius: 0.25rem; font-size: 0.625rem; font-weight: 500; line-height: 1rem; vertical-align: middle; white-space: nowrap; background: rgba(var(--warning-50), 1); color: rgba(var(--warning-700), 1); box-shadow: inset 0 0 0 1px rgba(var(--warning-600), 0.25); cursor: help; }

/* Scheduler grid cells */
.sched-cell { min-width: 64px; text-align: center; font-size: 0.7rem; font-weight: 600; padding: 0.35rem 0.2rem; border-radius: 0.375rem; }

/* A4 payslip preview (S19) */
.payslip-a4 { width: 210mm; min-height: 297mm; margin: 0 auto; background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); padding: 18mm; }
@media print {
  body * { visibility: hidden; }
  .payslip-a4, .payslip-a4 * { visibility: visible; }
  .payslip-a4 { position: absolute; left: 0; top: 0; box-shadow: none; }
}

/* Simple empty-state illustration box */
.empty-state-icon { width: 3rem; height: 3rem; color: #d1d5db; }

[x-cloak] { display: none !important; }

/* Fix: Tailwind CDN's bare `.grid` utility has no explicit track sizing, so the
   `.fi-badge > .grid > .truncate` wrapper (copied verbatim from Filament's real
   badge markup) can collapse its auto track below the label's natural width,
   clipping short labels (e.g. "Locked" -> "Loc..."). Force the track (and the
   truncate span itself) to size to content instead. */
.fi-badge > .grid { grid-template-columns: max-content; width: max-content; }
.fi-badge > .grid > .truncate { width: max-content; max-width: none; }