/* AKARA Design System — combined token stylesheet */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai+Looped:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Families */
  --font-sans: 'IBM Plex Sans Thai Looped','IBM Plex Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono: 'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
  /* Weights */
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  /* Scale */
  --fs-display:44px; --fs-h1:32px; --fs-h2:26px; --fs-h3:21px; --fs-h4:18px;
  --fs-body-lg:17px; --fs-body:15px; --fs-sm:14px; --fs-xs:13px; --fs-2xs:12px;
  /* Line heights */
  --lh-tight:1.15; --lh-snug:1.35; --lh-normal:1.55; --lh-relaxed:1.7;
  /* Letter spacing */
  --ls-tight:-0.01em; --ls-normal:0; --ls-wide:0.04em; --ls-caps:0.06em;
  /* Spacing */
  --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px;
  /* Radius */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:10px;
  --radius-xl:12px; --radius-2xl:16px; --radius-pill:999px;
  /* Shadows */
  --shadow-xs:0 1px 2px rgba(12,35,85,.06);
  --shadow-sm:0 1px 3px rgba(12,35,85,.08),0 1px 2px rgba(12,35,85,.05);
  --shadow-md:0 4px 12px rgba(12,35,85,.08),0 2px 4px rgba(12,35,85,.05);
  --shadow-lg:0 12px 28px rgba(12,35,85,.12),0 4px 8px rgba(12,35,85,.06);
  --shadow-header:0 1px 0 rgba(12,35,85,.04),0 4px 16px rgba(12,35,85,.06);
  /* Motion */
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:140ms; --dur-base:220ms; --dur-slow:360ms;
  /* Z-index */
  --z-base:0; --z-sticky:100; --z-header:200; --z-dropdown:300;
  --z-drawer:400; --z-modal:500; --z-toast:600;
  /* Brand: Navy */
  --navy-900:#07173B; --navy-800:#0C2355; --navy-700:#112E6B; --navy-600:#173A82;
  /* Brand: Blue */
  --blue-700:#143C82; --blue-600:#1A4BA0; --blue-500:#2560C8;
  --blue-400:#5B87CC; --blue-100:#DBEAFE; --blue-50:#EFF6FF;
  /* Brand: Gold */
  --gold-600:#C99A0E; --gold-500:#F5C318; --gold-400:#FAD451; --gold-100:#FEF3C7;
  /* Neutrals */
  --slate-950:#0F172A; --slate-800:#1E293B; --slate-600:#475569;
  --slate-500:#64748B; --slate-400:#94A3B8; --slate-300:#CBD5E1;
  --slate-200:#E2E8F0; --slate-100:#F1F5F9; --slate-50:#F8FAFC; --white:#FFFFFF;
  /* Semantic status */
  --success-600:#166534; --success-500:#15803D; --success-50:#DCFCE7;
  --warning-600:#92400E; --warning-500:#B45309; --warning-50:#FEF3C7;
  --danger-600:#991B1B; --danger-500:#DC2626; --danger-50:#FEE2E2;
  --info-600:#0E7490; --info-50:#ECFEFF;
  /* Semantic aliases — light */
  --color-bg:var(--slate-100); --color-surface:var(--white); --color-surface-sunk:var(--slate-50);
  --text-primary:var(--slate-950); --text-secondary:var(--slate-600);
  --text-muted:var(--slate-500); --text-faint:var(--slate-400);
  --text-on-brand:var(--white); --text-link:var(--blue-600);
  --brand:var(--blue-600); --brand-strong:var(--navy-800); --brand-hover:var(--blue-500);
  --accent:var(--gold-500);
  --border:var(--slate-200); --border-strong:var(--slate-300); --focus-ring:var(--blue-500);
  --on-navy-text:rgba(255,255,255,.92); --on-navy-muted:rgba(255,255,255,.62);
  --on-navy-hover:rgba(255,255,255,.10); --on-navy-divider:rgba(255,255,255,.16);
  --thead-bg:var(--navy-800);
}
:root[data-theme="dark"],.theme-dark {
  --color-bg:#081428; --color-surface:#102543; --color-surface-sunk:#0B1C36;
  --text-primary:#EAF1FB; --text-secondary:#AEC0DC; --text-muted:#7E92B4;
  --text-faint:#5C6F92; --text-link:#6FA2EC;
  --brand:var(--blue-500); --brand-strong:#0B1C36; --brand-hover:var(--blue-400);
  --accent:var(--gold-500);
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
  --focus-ring:var(--blue-400); --thead-bg:#16315A;
}
:root,.theme-light { --thead-bg:var(--navy-800); }

/* Responsive table -> stacked card list on narrow screens (phones/tablet portrait).
   Add class="ds-rtable" to a <table> and data-label="..." to each <td> (matching
   its header text) to opt in. Below the breakpoint the table stops laying out as
   a grid and each row becomes a self-contained card with label:value pairs, so
   nothing gets squeezed into unreadable columns or clipped off-screen. */
@media (max-width: 760px) {
  table.ds-rtable thead { display:none; }
  table.ds-rtable, table.ds-rtable tbody, table.ds-rtable tr, table.ds-rtable td { display:block; width:100%; }
  table.ds-rtable { min-width:0 !important; background:var(--color-surface-sunk); padding:10px; }
  table.ds-rtable tr {
    border:1px solid var(--border-strong); border-left:4px solid var(--blue-600); border-radius:var(--radius-md);
    margin-bottom:10px; padding:0 14px 4px; background:var(--color-surface); box-shadow:0 1px 3px rgba(12,35,85,.08);
  }
  table.ds-rtable tr:last-child { margin-bottom:0; }
  table.ds-rtable td {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:7px 0; border-bottom:1px solid var(--border) !important; text-align:right !important;
    white-space:normal !important;
  }
  table.ds-rtable td:last-child { border-bottom:none !important; }
  table.ds-rtable td[data-label]:not([data-label=""])::before {
    content:attr(data-label); font-size:11px; font-weight:700; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:0.02em; text-align:left; flex-shrink:0;
  }
  /* First cell reads as the card's title (name / primary employee, not just another field) */
  table.ds-rtable td:first-child {
    padding-top:12px; margin:0 -14px 4px; padding-left:14px; padding-right:14px;
    border-bottom:1px solid var(--border-strong) !important;
    font-size:15px; font-weight:700; color:var(--navy-800,var(--text-primary));
    justify-content:flex-start;
  }
  table.ds-rtable td:first-child::before { display:none; }
  table.ds-rtable td[data-label=""] { justify-content:flex-end; }
}