/* Measured HRIS — v2.5 design-token layer + residual CSS after the Tailwind
   migration. The v2.5 brand families are Matcha, Brioche, Cherry, and Spinach.
   Legacy semantic aliases stay in place so the existing TSX utility classes and
   compound-state selectors can consume the same approved palette. */

:root {
  /* v2.5 core color families */
  /* Matcha is anchored to the SANDBOX_lovable brand green #3f5908
     (hsl 74 83% 19%). 600 = the primary brand green. */
  --matcha-50: #f6f8f2;
  --matcha-100: #e9efd0;
  --matcha-200: #cdd9a6;
  --matcha-300: #a6bc63;
  --matcha-400: #77932a;
  --matcha-500: #5f770d;
  --matcha-600: #3f5908;
  --matcha-700: #2f4207;
  --matcha-800: #273608;
  --matcha-900: #1c2706;

  --brioche-25: #fdfcf9;
  --brioche-50: #faf9f7;
  --brioche-100: #f4f2ee;
  --brioche-200: #eae6df;
  --brioche-300: #ddd6cc;
  --brioche-400: #c8bba9;
  --brioche-500: #a99178;
  --brioche-600: #866d55;
  --brioche-700: #665140;
  --brioche-800: #46382e;
  --brioche-900: #2d251f;

  --cherry-50: #f7e8e6;
  --cherry-100: #efd0cc;
  --cherry-200: #e4aaa4;
  --cherry-300: #d27b73;
  --cherry-400: #bd5a50;
  --cherry-500: #a13d35;
  --cherry-600: #863029;
  --cherry-700: #6c261f;
  --cherry-800: #531f1a;
  --cherry-900: #3a1714;

  --spinach-50: #ecefe7;
  --spinach-100: #d8dfd0;
  --spinach-200: #c7cfc2;
  --spinach-300: #9aa896;
  --spinach-400: #6f806d;
  --spinach-500: #4f614f;
  --spinach-600: #3a463a;
  --spinach-700: #2e3a2e;
  --spinach-800: #232d23;
  --spinach-900: #182018;

  /* Food-brand accent hues (payroll KPI/stat cards) — mirrors tw.js. */
  --tangerine: #df7934; --tangerine-soft: #fbe7d5;
  --blueberry: #465586; --blueberry-soft: #e7eaf2;

  /* v2.5 semantic tokens */
  /* Page background is pure white (DS §1.1 + Lovable reference); Oat Milk /
     Brioche tints are reserved for table headers, zebra, and tinted cards. */
  --ds-color-canvas: #ffffff;
  --ds-color-surface: #ffffff;
  --ds-color-surface-muted: var(--brioche-100);
  --ds-color-border: var(--brioche-200);
  --ds-color-border-strong: var(--brioche-300);
  --ds-color-text: #37352f;
  --ds-color-text-soft: #6b6760;
  --ds-color-text-faint: #746e65;
  --ds-color-primary: var(--matcha-600);
  --ds-color-primary-hover: var(--matcha-700);
  --ds-color-primary-soft: var(--matcha-100);
  --ds-color-nav: var(--spinach-700);
  --ds-color-nav-soft: var(--spinach-600);
  --ds-color-nav-text: var(--spinach-200);
  --ds-color-nav-active: #ece9df;
  --ds-color-success: #3f7d4e;
  --ds-color-success-soft: #e7f2ea;
  --ds-color-warning: #9a6b1f;
  --ds-color-warning-soft: #fbf2dd;
  --ds-color-danger: var(--cherry-500);
  --ds-color-danger-soft: var(--cherry-50);
  --ds-color-info: #3a5f8a;
  --ds-color-info-soft: #e8eef6;
  --ds-radius-sm: 6px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 10px;
  --ds-radius-xl: 14px;
  /* 3-tier elevation (DESIGN.md): e1 rest / e2 raised / e3 overlay */
  --ds-shadow-card: 0 1px 2px rgba(55,53,47,.06), 0 2px 8px rgba(55,53,47,.05);
  --ds-shadow-pop: 0 4px 12px rgba(40,38,34,.10), 0 12px 28px rgba(40,38,34,.08);
  --ds-shadow-modal: 0 12px 40px rgba(40,38,34,.22);
  /* Motion tokens (DESIGN.md): 150–200ms ease-out, no bounce */
  --motion-fast: 120ms;
  --motion-base: 160ms;
  --motion-slow: 200ms;
  --ease-app: cubic-bezier(0.2, 0, 0, 1);

  /* Legacy app aliases consumed across the current TSX surface. */
  --accent: var(--ds-color-primary); --accent-soft: var(--ds-color-primary-soft);
  --nav: var(--ds-color-nav);
  --green: var(--ds-color-success); --green-soft: var(--ds-color-success-soft);
  --amber: var(--ds-color-warning); --red: var(--ds-color-danger); --red-soft: var(--ds-color-danger-soft); --blue: var(--ds-color-info);
  --border: var(--ds-color-border); --border-strong: var(--ds-color-border-strong); --surface: var(--ds-color-surface);
  --text: var(--ds-color-text); --text-soft: var(--ds-color-text-soft); --text-faint: var(--ds-color-text-faint); --bg-sidebar: var(--ds-color-surface-muted);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- focus ring (DESIGN.md "Focus") — one ring everywhere ---- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--ds-radius-sm);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-radius: inherit; }

/* ---- reduced motion (DESIGN.md "Motion") — global kill switch ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- type scale (DESIGN.md "Typography") — explicit tracking per size ----
   Utility classes for the per-page sweep; Tailwind arbitrary equivalents in
   tw.js letterSpacing tokens. The overline step is the ONLY tracked-out one. */
.t-overline { font-size: 11px; line-height: 1.2; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.t-meta     { font-size: 12px; line-height: 1.35; letter-spacing: 0; }
.t-body-s   { font-size: 12.5px; line-height: 1.45; letter-spacing: 0; }
.t-body     { font-size: 13px; line-height: 1.45; letter-spacing: 0; }
.t-body-l   { font-size: 13.5px; line-height: 1.4; font-weight: 500; letter-spacing: 0; }
.t-title-s  { font-size: 15px; line-height: 1.3; font-weight: 600; letter-spacing: -0.006em; }
.t-title    { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -0.011em; }
.t-display  { font-size: 22px; line-height: 1.25; font-weight: 650; letter-spacing: -0.014em; }
.t-numeral  { font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }

/* ---- invalid form field (UX-08) — red outline on failed validation, cleared
   on the next input. !important + :focus override so it beats the accent focus
   ring in cx.input while the field is still wrong. ---- */
.field-invalid,
.field-invalid:focus {
  border-color: #a13d35 !important;
  box-shadow: 0 0 0 3px rgba(161, 61, 53, 0.18) !important;
  outline: none !important;
}

/* ---- skeleton loaders (DESIGN.md "Components") — layout-preserving ---- */
.skel {
  position: relative;
  overflow: hidden;
  background: var(--ds-color-surface-muted);
  border-radius: var(--ds-radius-sm);
  color: transparent !important;
  user-select: none;
}
.skel::after {
  content: '';
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: skel-shimmer 1.4s var(--ease-app) infinite;
}
@keyframes skel-shimmer { 100% { transform: translateX(100%); } }

/* ---- modal system (DESIGN.md "Components") — ONE implementation ---- */
.modal-back {
  animation: modal-fade var(--motion-base) var(--ease-app);
}
.modal-back.closing { animation: modal-fade-out var(--motion-base) var(--ease-app) forwards; }
.modal-back .modal { animation: modal-in var(--motion-base) var(--ease-app); }
.modal-back.closing .modal { animation: modal-out var(--motion-base) var(--ease-app) forwards; }
.dark .modal, [data-theme="dark"] .modal {
  --surface: var(--spinach-800);
  --bg-sidebar: var(--spinach-700);
  --border: var(--spinach-500);
  --border-strong: var(--spinach-400);
  --text: var(--brioche-25);
  --text-soft: var(--brioche-300);
  --text-faint: var(--brioche-400);
  --accent: var(--matcha-500);
  --red: var(--cherry-200);
  background: var(--spinach-800) !important;
  color: var(--text);
  color-scheme: dark;
}
.dark .modal .bg-surface, [data-theme="dark"] .modal .bg-surface,
.dark .modal input, [data-theme="dark"] .modal input,
.dark .modal textarea, [data-theme="dark"] .modal textarea,
.dark .modal select, [data-theme="dark"] .modal select { background: var(--spinach-800) !important; color: var(--brioche-25) !important; }
.dark .modal .bg-sidebar, [data-theme="dark"] .modal .bg-sidebar { background: var(--spinach-700) !important; }
.dark .modal .border-line, [data-theme="dark"] .modal .border-line { border-color: var(--spinach-500) !important; }
.dark .modal .text-ink, [data-theme="dark"] .modal .text-ink { color: var(--brioche-25) !important; }
.dark .modal .text-ink-soft, [data-theme="dark"] .modal .text-ink-soft { color: var(--brioche-300) !important; }
.dark .modal .text-ink-faint, [data-theme="dark"] .modal .text-ink-faint { color: var(--brioche-400) !important; }
.dark .modal .text-danger, [data-theme="dark"] .modal .text-danger { color: var(--cherry-200) !important; }
/* .text-warn (e.g. the role-change metadata-mismatch chip) failed WCAG AA in a
   dark modal (measured 2.55) — no override, so it fell back to the light tangerine.
   Use the same brioche-200 the compliance-rules / tips dark surfaces already use. */
.dark .modal .text-warn, [data-theme="dark"] .modal .text-warn { color: var(--brioche-200) !important; }
/* Secondary buttons (cx.btn/btnSm/iconBtn use hover:bg-muted) had no visible
   hover in a dark modal — --muted ≈ the spinach-800 surface. Give them a real
   hover step. (Verified: Cancel button bg was bit-identical on hover before.) */
.dark .modal .hover\:bg-muted:hover, [data-theme="dark"] .modal .hover\:bg-muted:hover { background: var(--spinach-600) !important; }
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-fade-out { to { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: scale(.98) translateY(4px); } }
@keyframes modal-out { to { opacity: 0; transform: scale(.98) translateY(4px); } }

/* ---- button states (DESIGN.md "Components") ---- */
.btn-busy { position: relative; pointer-events: none; opacity: .75; }
.btn-busy::before {
  content: '';
  width: 12px; height: 12px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 999px;
  animation: btn-spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Time & Labor dark language: preserve the dense operational hierarchy while
   swapping fixed light utilities onto the existing Spinach/Brioche palette. */
.dark .time-labor-surface, [data-theme="dark"] .time-labor-surface {
  --accent: var(--matcha-300);
  background: var(--spinach-900);
  color: var(--brioche-25);
  margin: -24px;
  min-height: calc(100vh - 64px);
  padding: 24px;
}
.dark .time-labor-surface .bg-surface, [data-theme="dark"] .time-labor-surface .bg-surface,
.dark .time-labor-surface .time-labor-kpi, [data-theme="dark"] .time-labor-surface .time-labor-kpi,
.dark .time-labor-surface .time-labor-filter, [data-theme="dark"] .time-labor-surface .time-labor-filter,
.dark .time-labor-surface .time-labor-auto, [data-theme="dark"] .time-labor-surface .time-labor-auto {
  background: var(--spinach-800) !important;
  border-color: var(--spinach-400) !important;
}
.dark .time-labor-surface .bg-sidebar, [data-theme="dark"] .time-labor-surface .bg-sidebar { background: var(--spinach-700) !important; }
.dark .time-labor-surface .text-ink, [data-theme="dark"] .time-labor-surface .text-ink { color: var(--brioche-25) !important; }
.dark .time-labor-surface .text-ink-soft, [data-theme="dark"] .time-labor-surface .text-ink-soft { color: var(--brioche-200) !important; }
.dark .time-labor-surface .text-ink-faint, [data-theme="dark"] .time-labor-surface .text-ink-faint { color: var(--brioche-300) !important; }
/* The Reject button (cx.btnDanger → text-danger) failed WCAG AA in dark theme
   (measured 2.2, need >=4.5) because time-labor-surface had no dark text-danger
   override — it fell back to the light cherry. Mirror the modal fix (:203). */
.dark .time-labor-surface .text-danger, [data-theme="dark"] .time-labor-surface .text-danger { color: var(--cherry-200) !important; }
.dark .time-labor-surface .border-line, [data-theme="dark"] .time-labor-surface .border-line,
.dark .time-labor-surface .border-line-strong, [data-theme="dark"] .time-labor-surface .border-line-strong { border-color: var(--spinach-400) !important; }
.dark .time-labor-surface input, [data-theme="dark"] .time-labor-surface input,
.dark .time-labor-surface select, [data-theme="dark"] .time-labor-surface select { background: var(--spinach-800); color: var(--brioche-25); }
.dark .time-labor-surface .time-labor-kpi p, [data-theme="dark"] .time-labor-surface .time-labor-kpi p,
.dark .time-labor-surface .time-labor-filter p, [data-theme="dark"] .time-labor-surface .time-labor-filter p { color: var(--brioche-25) !important; }
.dark .time-labor-surface [data-group] > tr:first-child > td,
[data-theme="dark"] .time-labor-surface [data-group] > tr:first-child > td { background: var(--spinach-700) !important; }
.dark .time-labor-surface .shadow-card, [data-theme="dark"] .time-labor-surface .shadow-card {
  box-shadow: 0 1px 2px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.22) !important;
}
.dark .time-labor-surface .inline-flex.text-ink-soft,
[data-theme="dark"] .time-labor-surface .inline-flex.text-ink-soft { background: var(--spinach-600) !important; color: var(--brioche-25) !important; }

@media (prefers-color-scheme: dark) {
  html:not(.light) .time-labor-surface {
    --accent: var(--matcha-300);
    background: var(--spinach-900);
    color: var(--brioche-25);
    margin: -24px;
    min-height: calc(100vh - 64px);
    padding: 24px;
  }
  html:not(.light) .time-labor-surface .bg-surface,
  html:not(.light) .time-labor-surface .time-labor-kpi,
  html:not(.light) .time-labor-surface .time-labor-filter,
  html:not(.light) .time-labor-surface .time-labor-auto { background: var(--spinach-800) !important; border-color: var(--spinach-400) !important; }
  html:not(.light) .time-labor-surface .bg-sidebar { background: var(--spinach-700) !important; }
  html:not(.light) .time-labor-surface .text-ink { color: var(--brioche-25) !important; }
  html:not(.light) .time-labor-surface .text-ink-soft { color: var(--brioche-200) !important; }
  html:not(.light) .time-labor-surface .text-ink-faint { color: var(--brioche-300) !important; }
  html:not(.light) .time-labor-surface .border-line,
  html:not(.light) .time-labor-surface .border-line-strong { border-color: var(--spinach-400) !important; }
  html:not(.light) .time-labor-surface input,
  html:not(.light) .time-labor-surface select { background: var(--spinach-800); color: var(--brioche-25); }
  html:not(.light) .time-labor-surface .time-labor-kpi p,
  html:not(.light) .time-labor-surface .time-labor-filter p { color: var(--brioche-25) !important; }
  html:not(.light) .time-labor-surface [data-group] > tr:first-child > td { background: var(--spinach-700) !important; }
  html:not(.light) .time-labor-surface .shadow-card { box-shadow: 0 1px 2px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.22) !important; }
  html:not(.light) .time-labor-surface .inline-flex.text-ink-soft { background: var(--spinach-600) !important; color: var(--brioche-25) !important; }
}
@media (max-width: 640px) {
  .dark .time-labor-surface, [data-theme="dark"] .time-labor-surface { margin: -16px; padding: 16px; }
}
@media (prefers-color-scheme: dark) and (max-width: 640px) {
  html:not(.light) .time-labor-surface { margin: -16px; padding: 16px; }
}
/* Tailwind Preflight zeroes native control borders, which collapses checkboxes
   to a thin line. Restore real checkboxes/radios + brand accent. */
input[type="checkbox"], input[type="radio"] {
  appearance: auto; -webkit-appearance: auto;
  width: 15px; height: 15px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer;
}

/* ---- rail scrollbar ---- */
#rail { scrollbar-width: thin; }
#rail::-webkit-scrollbar { width: 7px; }
#rail::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
#rail::-webkit-scrollbar-track { background: transparent; }

/* ---- LIGHT flat single-rail (DESIGN.md "Shell — sidebar IA") ----
   Four zones (People / Money / Compliance / Admin) + Overview + Me.
   Idle: ink-soft label, ink-faint icon. Hover: quiet tint. Active: Lt Spinach
   bg + 3px Matcha inset bar + Matcha 600 label/icon. Zone labels: ink-faint
   overline (the old gold headers are RETIRED — no hue-based hierarchy). */
.sidebar { background: var(--surface); }
.sidebar .nav-item { position: relative; color: var(--text-soft); transition: background var(--motion-fast) var(--ease-app), color var(--motion-fast) var(--ease-app); }
.sidebar .nav-item .ico { color: var(--text-faint); transition: color var(--motion-fast) var(--ease-app); }
/* Lovable nav icons are 19px (AppSidebar: h-[19px] w-[19px]). */
.sidebar .nav-item .ico svg { width: 19px; height: 19px; }
.sidebar .nav-item:hover { background: var(--ds-color-nav-active, #f1f0ea); color: var(--text); text-decoration: none; }
.sidebar .nav-item:hover .ico { color: var(--text-soft); }
/* Active: sidebar-accent fill + a FLOATING rounded 3px pill accent (not a
   flush inset bar) — matches Lovable's AppSidebar accent. */
.sidebar .nav-item.active { background: var(--ds-color-nav-active, #f1f0ea); color: var(--matcha-700); font-weight: 600; }
.sidebar .nav-item.active .ico { color: var(--matcha-700); }
.sidebar .nav-item.active::before { content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 3px; height: 28px; border-radius: 9999px; background: var(--matcha-600); }
.sidebar .nav-item:hover::before { content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 3px; height: 16px; border-radius: 9999px; background: var(--matcha-600); opacity: .5; }
.sidebar .nav-item.active:hover::before { height: 28px; opacity: 1; }
/* Section overline — khaki, wider tracking, smaller (AppSidebar section labels). */
.railgrp-label { color: var(--text-faint); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.railgrp-head:hover .railgrp-label { color: var(--text-soft); }
.railgrp-chev { color: var(--text-faint); transition: transform var(--motion-base) var(--ease-app); }
.railgrp-chev svg { width: 14px; height: 14px; }

/* ---- mobile drawer: the rail is off-canvas below lg; .is-open slides it in ---- */
.sidebar { transform: translateX(-100%) !important; }
.sidebar.is-open { transform: translateX(0) !important; box-shadow: var(--ds-shadow-modal); }
@media (min-width: 1024px) {
  .sidebar { transform: translateX(0) !important; }
  .nav-backdrop { display: none !important; }
}

/* ---- topbar picker states ---- */
.ws-picker:hover { border-color: var(--accent); }
.ws-row:hover { background: var(--bg-sidebar); }
.ws-row.active { background: var(--accent-soft); }

/* ---- tabs ---- */
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 550; }

/* ---- Modern Treasury payroll payment panel ---- */
.mt-panel {
  padding: 16px;
  border-color: var(--ds-color-border-strong);
  background: linear-gradient(180deg, #fff 0%, var(--brioche-25) 100%);
}
.mt-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.mt-kicker {
  color: var(--ds-color-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.mt-title {
  color: var(--ds-color-text);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
  margin-top: 2px;
}
.mt-copy {
  color: var(--ds-color-text-soft);
  font-size: 12.5px;
  line-height: 1.45;
  max-width: 72ch;
  margin-top: 3px;
}
.mt-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.mt-action {
  min-height: 44px;
  transition: border-color .14s ease, background .14s ease, color .14s ease, transform .12s ease;
}
.mt-action:hover:not(:disabled) {
  border-color: var(--ds-color-primary);
  background: var(--ds-color-primary-soft);
  color: var(--ds-color-primary);
  transform: translateY(-1px);
}
.mt-action:focus-visible {
  outline: 2px solid var(--ds-color-primary);
  outline-offset: 2px;
}
.mt-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.mt-status-card {
  min-height: 70px;
  padding: 12px;
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  background: #fff;
}
.mt-status-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: normal;
}
.mt-code {
  display: inline-block;
  max-width: 26ch;
  padding: 1px 6px;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-text-soft);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.mt-disclosure {
  border-top: 1px solid var(--ds-color-border);
  padding-top: 10px;
}
.mt-disclosure summary {
  cursor: pointer;
  min-height: 36px;
  display: flex;
  align-items: center;
  color: var(--ds-color-text);
  font-size: 13px;
  font-weight: 650;
}
.mt-disclosure summary:hover { color: var(--ds-color-primary); }
.mt-disclosure summary:focus-visible {
  outline: 2px solid var(--ds-color-primary);
  outline-offset: 2px;
  border-radius: var(--ds-radius-sm);
}
.mt-table-scroll { margin-top: 2px; }
@media (max-width: 640px) {
  .mt-panel { padding: 12px; }
  .mt-panel-head { display: block; }
  .mt-actions {
    justify-content: stretch;
    margin-top: 12px;
  }
  .mt-action {
    flex: 1 1 100%;
    min-height: 44px;
  }
  .mt-status-grid { grid-template-columns: 1fr; }
}

/* ---- RBAC matrix column-toggle hover ---- */
.clickcol:hover { color: var(--accent); }

/* ---- KPI clickable + value tones ---- */
.kpi-tile.clickable { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.kpi-tile.clickable:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(63,89,8,.14); }
.kpi-value.tone-red { color: var(--red); }
.kpi-value.tone-amber { color: var(--accent); }
.kpi-value.tone-blue { color: #2563eb; }

/* ---- payroll gates ---- */
.gate-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-height: 150px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
}
.gate-card:hover { background: #faf8f4; }
.gate-card.on { background: var(--green-soft); border-color: #bfe0c8; color: var(--green); }
.gate-main {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
}
.gate-state {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
}
.gate-state.ok { color: var(--green); }
.gate-title {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
}
.gate-help {
  margin-top: 3px;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.35;
}
.gate-trail {
  margin-top: 8px;
  color: var(--text-faint);
  font-size: 11.5px;
  line-height: 1.3;
}
.gate-actions {
  display: flex;
  justify-content: flex-end;
  min-height: 34px;
}
.gate-action {
  min-height: 32px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .gate-actions { justify-content: flex-start; }
}
.gatepill.ok { background: #e7f5ec; color: #1a7f48; border-color: #bfe3cd; }

/* ---- onboarding wizard step states ---- */
.wiz-step.active { color: var(--text); font-weight: 600; }
.wiz-step.done { color: var(--text-soft); }
.wiz-step.active .wiz-dot { background: var(--accent); color: #fff; border-color: var(--accent); }
.wiz-step.done .wiz-dot { background: #e7f5ec; color: #1a7f48; border-color: #bfe3cd; }

/* ---- tax stepper + agenda + timeline states ---- */
.step:hover { border-color: var(--accent); color: var(--accent); }
.step.past { background: var(--green-soft); border-color: #bfe0c8; color: var(--green); }
.step.cur { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 550; }
.agenda-row:hover { background: #faf8f4; }
.agenda-date.overdue { color: var(--red); font-weight: 550; }
.agenda-date.soon { color: var(--amber); }
.tl-dot.green { background: var(--green); }
.bar span { display: block; height: 100%; background: var(--green); }

/* ---- support chat bubble colors + sender side (color-by-class) ---- */
.chat-bubble.tenant { background: var(--bg-sidebar); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-bubble.platform { background: #eef4ff; border: 1px solid #cfe0ff; border-bottom-left-radius: 4px; }
.chat-row.mine .chat-bubble { border-bottom-right-radius: 4px; border-bottom-left-radius: 12px; }
.chat-row.mine .chat-bubble.platform { background: #2563eb; border-color: #2563eb; color: #fff; }
.chat-row.mine .chat-bubble.tenant { background: var(--accent); border-color: var(--accent); color: #fff; }
.sw-launcher.active { background: var(--text); }

/* ---- step-in banner (brown) — kept whole in case base layout wasn't inlined ---- */
#stepin-banner { display: flex; align-items: center; gap: 12px; background: #f9ede0; border-bottom: 1px solid #e6c39a; color: #8a4b13; padding: 9px 22px; font-size: 13px; }
#stepin-banner .si-text { flex: 1; }
#stepin-banner .si-reason { color: #a4682c; margin-left: 6px; font-style: italic; }
#stepin-banner .btn { background: #8a4b13; color: #fff; border-color: #8a4b13; }
#stepin-banner .btn:hover { background: #6f3c0f; }
.stepin-notice { display: flex; gap: 12px; padding: 12px 14px; background: #f9ede0; border: 1px solid #e6c39a; border-radius: 9px; color: #8a4b13; margin-bottom: 14px; }
.stepin-notice p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: #a4682c; }

/* ---- wide modal override (conditional .modal-wide class) ---- */
.modal.modal-wide { max-width: min(960px, 94vw); }

/* ---- form validation state ---- */
.has-error input, .has-error select { border-color: var(--red); }
.has-error input:focus, .has-error select:focus { box-shadow: 0 0 0 3px var(--red-soft); }

/* Tailwind arbitrary hover colors from the pre-v2.5 amber pass are overridden
   here so generated button utilities still resolve to Matcha. */
.bg-accent:hover,
.hover\:bg-\[\#9a4708\]:hover {
  background-color: var(--ds-color-primary-hover) !important;
}

/* ---- MT post-ACH run report (wide modal) ---- */
.mt-report { display: flex; flex-direction: column; gap: 20px; }
.mt-report-block { }
.mt-report-block-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 650;
  color: var(--ds-color-text);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ds-color-border);
}
.mt-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
}
.mt-report-cell {
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface-muted);
  font-size: 13px;
}

/* ---- MT unreconciled / action-needed section ---- */
.mt-unreconciled {
  margin-top: 14px;
  border-top: 1px solid var(--ds-color-border);
  padding-top: 12px;
}
.mt-unreconciled-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.mt-unreconciled-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 650;
  color: var(--ds-color-danger);
}
.mt-unreconciled-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ds-color-danger-soft);
  color: var(--ds-color-danger);
  font-size: 11.5px;
  font-weight: 700;
}
.mt-unreconciled-table { margin-top: 4px; }
.mt-unreconciled-row { background: var(--ds-color-danger-soft); }
.mt-unreconciled-row:hover { background: #f0d9d6; }
/* Danger-toned action button (Resolve returns). */
.mt-action-danger {
  border-color: #e7cbc6;
  color: var(--ds-color-danger);
}
.mt-action-danger:hover:not(:disabled) {
  border-color: var(--ds-color-danger);
  background: var(--ds-color-danger-soft);
  color: var(--ds-color-danger);
  transform: translateY(-1px);
}
@media (max-width: 640px) {
  .mt-report-grid { grid-template-columns: 1fr 1fr; }
  .mt-unreconciled-head { justify-content: stretch; }
  .mt-action-danger { flex: 1 1 100%; min-height: 44px; }
}

/* ============================================================
   Wave K — canned report print styles (CSV + browser print-to-PDF).
   The Print/PDF button toggles body.print-report; @media print then
   reveals only #report-print-area and hides app chrome + .no-print
   controls, so a report prints clean (one EIN block per section).
   Server-side PDF is out-of-stack (see spec PDF strategy note).
   ============================================================ */
.no-print { }
@media print {
  body.print-wage-notice > :not(.modal-back) { display: none !important; }
  body.print-wage-notice .modal-back {
    position: static !important;
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #fff !important;
  }
  body.print-wage-notice .modal { max-width: none !important; box-shadow: none !important; }
  body.print-wage-notice .modal > :not(.modal-body) { display: none !important; }
  body.print-wage-notice .modal-body { padding: 0 !important; }
  body.print-wage-notice .printable-wage-notice {
    position: static;
    width: 100%;
    padding: 24px;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  body.print-report .sidebar,
  body.print-report .topbar,
  body.print-report nav,
  body.print-report .no-print { display: none !important; }
  body.print-report #report-print-area { position: absolute; left: 0; top: 0; width: 100%; padding: 0; margin: 0; }
  body.print-report .register-ein-block { break-inside: avoid; page-break-inside: avoid; }
  body.print-report .register-grand { break-before: auto; }
  /* Print in black on white for legibility / toner. */
  body.print-report, body.print-report * { color: #000 !important; box-shadow: none !important; }
  body.print-report .shadow-card { border: 1px solid #ccc !important; }
}

/* ---- Payroll operations: immutable register exports + run timeline ---- */
.payroll-operations {
  --payroll-ops-surface: var(--ds-color-surface);
  --payroll-ops-muted: var(--ds-color-surface-muted);
  --payroll-ops-line: var(--ds-color-border);
  --payroll-ops-ink: var(--ds-color-text);
  --payroll-ops-soft: var(--ds-color-text-soft);
  --payroll-ops-faint: var(--ds-color-text-faint);
  background: var(--payroll-ops-surface);
  border: 1px solid var(--payroll-ops-line);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-card);
  color: var(--payroll-ops-ink);
  overflow: hidden;
}
.payroll-operations-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid var(--payroll-ops-line); }
.payroll-operations-section { padding: 16px; }
.payroll-operations-section + .payroll-operations-section { border-top: 1px solid var(--payroll-ops-line); }
.payroll-operations .t-overline, .payroll-operations .text-ink-faint { color: var(--payroll-ops-faint); }
.payroll-operations .text-ink, .payroll-operations .text-\[\#121212\] { color: var(--payroll-ops-ink); }
.payroll-operations .text-ink-soft { color: var(--payroll-ops-soft); }
.payroll-operations .bg-surface { background: var(--payroll-ops-surface); }
.payroll-operations.bg-surface { background: var(--payroll-ops-surface) !important; }
.payroll-operations .bg-sidebar { background: var(--payroll-ops-muted); }
.payroll-operations .border-line { border-color: var(--payroll-ops-line); }
.tax-documents-surface .shadow-card { box-shadow: none; }
.payroll-operations thead { background: var(--payroll-ops-muted); }
.payroll-operations tbody tr { transition: background var(--motion-fast) var(--ease-app); }
.payroll-operations tbody tr:hover { background: var(--payroll-ops-muted); }
.payroll-export-scroll-hint { display: none; }
.payroll-export-table-wrap { overflow-x: auto; }
.payroll-operations-error, .payroll-operations-partial, .payroll-operations-sandbox { border: 1px solid var(--payroll-ops-line); border-radius: var(--ds-radius-md); padding: 12px; font-size: 13px; }
.payroll-operations-error { background: var(--ds-color-danger-soft); }
.payroll-operations-partial { background: var(--ds-color-warning-soft); color: var(--ds-color-warning); margin-bottom: 12px; }
.payroll-operations-sandbox { background: var(--ds-color-warning-soft); color: var(--ds-color-warning); margin-bottom: 12px; }
.payroll-operations-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 12px; margin-bottom: 12px; background: var(--payroll-ops-muted); border-radius: var(--ds-radius-md); }
.payroll-operations-next .t-overline { grid-column: 1 / -1; }
.payroll-timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.payroll-timeline-row { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--payroll-ops-line); }
.payroll-timeline-row:last-child { border-bottom: 0; }
.payroll-timeline-marker { width: 8px; height: 8px; margin: 5px 0 0 4px; border-radius: 50%; background: var(--ds-color-primary); box-shadow: 0 0 0 3px var(--ds-color-primary-soft); }
.payroll-timeline details summary:focus-visible { outline-offset: 2px; }
.payroll-wizard-register { border: 1px solid var(--border); border-radius: var(--ds-radius-md); background: var(--ds-color-surface-muted); padding: 16px; }

/* Payroll reversal: one additive status surface, local aliases for real dark contrast. */
.payroll-void {
  --void-surface: var(--ds-color-surface);
  --void-muted: var(--ds-color-surface-muted);
  --void-line: var(--ds-color-border);
  --void-ink: var(--ds-color-text);
  --void-soft: var(--ds-color-text-soft);
  --void-faint: var(--ds-color-text-faint);
  --void-warning: #79520f;
  --void-warning-soft: var(--ds-color-warning-soft);
  color: var(--void-ink);
  background: var(--void-surface);
  border: 1px solid var(--void-line);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-card);
  padding: 18px;
}
.payroll-void-modal { --void-warning: #79520f; --void-warning-soft: var(--ds-color-warning-soft); }
.payroll-void-head, .payroll-void-record-head, .payroll-void-empty, .payroll-void-message { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.payroll-void-head { padding-bottom: 14px; border-bottom: 1px solid var(--void-line); }
.payroll-void h3 { margin: 3px 0 2px; font-size: 18px; line-height: 1.3; }
.payroll-void p { color: var(--void-soft); }
.payroll-void-head p { margin: 0; font-size: 12.5px; }
.payroll-void-lock { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; background: var(--ds-color-primary-soft); color: var(--accent); font-size: 11px; font-weight: 700; }
.payroll-void-lock svg, .payroll-void-message svg, .payroll-void-empty svg, .payroll-void-cleared svg, .payroll-void-warning svg { width: 16px; height: 16px; flex: 0 0 auto; }
.payroll-void-loading { display: grid; gap: 10px; padding: 18px 0 2px; }
.payroll-void-empty, .payroll-void-message { align-items: center; padding-top: 16px; }
.payroll-void-empty > div, .payroll-void-message > div { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.payroll-void-empty b, .payroll-void-empty small, .payroll-void-message b, .payroll-void-message small { display: block; }
.payroll-void-empty small, .payroll-void-message small { margin-top: 2px; color: var(--void-soft); font-size: 12px; line-height: 1.45; }
.payroll-void-empty code { display: inline-block; margin-top: 6px; color: var(--void-faint); font-size: 11px; overflow-wrap: anywhere; }
.payroll-void-message.danger { color: var(--ds-color-danger); }
.payroll-void-summary { display: flex; justify-content: space-between; gap: 12px; padding: 12px; margin-top: 14px; border-radius: var(--ds-radius-md); background: var(--void-warning-soft); color: var(--void-warning); font-size: 12.5px; }
.payroll-void-records { display: grid; gap: 10px; margin: 10px 0; }
.payroll-void-record { min-width: 0; padding: 14px; border: 1px solid var(--void-line); border-radius: var(--ds-radius-lg); background: var(--void-muted); }
.payroll-void-record-head b, .payroll-void-record-head small { display: block; }
.payroll-void-record-head small { margin-top: 2px; color: var(--void-faint); font-size: 11.5px; }
.payroll-void-reason { margin: 12px 0; font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.payroll-void-totals, .payroll-void-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.payroll-void-totals span { padding: 9px 10px; border-radius: var(--ds-radius-md); background: var(--void-surface); color: var(--void-soft); font-size: 12px; }
.payroll-void-totals b { display: block; margin-top: 2px; color: var(--void-ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.payroll-void-people { margin-top: 10px; }
.payroll-void-people summary { cursor: pointer; color: var(--void-soft); font-size: 12px; font-weight: 650; }
.payroll-void-people > div { display: grid; gap: 4px; max-height: 144px; overflow-y: auto; margin-top: 6px; padding: 8px; border: 1px solid var(--void-line); border-radius: var(--ds-radius-md); background: var(--void-surface); color: var(--void-soft); font-size: 12px; }
.payroll-void-blockers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.payroll-void-blockers span { padding: 4px 7px; border-radius: 999px; background: var(--void-warning-soft); color: var(--void-warning); font-size: 11px; font-weight: 650; }
.payroll-void-cleared { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--ds-color-success); font-size: 12px; font-weight: 650; }
.payroll-void-links { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 10px 0 0; }
.payroll-void-links div { min-width: 0; }
.payroll-void-links dt { color: var(--void-faint); font-size: 10.5px; }
.payroll-void-links dd { margin: 2px 0 0; color: var(--void-soft); font-size: 12px; overflow-wrap: anywhere; }
.payroll-void-action { min-height: 44px; transition: background var(--motion-fast) var(--ease-app), border-color var(--motion-fast) var(--ease-app), transform var(--motion-fast) var(--ease-app); }
.payroll-void-action:hover:not(:disabled) { border-color: var(--accent); }
.payroll-void-action:active:not(:disabled) { transform: translateY(1px); }
.payroll-void-action:disabled { cursor: not-allowed; opacity: 1; background: var(--void-muted); border-color: var(--void-line); color: var(--void-faint); }
.payroll-void-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.payroll-void-action-note { display: block; margin-top: 7px; color: var(--void-faint); font-size: 11.5px; }
.payroll-void-form { display: grid; gap: 14px; }
.payroll-void-warning { display: flex; gap: 8px; padding: 11px; border: 1px solid color-mix(in srgb, var(--void-warning) 35%, transparent); border-radius: var(--ds-radius-md); background: var(--void-warning-soft); color: var(--void-warning); font-size: 12.5px; line-height: 1.45; }
.payroll-void-selector { margin: 0; padding: 10px; border: 1px solid var(--border); border-radius: var(--ds-radius-md); }
.payroll-void-selector legend { padding: 0 4px; color: var(--text-soft); font-size: 12px; font-weight: 650; }
.payroll-void-selector > div { display: grid; gap: 4px; max-height: 220px; overflow-y: auto; }
.payroll-void-choice { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px; border-radius: var(--ds-radius-sm); color: var(--text); font-size: 12.5px; cursor: pointer; }
.payroll-void-choice:not(.unavailable):hover { background: var(--bg-sidebar); }
.payroll-void-choice.unavailable { color: var(--text-faint); cursor: not-allowed; }
.payroll-void-form textarea { box-sizing: border-box; width: 100%; resize: vertical; }
.payroll-void-form label > small { display: block; margin-top: 4px; color: var(--text-faint); font-size: 11.5px; }
.payroll-void-confirm-copy { padding: 9px 10px; border-radius: var(--ds-radius-md); background: var(--bg-sidebar); color: var(--text-soft); font-size: 12px; }
.payroll-void-form-error { margin: 0; color: var(--ds-color-danger); font-size: 12.5px; }

.dark .payroll-void, [data-theme="dark"] .payroll-void {
  --void-surface: var(--spinach-900); --void-muted: var(--spinach-800); --void-line: var(--spinach-500);
  --void-ink: var(--brioche-25); --void-soft: var(--brioche-200); --void-faint: var(--brioche-300); --accent: var(--matcha-300);
  --void-warning: var(--brioche-200); --void-warning-soft: var(--spinach-700); --ds-color-primary-soft: var(--spinach-600);
}
.dark .payroll-void-modal, [data-theme="dark"] .payroll-void-modal { --void-warning: var(--brioche-200); --void-warning-soft: var(--spinach-700); }
[data-theme="dark"] .payroll-void .text-ink, [data-theme="dark"] .payroll-void .text-ink-soft { color: var(--void-ink) !important; }
[data-theme="dark"] .payroll-void .text-ink-faint { color: var(--void-faint) !important; }
[data-theme="dark"] .payroll-void .text-danger { color: var(--cherry-200) !important; }
[data-theme="dark"] .payroll-void-fixture-page { background: var(--spinach-800); }
[data-theme="dark"] .payroll-void-modal .modal { background: var(--spinach-900); color: var(--brioche-25); }
[data-theme="dark"] .payroll-void-modal .modal-head, [data-theme="dark"] .payroll-void-modal .modal-foot { border-color: var(--spinach-500); }
[data-theme="dark"] .payroll-void-modal label, [data-theme="dark"] .payroll-void-modal legend { color: var(--brioche-200); }
[data-theme="dark"] .payroll-void-modal input, [data-theme="dark"] .payroll-void-modal select, [data-theme="dark"] .payroll-void-modal textarea { background: var(--spinach-800); border-color: var(--spinach-500); color: var(--brioche-25); }
[data-theme="dark"] .payroll-void-modal .payroll-void-choice:not(.unavailable):hover, [data-theme="dark"] .payroll-void-modal .payroll-void-confirm-copy { background: var(--spinach-700); color: var(--brioche-200); }

@media (max-width: 760px) {
  .payroll-void { padding: 14px; }
  .modal-back.payroll-void-modal { padding: 16px; }
  .payroll-void-modal .payroll-void-selector > div { max-height: 176px; }
  .payroll-void-head, .payroll-void-record-head, .payroll-void-empty, .payroll-void-message, .payroll-void-summary { align-items: stretch; flex-direction: column; }
  .payroll-void-lock { align-self: flex-start; }
  .payroll-void-action { width: 100%; justify-content: center; }
  .payroll-void-totals, .payroll-void-links { grid-template-columns: 1fr; }
}

/* Lovable's dark language: a deep spinach canvas, brioche text, and a lighter
   Matcha focus/action token. These local aliases leave the light design alone. */
.dark .payroll-operations, [data-theme="dark"] .payroll-operations {
  --payroll-ops-surface: var(--spinach-900);
  --payroll-ops-muted: var(--spinach-800);
  --payroll-ops-line: var(--spinach-500);
  --payroll-ops-ink: var(--brioche-25);
  --payroll-ops-soft: var(--brioche-200);
  --payroll-ops-faint: var(--brioche-300);
  --accent: var(--matcha-300);
  --ds-color-primary-soft: var(--spinach-600);
  --ds-color-warning-soft: var(--spinach-700);
  --ds-color-danger-soft: var(--cherry-800);
  --ds-color-warning: var(--brioche-200);
}
.dark .payroll-operations .bg-surface, [data-theme="dark"] .payroll-operations .bg-surface { background: var(--payroll-ops-surface) !important; }
.dark .payroll-operations .text-danger, [data-theme="dark"] .payroll-operations .text-danger { color: var(--cherry-200); }
.dark .payroll-operations button, [data-theme="dark"] .payroll-operations button { background: var(--spinach-800); border-color: var(--spinach-500); color: var(--brioche-25); }
.dark .payroll-operations button:not([disabled]):hover, [data-theme="dark"] .payroll-operations button:not([disabled]):hover { background: var(--spinach-700); }
.dark .payroll-operations button[disabled], [data-theme="dark"] .payroll-operations button[disabled] { color: var(--brioche-300); opacity: .55; }
.dark .payroll-operations [data-w2-primary], [data-theme="dark"] .payroll-operations [data-w2-primary] { background: var(--matcha-300); border-color: var(--matcha-300); color: var(--spinach-900); }
.dark .payroll-operations [data-w2-primary]:not([disabled]):hover, [data-theme="dark"] .payroll-operations [data-w2-primary]:not([disabled]):hover { background: var(--matcha-200); }
.dark .payroll-operations [data-w2-primary]:not([disabled]):active, [data-theme="dark"] .payroll-operations [data-w2-primary]:not([disabled]):active { background: var(--matcha-100); transform: translateY(1px); }
.dark .payroll-operations [data-w2-primary][disabled], [data-theme="dark"] .payroll-operations [data-w2-primary][disabled] { background: var(--spinach-700); border-color: var(--spinach-500); color: var(--brioche-200); opacity: 1; }
@media (prefers-color-scheme: dark) {
  html:not(.light) .payroll-operations {
    --payroll-ops-surface: var(--spinach-900);
    --payroll-ops-muted: var(--spinach-800);
    --payroll-ops-line: var(--spinach-500);
    --payroll-ops-ink: var(--brioche-25);
    --payroll-ops-soft: var(--brioche-200);
    --payroll-ops-faint: var(--brioche-300);
    --accent: var(--matcha-300);
    --ds-color-primary-soft: var(--spinach-600);
    --ds-color-warning-soft: var(--spinach-700);
    --ds-color-danger-soft: var(--cherry-800);
    --ds-color-warning: var(--brioche-200);
  }
  html:not(.light) .payroll-operations .bg-surface { background: var(--payroll-ops-surface) !important; }
  html:not(.light) .payroll-operations .text-danger { color: var(--cherry-200); }
  html:not(.light) .payroll-operations button { background: var(--spinach-800); border-color: var(--spinach-500); color: var(--brioche-25); }
  html:not(.light) .payroll-operations button:not([disabled]):hover { background: var(--spinach-700); }
  html:not(.light) .payroll-operations button[disabled] { color: var(--brioche-300); opacity: .55; }
  html:not(.light) .payroll-operations [data-w2-primary] { background: var(--matcha-300); border-color: var(--matcha-300); color: var(--spinach-900); }
  html:not(.light) .payroll-operations [data-w2-primary]:not([disabled]):hover { background: var(--matcha-200); }
  html:not(.light) .payroll-operations [data-w2-primary]:not([disabled]):active { background: var(--matcha-100); transform: translateY(1px); }
  html:not(.light) .payroll-operations [data-w2-primary][disabled] { background: var(--spinach-700); border-color: var(--spinach-500); color: var(--brioche-200); opacity: 1; }
}

/* ---- Compliance rules: scoped light/dark statutory-rule surface ---- */
.compliance-rules-surface {
  --compliance-canvas: transparent;
  --compliance-surface: var(--ds-color-surface);
  --compliance-muted: var(--ds-color-surface-muted);
  --compliance-line: var(--ds-color-border);
  --compliance-line-strong: var(--ds-color-border-strong);
  --compliance-ink: var(--ds-color-text);
  --compliance-soft: var(--ds-color-text-soft);
  --compliance-faint: var(--ds-color-text-faint);
  --compliance-focus: var(--ds-color-primary);
  color: var(--compliance-ink);
}
#view.compliance-rules-surface { min-height: calc(100vh - 116px); background: var(--compliance-canvas); border-radius: var(--ds-radius-md); }
.compliance-rules-surface .bg-surface,
.compliance-rules-surface .modal { background: var(--compliance-surface) !important; color: var(--compliance-ink); }
.compliance-rules-surface thead,
.compliance-rules-surface th { background: var(--compliance-muted) !important; color: var(--compliance-soft) !important; }
.compliance-rules-surface tbody tr { transition: background var(--motion-fast) var(--ease-app); }
.compliance-rules-surface tbody tr:hover { background: var(--compliance-muted); }
.compliance-rules-surface td,
.compliance-rules-surface th,
.compliance-rules-surface .border-line,
.compliance-rules-surface .border-line-strong { border-color: var(--compliance-line) !important; }
.compliance-rules-surface .text-ink { color: var(--compliance-ink) !important; }
.compliance-rules-surface .text-ink-soft { color: var(--compliance-soft) !important; }
.compliance-rules-surface .text-ink-faint { color: var(--compliance-faint) !important; }
.compliance-rules-surface input,
.compliance-rules-surface select,
.compliance-rules-surface textarea { background: var(--compliance-surface); border-color: var(--compliance-line-strong); color: var(--compliance-ink); color-scheme: light dark; }
.compliance-rules-surface option { background: var(--compliance-surface); color: var(--compliance-ink); }
.compliance-rules-surface :focus-visible { outline-color: var(--compliance-focus); }

.dark .compliance-rules-surface, [data-theme="dark"] .compliance-rules-surface {
  --compliance-canvas: var(--spinach-900);
  --compliance-surface: var(--spinach-800);
  --compliance-muted: var(--spinach-700);
  --compliance-line: var(--spinach-600);
  --compliance-line-strong: var(--spinach-500);
  --compliance-ink: var(--brioche-25);
  --compliance-soft: var(--brioche-200);
  --compliance-faint: var(--brioche-300);
  --compliance-focus: var(--matcha-300);
  --accent: var(--matcha-300);
  --accent-soft: var(--spinach-600);
}
.dark .compliance-rules-surface button, [data-theme="dark"] .compliance-rules-surface button { background: var(--spinach-800); border-color: var(--spinach-500); color: var(--brioche-25); }
.dark .compliance-rules-surface button:not([disabled]):hover, [data-theme="dark"] .compliance-rules-surface button:not([disabled]):hover { background: var(--spinach-700); }
.dark .compliance-rules-surface #cr-new, .dark .compliance-rules-surface [data-save],
[data-theme="dark"] .compliance-rules-surface #cr-new, [data-theme="dark"] .compliance-rules-surface [data-save] { background: var(--matcha-300); color: var(--spinach-900); }
.dark .compliance-rules-surface .text-danger, [data-theme="dark"] .compliance-rules-surface .text-danger { color: var(--cherry-200); }
.dark .compliance-rules-surface .bg-warn-soft, [data-theme="dark"] .compliance-rules-surface .bg-warn-soft { background: var(--spinach-700); }
.dark .compliance-rules-surface .text-warn, [data-theme="dark"] .compliance-rules-surface .text-warn { color: var(--brioche-200); }
.dark .compliance-rules-surface .shadow-card, [data-theme="dark"] .compliance-rules-surface .shadow-card { box-shadow: 0 1px 2px rgba(0,0,0,.36), 0 2px 8px rgba(0,0,0,.28) !important; }
.dark .compliance-rules-surface span.inline-flex, [data-theme="dark"] .compliance-rules-surface span.inline-flex { background: var(--spinach-600) !important; color: var(--brioche-25) !important; }
@media (prefers-color-scheme: dark) {
  html:not(.light) .compliance-rules-surface {
    --compliance-canvas: var(--spinach-900);
    --compliance-surface: var(--spinach-800);
    --compliance-muted: var(--spinach-700);
    --compliance-line: var(--spinach-600);
    --compliance-line-strong: var(--spinach-500);
    --compliance-ink: var(--brioche-25);
    --compliance-soft: var(--brioche-200);
    --compliance-faint: var(--brioche-300);
    --compliance-focus: var(--matcha-300);
    --accent: var(--matcha-300);
    --accent-soft: var(--spinach-600);
  }
  html:not(.light) .compliance-rules-surface button { background: var(--spinach-800); border-color: var(--spinach-500); color: var(--brioche-25); }
  html:not(.light) .compliance-rules-surface button:not([disabled]):hover { background: var(--spinach-700); }
  html:not(.light) .compliance-rules-surface #cr-new, html:not(.light) .compliance-rules-surface [data-save] { background: var(--matcha-300); color: var(--spinach-900); }
  html:not(.light) .compliance-rules-surface .text-danger { color: var(--cherry-200); }
  html:not(.light) .compliance-rules-surface .bg-warn-soft { background: var(--spinach-700); }
  html:not(.light) .compliance-rules-surface .text-warn { color: var(--brioche-200); }
  html:not(.light) .compliance-rules-surface .shadow-card { box-shadow: 0 1px 2px rgba(0,0,0,.36), 0 2px 8px rgba(0,0,0,.28) !important; }
  html:not(.light) .compliance-rules-surface span.inline-flex { background: var(--spinach-600) !important; color: var(--brioche-25) !important; }
}
@media (max-width: 640px) {
  .payroll-operations-heading, .payroll-operations-section { padding: 16px; }
  .payroll-operations-next { grid-template-columns: 1fr; gap: 6px; }
  .payroll-operations .tableWrap, .payroll-operations .overflow-x-auto { max-width: 100%; }
  .payroll-export-scroll-hint { display: block; margin: 0 0 8px; color: var(--payroll-ops-faint); font-size: 12px; }
  .payroll-export-table { min-width: 860px; table-layout: auto; }
  .payroll-export-table th:nth-child(1), .payroll-export-table td:nth-child(1) { min-width: 220px; }
  .payroll-export-table th:nth-child(2), .payroll-export-table td:nth-child(2) { min-width: 170px; }
  .payroll-export-table th:nth-child(3), .payroll-export-table td:nth-child(3) { min-width: 180px; }
  .payroll-export-table th:nth-child(4), .payroll-export-table td:nth-child(4) { min-width: 80px; }
  .payroll-export-table th:nth-child(5), .payroll-export-table td:nth-child(5) { min-width: 100px; }
  .payroll-export-table th:nth-child(6), .payroll-export-table td:nth-child(6) { min-width: 100px; }
  .payroll-export-table td:first-child .font-medium { overflow-wrap: normal; word-break: normal; }
  .payroll-export-table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}

/* Persisted GL evidence reuses payroll operations' theme and table behavior. */
.gl-journal {
  --gl-surface: var(--ds-color-surface);
  --gl-muted: var(--ds-color-surface-muted);
  --gl-line: var(--ds-color-border);
  --gl-ink: var(--ds-color-text);
  --gl-soft: var(--ds-color-text-soft);
  --gl-faint: var(--ds-color-text-faint);
  background: var(--gl-surface) !important;
  border-color: var(--gl-line) !important;
  color: var(--gl-ink);
}
.gl-journal .bg-sidebar, .gl-journal thead, .gl-journal tfoot { background: var(--gl-muted) !important; }
.gl-journal th { background: var(--gl-muted) !important; }
.gl-journal .border-line, .gl-journal td, .gl-journal th { border-color: var(--gl-line) !important; }
.gl-journal .text-ink { color: var(--gl-ink) !important; }
.gl-journal .text-ink-soft { color: var(--gl-soft) !important; }
.gl-journal .text-ink-faint { color: var(--gl-faint) !important; }
.gl-journal .bg-\[\#f0ede8\] { background: var(--gl-line) !important; color: var(--gl-ink) !important; }
.gl-journal-table-wrap { overflow-x: auto; }
.gl-journal-table { min-width: 900px; }
.gl-journal summary { min-height: 44px; }
.gl-journal-scroll-hint { display: none; }
.gl-journal-table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dark .gl-journal, [data-theme="dark"] .gl-journal {
  --gl-surface: var(--spinach-900);
  --gl-muted: var(--spinach-800);
  --gl-line: var(--spinach-500);
  --gl-ink: var(--brioche-25);
  --gl-soft: var(--brioche-200);
  --gl-faint: var(--brioche-300);
}
.dark .gl-journal button, [data-theme="dark"] .gl-journal button { background: var(--spinach-800); border-color: var(--spinach-500); color: var(--brioche-25); }
@media (prefers-color-scheme: dark) {
  html:not(.light) .gl-journal {
    --gl-surface: var(--spinach-900);
    --gl-muted: var(--spinach-800);
    --gl-line: var(--spinach-500);
    --gl-ink: var(--brioche-25);
    --gl-soft: var(--brioche-200);
    --gl-faint: var(--brioche-300);
  }
  html:not(.light) .gl-journal button { background: var(--spinach-800); border-color: var(--spinach-500); color: var(--brioche-25); }
}
@media (max-width: 760px) {
  .gl-journal-scroll-hint { display: block; margin: 12px 12px 0; color: var(--gl-faint); font-size: 12px; }
}

/* Tip operations: one scoped surface keeps the dense workflow legible in both
   themes without changing the shared shell or introducing page-only colors. */
.tips-surface {
  --tips-canvas: transparent;
  --tips-surface: var(--ds-color-surface);
  --tips-muted: var(--ds-color-surface-muted);
  --tips-line: var(--ds-color-border);
  --tips-line-strong: var(--ds-color-border-strong);
  --tips-ink: var(--ds-color-text);
  --tips-soft: var(--ds-color-text-soft);
  --tips-faint: var(--ds-color-text-faint);
  min-width: 0;
  color: var(--tips-ink);
}
.tips-surface .tips-partial {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--tips-line-strong);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-warning-soft);
  color: var(--tips-ink);
}
.tips-surface .tips-partial p { margin: 2px 0 0; color: var(--tips-soft); font-size: 12.5px; }
.tips-surface .tips-load-error { color: var(--tips-ink); }
.tips-surface .tips-load-error p { max-width: 66ch; overflow-wrap: anywhere; }
.tips-surface td:not(.text-right) { overflow-wrap: anywhere; }
.tips-surface .overflow-x-auto { max-width: 100%; overscroll-behavior-inline: contain; }
.tips-surface .overflow-x-auto:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tips-surface button { transition: background var(--motion-fast) var(--ease-app), border-color var(--motion-fast) var(--ease-app), color var(--motion-fast) var(--ease-app), transform var(--motion-fast) var(--ease-app); }
.tips-surface button:not([disabled]):hover { border-color: var(--tips-line-strong); }
.tips-surface button:not([disabled]):active { transform: translateY(1px); }
.tips-surface button:disabled { cursor: not-allowed; opacity: 1 !important; background: var(--tips-muted) !important; border-color: var(--tips-line) !important; color: var(--tips-faint) !important; }

.dark .tips-surface, [data-theme="dark"] .tips-surface {
  --tips-canvas: var(--spinach-900);
  --tips-surface: var(--spinach-800);
  --tips-muted: var(--spinach-700);
  --tips-line: var(--spinach-600);
  --tips-line-strong: var(--spinach-400);
  --tips-ink: var(--brioche-25);
  --tips-soft: var(--brioche-200);
  --tips-faint: var(--brioche-300);
  --accent: var(--matcha-300);
  --accent-soft: var(--spinach-600);
  min-height: calc(100vh - 64px);
  margin: -24px;
  padding: 24px;
  background: var(--tips-canvas);
  color: var(--tips-ink);
  color-scheme: dark;
}
.dark .tips-surface .bg-surface, [data-theme="dark"] .tips-surface .bg-surface,
.dark .tips-surface input, [data-theme="dark"] .tips-surface input,
.dark .tips-surface select, [data-theme="dark"] .tips-surface select,
.dark .tips-surface textarea, [data-theme="dark"] .tips-surface textarea { background: var(--tips-surface) !important; color: var(--tips-ink) !important; }
.dark .tips-surface .bg-muted, .dark .tips-surface .bg-sidebar,
[data-theme="dark"] .tips-surface .bg-muted, [data-theme="dark"] .tips-surface .bg-sidebar,
.dark .tips-surface thead, .dark .tips-surface th,
[data-theme="dark"] .tips-surface thead, [data-theme="dark"] .tips-surface th { background: var(--tips-muted) !important; color: var(--tips-soft) !important; }
.dark .tips-surface .text-ink, [data-theme="dark"] .tips-surface .text-ink { color: var(--tips-ink) !important; }
.dark .tips-surface .text-ink-soft, [data-theme="dark"] .tips-surface .text-ink-soft { color: var(--tips-soft) !important; }
.dark .tips-surface .text-ink-faint, [data-theme="dark"] .tips-surface .text-ink-faint { color: var(--tips-faint) !important; }
.dark .tips-surface .text-danger, [data-theme="dark"] .tips-surface .text-danger { color: var(--cherry-200) !important; }
.dark .tips-surface .text-warn, [data-theme="dark"] .tips-surface .text-warn { color: var(--brioche-200) !important; }
.dark .tips-surface .border-line,
.dark .tips-surface td, .dark .tips-surface th,
[data-theme="dark"] .tips-surface .border-line,
[data-theme="dark"] .tips-surface td, [data-theme="dark"] .tips-surface th { border-color: var(--tips-line) !important; }
.dark .tips-surface .border-line-strong, .dark .tips-surface input, .dark .tips-surface select, .dark .tips-surface textarea,
[data-theme="dark"] .tips-surface .border-line-strong, [data-theme="dark"] .tips-surface input, [data-theme="dark"] .tips-surface select, [data-theme="dark"] .tips-surface textarea { border-color: var(--tips-line-strong) !important; }
.dark .tips-surface [style*="background:"]:not(.inline-block), [data-theme="dark"] .tips-surface [style*="background:"]:not(.inline-block) { background: var(--tips-muted) !important; }
.dark .tips-surface [style*="color:"], [data-theme="dark"] .tips-surface [style*="color:"] { color: var(--tips-ink) !important; }
.dark .tips-surface [style*="border-color:hsl"], [data-theme="dark"] .tips-surface [style*="border-color:hsl"] { border-color: var(--tips-line-strong) !important; }
.dark .tips-surface button, [data-theme="dark"] .tips-surface button { background: var(--tips-surface); border-color: var(--tips-line-strong); color: var(--tips-ink); }
.dark .tips-surface button:not([disabled]):hover, [data-theme="dark"] .tips-surface button:not([disabled]):hover { background: var(--tips-muted); border-color: var(--spinach-400); }
.dark .tips-surface button:not([disabled]):active, [data-theme="dark"] .tips-surface button:not([disabled]):active { background: var(--spinach-600); transform: translateY(1px); }
.dark .tips-surface button:disabled, [data-theme="dark"] .tips-surface button:disabled { background: var(--tips-muted) !important; border-color: var(--tips-line) !important; color: var(--tips-faint) !important; opacity: 1 !important; }
.dark .tips-surface button[class~="bg-accent"], [data-theme="dark"] .tips-surface button[class~="bg-accent"] { background: var(--matcha-300); border-color: var(--matcha-300); color: var(--spinach-900); }
.dark .tips-surface button[class~="bg-accent"]:not([disabled]):hover, [data-theme="dark"] .tips-surface button[class~="bg-accent"]:not([disabled]):hover { background: var(--matcha-200); }
.dark .tips-surface .tips-partial, [data-theme="dark"] .tips-surface .tips-partial { background: var(--tips-muted); }
.dark .tips-surface .skel, [data-theme="dark"] .tips-surface .skel { background: var(--tips-muted); }
.dark .tips-surface :focus-visible, [data-theme="dark"] .tips-surface :focus-visible { outline-color: var(--matcha-300); }

@media (max-width: 640px) {
  .dark .tips-surface, [data-theme="dark"] .tips-surface { margin: -16px; padding: 16px; }
  .tips-surface .tips-partial { align-items: stretch; flex-direction: column; }
  .tips-surface .tips-partial button { width: 100%; }
  .tips-surface .overflow-x-auto { width: 100%; }
  .tips-surface .overflow-x-auto table { min-width: 680px; }
  .tips-surface button { min-height: 44px; }
}

/* Scheduling owns its theme boundary: the shared shell stays stable while the
   dense grid, change queue, and state views receive real dark contrast. */
.scheduling-surface { min-width: 0; }
.dark .scheduling-surface, [data-theme="dark"] .scheduling-surface {
  --schedule-surface: var(--spinach-800);
  --schedule-muted: var(--spinach-700);
  --schedule-line: var(--spinach-600);
  --schedule-line-strong: var(--spinach-400);
  --schedule-ink: var(--brioche-25);
  --schedule-soft: var(--brioche-200);
  --schedule-faint: var(--brioche-300);
  --accent: var(--matcha-300);
  min-height: calc(100vh - 64px);
  margin: -24px;
  padding: 24px;
  background: var(--spinach-900);
  color: var(--schedule-ink);
  color-scheme: dark;
}
.dark .scheduling-surface .bg-surface, [data-theme="dark"] .scheduling-surface .bg-surface,
.dark .scheduling-surface input, .dark .scheduling-surface select,
[data-theme="dark"] .scheduling-surface input, [data-theme="dark"] .scheduling-surface select { background: var(--schedule-surface) !important; color: var(--schedule-ink) !important; }
.dark .scheduling-surface [class*="bg-sidebar"], .dark .scheduling-surface .bg-muted,
[data-theme="dark"] .scheduling-surface [class*="bg-sidebar"], [data-theme="dark"] .scheduling-surface .bg-muted,
.dark .scheduling-surface th, [data-theme="dark"] .scheduling-surface th { background: var(--schedule-muted) !important; color: var(--schedule-soft) !important; }
.dark .scheduling-surface .text-ink, [data-theme="dark"] .scheduling-surface .text-ink { color: var(--schedule-ink) !important; }
.dark .scheduling-surface .text-ink-soft, [data-theme="dark"] .scheduling-surface .text-ink-soft { color: var(--schedule-soft) !important; }
.dark .scheduling-surface .text-ink-faint, [data-theme="dark"] .scheduling-surface .text-ink-faint { color: var(--schedule-faint) !important; }
.dark .scheduling-surface .border-line, .dark .scheduling-surface td, .dark .scheduling-surface th,
[data-theme="dark"] .scheduling-surface .border-line, [data-theme="dark"] .scheduling-surface td, [data-theme="dark"] .scheduling-surface th { border-color: var(--schedule-line) !important; }
.dark .scheduling-surface .border-line-strong, [data-theme="dark"] .scheduling-surface .border-line-strong { border-color: var(--schedule-line-strong) !important; }
.dark .scheduling-surface [style*="background:"], [data-theme="dark"] .scheduling-surface [style*="background:"] { background: var(--schedule-muted) !important; }
.dark .scheduling-surface [style*="color:"], [data-theme="dark"] .scheduling-surface [style*="color:"] { color: var(--schedule-ink) !important; }
.dark .scheduling-surface button, [data-theme="dark"] .scheduling-surface button { background: var(--schedule-surface); border-color: var(--schedule-line-strong); color: var(--schedule-ink); }
.dark .scheduling-surface button:not([disabled]):hover, [data-theme="dark"] .scheduling-surface button:not([disabled]):hover { background: var(--schedule-muted); }
.dark .scheduling-surface button[class~="bg-accent"], [data-theme="dark"] .scheduling-surface button[class~="bg-accent"] { background: var(--matcha-300); border-color: var(--matcha-300); color: var(--spinach-900); }
.dark .scheduling-surface button[class~="bg-accent"]:not([disabled]):hover, [data-theme="dark"] .scheduling-surface button[class~="bg-accent"]:not([disabled]):hover { background: var(--matcha-200) !important; }
.dark .scheduling-surface button[class~="bg-accent"]:not([disabled]):active, [data-theme="dark"] .scheduling-surface button[class~="bg-accent"]:not([disabled]):active { background: var(--matcha-100) !important; transform: translateY(1px); }
.dark .scheduling-surface button:disabled, [data-theme="dark"] .scheduling-surface button:disabled { background: var(--schedule-muted) !important; border-color: var(--schedule-line) !important; color: var(--schedule-faint) !important; opacity: 1 !important; }
.dark .scheduling-surface .skel, [data-theme="dark"] .scheduling-surface .skel { background: var(--schedule-muted); }
.dark .scheduling-surface :focus-visible, [data-theme="dark"] .scheduling-surface :focus-visible { outline-color: var(--matcha-300); }
@media (max-width: 640px) {
  .dark .scheduling-surface, [data-theme="dark"] .scheduling-surface { margin: -16px; padding: 16px; }
}