/* ══════════════════════════════════════════════════════════════════════
   CAREMETRICS — DESIGN SYSTEM
   Organized for reuse across all dashboard pages.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────────────── */
:root {
  /* Slate (primary neutral) */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* Brand — deep corporate blue */
  --accent-50:  #eff6ff;
  --accent-100: #dbeafe;
  --accent-200: #bfdbfe;
  --accent-300: #93c5fd;
  --accent-400: #60a5fa;
  --accent-500: #2563eb;
  --accent-600: #1d4ed8;
  --accent-700: #1e40af;
  --accent-800: #1e3a8a;

  /* Semantic */
  --success-50:  #f0fdf4;
  --success-100: #dcfce7;
  --success-400: #34d399;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #15803d;

  --warning-50:  #fffbeb;
  --warning-100: #fef3c7;
  --warning-200: #fde68a;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;

  --danger-50:  #fef2f2;
  --danger-100: #fee2e2;
  --danger-200: #fecaca;
  --danger-300: #fca5a5;
  --danger-400: #fb7185;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --danger-700: #b91c1c;

  --info-500: #0ea5e9;

  /* Surfaces */
  --surface-app:    var(--slate-50);
  --surface-card:   #ffffff;
  --surface-raised: #ffffff;
  --surface-muted:  var(--slate-100);
  --surface-sidebar: var(--slate-900);

  /* Text */
  --text-primary:   var(--slate-900);
  --text-secondary: var(--slate-600);
  --text-tertiary:  var(--slate-500);
  --text-muted:     var(--slate-400);
  --text-inverted:  #ffffff;

  /* Borders */
  --border-subtle:  var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong:  var(--slate-400);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-card: var(--radius-lg);   /* canonical card/menu corner ("cloud-soft") */
  --radius-pill: 999px;              /* fully-rounded pills, triggers, chips */

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-cloud: 0 12px 28px rgba(15, 23, 42, 0.14);  /* floating "cloud" menus + raised cards */

  /* motion */
  --t-fast: 0.15s;                   /* canonical fast transition/animation duration */

  /* Spacing scale */
  --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;

  /* Sizes */
  --sidebar-w: 248px;
  --topbar-h: 64px;
}

/* ── 2. RESET ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "ss03";
  /* Always reserve the vertical scrollbar's track so pages of differing
     heights don't shift sideways when navigating between them. */
  scrollbar-gutter: stable;
}

body { display: flex; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
select, input { font-family: inherit; }

/* Keyboard focus must remain visible even when a page-specific control does
   not define its own focus treatment. More specific component rings may
   replace this fallback, but may not remove focus without a replacement. */
:is(a[href], button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

/* Screen-reader-only chart summaries and status text. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }

/* ══════════════════════════════════════════════════════════════════════
   3. SIDEBAR
   ══════════════════════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: var(--surface-sidebar);
  color: var(--slate-300);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-right: 1px solid var(--slate-800);
  z-index: 50;
}

/* Reserve the fixed sidebar's gutter UNCONDITIONALLY (not via `.sidebar ~ .main`),
   so .main sits in its final position from first paint — before datapoint-sidebar.js
   injects the sidebar. Without this the content painted full-width then jumped
   248px right when the sidebar appeared (a large layout shift the auth veil used
   to mask). The sidebar is position:fixed, so this margin just reserves its space. */
.main { margin-left: var(--sidebar-w); }
.sidebar ~ .main { margin-left: var(--sidebar-w); }

/* ── Static application hosts ─────────────────────────────────────────────
   Every authenticated route owns these nodes in its HTML. Async code hydrates
   them in place; it never inserts siblings above already-painted KPI/chart
   content. The banner stack floats below the topbar so an error/invitation
   cannot move the document. */
.main > .topbar { order: -30; }
.main > .page-header { order: -20; }
.app-live-panel-slot {
  order: -10;
  min-width: 0;
  position: relative;
}
.app-live-panel-slot[data-reserve="live-panel"] { min-height: 220px; }
.app-live-panel-slot--settings[data-reserve="live-panel"]:not(.is-ready) { min-height: 288px; }
.app-live-panel-slot--settings[data-reserve="live-panel"].is-ready { min-height: 0; }
.app-live-panel-slot--settings:not(.is-ready) ~ .hub-section-label,
.app-live-panel-slot--settings:not(.is-ready) ~ .settings-hub-grid,
.app-live-panel-slot--settings:not(.is-ready) ~ .settings-hub-foot,
.app-live-panel-slot--settings:not(.is-ready) ~ .main-footer { visibility: hidden; }
.app-live-panel-slot--targets[data-reserve="live-panel"]:not(.is-hydrated) { min-height: 413px; }
.app-live-panel-slot--targets[data-reserve="live-panel"].is-hydrated { min-height: 0; }
.app-live-panel-slot--targets:not(.is-hydrated) .dlv-panel { min-height: 389px; }
.app-live-panel-slot--targets:not(.is-hydrated) ~ .sr-soon-panel,
.app-live-panel-slot--targets:not(.is-hydrated) ~ .main-footer { visibility: hidden; }
.app-live-panel-slot[data-reserve="live-panel"]:not(.is-ready)::before {
  content: "Loading live data…";
  position: absolute;
  inset: 0 var(--space-8) var(--space-6);
  display: grid;
  place-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: linear-gradient(110deg, #fff 25%, var(--slate-50) 45%, #fff 65%);
  background-size: 220% 100%;
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 600;
}
.app-banner-slot {
  position: fixed;
  top: var(--topbar-h);
  left: var(--sidebar-w);
  right: 0;
  z-index: 1100;
  height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  pointer-events: none;
}
.app-banner-slot--fallback { left: 0; top: 0; }
.app-banner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 46px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
}
.app-banner--error,
.app-banner--auth { background: var(--danger-50); border-color: var(--danger-200); color: var(--danger-700); }
.app-banner--warning { background: var(--warning-50); border-color: var(--warning-200); color: var(--warning-700); }
.app-banner--invite { align-items: stretch; background: var(--accent-50); border-color: var(--accent-200); color: var(--accent-800); }
.dp-page-resource-state {
  margin: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--warning-200);
  border-radius: var(--radius-lg);
  background: var(--warning-50);
  color: var(--warning-700);
  font-size: 14px;
  line-height: 1.55;
}
.main.dp-resource-blocked > :not(.topbar):not(.app-banner-slot):not(.page-header):not(.filters-bar):not(.ta-filter-bar):not(.control-bar):not(.dp-page-resource-state) {
  display: none !important;
}
/* An organization change publishes the blocked state synchronously, before
   the new workspace has finished loading. Keep the canonical header/filter
   slots in flow so the page does not shift, but remove their tenant-owned
   labels from both the visual and accessibility trees until the resource gate
   verifies the new workspace. The topbar/sidebar remain visible as shell. */
.main.dp-resource-blocked > .page-header,
.main.dp-resource-blocked > .filters-bar,
.main.dp-resource-blocked > .ta-filter-bar,
.main.dp-resource-blocked > .control-bar {
  visibility: hidden !important;
  pointer-events: none !important;
  user-select: none;
}
.app-banner-actions { display: inline-flex; align-items: center; gap: 8px; }
.app-banner-button,
.app-banner-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  background: #fff;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
}
.app-banner-button:focus-visible,
.app-banner-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ── Boot gate ────────────────────────────────────────────────────────────
   While auth resolves, the document is NEVER fully hidden. The shell chrome
   (top bar + page header) paints immediately; only the data content below it is
   gated — with its LAYOUT PRESERVED (visibility:hidden, not display:none) so
   nothing shifts when it reveals. datapoint-auth.js adds html.dp-booting before
   first paint and removes it on reveal(). Banners keep their reserved slot. */
html.dp-booting .main > :not(.topbar):not(.page-header):not(.app-banner-slot) {
  visibility: hidden;
}
html.dp-booting .main { position: relative; }
/* Neutral "loading workspace" affordance centered in the gated content area. */
html.dp-booting .main::after {
  content: "Loading your workspace…";
  position: absolute;
  left: 0; right: 0; top: calc(var(--topbar-h) + 88px);
  text-align: center;
  color: var(--text-tertiary, #94a3b8);
  font-size: 13px;
  font-weight: 600;
  visibility: visible;
}
html.dp-auth-failed .main::after { content: "Your workspace is locked until sign-in is verified."; }
@media (prefers-reduced-motion: no-preference) {
  html.dp-booting .main::after { animation: dp-boot-pulse 1.4s ease-in-out infinite; }
}
@keyframes dp-boot-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

.sidebar-brand {
  display: flex;
  align-items: center;
  padding: 22px var(--space-5);
  border-bottom: 1px solid var(--slate-800);
}

/* Full-color DataPoint lockup on a white panel inset into the dark sidebar. */
.brand-logo { width: 100%; max-width: 190px; height: auto; display: block; }
.sidebar-brand--panel { background: #fff; border-radius: 10px; padding: 10px 12px; margin: 8px; display: flex; }
.sidebar-brand--panel .brand-logo { width: 100%; max-width: 190px; height: auto; display: block; }

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }

.brand-name {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.brand-tag {
  color: var(--slate-500);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 2px;
}

.sidebar-nav {
  flex: 1;
  padding: var(--space-4) var(--space-3);
  overflow-y: auto;
}

.nav-section-label {
  color: var(--slate-500);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-5) var(--space-3) var(--space-2) var(--space-3);
}

.sidebar-nav .nav-section-label:first-child {
  padding-top: var(--space-2);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--slate-400);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
  margin-bottom: 1px;
}

.nav-item:hover {
  background: var(--slate-800);
  color: var(--slate-100);
}

.nav-item.active {
  background: var(--accent-700);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.nav-item svg { flex-shrink: 0; opacity: 0.85; }

/* ── Expandable nav group (parent with child links) ──
   A <details>/<summary> disclosure styled to match .nav-item. Add the `open`
   attribute on the parent's own pages so it lands expanded; collapsed elsewhere.
   Zero-JS, keyboard-accessible, announces expanded/collapsed natively. */
.nav-group { margin-bottom: 1px; }
.nav-group > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--slate-400);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:hover { background: var(--slate-800); color: var(--slate-100); }
.nav-group > summary:focus-visible { outline: 2px solid var(--accent-500); outline-offset: -2px; }
.nav-group[open] > summary { color: var(--slate-200); }
.nav-group > summary .nav-item-icon { flex-shrink: 0; opacity: 0.85; }
.nav-group-chevron { margin-left: auto; flex-shrink: 0; opacity: 0.7; transition: transform 0.15s ease; }
.nav-group[open] > summary .nav-group-chevron { transform: rotate(90deg); }

.nav-subitem {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px var(--space-3) 8px 30px;
  border-radius: var(--radius-sm);
  color: var(--slate-400);
  font-size: 12.5px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
  margin-bottom: 1px;
}
.nav-subitem:hover { background: var(--slate-800); color: var(--slate-100); }
.nav-subitem.active {
  background: var(--accent-700);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.nav-subitem-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  flex-shrink: 0;
}

/* ── Hidden nav items ──
   Kept in HTML for easy re-enable; remove these rules to show again. */
.sidebar-nav a[href="scheduler.html"],   /* Scheduling */
.sidebar-nav a[href="#"] {                /* Compliance Monitor (dead link) */
  display: none;
}

.sidebar-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--slate-800);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: background 0.15s;
  cursor: pointer;
}

.user-chip:hover {
  background: var(--slate-800);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fb923c 0%, #e11d48 100%);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.user-name {
  color: var(--slate-100);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.user-role {
  color: var(--slate-500);
  font-size: 11px;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   4. MAIN CONTAINER
   ══════════════════════════════════════════════════════════════════════ */
.main {
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
.main > * { flex-shrink: 0; }

/* ── 5. TOPBAR ────────────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-subtle);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-8);
  position: sticky;
  top: 0;
  z-index: 10;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.dp-topbar-left {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 40px;
  overflow: hidden;
}
.breadcrumb > * { flex-shrink: 0; }
.breadcrumb .crumb-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.crumb-root { color: var(--text-tertiary); font-weight: 500; }
.crumb-sep  { color: var(--text-muted); }
.crumb-current { color: var(--text-primary); font-weight: 600; }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  height: 40px;
  justify-content: flex-end;
}

.btn-icon {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}

.btn-icon:hover {
  background: var(--slate-100);
  color: var(--text-primary);
}

.badge-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger-500);
  border: 2px solid #fff;
}

.btn-secondary, .btn-primary, .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s;
}

.btn-secondary {
  background: #fff;
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}
.btn-secondary:hover {
  background: var(--slate-50);
  border-color: var(--slate-400);
}

.btn-primary {
  background: var(--accent-600);
  color: #fff;
  border: 1px solid var(--accent-600);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}
.btn-primary:hover {
  background: var(--accent-700);
  border-color: var(--accent-700);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
.btn-ghost:hover {
  background: var(--slate-100);
  color: var(--text-primary);
}

.btn-link {
  color: var(--accent-600);
  font-size: 13px;
  font-weight: 600;
}
.btn-link:hover { color: var(--accent-700); }

/* ══════════════════════════════════════════════════════════════════════
   6. PAGE HEADER
   ══════════════════════════════════════════════════════════════════════ */
/* SINGLE shared page header — compact + raised, matching the Time & Attendance
   reference. These values used to live only in `.page-header-compact`; they are
   now the base so every page inherits one consistent header (no per-page sizes,
   no drift). The old `.page-header-compact` class is retained as a harmless
   no-op alias on the pages that still carry it. */
.page-header {
  padding: 18px var(--space-8) 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.page-title {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  line-height: 1.15;
}

.page-sub {
  color: var(--text-tertiary);
  font-size: 12.5px;
  margin-top: 2px;
}

.portfolio-summary {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-6);
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.summary-stat {
  text-align: center;
  min-width: 76px;
}

.summary-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.summary-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}

.summary-divider {
  width: 1px;
  height: 32px;
  background: var(--border-subtle);
}

/* ══════════════════════════════════════════════════════════════════════
   7. FILTERS BAR
   ══════════════════════════════════════════════════════════════════════ */
.filters-bar,
.ta-filter-bar,
.control-bar {
  margin: 0 0 var(--space-6);
  padding: var(--space-3) var(--space-8);
  min-height: 61px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-3);
  box-shadow: none;
  position: sticky;
  top: var(--topbar-h);
  z-index: 25;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.filters-bar::-webkit-scrollbar,
.ta-filter-bar::-webkit-scrollbar,
.control-bar::-webkit-scrollbar { display: none; width: 0; height: 0; }
.filters-bar > *,
.ta-filter-bar > *,
.control-bar > * { flex-shrink: 0; }

.filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.filter-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.filter-segmented {
  display: inline-flex;
  background: var(--slate-100);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.seg-btn {
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  transition: all 0.15s;
}

.seg-btn:hover { color: var(--text-primary); }

.seg-btn.active {
  background: #fff;
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  height: 34px;
  padding: 7px var(--space-3);
  padding-right: 34px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 13px;
  color: var(--text-primary);
  background: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  min-width: 160px;
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}

.form-select:hover { border-color: var(--slate-400); }
.form-select:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 1px; border-color: var(--accent-500); }
.form-select:disabled { cursor: not-allowed; background-color: var(--slate-100); color: var(--text-tertiary); }

.filter-spacer { flex: 1; }

/* Read-only scope text belongs in a scope chip, never in a disabled control.
   This keeps unavailable filters out of the tab order and prevents them from
   looking like broken product features. */
.dp-filter-scope {
  min-height: 34px;
  padding: 6px 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--slate-50);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.dp-filter-scope svg { color: var(--text-tertiary); flex: 0 0 auto; }
.dp-filter-scope-detail { color: var(--text-tertiary); font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════════
   8. KPI CARDS
   ══════════════════════════════════════════════════════════════════════ */
.kpi-grid {
  margin: 0 var(--space-8) var(--space-6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.kpi-card {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5) var(--space-4);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.kpi-card:hover {
  border-color: var(--slate-300);
  box-shadow: var(--shadow-md);
}

.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
}

.kpi-period {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.kpi-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1;
}

.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
}

.delta-positive {
  background: var(--success-50);
  color: var(--success-700);
}

.delta-negative {
  background: var(--danger-50);
  color: var(--danger-700);
}

.kpi-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.kpi-meter {
  height: 4px;
  background: var(--slate-100);
  border-radius: 2px;
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.kpi-compare {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: var(--text-tertiary);
}

.kpi-compare strong {
  color: var(--text-primary);
  font-weight: 600;
}

.kpi-saved { color: var(--success-600); font-weight: 600; }
.kpi-over  { color: var(--danger-600);  font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   9. PANELS (reusable)
   ══════════════════════════════════════════════════════════════════════ */
.panel {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* Wide analytical surfaces own their overflow. The page/body never clips
   content globally, so keyboard and zoom users can reach every column. */
.pf-matrix-panel,
.pf-heatmap-panel,
.matrix-wrap,
.table-scroll,
.ta-table-wrap,
.ts-watch-scroll,
.hp-matrix-wrap,
.unit-table-wrap,
#agencyByShift {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  gap: var(--space-4);
}

.panel-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.panel-sub {
  font-size: 12.5px;
  color: var(--text-tertiary);
  margin-top: 3px;
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.two-col {
  margin: 0 var(--space-8) var(--space-6);
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--space-5);
}

/* ── Content-inset consistency ─────────────────────────────────────────────
   Every page should put its header title and content panels at the same
   left origin (main edge + space-8). Two outliers are normalized here:
   (a) pages that wrap content in .app-content (payroll) already get the
   space-8 inset from the wrapper, so the page-header must not add its own
   horizontal padding on top (that double-inset pushed the title 32px right);
   (b) panels that sit directly in .main (e.g. the settings child pages)
   render flush without the gutter, so give them the same space-8 margin the
   dashboards use. Panels nested in .two-col / .app-content are unaffected. */
.main > .panel { margin-left: var(--space-8); margin-right: var(--space-8); }

/* ── 9a. Trend chart panel ─────────────────────────────────────────────── */
.trend-panel { display: flex; flex-direction: column; }

.chart-container {
  padding: var(--space-5);
  height: 300px;
  position: relative;
}

.chart-legend {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* ── 9b. Alerts panel ──────────────────────────────────────────────────── */
.alerts-panel { display: flex; flex-direction: column; }

.alerts-list {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.alert-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  transition: background 0.15s;
  cursor: pointer;
}

.alert-row:hover { background: var(--slate-50); }

.alert-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px currentColor;
  opacity: 0.15;
}

.alert-danger .alert-indicator  { background: var(--danger-500);  color: var(--danger-500); }
.alert-warning .alert-indicator { background: var(--warning-500); color: var(--warning-500); }
.alert-info .alert-indicator    { background: var(--info-500);    color: var(--info-500); }
.alert-success .alert-indicator { background: var(--success-500); color: var(--success-500); }

.alert-content { flex: 1; }

.alert-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.alert-meta {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   10. FACILITY TABLE
   ══════════════════════════════════════════════════════════════════════ */
.facility-panel { margin: 0 var(--space-8) var(--space-6); }

.sort-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px var(--space-3);
  background: var(--slate-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.chip-label {
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-weight: 500;
}

.facility-table {
  font-size: 13px;
}

.facility-table-head,
.facility-row {
  display: grid;
  grid-template-columns: 2.3fr 0.9fr 0.9fr 1fr 1.3fr 1.3fr 1fr 40px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

.facility-table-head {
  background: var(--slate-50);
  border-bottom: 1px solid var(--border-subtle);
}

.facility-table-head > div {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.col-num, .col-num.head-cell { text-align: left; }

.facility-row {
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background 0.12s, transform 0.12s;
  animation: fadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
  position: relative;
}

.facility-row:last-child { border-bottom: none; }

.facility-row:hover {
  background: var(--slate-50);
}

.facility-row:hover .col-action svg { color: var(--accent-600); transform: translateX(3px); }

.facility-row:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: -2px;
}

.facility-ident {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.facility-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent-50) 0%, var(--accent-100) 100%);
  color: var(--accent-700);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  border: 1px solid var(--accent-100);
}

.facility-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.3;
}

.facility-sub {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.num-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.num-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.variance-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.var-positive { background: var(--success-50); color: var(--success-700); }
.var-negative { background: var(--danger-50);  color: var(--danger-700); }

/* Viz bars */
.viz-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.viz-value {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  min-width: 42px;
}

.viz-bar {
  flex: 1;
  height: 6px;
  background: var(--slate-100);
  border-radius: 3px;
  overflow: hidden;
  min-width: 60px;
}

.viz-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.bar-success { background: var(--success-500); }
.bar-warning { background: var(--warning-500); }
.bar-danger  { background: var(--danger-500); }

/* Status pills */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.st-excellent {
  background: var(--success-50);
  color: var(--success-700);
  box-shadow: inset 0 0 0 1px var(--success-100);
}

.st-good {
  background: var(--accent-50);
  color: var(--accent-700);
  box-shadow: inset 0 0 0 1px var(--accent-100);
}

.st-watch {
  background: var(--warning-50);
  color: var(--warning-700);
  box-shadow: inset 0 0 0 1px var(--warning-100);
}

.st-critical {
  background: var(--danger-50);
  color: var(--danger-700);
  box-shadow: inset 0 0 0 1px var(--danger-100);
}

.col-action {
  display: flex;
  justify-content: flex-end;
}

.col-action svg {
  color: var(--text-muted);
  transition: color 0.15s, transform 0.15s;
}

/* ══════════════════════════════════════════════════════════════════════
   11. FOOTER
   ══════════════════════════════════════════════════════════════════════ */
.main-footer {
  margin: var(--space-4) var(--space-8) var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 12px;
  color: var(--text-tertiary);
}

.footer-dot { color: var(--text-muted); }

.footer-link {
  color: var(--text-tertiary);
  font-weight: 500;
  transition: color 0.15s;
}
.footer-link:hover { color: var(--accent-600); }

/* ══════════════════════════════════════════════════════════════════════
   12. ANIMATIONS
   ══════════════════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════════
   13. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col  { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .sidebar {
    display: flex;
    width: 284px;
    max-width: 85vw;
    z-index: 1400;
    transform: translateX(-106%);
    transition: transform 0.22s ease;
    overflow-y: auto;
    box-shadow: none;
  }
  body.dp-nav-open .sidebar {
    transform: translateX(0);
    box-shadow: 0 0 44px rgba(2, 6, 23, 0.45);
  }
  .main { margin-left: 0; }
  .sidebar ~ .main { margin-left: 0; }
  .dp-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1395;
    background: rgba(15, 23, 42, 0.52);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  body.dp-nav-open .dp-nav-backdrop { opacity: 1; pointer-events: auto; }
  body.dp-nav-open { overflow: hidden; }
  .page-header { padding: var(--space-5); gap: 10px; }
  .topbar { overflow: hidden; }
  .filters-bar, .kpi-grid, .two-col, .facility-panel, .main-footer {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
  }
  .facility-table-head { display: none; }

  .facility-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .facility-row .col-facility { grid-column: 1 / -1; }
  .facility-row .col-action   { grid-column: 2; justify-self: end; }
}

/* Shared print shell. Route styles may select their report-specific content,
   but shell removal and rail reset remain canonical. */
@media print {
  .sidebar,
  .topbar,
  .filters-bar,
  .ta-filter-bar,
  .control-bar { display: none !important; }
  .main { margin: 0 !important; padding: 0 !important; }
}

@media (max-width: 600px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .topbar { padding: 0 var(--space-4); }
  .topbar-actions .btn-secondary span,
  .topbar-actions .btn-primary span { display: none; }
  .page-header, .portfolio-summary { padding: var(--space-4); }
  .portfolio-summary { width: 100%; }
}
/* ══════════════════════════════════════════════════════════════════════
   14. FACILITY DETAILS — PAGE-SPECIFIC STYLES
   (Append to styles.css)
   ══════════════════════════════════════════════════════════════════════ */

/* ── 14a. Back link + facility header ──────────────────────────────────── */
.facility-header { align-items: flex-start; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
  transition: color 0.15s;
}
.back-link:hover { color: var(--accent-600); }
.back-link svg { opacity: 0.7; }

.facility-badges {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.fcy-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px 14px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.fcy-badge-success { border-color: var(--success-100); background: var(--success-50); }
.fcy-badge-success svg { color: var(--success-600); }

.fcy-badge-info { border-color: var(--accent-100); background: var(--accent-50); }
.fcy-badge-info svg { color: var(--accent-600); }

.fcy-badge-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.fcy-badge-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin-top: 1px;
}

.fcy-badge-success .fcy-badge-value { color: var(--success-700); }
.fcy-badge-info .fcy-badge-value    { color: var(--accent-700); }

.crumb-link {
  color: var(--text-tertiary);
  transition: color 0.15s;
}
.crumb-link:hover { color: var(--accent-600); }

/* ── 14b. Filter extensions ────────────────────────────────────────────── */
.filter-select-lg { min-width: 260px; font-weight: 600; }

.date-range-picker {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.15s;
}
.date-range-picker:hover { border-color: var(--slate-400); }
.date-range-picker:focus-within { border-color: var(--accent-500); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }

.date-select {
  border: none;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  cursor: pointer;
  border-right: 1px solid var(--border-subtle);
  outline: none;
  min-width: 84px;
}
.date-select:last-child { border-right: none; }
.date-select-day { min-width: 58px; }

.btn-chip {
  display: inline-block;
  padding: 1px 7px;
  margin-left: 2px;
  background: var(--slate-100);
  color: var(--text-tertiary);
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.btn-ghost:hover .btn-chip {
  background: var(--accent-50);
  color: var(--accent-700);
}

/* ── 14c. AI PROMPT BAR ────────────────────────────────────────────────── */
.ai-prompt {
  margin: 0 var(--space-8) var(--space-6);
  padding: 10px 14px;
  background: linear-gradient(135deg, #fff 0%, #fafbff 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ai-prompt::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.25) 0%, rgba(124, 58, 237, 0.25) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

.ai-prompt:focus-within {
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
}
.ai-prompt:focus-within::before { opacity: 1; }

.ai-prompt-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent-50) 0%, #f3e8ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--accent-100);
}

.ai-prompt-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13.5px;
  color: var(--text-primary);
  padding: 6px 0;
  min-width: 0;
}

.ai-prompt-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

.ai-suggestion-chips {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.ai-chip {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--slate-50);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s;
  white-space: nowrap;
}

.ai-chip:hover {
  background: var(--accent-50);
  border-color: var(--accent-100);
  color: var(--accent-700);
}

.ai-send-btn { flex-shrink: 0; }

/* ── 14d. Compact KPI variation ───────────────────────────────────────── */
.kpi-grid-compact {
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}

.kpi-card-compact { padding: var(--space-4); }

.kpi-card-compact .kpi-value { font-size: 22px; }

.kpi-card-compact .kpi-header { margin-bottom: 8px; }
.kpi-card-compact .kpi-value-row { margin-bottom: 8px; }
.kpi-card-compact .kpi-compare { font-size: 11px; }

/* ══════════════════════════════════════════════════════════════════════
   14e. DRILL-DOWN MATRIX
   ══════════════════════════════════════════════════════════════════════ */
.matrix-panel { margin: 0 var(--space-8) var(--space-6); }

.matrix-legend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-right: var(--space-3);
  padding-right: var(--space-4);
  border-right: 1px solid var(--border-subtle);
}

.matrix-legend .legend-item {
  font-size: 11.5px;
  color: var(--text-tertiary);
}

.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: -1px;
}

.swatch-ok   { background: var(--success-500); }
.swatch-warn { background: var(--warning-500); }
.swatch-bad  { background: var(--danger-500); }

.btn-ghost-sm {
  padding: 5px 10px;
  font-size: 12px;
}

.matrix-wrap { overflow-x: auto; }

.matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 1060px;
}

.matrix-table thead th {
  background: var(--slate-50);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.matrix-table thead .mx-col-num { text-align: right; }

.mx-col-label { width: 34%; min-width: 320px; }
.mx-col-num   { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.mx-row {
  transition: background 0.12s;
  border-bottom: 1px solid var(--border-subtle);
  cursor: default;
}

.mx-row:last-child { border-bottom: none; }

.mx-row td {
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
  vertical-align: middle;
}

/* Row type backgrounds (subtle shading for hierarchy) */
.mx-row-dept {
  background: #fff;
  cursor: pointer;
}
.mx-row-dept:hover { background: var(--slate-50); }

.mx-row-dept td {
  font-weight: 700;
  color: var(--text-primary);
}

.mx-row-position {
  background: var(--slate-50);
  cursor: pointer;
}
.mx-row-position:hover { background: #eef2f7; }

.mx-row-position td {
  font-weight: 600;
  color: var(--slate-700);
}

.mx-row-employee {
  background: #fcfdff;
}
.mx-row-employee:hover { background: var(--slate-50); }

.mx-row-employee td {
  color: var(--text-secondary);
  font-weight: 500;
}

.mx-row-total {
  background: linear-gradient(180deg, var(--slate-50) 0%, var(--slate-100) 100%);
  border-top: 2px solid var(--border-default);
}

.mx-row-total td {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text-primary);
  padding: var(--space-4);
}

.mx-total-label { color: var(--text-primary); font-weight: 800; }

/* Label cell with indentation for hierarchy */
.mx-label-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mx-depth-0 { padding-left: 0; }
.mx-depth-1 { padding-left: 24px; }
.mx-depth-2 { padding-left: 52px; }

/* Caret button */
.mx-caret {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, transform 0.2s;
  flex-shrink: 0;
}

.mx-caret:hover {
  background: var(--slate-200);
  color: var(--text-primary);
}

.mx-caret[aria-expanded="true"] svg { transform: rotate(90deg); }
.mx-caret svg { transition: transform 0.18s ease; }

.mx-caret-leaf {
  width: 22px;
  height: 22px;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}

.mx-caret-leaf::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--slate-300);
  transform: translate(-50%, -50%);
}

/* Type indicators */
.mx-type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 7px;
  line-height: 1;
}

.mx-type-dept {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--accent-50);
  color: var(--accent-700);
  border: 1px solid var(--accent-100);
  font-size: 11px;
  padding: 0;
}

.mx-type-pos {
  background: var(--slate-200);
  color: var(--slate-700);
  font-size: 10px;
  padding: 3px 8px;
}

.mx-emp-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa 0%, #6366f1 100%);
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.mx-label-text { font-size: 13px; }
.mx-label-dept { font-weight: 700; color: var(--text-primary); font-size: 13.5px; }
.mx-label-position { font-weight: 600; color: var(--slate-700); }

.mx-emp-block {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.mx-emp-block .mx-label-text {
  font-weight: 600;
  color: var(--text-primary);
}

.mx-emp-tag {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 1px;
  font-weight: 500;
}

.mx-emp-tag-agency {
  color: var(--danger-600);
  font-weight: 600;
}

/* Conditional numeric cell formatting */
.mx-row td.mx-danger { color: var(--danger-600); font-weight: 700; }
.mx-row td.mx-warn   { color: var(--warning-700); font-weight: 600; }
.mx-row td.mx-ok     { color: var(--success-700); font-weight: 600; }

/* Employee rows — slightly muted numbers */
.mx-row-employee td.mx-col-num {
  color: var(--text-secondary);
  font-weight: 500;
}

.mx-row-employee td.mx-col-num.mx-danger { color: var(--danger-600); font-weight: 700; }
.mx-row-employee td.mx-col-num.mx-warn   { color: var(--warning-700); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   14f. CHART SECTIONS
   ══════════════════════════════════════════════════════════════════════ */
.chart-container-tall {
  height: 320px;
  padding: var(--space-5);
}

/* Donut wrapper holds the chart + absolute center */
.chart-donut-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.donut-center-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.donut-center-label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 6px;
  font-weight: 600;
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--space-5) var(--space-5);
}

.donut-legend-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: background 0.12s;
}

.donut-legend-row:hover { background: var(--slate-50); }

.donut-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.donut-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.donut-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.donut-pct {
  font-weight: 500;
  color: var(--text-tertiary);
  margin-left: 4px;
}

/* ══════════════════════════════════════════════════════════════════════
   14g. RESPONSIVE TWEAKS
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .kpi-grid-compact { grid-template-columns: repeat(3, 1fr); }
  .ai-suggestion-chips { display: none; }
}

@media (max-width: 960px) {
  .matrix-panel, .ai-prompt { margin-left: var(--space-5); margin-right: var(--space-5); }
  .kpi-grid-compact { grid-template-columns: repeat(2, 1fr); }
  .facility-badges { width: 100%; margin-top: var(--space-3); }
}

@media (max-width: 600px) {
  .kpi-grid-compact { grid-template-columns: 1fr; }
  .ai-prompt { flex-wrap: wrap; }
  .ai-prompt-input { width: 100%; order: -1; }
  .ai-send-btn { width: 100%; justify-content: center; }
  .date-range-picker .date-select { min-width: 64px; font-size: 12px; }
}
/* ══════════════════════════════════════════════════════════════════════
   15. PAYROLL AUDIT — PAGE-SPECIFIC STYLES
   (Append to styles.css)
   ══════════════════════════════════════════════════════════════════════ */

/* ── 15a. AI EXECUTIVE SUMMARY BANNER ──────────────────────────────────── */
.ai-summary-card {
  margin: 0 var(--space-8) var(--space-6);
  padding: 28px 32px 24px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  color: #f1f5ff;
  /* Deep, rich AI gradient — never lands on generic purple gradients */
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(37, 99, 235, 0.45) 0%, transparent 60%),
    radial-gradient(120% 100% at 100% 100%, rgba(124, 58, 237, 0.35) 0%, transparent 55%),
    linear-gradient(135deg, #0b1230 0%, #0f1a3f 45%, #1b1a47 100%);
  box-shadow:
    0 12px 40px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ai-summary-card::before {
  /* subtle grid pattern overlay for tech feel */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.6;
  mask: radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
  -webkit-mask: radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
}

.ai-summary-glow {
  position: absolute;
  top: -60px;
  right: -40px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.35) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(20px);
}

.ai-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1;
}

.ai-summary-brand {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.ai-summary-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25);
  flex-shrink: 0;
}

.ai-summary-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(226, 232, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
  padding: 3px 10px 3px 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  width: fit-content;
}

.ai-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: aiPulse 2s ease-in-out infinite;
}

@keyframes aiPulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.ai-summary-title {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.ai-summary-meta {
  display: inline-flex;
  gap: var(--space-4);
  align-items: center;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  flex-shrink: 0;
}

.ai-meta-item { text-align: right; }

.ai-meta-label {
  font-size: 10px;
  color: rgba(226, 232, 255, 0.55);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.ai-meta-value {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

.ai-risk-med { color: #fbbf24; }

.ai-meta-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
}

.ai-summary-body {
  font-size: 15px;
  line-height: 1.72;
  color: rgba(226, 232, 255, 0.92);
  max-width: 900px;
  font-weight: 400;
  margin-bottom: var(--space-5);
  position: relative;
  z-index: 1;
  letter-spacing: -0.003em;
}

.ai-summary-body strong {
  color: #ffffff;
  font-weight: 700;
}

.hl-danger {
  color: #fca5a5 !important;
}

/* Insight chips grid inside the banner */
.ai-summary-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  position: relative;
  z-index: 1;
}

.ai-insight-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transition: background 0.15s, transform 0.15s;
  cursor: pointer;
}

.ai-insight-chip:hover {
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-1px);
}

.chip-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chip-icon-danger  { background: rgba(239, 68, 68, 0.2);   color: #fca5a5; }
.chip-icon-warning { background: rgba(245, 158, 11, 0.2);  color: #fcd34d; }
.chip-icon-info    { background: rgba(59, 130, 246, 0.2);  color: #93c5fd; }

.chip-value {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.chip-label {
  font-size: 11px;
  color: rgba(226, 232, 255, 0.6);
  font-weight: 500;
  margin-top: 3px;
  letter-spacing: 0.005em;
}

/* Summary footer */
.ai-summary-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  gap: var(--space-4);
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.ai-summary-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.btn-ghost-inverted {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(226, 232, 255, 0.9);
}

.btn-ghost-inverted:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.ai-summary-meta-right {
  font-size: 11.5px;
  color: rgba(226, 232, 255, 0.5);
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════
   15b. EXCEPTION TABLE
   ══════════════════════════════════════════════════════════════════════ */
.exception-panel { margin: 0 var(--space-8) var(--space-6); }

.issue-filter-tabs {
  display: inline-flex;
  background: var(--slate-100);
  border-radius: var(--radius-sm);
  padding: 3px;
  margin-right: var(--space-2);
}

.issue-tab {
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}

.issue-tab:hover { color: var(--text-primary); }

.issue-tab.active {
  background: #fff;
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}

.issue-tab-count {
  background: var(--slate-200);
  color: var(--text-secondary);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.issue-tab.active .issue-tab-count {
  background: var(--slate-900);
  color: #fff;
}

.issue-tab-crit { background: var(--danger-100); color: var(--danger-700); }
.issue-tab-warn { background: var(--warning-100); color: var(--warning-700); }

.exception-wrap { overflow-x: auto; }

.exception-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 1040px;
}

.exception-table thead th {
  background: var(--slate-50);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  white-space: nowrap;
}

.ex-col-checkbox { width: 44px; padding-left: var(--space-5) !important; }
.ex-col-emp      { width: 18%; }
.ex-col-fac      { width: 18%; }
.ex-col-issue    { width: 140px; }
.ex-col-amount   { width: 110px; text-align: right; }
.ex-col-desc     { width: auto; }
.ex-col-action   { width: 130px; text-align: right; padding-right: var(--space-5) !important; }

.ex-row {
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.12s;
}

.ex-row:last-child { border-bottom: none; }
.ex-row:hover { background: var(--slate-50); }

.ex-row td {
  padding: 18px var(--space-4);
  vertical-align: middle;
}

.ex-row td:first-child { padding-left: var(--space-5); }
.ex-row td:last-child  { padding-right: var(--space-5); text-align: right; }

/* Custom checkbox */
.ex-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border-default);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
  background: #fff;
  flex-shrink: 0;
}

.ex-checkbox:hover { border-color: var(--accent-500); }

.ex-checkbox:checked {
  background: var(--accent-600);
  border-color: var(--accent-600);
}

.ex-checkbox:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Employee column */
.ex-emp {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ex-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 11.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.ex-emp-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.ex-emp-meta {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.ex-facility {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}

.ex-facility-sub {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* ── Issue badges (color-coded) ─────────────────────────────────────── */
.ex-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.ex-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.ex-badge-mismatch {
  background: var(--danger-50);
  color: var(--danger-700);
  border: 1px solid var(--danger-100);
}
.ex-badge-mismatch .ex-badge-dot { background: var(--danger-500); }

.ex-badge-double {
  background: #fdf2f8;
  color: #9d174d;
  border: 1px solid #fce7f3;
}
.ex-badge-double .ex-badge-dot { background: #db2777; }

.ex-badge-overtime {
  background: var(--warning-50);
  color: var(--warning-700);
  border: 1px solid var(--warning-100);
}
.ex-badge-overtime .ex-badge-dot { background: var(--warning-500); }

.ex-badge-bonus {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}
.ex-badge-bonus .ex-badge-dot { background: #d97706; }

/* Variance amount */
.ex-col-amount { text-align: right; }

.ex-variance {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.ex-variance-danger  { color: var(--danger-600); }
.ex-variance-warning { color: var(--warning-700); }

.ex-variance-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-top: 2px;
  text-transform: lowercase;
  letter-spacing: 0;
}

/* Description */
.ex-desc {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  max-width: 360px;
}

.ex-desc strong { color: var(--text-primary); font-weight: 600; }

/* Actions */
.ex-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.ex-btn {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  transition: all 0.15s;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.ex-btn-primary {
  background: var(--slate-900);
  color: #fff;
  border: 1px solid var(--slate-900);
}
.ex-btn-primary:hover {
  background: var(--accent-600);
  border-color: var(--accent-600);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.ex-btn-ghost {
  width: 30px;
  padding: 0;
  height: 30px;
  background: #fff;
  color: var(--text-tertiary);
  border: 1px solid var(--border-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ex-btn-ghost:hover {
  background: var(--slate-50);
  color: var(--text-primary);
  border-color: var(--border-default);
}

/* Table footer */
.ex-table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--slate-50);
}

.ex-footer-meta {
  font-size: 12.5px;
  color: var(--text-tertiary);
}

.ex-footer-meta strong {
  color: var(--text-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ex-at-risk {
  color: var(--danger-700);
  font-weight: 700;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--border-subtle);
}

.ex-pagination {
  display: inline-flex;
  gap: 2px;
}

.ex-page-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.ex-page-btn:hover:not(:disabled) {
  background: var(--slate-100);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.ex-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ex-page-active {
  background: var(--slate-900) !important;
  border-color: var(--slate-900) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════════
   15c. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .ai-summary-chips { grid-template-columns: repeat(2, 1fr); }
  .ai-suggestion-chips { display: none; }
}

@media (max-width: 960px) {
  .ai-summary-card, .exception-panel { margin-left: var(--space-5); margin-right: var(--space-5); }
  .ai-summary-card { padding: 20px 22px; }
  .ai-summary-header { flex-direction: column; }
  .ai-summary-meta { align-self: flex-start; }
  .ai-summary-footer { flex-direction: column; align-items: flex-start; }
  .issue-filter-tabs { display: none; }
}

@media (max-width: 600px) {
  .ai-summary-chips { grid-template-columns: 1fr; }
  .ai-summary-body { font-size: 14px; }
  .ai-summary-title { font-size: 17px; }
}
/* ══════════════════════════════════════════════════════════════════════
   16. TIME & ATTENDANCE — PAGE-SPECIFIC STYLES
   (Append to styles.css)
   ══════════════════════════════════════════════════════════════════════ */

/* ── 16a. Header stat chips ───────────────────────────────────────────── */
.ta-header-stats {
  display: flex;
  gap: var(--space-3);
}

.ta-stat-chip {
  padding: 10px 18px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
  min-width: 90px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ta-stat-chip::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}

.ta-stat-chip-good::before   { background: var(--success-500); }
.ta-stat-chip-warn::before   { background: var(--warning-500); }
.ta-stat-chip-danger::before { background: var(--danger-500); }

.ta-stat-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 3px;
}

.ta-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

.ta-stat-chip-good   .ta-stat-value { color: var(--success-700); }
.ta-stat-chip-warn   .ta-stat-value { color: var(--warning-700); }
.ta-stat-chip-danger .ta-stat-value { color: var(--danger-700); }

/* ── 16b. Prefilled AI prompt ─────────────────────────────────────────── */
.ai-prompt-prefilled .ai-prompt-input {
  font-weight: 500;
  color: var(--text-primary);
}

/* ── 16c. FILTER BAR CONTENT ────────────────────────────────────────────
   Shell geometry is defined once in section 7 for all three variants. */

.ta-filter-group {
  /* Inline label + control — saves vertical space, reads like an app header */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;                      /* NEVER squish — let the bar scroll */
}

.ta-filter-group > .filter-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;                 /* the label itself can't break either */
  margin: 0;                           /* kill stacked-label margin */
}

/* Everything clickable inside the bar keeps its text on one line */
.ta-filter-bar button,
.ta-filter-bar .ta-multi-trigger,
.ta-filter-bar .ta-pill,
.ta-filter-bar .ta-ctrl,
.ta-filter-bar .ta-multi,
.ta-filter-bar .ta-pills,
.ta-filter-bar .ta-date-control,
.ta-filter-bar .ta-date-stepper,
.ta-filter-bar .ta-date-today,
.ta-filter-bar .form-select {
  white-space: nowrap;
  flex-shrink: 0;                      /* defensive: cloud buttons keep size */
}

.label-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--slate-200);
  color: var(--text-tertiary);
  font-size: 9px;
  font-weight: 700;
  cursor: help;
}

/* Date control with prev/next navigation */
.ta-date-control {
  display: inline-flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.15s;
}
.ta-date-control:hover { border-color: var(--slate-400); }

.ta-date-nav {
  width: 30px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.ta-date-nav:hover { background: var(--slate-100); color: var(--text-primary); }
.ta-date-nav:last-child { border-right: none; }

.ta-date-display {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  border-right: 1px solid var(--border-subtle);
}

.ta-date-display svg { color: var(--accent-600); flex-shrink: 0; }

.ta-today-btn {
  padding: 7px 14px;
  background: var(--slate-50);
  border: none;
  border-left: 1px solid var(--border-subtle);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.ta-today-btn:hover { background: var(--slate-100); color: var(--accent-600); }

/* Threshold spinner */
.ta-threshold-input {
  display: inline-flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ta-threshold-input:focus-within {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.ta-step-btn {
  width: 30px;
  background: var(--slate-50);
  border: none;
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  line-height: 1;
}
.ta-step-btn:hover { background: var(--slate-100); color: var(--accent-600); }
.ta-step-btn:first-child { border-right: 1px solid var(--border-subtle); }
.ta-step-btn:last-child  { border-left: 1px solid var(--border-subtle); }

.ta-threshold-input input {
  width: 50px;
  border: none;
  outline: none;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  background: transparent;
  -moz-appearance: textfield;
}
.ta-threshold-input input::-webkit-outer-spin-button,
.ta-threshold-input input::-webkit-inner-spin-button { display: none; }

.ta-threshold-unit {
  display: inline-flex;
  align-items: center;
  padding: 0 10px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
}

/* Quick filter pills */
.ta-pills {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--slate-50);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.ta-pill:hover {
  background: var(--slate-100);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.ta-pill.active {
  background: var(--slate-900);
  border-color: var(--slate-900);
  color: #fff;
  box-shadow: var(--shadow-xs);
}

.ta-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  background: #fff;
  color: var(--text-secondary);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ta-pill.active .ta-pill-count {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.ta-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.ta-pill-warn .ta-pill-dot   { background: var(--warning-500); }
.ta-pill-danger .ta-pill-dot { background: var(--danger-500); }

.ta-pill-warn.active   { background: var(--warning-600);  border-color: var(--warning-600); }
.ta-pill-danger.active { background: var(--danger-600);  border-color: var(--danger-600); }

/* ── 16d. Punch distribution chart ────────────────────────────────────── */
.ta-dist-panel { margin: 0 var(--space-8) var(--space-6); }

.ta-chart-container {
  padding: var(--space-5);
  height: 220px;
  position: relative;
}

.ta-chart-marker {
  /* Purely decorative — indicates where "on time" sits */
  position: absolute;
  pointer-events: none;
  /* actual positioning left to designer preference — hidden for now */
  display: none;
}

/* ── 16e. ROSTER TABLE ────────────────────────────────────────────────── */
.ta-roster-panel { margin: 0 var(--space-8) var(--space-6); }

.ta-roster-wrap {
  overflow-x: auto;
  /* vertical scroll for very long days */
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

.ta-roster-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 1180px;
}

.ta-roster-table thead th {
  background: var(--slate-50);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 var(--border-subtle);
}

/* Column widths */
.ta-col-emp       { width: 18%; min-width: 220px; }
.ta-col-shift     { width: 12%; min-width: 140px; }
.ta-col-punch     { width: 15%; min-width: 200px; }
.ta-col-variance  { width: 12%; min-width: 150px; }
.ta-col-meal      { width: 10%; min-width: 120px; }
.ta-col-geo       { width: 11%; min-width: 130px; }
.ta-col-impact    { width: 13%; min-width: 180px; }
.ta-col-actions   { width: auto; min-width: 200px; text-align: right; }

.ta-row {
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.12s;
}
.ta-row:hover { background: var(--slate-50); }

.ta-row td {
  padding: 14px var(--space-4);
  vertical-align: middle;
}

.ta-row-danger {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.035) 0%, transparent 40%);
}
.ta-row-danger:hover {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.065) 0%, var(--slate-50) 40%);
}

.ta-row-noshow {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.06) 0%, rgba(239, 68, 68, 0.02) 60%);
  border-left: 3px solid var(--danger-500);
}
.ta-row-noshow:hover {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.04) 60%);
}

/* Employee cell */
.ta-emp-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ta-emp-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.ta-emp-text { min-width: 0; }

.ta-emp-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ta-emp-agency-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 6px;
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
  border-radius: 3px;
}

.ta-emp-role {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
  font-weight: 500;
}

/* Shift cell */
.ta-shift-cell { line-height: 1.3; }

.ta-shift-time {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.ta-shift-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* Punch cell — stacked IN / OUT */
.ta-punch-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ta-punch-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.ta-punch-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  padding: 1px 0;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  border-radius: 4px;
  flex-shrink: 0;
}

.ta-punch-tag-in      { background: rgba(34, 197, 94, 0.14);  color: var(--success-700); }
.ta-punch-tag-out     { background: rgba(37, 99, 235, 0.12);  color: var(--accent-700); }
.ta-punch-tag-missing { background: var(--slate-200);         color: var(--text-tertiary); }

.ta-punch-time {
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

.ta-punch-note {
  font-size: 11px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--slate-100);
  color: var(--text-tertiary);
}

.ta-punch-note.v-warn   { background: var(--warning-50);  color: var(--warning-700); }
.ta-punch-note.v-danger { background: var(--danger-50);   color: var(--danger-700); }
.ta-punch-note.v-ok     { background: var(--success-50);  color: var(--success-700); }

.ta-punch-missing {
  font-size: 12px;
  font-style: italic;
  color: var(--danger-600);
  font-weight: 600;
}

.ta-punch-line-missing .ta-punch-tag-missing { background: var(--danger-50); color: var(--danger-700); }

/* Variance badges */
.ta-var-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.ta-var-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 3px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.ta-var-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.6);
}

.ta-var-badge.v-ok {
  background: var(--success-50);
  color: var(--success-700);
  border: 1px solid var(--success-100);
}
.ta-var-badge.v-warn {
  background: var(--warning-50);
  color: var(--warning-700);
  border: 1px solid var(--warning-100);
}
.ta-var-badge.v-danger {
  background: var(--danger-50);
  color: var(--danger-700);
  border: 1px solid var(--danger-100);
}
.ta-var-badge.v-solid {
  background: var(--danger-600);
  color: #fff;
  border-color: var(--danger-600);
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

/* Meal break cell */
.ta-meal-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px 5px 6px;
  border-radius: 6px;
  min-width: 0;
}

.ta-meal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  flex-shrink: 0;
}

.mb-ok {
  background: var(--success-50);
  color: var(--success-700);
  border: 1px solid var(--success-100);
}
.mb-ok .ta-meal-icon {
  background: var(--success-500);
  color: #fff;
}

.mb-warn {
  background: var(--warning-50);
  color: var(--warning-700);
  border: 1px solid var(--warning-100);
}
.mb-warn .ta-meal-icon {
  background: var(--warning-500);
  color: #fff;
}

.mb-danger {
  background: var(--danger-50);
  color: var(--danger-700);
  border: 1px solid var(--danger-100);
}
.mb-danger .ta-meal-icon {
  background: var(--danger-500);
  color: #fff;
}

.mb-none {
  color: var(--text-muted);
  border: 1px dashed var(--border-subtle);
  background: transparent;
}
.mb-none .ta-meal-icon {
  background: var(--slate-100);
  color: var(--text-muted);
}

.ta-meal-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.ta-meal-sub {
  font-size: 10.5px;
  font-weight: 500;
  margin-top: 1px;
  opacity: 0.8;
}

/* Geofence cell */
.ta-geo-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 9px 4px 6px;
  border-radius: 6px;
  min-width: 0;
}

.ta-geo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  flex-shrink: 0;
}

.geo-ok {
  background: var(--success-50);
  color: var(--success-700);
  border: 1px solid var(--success-100);
}
.geo-ok .ta-geo-icon { background: var(--success-500); color: #fff; }

.geo-danger {
  background: var(--danger-50);
  color: var(--danger-700);
  border: 1px solid var(--danger-100);
}
.geo-danger .ta-geo-icon { background: var(--danger-500); color: #fff; }

.geo-none {
  color: var(--text-muted);
  border: 1px dashed var(--border-subtle);
  background: transparent;
}
.geo-none .ta-geo-icon { background: var(--slate-100); color: var(--text-muted); }

.ta-geo-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.ta-geo-sub {
  font-size: 10.5px;
  font-weight: 500;
  margin-top: 1px;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

/* Impact cell */
.ta-impact {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  line-height: 1.3;
}

.ta-impact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  margin-top: 1px;
}

.ta-impact-danger {
  background: var(--danger-50);
  color: var(--danger-700);
  border-color: var(--danger-100);
}
.ta-impact-danger .ta-impact-icon { background: var(--danger-500); color: #fff; }

.ta-impact-warn {
  background: var(--warning-50);
  color: var(--warning-700);
  border-color: var(--warning-100);
}
.ta-impact-warn .ta-impact-icon { background: var(--warning-500); color: #fff; }

.ta-impact-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.ta-impact-detail {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
  margin-top: 2px;
}

.ta-impact-none {
  color: var(--text-muted);
  font-size: 13px;
}

/* Action buttons */
.ta-action-group {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
}

.ta-action-btn {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}

.ta-action-primary {
  background: var(--slate-900);
  color: #fff;
  border: 1px solid var(--slate-900);
}
.ta-action-primary:hover {
  background: var(--accent-600);
  border-color: var(--accent-600);
}

.ta-action-secondary {
  background: var(--warning-50);
  color: var(--warning-700);
  border: 1px solid var(--warning-100);
}
.ta-action-secondary:hover {
  background: var(--warning-500);
  color: #fff;
  border-color: var(--warning-500);
}

.ta-action-ghost {
  width: 30px;
  height: 30px;
  padding: 0;
  background: #fff;
  color: var(--text-tertiary);
  border: 1px solid var(--border-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ta-action-ghost:hover {
  background: var(--slate-50);
  color: var(--text-primary);
  border-color: var(--border-default);
}

/* Empty state */
.ta-empty-row td { padding: 0 !important; }

.ta-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--text-tertiary);
}

.ta-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--success-50);
  color: var(--success-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.ta-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.ta-empty-sub {
  font-size: 13px;
  color: var(--text-tertiary);
}

/* ══════════════════════════════════════════════════════════════════════
   16f. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
/* Strict single-line layout means the bar never reflows; it horizontally
   scrolls instead. The old column-stack rule has been retired. */

@media (max-width: 960px) {
  .ta-filter-bar, .ta-dist-panel, .ta-roster-panel {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
  }
  .ta-header-stats { width: 100%; margin-top: var(--space-3); }
  .ta-stat-chip { flex: 1; min-width: 0; }
}

@media (max-width: 600px) {
  .ta-pills { gap: 4px; }
  .ta-pill { font-size: 11.5px; padding: 6px 10px; }
  .ta-date-display { padding: 7px 10px; font-size: 12px; }
  .ta-today-btn { display: none; }
}
/* ══════════════════════════════════════════════════════════════════════
   17. SHIFT SCHEDULER — MASTER WEEKLY GRID
   (Append to styles.css)

   Contents:
   17a. Page header extras
   17b. Top control bar (view toggle · week nav · filters · auto-fill)
   17c. Grid panel wrapper
   17d. Master grid — the 22-column CSS Grid
   17e. Headers (day row + D/E/N sublabel row, sticky)
   17f. Sticky left column (employee labels, group rows, corner)
   17g. Group rows (collapsible accordion headers)
   17h. Shift cells & column tinting (D/E/N + weekend)
   17i. Shift blocks (Day/Eve/Night/Open) — compact, draggable-feel
   17j. Legend
   17k. Responsive
   ══════════════════════════════════════════════════════════════════════ */


/* ── 17a. Page header extras ──────────────────────────────────────────── */
.sched-header-actions {
  display: flex;
  gap: var(--space-2);
}


/* ══════════════════════════════════════════════════════════════════════
   17b. TOP CONTROL BAR
   ══════════════════════════════════════════════════════════════════════ */
.sched-controls-bar {
  margin: 0 var(--space-8) var(--space-5);
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);

  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;

  /* sticky under topbar so it stays available while scrolling the grid */
  position: sticky;
  top: calc(var(--topbar-h) + 8px);
  z-index: 28;
}

/* View toggle — segmented control */
.sched-view-toggle {
  display: inline-flex;
  background: var(--slate-100);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
}

.sched-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.sched-view-btn:hover { color: var(--text-primary); }
.sched-view-btn svg { opacity: 0.8; }

.sched-view-btn.active {
  background: #fff;
  color: var(--accent-700);
  box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--accent-100);
}
.sched-view-btn.active svg { opacity: 1; color: var(--accent-600); }

/* Week navigator */
.sched-week-nav {
  display: inline-flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.15s;
}
.sched-week-nav:hover { border-color: var(--slate-400); }

.sched-nav-btn {
  width: 30px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.sched-nav-btn:hover { background: var(--slate-100); color: var(--text-primary); }
.sched-nav-btn:last-of-type { border-right: none; }

.sched-week-label {
  padding: 6px 14px;
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  justify-content: center;
  min-width: 150px;
  text-align: center;
}

.sched-week-primary {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.sched-week-secondary {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-top: 1px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sched-today-btn {
  padding: 0 14px;
  background: var(--slate-50);
  border: none;
  border-left: 1px solid var(--border-subtle);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  font-family: inherit;
}
.sched-today-btn:hover { background: var(--slate-100); color: var(--accent-600); }

/* Filter group inside control bar (slimmer than default filter bar) */
.sched-filter-group { gap: 4px; }
.sched-filter-group .filter-label {
  font-size: 10.5px;
  margin-bottom: 1px;
}

.sched-controls-spacer { flex: 1 1 auto; }

/* ── Smart Auto-Fill button — prominent, AI-styled ────────────────────── */
.sched-autofill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;

  /* Vivid AI gradient — blue → violet */
  background:
    linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  box-shadow:
    0 2px 4px rgba(37, 99, 235, 0.25),
    0 8px 20px rgba(124, 58, 237, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);

  transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
  letter-spacing: -0.005em;
  position: relative;
  overflow: hidden;
}

.sched-autofill-btn::before {
  /* subtle sheen overlay */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 50%);
  pointer-events: none;
}

.sched-autofill-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 8px rgba(37, 99, 235, 0.3),
    0 12px 28px rgba(124, 58, 237, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  filter: brightness(1.05);
}

.sched-autofill-btn:active { transform: translateY(0); }

.sched-autofill-btn svg {
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

.sched-autofill-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}


/* ══════════════════════════════════════════════════════════════════════
   17c. GRID PANEL WRAPPER
   ══════════════════════════════════════════════════════════════════════ */
.sched-grid-panel {
  margin: 0 var(--space-8) var(--space-6);
  overflow: hidden;  /* clip grid to panel's rounded corners */
}

.sched-grid-header { padding-bottom: var(--space-3); }

/* Scrollable viewport around the grid */
.sched-grid-wrap {
  overflow: auto;
  border-top: 1px solid var(--border-subtle);
  max-height: calc(100vh - 360px);
  min-height: 420px;
  background: #fff;
}


/* ══════════════════════════════════════════════════════════════════════
   17d. THE MASTER GRID — 22-column CSS Grid
        Col 1  = Staff label (220px, sticky-left)
        Cols 2–22 = 7 days × 3 shifts (D/E/N)
   ══════════════════════════════════════════════════════════════════════ */
.sched-grid {
  display: grid;
  grid-template-columns: 220px repeat(21, minmax(42px, 1fr));
  min-width: 1100px;  /* ensures compact density below this width */
  background: var(--border-subtle);  /* serves as a 1px grid line color */
  gap: 1px;
}

/* All cells share base styling */
.sg-cell {
  background: #ffffff;
  padding: 4px 6px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  position: relative;
}


/* ══════════════════════════════════════════════════════════════════════
   17e. HEADERS — day labels (row 1) + D/E/N sublabels (row 2)
   ══════════════════════════════════════════════════════════════════════ */

/* Corner cell — spans both header rows, stays sticky top-left */
.sg-corner {
  grid-row: span 2;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 5;
  background: var(--slate-50);
  border-right: 1px solid var(--border-default);
  min-height: 56px;
  justify-content: flex-start;
  padding-left: 14px;
}

.sg-corner-text {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

/* Day labels (row 1) — each spans 3 shift sub-cols */
.sg-day-label {
  grid-column: span 3;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--slate-50);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  min-height: 32px;
  border-bottom: 1px solid var(--border-subtle);
}

.sg-day-name {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sg-day-date {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.sg-day-weekend { background: #f1f5f9; }
.sg-day-weekend .sg-day-name { color: var(--accent-600); }

/* D/E/N sublabels (row 2) — sticky below day labels */
.sg-sub {
  position: sticky;
  top: 32px;  /* height of row 1 */
  z-index: 3;
  min-height: 24px;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  background: #f8fafc;
  border-bottom: 1px solid var(--border-default);
}


/* ══════════════════════════════════════════════════════════════════════
   17f. STICKY LEFT COLUMN — employee/group labels
   ══════════════════════════════════════════════════════════════════════ */
.sg-emp-label,
.sg-group-label {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #ffffff;
  justify-content: flex-start;
  padding: 6px 14px;
  border-right: 1px solid var(--border-default);
}

.sg-emp-label {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-height: 40px;
  line-height: 1.2;
}

.sg-emp-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

.sg-emp-sub {
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-weight: 500;
}


/* ══════════════════════════════════════════════════════════════════════
   17g. GROUP ROWS — collapsible accordion headers
   ══════════════════════════════════════════════════════════════════════ */
.sg-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  background: linear-gradient(180deg, var(--slate-100) 0%, var(--slate-50) 100%);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  z-index: 2;
}

.sg-toggle {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.12s;
  font-family: inherit;
}
.sg-toggle:hover {
  background: var(--accent-50);
  border-color: var(--accent-200);
  color: var(--accent-700);
}

.sg-group-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.sg-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 6px;
  height: 16px;
  border-radius: 999px;
  background: var(--slate-700);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Group spacer — fills cols 2-22 of the group row */
.sg-group-spacer {
  grid-column: span 21;
  background: linear-gradient(180deg, var(--slate-100) 0%, var(--slate-50) 100%);
  min-height: 30px;
  padding: 0;
}

/* Open Shifts group variant */
.sg-group-open {
  background: linear-gradient(180deg, #fee2e2 0%, #fef2f2 100%);
  color: var(--danger-700);
  border-top: 2px solid var(--border-default);
}

.sg-group-open .sg-toggle { display: none; }
.sg-group-open svg { color: var(--danger-600); flex-shrink: 0; }

.sg-group-count-open {
  background: var(--danger-600);
}

.sg-group-spacer-open {
  background: linear-gradient(180deg, #fee2e2 0%, #fef2f2 100%);
  border-top: 2px solid var(--border-default);
}

.sg-emp-label-open {
  background: #fff;
}
.sg-emp-label-open .sg-emp-name { color: var(--danger-700); font-style: italic; }
.sg-emp-label-open .sg-emp-sub { color: var(--danger-600); }


/* ══════════════════════════════════════════════════════════════════════
   17h. SHIFT CELLS — column tinting (D/E/N) + day boundaries
   ══════════════════════════════════════════════════════════════════════ */

/* Very subtle column tints to zone D/E/N visually */
.sg-col-d { background: #fbfcfe; }
.sg-col-e { background: #fefcf8; }
.sg-col-n { background: #fafafd; }

/* Stronger visual break between days — thicker right border on Night cells */
.sg-col-n {
  box-shadow: inset -1px 0 0 var(--slate-300);
}

/* Weekend tint layered on top */
.sg-weekend { background: #f8fafc; }
.sg-col-d.sg-weekend { background: #f5f8fc; }
.sg-col-e.sg-weekend { background: #faf8f3; }
.sg-col-n.sg-weekend { background: #f6f6fb; }


/* ══════════════════════════════════════════════════════════════════════
   17i. SHIFT BLOCKS — compact, colored, draggable-feel
   ══════════════════════════════════════════════════════════════════════ */
.sg-shift {
  width: 100%;
  min-height: 24px;
  padding: 3px 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  cursor: grab;
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
  border: 1px solid transparent;
  user-select: none;
  line-height: 1;
}

.sg-shift:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.sg-shift:active { cursor: grabbing; transform: translateY(0); }

/* Day shift — blue */
.sg-shift-day {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}
.sg-shift-day:hover {
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.35);
}

/* Evening shift — amber */
.sg-shift-eve {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(217, 119, 6, 0.3);
}
.sg-shift-eve:hover {
  box-shadow: 0 3px 8px rgba(217, 119, 6, 0.4);
}

/* Night shift — deep indigo */
.sg-shift-night {
  background: linear-gradient(180deg, #6366f1 0%, #312e81 100%);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(49, 46, 129, 0.3);
}
.sg-shift-night:hover {
  box-shadow: 0 3px 8px rgba(49, 46, 129, 0.4);
}

/* Open shift — dashed hollow */
.sg-shift-open {
  background: #fff;
  color: var(--danger-700);
  border: 1.5px dashed var(--danger-400, #fb7185);
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  box-shadow: none;
  cursor: pointer;
}
.sg-shift-open:hover {
  background: var(--danger-50);
  border-color: var(--danger-500);
  border-style: solid;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
}


/* ══════════════════════════════════════════════════════════════════════
   17j. LEGEND
   ══════════════════════════════════════════════════════════════════════ */
.sg-legend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 12px;
  background: var(--slate-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.sg-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.sg-legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.sg-legend-day   { background: linear-gradient(180deg, #3b82f6, #2563eb); }
.sg-legend-eve   { background: linear-gradient(180deg, #fbbf24, #d97706); }
.sg-legend-night { background: linear-gradient(180deg, #6366f1, #312e81); }
.sg-legend-open  { background: #fff; border: 1.5px dashed #fb7185; }


/* ══════════════════════════════════════════════════════════════════════
   17k. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .sched-controls-bar { gap: var(--space-3); }
  .sg-legend { display: none; }
}

@media (max-width: 960px) {
  .sched-controls-bar, .sched-grid-panel { margin-left: var(--space-5); margin-right: var(--space-5); }
  .sched-week-label { min-width: 120px; }
  .sched-week-primary { font-size: 12px; }
  .sched-view-btn { padding: 6px 10px; }
}

@media (max-width: 600px) {
  .sched-view-btn span { display: none; }
  .sched-autofill-badge { display: none; }
  .sched-today-btn { display: none; }
}
/* ══════════════════════════════════════════════════════════════════════
   18. SCHEDULER — PHASE 2
   (Append to styles.css, after section 17)

   Contents:
   18a. Sub-tab navigation (Master Grid / Daily Board / Analytics)
   18b. Agency & OT stickers on shift blocks (Master Grid polish)
   18c. Agency employee-label styling
   18d. Extended legend swatches (agency + OT)
   18e. COMPACT DAILY BOARD — header, 3-column layout
   18f. Daily Board — staff cards, agency ribbon, OT badge, OPEN variant
   18g. FORECAST ANALYTICS — shell, KPI grid, chart placeholders
   18h. Ghost-chart preview visuals
   18i. Responsive
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   18a. SUB-TAB NAVIGATION
   ══════════════════════════════════════════════════════════════════════ */
.sched-tabs {
  margin: 0 var(--space-8) var(--space-5);
  padding: 0 var(--space-2);
  display: flex;
  align-items: flex-end;
  gap: 4px;
  border-bottom: 1px solid var(--border-default);
  background: #ffffff;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: var(--shadow-xs);
}

.sched-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  transition: color 0.15s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}

.sched-tab:hover { color: var(--text-primary); }

.sched-tab.active {
  color: var(--accent-700);
  border-bottom-color: var(--accent-600);
  font-weight: 700;
}

.sched-tab svg {
  opacity: 0.7;
  flex-shrink: 0;
}
.sched-tab.active svg { opacity: 1; color: var(--accent-600); }

.sched-tab-hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  padding-left: 8px;
  border-left: 1px solid var(--border-subtle);
  margin-left: 2px;
  letter-spacing: 0;
}
.sched-tab.active .sched-tab-hint {
  color: var(--accent-600);
  border-left-color: var(--accent-100);
}

/* Tab panels — all rendered for static review; JS will later toggle display */
.sched-tab-panel {
  /* All visible in shell phase. When wiring JS:
     - default display: none
     - add .sched-tab-panel-active to show */
}


/* ══════════════════════════════════════════════════════════════════════
   18b. AGENCY & OT STICKERS ON SHIFT BLOCKS
   ══════════════════════════════════════════════════════════════════════ */

/* Agency shift — purple outline + corner "A" sticker */
.sg-shift.sg-shift-agency {
  box-shadow:
    0 0 0 1.5px #7c3aed,
    0 1px 3px rgba(124, 58, 237, 0.3);
}
.sg-shift.sg-shift-agency:hover {
  box-shadow:
    0 0 0 1.5px #6d28d9,
    0 3px 10px rgba(124, 58, 237, 0.45);
}

.sg-sticker {
  position: absolute;
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  line-height: 1;
}

.sg-sticker-agency {
  top: -4px;
  right: -4px;
  background: #7c3aed;
  color: #ffffff;
  border: 1.5px solid #ffffff;
  box-shadow: 0 1px 2px rgba(124, 58, 237, 0.5);
  letter-spacing: 0;
}

/* OT warning — red triangle SVG in top-left corner */
.sg-shift.sg-shift-otwarn {
  box-shadow:
    0 0 0 1.5px #dc2626,
    0 1px 3px rgba(220, 38, 38, 0.3);
}
.sg-shift.sg-shift-otwarn:hover {
  box-shadow:
    0 0 0 1.5px #b91c1c,
    0 3px 10px rgba(220, 38, 38, 0.45);
}

.sg-sticker-ot {
  width: 14px;
  height: 14px;
  top: -5px;
  left: -5px;
  background: transparent;
  border: none;
  filter: drop-shadow(0 1px 2px rgba(220, 38, 38, 0.4));
}

/* A shift can have BOTH agency and OT stickers — position them on opposite corners */


/* ══════════════════════════════════════════════════════════════════════
   18c. AGENCY EMPLOYEE-LABEL STYLING (left column)
   ══════════════════════════════════════════════════════════════════════ */
.sg-emp-label.sg-emp-agency {
  background:
    linear-gradient(90deg, rgba(124, 58, 237, 0.06) 0%, #ffffff 100%);
  border-left: 3px solid #7c3aed;
  padding-left: 11px; /* 14 - 3 to compensate for border */
}

.sg-emp-agency-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  background: #7c3aed;
  color: #ffffff;
  border-radius: 3px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  vertical-align: middle;
  line-height: 1.3;
}


/* ══════════════════════════════════════════════════════════════════════
   18d. EXTENDED LEGEND SWATCHES
   ══════════════════════════════════════════════════════════════════════ */
.sg-legend-agency {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  box-shadow: 0 0 0 1.5px #7c3aed;
}

.sg-legend-ot {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  box-shadow: 0 0 0 1.5px #dc2626;
}


/* ══════════════════════════════════════════════════════════════════════
   18e. COMPACT DAILY BOARD — layout
   ══════════════════════════════════════════════════════════════════════ */
.db-board {
  margin: 0 var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Header banner */
.db-header {
  padding: 22px 28px;
  background: linear-gradient(135deg, #ffffff 0%, var(--slate-50) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.db-header-main { min-width: 0; }

.db-header-day {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-600);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}

.db-header-date {
  font-size: 30px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 6px;
}

.db-header-facility {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
}

.db-header-stats {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.db-hstat {
  padding: 10px 18px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  text-align: center;
  min-width: 96px;
  position: relative;
  overflow: hidden;
}
.db-hstat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--success-500);
}

.db-hstat-warn::before   { background: var(--danger-500); }
.db-hstat-agency::before { background: #7c3aed; }

.db-hstat-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}

.db-hstat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 6px;
}

.db-hstat-warn   .db-hstat-value { color: var(--danger-700); }
.db-hstat-agency .db-hstat-value { color: #6d28d9; }

/* Three-column shift board */
.db-shifts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.db-column {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Column accent strip on top, color-coded by shift */
.db-column::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  z-index: 1;
}
.db-column-day::before   { background: linear-gradient(90deg, #60a5fa, #2563eb); }
.db-column-eve::before   { background: linear-gradient(90deg, #fbbf24, #d97706); }
.db-column-night::before { background: linear-gradient(90deg, #6366f1, #312e81); }

/* Column header */
.db-col-header {
  padding: 22px 24px 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
}

.db-col-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}
.db-column-day   .db-col-icon { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.db-column-eve   .db-col-icon { background: linear-gradient(135deg, #fbbf24, #d97706); }
.db-column-night .db-col-icon { background: linear-gradient(135deg, #6366f1, #312e81); }

.db-col-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.db-col-time {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
  letter-spacing: -0.005em;
}

.db-col-count {
  text-align: center;
  padding: 8px 14px;
  background: var(--success-50);
  border: 1px solid var(--success-100);
  border-radius: var(--radius-md);
  min-width: 74px;
}

.db-col-count-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--success-700);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.db-col-count-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--success-700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

.db-col-count-warn {
  background: var(--danger-50);
  border-color: var(--danger-100);
}
.db-col-count-warn .db-col-count-num,
.db-col-count-warn .db-col-count-label { color: var(--danger-700); }

/* Column body */
.db-col-body {
  padding: 18px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}


/* ══════════════════════════════════════════════════════════════════════
   18f. Daily Board — position groups & staff cards
   ══════════════════════════════════════════════════════════════════════ */
.db-pos-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.db-pos-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 2px 6px;
  border-bottom: 1px dashed var(--border-subtle);
}

.db-pos-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.db-pos-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary);
}
.db-pos-count-warn { color: var(--danger-600); }

.db-staff-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Staff row card — designed for readability from monitor distance */
.db-staff {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: transform 0.12s, box-shadow 0.12s;
  position: relative;
}
.db-staff:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--border-default);
}

.db-staff-main { min-width: 0; }

.db-staff-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.db-staff-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-top: 2px;
}

.db-staff-time {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  padding: 4px 10px;
  background: var(--slate-100);
  border-radius: 6px;
}

/* Agency variant — purple left border + corner ribbon */
.db-staff-agency {
  background: linear-gradient(90deg, #faf5ff 0%, #ffffff 40%);
  border-color: #e9d5ff;
  border-left: 3px solid #7c3aed;
  padding-left: 12px;
}

.db-staff-agency-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px 8px 3px;
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  border-radius: 0 var(--radius-md) 0 8px;
  box-shadow: 0 1px 2px rgba(124, 58, 237, 0.3);
}

.db-staff-agency .db-staff-name { padding-right: 56px; }

/* OT variant — red left strip + OT badge */
.db-staff-ot {
  background: linear-gradient(90deg, #fef2f2 0%, #ffffff 50%);
  border-color: #fecaca;
  border-left: 3px solid #dc2626;
  padding-left: 12px;
}

.db-staff-ot-badge {
  position: absolute;
  top: 10px;
  right: 72px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #dc2626;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.35);
}

/* Open variant — dashed border, red text, distinct */
.db-staff-open {
  background: #ffffff;
  border: 1.5px dashed var(--danger-300);
  padding: 11px 14px;
}
.db-staff-open .db-staff-name {
  color: var(--danger-700);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.db-staff-open .db-staff-meta { color: var(--danger-600); }
.db-staff-open .db-staff-time {
  background: var(--danger-50);
  color: var(--danger-700);
}

.db-staff-open-critical {
  background: var(--danger-50);
  border-color: var(--danger-500);
  animation: dbCriticalPulse 2.4s ease-in-out infinite;
}
@keyframes dbCriticalPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1); }
}


/* ══════════════════════════════════════════════════════════════════════
   18g. FORECAST ANALYTICS SHELL
   ══════════════════════════════════════════════════════════════════════ */
.fc-shell {
  margin: 0 var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.fc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.fc-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.fc-subtitle {
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: 500;
}

.fc-header-actions {
  display: flex;
  gap: var(--space-2);
}

.fc-kpi-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* Chart grid — wide chart top, 2 half-width below */
.fc-charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.fc-chart { min-height: 260px; display: flex; flex-direction: column; }

.fc-chart-wide { grid-column: 1 / -1; }

.fc-chart .panel-header { padding-bottom: 0; }

/* Placeholder container */
.fc-placeholder {
  flex: 1 1 auto;
  position: relative;
  margin: var(--space-4) var(--space-5) var(--space-5);
  min-height: 200px;
  background: linear-gradient(180deg, var(--slate-50) 0%, #ffffff 100%);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-placeholder-label {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2;
}
.fc-placeholder-label svg { color: var(--text-muted); }


/* ══════════════════════════════════════════════════════════════════════
   18h. Ghost-chart visuals (preview what the chart will look like)
   ══════════════════════════════════════════════════════════════════════ */

/* Bar chart ghost */
.fc-ghost-chart {
  position: absolute;
  inset: 24px 24px 44px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3px;
  opacity: 0.55;
}

.fc-ghost-bar {
  flex: 1 1 auto;
  min-width: 8px;
  background: linear-gradient(180deg, var(--accent-400, #60a5fa), var(--accent-600, #2563eb));
  border-radius: 3px 3px 0 0;
  animation: fcGhostRise 0.6s ease-out;
}
.fc-ghost-bar-muted {
  background: linear-gradient(180deg, var(--slate-200), var(--slate-300));
}

@keyframes fcGhostRise {
  from { height: 0; opacity: 0; }
}

/* Line chart ghost */
.fc-ghost-line {
  position: absolute;
  inset: 24px 24px 44px;
  width: calc(100% - 48px);
  height: calc(100% - 68px);
  opacity: 0.8;
}

/* Donut ghost */
.fc-ghost-donut {
  width: 120px;
  height: 120px;
  opacity: 0.75;
}


/* ══════════════════════════════════════════════════════════════════════
   18i. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .fc-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .db-shifts   { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .sched-tabs, .db-board, .fc-shell {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
  }
  .sched-tab { padding: 12px 12px 10px; font-size: 12.5px; }
  .sched-tab-hint { display: none; }
  .db-header-date { font-size: 24px; }
  .db-col-title   { font-size: 18px; }
  .fc-charts      { grid-template-columns: 1fr; }
  .fc-chart-wide  { grid-column: auto; }
}

@media (max-width: 600px) {
  .fc-kpi-grid       { grid-template-columns: 1fr; }
  .db-header         { padding: 16px 18px; }
  .db-header-stats   { width: 100%; }
  .db-hstat          { flex: 1; min-width: 0; }
  .db-col-header     { padding: 16px 16px 14px; grid-template-columns: auto 1fr; }
  .db-col-count      { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-width: 0; padding: 8px 14px; }
  .db-col-count-num  { font-size: 18px; }
  .db-col-count-label { margin-top: 0; }
  .db-col-body       { padding: 14px 16px 18px; }
}
/* ══════════════════════════════════════════════════════════════════════
   17. SHIFT SCHEDULER — MASTER WEEKLY GRID (rebuild)
   (Append to styles.css. If you already have older scheduler CSS from
   earlier phases, this block's rules cascade over them for the selectors
   we still use; selectors not used in the new HTML are simply inert.)

   Contents:
   17a. Page header actions
   17b. Top control bar (view toggle · week nav · filters · auto-fill)
   17c. Grid panel wrapper
   17d. Master grid — 22-column CSS Grid (1 label + 7 days × 3 shifts)
   17e. Headers — day row + D/E/N sublabel row (sticky)
   17f. Sticky left column — employee & group labels
   17g. Group rows — collapsible accordion headers
   17h. Shift cells — column tinting (D/E/N) + weekend tinting
   17i. Shift blocks — Day / Eve / Night / Open (compact, draggable-feel)
   17j. INSIDE BADGES — agency "A" + OT triangle (no colored borders)
   17k. Employee-name inline tags (AGENCY marker)
   17l. Legend
   17m. Responsive
   ══════════════════════════════════════════════════════════════════════ */


/* ── 17a. Page header actions ─────────────────────────────────────────── */
.sched-header-actions {
  display: flex;
  gap: var(--space-2);
}


/* ══════════════════════════════════════════════════════════════════════
   17b. TOP CONTROL BAR
   ══════════════════════════════════════════════════════════════════════ */
.sched-controls-bar {
  margin: 0 var(--space-8) var(--space-5);
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);

  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;

  position: sticky;
  top: calc(var(--topbar-h) + 8px);
  z-index: 28;
}

/* View toggle (Month / Week / Day) — segmented control */
.sched-view-toggle {
  display: inline-flex;
  background: var(--slate-100);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
}

.sched-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.sched-view-btn:hover { color: var(--text-primary); }
.sched-view-btn svg { opacity: 0.8; }

.sched-view-btn.active {
  background: #ffffff;
  color: var(--accent-700);
  box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--accent-100);
}
.sched-view-btn.active svg { opacity: 1; color: var(--accent-600); }

/* Week navigator */
.sched-week-nav {
  display: inline-flex;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.15s;
}
.sched-week-nav:hover { border-color: var(--slate-400); }

.sched-nav-btn {
  width: 30px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.sched-nav-btn:hover { background: var(--slate-100); color: var(--text-primary); }
.sched-nav-btn:last-of-type { border-right: none; }

.sched-week-label {
  padding: 6px 14px;
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  justify-content: center;
  min-width: 150px;
  text-align: center;
}

.sched-week-primary {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.sched-week-secondary {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-top: 1px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sched-today-btn {
  padding: 0 14px;
  background: var(--slate-50);
  border: none;
  border-left: 1px solid var(--border-subtle);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  font-family: inherit;
}
.sched-today-btn:hover { background: var(--slate-100); color: var(--accent-600); }

/* Filter group inside control bar */
.sched-filter-group { gap: 4px; }
.sched-filter-group .filter-label { font-size: 10.5px; margin-bottom: 1px; }

.sched-controls-spacer { flex: 1 1 auto; }

/* ── Smart Auto-Fill button — prominent, AI-styled ─────────────────── */
.sched-autofill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  box-shadow:
    0 2px 4px rgba(37, 99, 235, 0.25),
    0 8px 20px rgba(124, 58, 237, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
  letter-spacing: -0.005em;
  position: relative;
  overflow: hidden;
}

.sched-autofill-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

.sched-autofill-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 8px rgba(37, 99, 235, 0.3),
    0 12px 28px rgba(124, 58, 237, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  filter: brightness(1.05);
}
.sched-autofill-btn:active { transform: translateY(0); }

.sched-autofill-btn svg {
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

.sched-autofill-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}


/* ══════════════════════════════════════════════════════════════════════
   17c. GRID PANEL WRAPPER
   ══════════════════════════════════════════════════════════════════════ */
.sched-grid-panel {
  margin: 0 var(--space-8) var(--space-6);
  overflow: hidden;
}

.sched-grid-header { padding-bottom: var(--space-3); }

.sched-grid-wrap {
  overflow: auto;
  border-top: 1px solid var(--border-subtle);
  max-height: calc(100vh - 360px);
  min-height: 420px;
  background: #ffffff;
}


/* ══════════════════════════════════════════════════════════════════════
   17d. THE MASTER GRID — 22 columns
        col 1 = Staff label (220px, sticky-left)
        cols 2–22 = 7 days × 3 shifts (D / E / N)
   ══════════════════════════════════════════════════════════════════════ */
.sched-grid {
  display: grid;
  grid-template-columns: 220px repeat(21, minmax(42px, 1fr));
  min-width: 1100px;
  background: var(--border-subtle);  /* serves as 1px grid-line color */
  gap: 1px;
}

.sg-cell {
  background: #ffffff;
  padding: 4px 6px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  position: relative;
}


/* ══════════════════════════════════════════════════════════════════════
   17e. HEADERS — day row (1) + D/E/N sublabel row (2)
   ══════════════════════════════════════════════════════════════════════ */
.sg-corner {
  grid-row: span 2;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 5;
  background: var(--slate-50);
  border-right: 1px solid var(--border-default);
  min-height: 56px;
  justify-content: flex-start;
  padding-left: 14px;
}

.sg-corner-text {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.sg-day-label {
  grid-column: span 3;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--slate-50);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  min-height: 32px;
  border-bottom: 1px solid var(--border-subtle);
}

.sg-day-name {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sg-day-date {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.sg-day-weekend { background: #f1f5f9; }
.sg-day-weekend .sg-day-name { color: var(--accent-600); }

.sg-sub {
  position: sticky;
  top: 32px;
  z-index: 3;
  min-height: 24px;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  background: #f8fafc;
  border-bottom: 1px solid var(--border-default);
}


/* ══════════════════════════════════════════════════════════════════════
   17f. STICKY LEFT COLUMN — employee + group labels
   ══════════════════════════════════════════════════════════════════════ */
.sg-emp-label,
.sg-group-label {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #ffffff;
  justify-content: flex-start;
  padding: 6px 14px;
  border-right: 1px solid var(--border-default);
}

.sg-emp-label {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-height: 40px;
  line-height: 1.2;
}

.sg-emp-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.sg-emp-sub {
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-weight: 500;
}


/* ══════════════════════════════════════════════════════════════════════
   17g. GROUP ROWS — collapsible accordion headers
   ══════════════════════════════════════════════════════════════════════ */
.sg-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  background: linear-gradient(180deg, var(--slate-100) 0%, var(--slate-50) 100%);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  z-index: 2;
}

.sg-toggle {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #ffffff;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.12s;
  font-family: inherit;
}
.sg-toggle:hover {
  background: var(--accent-50);
  border-color: var(--accent-200);
  color: var(--accent-700);
}

.sg-group-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.sg-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 6px;
  height: 16px;
  border-radius: 999px;
  background: var(--slate-700);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sg-group-spacer {
  grid-column: span 21;
  background: linear-gradient(180deg, var(--slate-100) 0%, var(--slate-50) 100%);
  min-height: 30px;
  padding: 0;
}

/* Open Shifts group variant */
.sg-group-open {
  background: linear-gradient(180deg, #fee2e2 0%, #fef2f2 100%);
  color: var(--danger-700);
  border-top: 2px solid var(--border-default);
}
.sg-group-open svg { color: var(--danger-600); flex-shrink: 0; }
.sg-group-count-open { background: var(--danger-600); }

.sg-group-spacer-open {
  background: linear-gradient(180deg, #fee2e2 0%, #fef2f2 100%);
  border-top: 2px solid var(--border-default);
}

.sg-emp-label-open { background: #ffffff; }
.sg-emp-label-open .sg-emp-name { color: var(--danger-700); font-style: italic; }
.sg-emp-label-open .sg-emp-sub  { color: var(--danger-600); }


/* ══════════════════════════════════════════════════════════════════════
   17h. SHIFT CELLS — column tinting + day boundaries
   ══════════════════════════════════════════════════════════════════════ */
.sg-col-d { background: #fbfcfe; }
.sg-col-e { background: #fefcf8; }
.sg-col-n { background: #fafafd; }

/* Thicker right border on Night cells = visual day boundary */
.sg-col-n { box-shadow: inset -1px 0 0 var(--slate-300); }

/* Weekend tint */
.sg-weekend { background: #f8fafc; }
.sg-col-d.sg-weekend { background: #f5f8fc; }
.sg-col-e.sg-weekend { background: #faf8f3; }
.sg-col-n.sg-weekend { background: #f6f6fb; }


/* ══════════════════════════════════════════════════════════════════════
   17i. SHIFT BLOCKS — compact, colored
   ══════════════════════════════════════════════════════════════════════ */
.sg-shift {
  width: 100%;
  min-height: 24px;
  padding: 3px 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  cursor: grab;
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
  border: 1px solid transparent;
  user-select: none;
  line-height: 1;
  position: relative;
  /* leave room inside the block for corner badges without overlapping text */
}

.sg-shift:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.sg-shift:active { cursor: grabbing; transform: translateY(0); }

/* Day shift — blue */
.sg-shift-day {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}
.sg-shift-day:hover { box-shadow: 0 3px 8px rgba(37, 99, 235, 0.35); }

/* Evening shift — amber */
.sg-shift-eve {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(217, 119, 6, 0.3);
}
.sg-shift-eve:hover { box-shadow: 0 3px 8px rgba(217, 119, 6, 0.4); }

/* Night shift — deep indigo */
.sg-shift-night {
  background: linear-gradient(180deg, #6366f1 0%, #312e81 100%);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(49, 46, 129, 0.3);
}
.sg-shift-night:hover { box-shadow: 0 3px 8px rgba(49, 46, 129, 0.4); }

/* Open shift — dashed border + bold OPEN */
.sg-shift-open {
  background: #ffffff;
  color: var(--danger-700);
  border: 1.5px dashed var(--danger-400, #fb7185);
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  box-shadow: none;
  cursor: pointer;
}
.sg-shift-open:hover {
  background: var(--danger-50);
  border-color: var(--danger-500);
  border-style: solid;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
}


/* ══════════════════════════════════════════════════════════════════════
   17j. INSIDE BADGES — Agency "A" + OT Triangle
   Both are pinned to the block's corners INSIDE the box.
   No colored outer borders / rings on the shift block itself.
   ══════════════════════════════════════════════════════════════════════ */
.sg-badge {
  position: absolute;
  width: 11px;
  height: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 7.5px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  letter-spacing: 0;
}

/* Agency "A" — small purple pill in top-right corner, inside the block */
.sg-badge-agency {
  top: 1px;
  right: 1px;
  background: #7c3aed;
  color: #ffffff;
  border-radius: 3px;
  padding: 0 2px;
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(124, 58, 237, 0.5);
}

/* OT warning triangle — small red SVG in top-left corner, inside the block */
.sg-badge-ot {
  top: 1px;
  left: 1px;
  width: 11px;
  height: 11px;
  background: transparent;
  filter: drop-shadow(0 1px 1.5px rgba(220, 38, 38, 0.5));
}


/* ══════════════════════════════════════════════════════════════════════
   17k. EMPLOYEE-NAME INLINE TAGS (roster label only)
   Small purple "A" pill next to the name, so the row reads as agency
   at a glance without using a colored border on the row.
   ══════════════════════════════════════════════════════════════════════ */
.sg-emp-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  flex-shrink: 0;
}

.sg-emp-tag-agency {
  background: #7c3aed;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(124, 58, 237, 0.3);
}


/* ══════════════════════════════════════════════════════════════════════
   17l. LEGEND
   ══════════════════════════════════════════════════════════════════════ */
.sg-legend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 12px;
  background: var(--slate-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.sg-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.sg-legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.sg-legend-day   { background: linear-gradient(180deg, #3b82f6, #2563eb); }
.sg-legend-eve   { background: linear-gradient(180deg, #fbbf24, #d97706); }
.sg-legend-night { background: linear-gradient(180deg, #6366f1, #312e81); }
.sg-legend-open  { background: #ffffff; border: 1.5px dashed #fb7185; }

/* Agency legend uses the SAME "A" badge visual the grid uses */
.sg-legend-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 3px;
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}
.sg-legend-badge-agency {
  background: #7c3aed;
  color: #ffffff;
}

/* OT legend uses the SAME triangle visual */
.sg-legend-tri { flex-shrink: 0; }


/* ══════════════════════════════════════════════════════════════════════
   17m. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .sched-controls-bar { gap: var(--space-3); }
  .sg-legend { display: none; }
}

@media (max-width: 960px) {
  .sched-controls-bar, .sched-grid-panel {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
  }
  .sched-week-label { min-width: 120px; }
  .sched-week-primary { font-size: 12px; }
  .sched-view-btn { padding: 6px 10px; }
}

@media (max-width: 600px) {
  .sched-view-btn span { display: none; }
  .sched-autofill-badge { display: none; }
  .sched-today-btn { display: none; }
}
/* ══════════════════════════════════════════════════════════════════════
   18. SCHEDULER — PHASE 2 ADDITIONS
   (Append to styles.css, after section 17)

   Contents:
   18a. "Today's Patient Census" input (control bar, Day view only)
   18b. Daily Board — container + header
   18c. Daily Board — 3-column shift layout
   18d. Daily Board — column card + header
   18e. Daily Board — position groups
   18f. Daily Board — staff cards (regular / agency / OT / open)
   18g. Daily Board — empty state (for uncovered shifts)
   18h. Responsive
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   18a. TODAY'S PATIENT CENSUS input
   Sits inside the control bar; hidden until Day view is active.
   ══════════════════════════════════════════════════════════════════════ */
.sched-census[hidden] { display: none !important; }

.sched-census-wrap {
  display: inline-flex;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sched-census-wrap:focus-within {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.sched-census-step {
  width: 28px;
  background: var(--slate-50);
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
  font-family: inherit;
}
.sched-census-step:hover { background: var(--slate-100); color: var(--accent-600); }
.sched-census-step:first-child { border-right: 1px solid var(--border-subtle); }
.sched-census-step:last-child  { border-left:  1px solid var(--border-subtle); }

.sched-census-input {
  width: 56px;
  border: none;
  outline: none;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  background: transparent;
  font-family: inherit;
  /* hide default spinner controls — we use our own +/- */
  -moz-appearance: textfield;
}
.sched-census-input::-webkit-outer-spin-button,
.sched-census-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════════════
   18b. DAILY BOARD — container + header
   ══════════════════════════════════════════════════════════════════════ */
.daily-board-view {
  margin: 0 var(--space-8) var(--space-6);
  /* display: none set inline by default — JS toggles */
}

.db-header {
  padding: 22px 28px;
  background: linear-gradient(135deg, #ffffff 0%, var(--slate-50) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.db-header-main { min-width: 0; }

.db-header-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-600);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}

.db-header-date {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 4px;
}

.db-header-sub {
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* Header quick-stat chips */
.db-header-stats {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.db-hstat {
  padding: 10px 18px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  text-align: center;
  min-width: 80px;
  position: relative;
  overflow: hidden;
}
.db-hstat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--success-500);
}

.db-hstat-agency::before { background: #7c3aed; }
.db-hstat-ot::before     { background: var(--danger-500); }
.db-hstat-open::before   { background: var(--warning-500); }

.db-hstat-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}

.db-hstat-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 6px;
}

.db-hstat-agency .db-hstat-value { color: #6d28d9; }
.db-hstat-ot     .db-hstat-value { color: var(--danger-700); }
.db-hstat-open   .db-hstat-value { color: var(--warning-700); }


/* ══════════════════════════════════════════════════════════════════════
   18c. DAILY BOARD — 3-column shift layout
   ══════════════════════════════════════════════════════════════════════ */
.db-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}


/* ══════════════════════════════════════════════════════════════════════
   18d. Column card + header (color-coded by shift)
   ══════════════════════════════════════════════════════════════════════ */
.db-column {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 4px accent bar at top of each column */
.db-column::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 1;
}
.db-column-day::before   { background: linear-gradient(90deg, #60a5fa, #2563eb); }
.db-column-eve::before   { background: linear-gradient(90deg, #fbbf24, #d97706); }
.db-column-night::before { background: linear-gradient(90deg, #6366f1, #312e81); }

/* Column header */
.db-col-header {
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 100%);
}

.db-column-day   .db-col-header { background-color: rgba(59, 130, 246, 0.03); }
.db-column-eve   .db-col-header { background-color: rgba(251, 191, 36, 0.04); }
.db-column-night .db-col-header { background-color: rgba(99, 102, 241, 0.04); }

.db-col-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.db-col-time {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

.db-col-count {
  margin-top: 6px;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 13px;
  color: var(--text-secondary);
}

.db-col-count-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.db-col-count-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.db-col-count-open {
  font-size: 12px;
  font-weight: 600;
  color: var(--warning-700);
}

.db-col-count-warn .db-col-count-num { color: var(--danger-700); }

/* Column body */
.db-col-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1 1 auto;
}


/* ══════════════════════════════════════════════════════════════════════
   18e. Position groups (RN / LPN / CNA within each column)
   ══════════════════════════════════════════════════════════════════════ */
.db-pos-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.db-pos-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 2px 6px;
  border-bottom: 1px dashed var(--border-subtle);
}

.db-pos-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.db-pos-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.db-pos-count-warn { color: var(--danger-600); font-weight: 700; }


/* ══════════════════════════════════════════════════════════════════════
   18f. Staff cards — readable from monitor distance
   ══════════════════════════════════════════════════════════════════════ */
.db-staff-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.db-staff {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.db-staff:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--border-default);
}

.db-staff-main { min-width: 0; }

.db-staff-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.db-staff-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-top: 3px;
}

/* Shift-time chip */
.db-staff-time {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  padding: 5px 11px;
  background: var(--slate-100);
  color: var(--text-secondary);
  border-radius: 6px;
  flex-shrink: 0;
}

/* OT triangle icon — reuses the same SVG visual as master grid */
.db-staff-ot-tri {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1.5px rgba(220, 38, 38, 0.4));
}

/* OT time chip — red-tinted */
.db-staff-time-ot {
  background: var(--danger-50);
  color: var(--danger-700);
}

/* Open variant — dashed red border, red text */
.db-staff-open {
  border: 1.5px dashed var(--danger-400, #fb7185);
  background: #fffafa;
  cursor: pointer;
}
.db-staff-open:hover {
  background: var(--danger-50);
  border-color: var(--danger-500);
  border-style: solid;
}
.db-staff-open .db-staff-name {
  color: var(--danger-700);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.db-staff-open .db-staff-meta { color: var(--danger-600); }
.db-staff-open .db-staff-time {
  background: var(--danger-50);
  color: var(--danger-700);
}


/* ══════════════════════════════════════════════════════════════════════
   18g. Empty state (for uncovered shifts)
   ══════════════════════════════════════════════════════════════════════ */
.db-empty-state {
  padding: 28px 20px;
  text-align: center;
  border: 1.5px dashed var(--danger-200);
  background: #fffafa;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.db-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--danger-50);
  color: var(--danger-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.db-empty-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--danger-700);
  letter-spacing: -0.01em;
}

.db-empty-text {
  font-size: 12.5px;
  color: var(--danger-600);
  font-weight: 500;
  line-height: 1.5;
  max-width: 280px;
}

.db-empty-cta {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--danger-600);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
}
.db-empty-cta:hover {
  background: #b91c1c;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}


/* ══════════════════════════════════════════════════════════════════════
   18h. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .db-columns { grid-template-columns: 1fr; }
  .db-column  { max-width: 100%; }
}

@media (max-width: 960px) {
  .daily-board-view { margin-left: var(--space-5); margin-right: var(--space-5); }
  .db-header-date   { font-size: 22px; }
  .db-col-title     { font-size: 18px; }
  .db-col-count-num { font-size: 18px; }
}

@media (max-width: 600px) {
  .db-header        { padding: 16px 18px; }
  .db-header-stats  { width: 100%; }
  .db-hstat         { flex: 1; min-width: 0; padding: 8px 12px; }
  .db-hstat-value   { font-size: 18px; }
  .db-col-header    { padding: 16px 16px 14px; }
  .db-col-body      { padding: 14px 14px 16px; }
  .sched-census-input { width: 46px; }
}/* ══════════════════════════════════════════════════════════════════════
   19. SHIFT SCHEDULER — MONTHLY AGGREGATE VIEW
   (Append to styles.css)

   Contents:
   19a. View container
   19b. Month header + summary stats
   19c. Legend (health-bar key)
   19d. Calendar grid — 7-column CSS Grid
   19e. Day-of-week column headers
   19f. Day cells — clickable, hover effect, today state
   19g. Cell content — date, hours, coverage pills, open indicator
   19h. Health bar (green / yellow / red) at bottom of each cell
   19i. Responsive
   ══════════════════════════════════════════════════════════════════════ */


/* ── 19a. View container ──────────────────────────────────────────────── */
.monthly-board-view {
  margin: 0 var(--space-8) var(--space-6);
}


/* ══════════════════════════════════════════════════════════════════════
   19b. MONTH HEADER
   ══════════════════════════════════════════════════════════════════════ */
.mb-header {
  padding: 22px 28px;
  background: linear-gradient(135deg, #ffffff 0%, var(--slate-50) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.mb-header-eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-600);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}

.mb-header-month {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 5px;
}

.mb-header-sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
}

.mb-header-stats {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.mb-stat {
  padding: 10px 18px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  text-align: center;
  min-width: 92px;
  position: relative;
  overflow: hidden;
}
.mb-stat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--success-500);
}

.mb-stat-warn::before     { background: var(--warning-500); }
.mb-stat-critical::before { background: var(--danger-500); }

.mb-stat-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.mb-stat-warn     .mb-stat-value { color: var(--warning-700); }
.mb-stat-critical .mb-stat-value { color: var(--danger-700); }

.mb-stat-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 5px;
}


/* ══════════════════════════════════════════════════════════════════════
   19c. LEGEND
   ══════════════════════════════════════════════════════════════════════ */
.mb-legend {
  display: inline-flex;
  gap: var(--space-5);
  padding: 9px 16px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.mb-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.mb-legend-bar {
  display: inline-block;
  width: 26px;
  height: 4px;
  border-radius: 2px;
  flex-shrink: 0;
}

.mb-legend-bar-full     { background: var(--success-500); }
.mb-legend-bar-warn     { background: var(--warning-500); }
.mb-legend-bar-critical { background: var(--danger-500); }


/* ══════════════════════════════════════════════════════════════════════
   19d. CALENDAR GRID — 7-column CSS Grid
   ══════════════════════════════════════════════════════════════════════ */
.mb-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}


/* ── 19e. Day-of-week column headers ──────────────────────────────────── */
.mb-dow {
  text-align: center;
  padding: 8px 6px 10px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 2px;
}

.mb-dow-weekend { color: var(--accent-600); }


/* ══════════════════════════════════════════════════════════════════════
   19f. DAY CELLS — clickable, hoverable, "today" state
   ══════════════════════════════════════════════════════════════════════ */
.mb-day {
  min-height: 118px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  overflow: hidden;
  position: relative;
  outline: none;
}

.mb-day:hover,
.mb-day:focus-visible {
  transform: translateY(-2px);
  border-color: var(--slate-300);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
}

.mb-day:focus-visible {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), 0 4px 12px rgba(15, 23, 42, 0.08);
}

.mb-day:active {
  transform: translateY(-1px);
}

/* Weekend cell tint */
.mb-day-weekend {
  background: #fafbfd;
}

/* "Today" state — accent ring + pill */
.mb-day-today {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 1.5px var(--accent-500), 0 2px 6px rgba(37, 99, 235, 0.12);
}
.mb-day-today:hover {
  box-shadow: 0 0 0 1.5px var(--accent-600), 0 6px 18px rgba(37, 99, 235, 0.2);
}

.mb-day-today-pill {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 800;
  padding: 2px 6px;
  background: var(--accent-600);
  color: #ffffff;
  border-radius: 3px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  vertical-align: middle;
  margin-left: 6px;
}


/* ══════════════════════════════════════════════════════════════════════
   19g. CELL CONTENT — date · hours · coverage pills · open flag
   ══════════════════════════════════════════════════════════════════════ */
.mb-day-top {
  padding: 9px 11px 4px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.mb-day-num {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.mb-day-weekend .mb-day-num {
  color: var(--accent-700);
}

.mb-day-body {
  padding: 0 11px 11px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.mb-day-hours {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

/* Coverage pills (RN · LPN · CNA) */
.mb-day-coverage {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.mb-cov {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--slate-100);
  padding: 1px 6px;
  border-radius: 3px;
  line-height: 1.3;
}

.mb-cov-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mb-cov-val {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Open-shift indicator inside the cell */
.mb-day-open {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 800;
  color: var(--danger-700);
  background: var(--danger-50);
  border: 1px solid var(--danger-100);
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: fit-content;
  margin-top: 2px;
}


/* ══════════════════════════════════════════════════════════════════════
   19h. HEALTH BAR — bottom stripe, color-coded by coverage status
   ══════════════════════════════════════════════════════════════════════ */
.mb-day-bar {
  height: 4px;
  width: 100%;
  margin-top: auto;       /* pushes to bottom regardless of content height */
  background: var(--success-500);
  flex-shrink: 0;
}

.mb-status-full     .mb-day-bar { background: var(--success-500); }
.mb-status-warn     .mb-day-bar { background: var(--warning-500); }
.mb-status-critical .mb-day-bar { background: var(--danger-500); }

/* Faint overall tint to reinforce the status at a glance */
.mb-status-warn     { background: linear-gradient(180deg, #ffffff 0%, #fffdf5 100%); }
.mb-status-critical { background: linear-gradient(180deg, #ffffff 0%, #fef3f3 100%); }

/* Weekend + warn/critical — weekend gradient wins but keep the status bar */
.mb-day-weekend.mb-status-warn     { background: linear-gradient(180deg, #fafbfd 0%, #fffaef 100%); }
.mb-day-weekend.mb-status-critical { background: linear-gradient(180deg, #fafbfd 0%, #fdebeb 100%); }


/* ══════════════════════════════════════════════════════════════════════
   19i. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .mb-day { min-height: 108px; }
  .mb-cov-label { display: none; }   /* free space on narrower screens */
  .mb-cov { padding: 1px 5px; }
  .mb-cov-val::before {
    content: attr(data-pos);           /* noop if not set */
  }
}

@media (max-width: 960px) {
  .monthly-board-view {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
  }
  .mb-header { padding: 18px 20px; }
  .mb-header-month { font-size: 22px; }
  .mb-calendar { padding: 10px; gap: 5px; }
  .mb-day { min-height: 94px; }
  .mb-day-hours { font-size: 11px; }
  .mb-day-num { font-size: 13px; }
}

@media (max-width: 700px) {
  /* Horizontal scroll on very narrow screens rather than crushing the grid */
  .mb-calendar {
    min-width: 620px;
  }
  .monthly-board-view {
    overflow-x: auto;
  }
  .mb-header-stats { width: 100%; }
  .mb-stat { flex: 1; min-width: 0; }
}/* ══════════════════════════════════════════════════════════════════════
   20. SETTINGS & CONFIGURATION PAGE
   (Append to styles.css)

   Contents:
   20a. Page header actions
   20b. Settings grid layout
   20c. Settings card base (reuses .panel)
   20d. Facility Info — info grid
   20e. Facility Units — unit list
   20f. Field pair pattern (label + hint + input group)
   20g. Shift Target Matrix — CSS Grid
   20h. Matrix footer — HPPD projection + status
   20i. Small icon buttons (btn-icon-sm)
   20j. Responsive
   ══════════════════════════════════════════════════════════════════════ */


/* ── 20a. Page header actions ─────────────────────────────────────────── */
.settings-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.settings-saved-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--success-50);
  border: 1px solid var(--success-100);
  color: var(--success-700);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  margin-right: var(--space-2);
}


/* ══════════════════════════════════════════════════════════════════════
   20b. SETTINGS GRID LAYOUT — stacked cards, margin matches other pages
   ══════════════════════════════════════════════════════════════════════ */
.settings-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0 var(--space-8) var(--space-6);
}


/* ══════════════════════════════════════════════════════════════════════
   20c. SETTINGS CARD BASE
   ══════════════════════════════════════════════════════════════════════ */
.settings-card {
  /* .panel already provides: bg, border, radius, shadow, padding */
  overflow: hidden;
}

.settings-card-body {
  padding: var(--space-5) var(--space-6) var(--space-6);
}

.settings-divider {
  height: 1px;
  background: var(--border-subtle);
  border: none;
  margin: var(--space-5) 0;
}


/* ══════════════════════════════════════════════════════════════════════
   20d. FACILITY INFO — info grid (label/value pairs)
   ══════════════════════════════════════════════════════════════════════ */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5) var(--space-6);
}

.info-field {
  min-width: 0;
}

.info-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 5px;
}

.info-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  line-height: 1.4;
}

.info-value-mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}


/* ══════════════════════════════════════════════════════════════════════
   20e. FACILITY UNITS — list of units with census input + edit/delete
   ══════════════════════════════════════════════════════════════════════ */
.unit-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.unit-item {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: var(--space-4);
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}

.unit-item:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
}

/* Unit icon tile — color-coded by unit type */
.unit-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.unit-icon-rehab    { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1d4ed8; }
.unit-icon-longterm { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #15803d; }
.unit-icon-memory   { background: linear-gradient(135deg, #f3e8ff, #e9d5ff); color: #7e22ce; }
.unit-icon-skilled  { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #b45309; }

/* Unit info block (name + sub) */
.unit-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.unit-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.unit-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
}

/* Census input block (right side, before actions) */
.unit-census {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 6px 14px;
  background: var(--slate-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.unit-census-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.unit-census-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.unit-census-input {
  width: 54px;
  padding: 5px 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: #ffffff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.unit-census-input:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.unit-census-input::-webkit-outer-spin-button,
.unit-census-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.unit-census-suffix {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
}

/* Unit actions */
.unit-actions {
  display: flex;
  gap: 4px;
}

/* Unit footer stat line */
.unit-footer {
  margin-top: var(--space-4);
  padding: 12px 18px;
  background: var(--slate-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
}

.unit-footer-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-secondary);
}

.unit-footer-label {
  color: var(--text-tertiary);
  font-weight: 500;
}

.unit-footer-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.unit-footer-detail {
  color: var(--text-tertiary);
  font-weight: 500;
  font-size: 12.5px;
}


/* ══════════════════════════════════════════════════════════════════════
   20f. FIELD PAIR PATTERN — label + hint + input group
   Reusable across settings cards for consistent form styling.
   ══════════════════════════════════════════════════════════════════════ */
.budget-globals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.field-pair {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.field-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

.field-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-bottom: 6px;
  line-height: 1.4;
}

/* Input group: wraps an input with optional prefix/suffix for a unified field */
.field-input-wrap {
  display: inline-flex;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

.field-input-wrap:focus-within {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.field-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.field-input-wrap-lg .field-input {
  padding: 12px 16px;
  font-size: 17px;
}

.field-prefix,
.field-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  background: var(--slate-50);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0;
  flex-shrink: 0;
}

.field-prefix {
  border-right: 1px solid var(--border-subtle);
}

.field-suffix {
  border-left: 1px solid var(--border-subtle);
}

/* Hide native spinners on field inputs */
.field-input::-webkit-outer-spin-button,
.field-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════════════
   20g. SHIFT TARGET MATRIX — the main grid
   1 label col + 3 shift cols + 1 total col = 5 columns
   ══════════════════════════════════════════════════════════════════════ */
.shift-matrix-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.matrix-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.matrix-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  margin-bottom: 3px;
}

.matrix-sub {
  font-size: 12.5px;
  color: var(--text-tertiary);
  font-weight: 500;
}

.matrix-header-actions {
  display: flex;
  gap: 6px;
}

/* The grid itself */
.shift-matrix {
  display: grid;
  grid-template-columns: minmax(160px, 200px) repeat(3, 1fr) minmax(90px, 110px);
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Base cell styling (all grid children get #fff bg so the 1px gaps act as lines) */
.shift-matrix > * {
  background: #ffffff;
  padding: 14px;
  display: flex;
  align-items: center;
}

/* Corner cell */
.sm-corner {
  background: var(--slate-50);
}

/* Column headers (Day / Evening / Night / Total) */
.sm-col-head {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--slate-50);
  padding: 14px 8px;
  position: relative;
  text-align: center;
}

/* Color accent strip on top of each shift column header */
.sm-col-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.sm-col-day::before     { background: linear-gradient(90deg, #60a5fa, #2563eb); }
.sm-col-eve::before     { background: linear-gradient(90deg, #fbbf24, #d97706); }
.sm-col-night::before   { background: linear-gradient(90deg, #6366f1, #312e81); }
.sm-col-summary::before { background: linear-gradient(90deg, var(--slate-400), var(--slate-500)); }

.sm-col-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.sm-col-time {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Position row label (leftmost column of each data row) */
.sm-row-label {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: var(--slate-50);
  padding: 16px 18px;
}

.sm-row-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

.sm-row-sub {
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* Data cells with input */
.sm-cell {
  justify-content: center;
  padding: 12px;
  transition: background-color 0.12s;
}

.sm-cell:hover {
  background: var(--slate-50);
}

.sm-cell:focus-within {
  background: var(--accent-50);
}

.sm-input {
  width: 100%;
  max-width: 72px;
  padding: 10px;
  text-align: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  background: #ffffff;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.sm-input:hover { border-color: var(--slate-400); }

.sm-input:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  transform: scale(1.04);
}

.sm-input::-webkit-outer-spin-button,
.sm-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Row totals (rightmost column, data rows) */
.sm-row-total {
  justify-content: center;
  background: var(--slate-50);
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Bottom row — column totals */
.sm-col-total-label {
  background: var(--slate-100);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 18px;
}

.sm-col-total {
  background: var(--slate-100);
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.sm-grand-total {
  background: var(--accent-50);
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  color: var(--accent-700);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  box-shadow: inset 0 0 0 1px var(--accent-100);
}


/* ══════════════════════════════════════════════════════════════════════
   20h. MATRIX FOOTER — HPPD projection + status
   ══════════════════════════════════════════════════════════════════════ */
.matrix-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: 16px 20px;
  background: var(--slate-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.matrix-projection {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.matrix-projection-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.matrix-projection-label {
  font-size: 12.5px;
  color: var(--text-tertiary);
  font-weight: 600;
}

.matrix-projection-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.matrix-projection-target {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Status tile (right side) */
.matrix-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  max-width: 360px;
}

.matrix-status > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

.matrix-status strong {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.matrix-status span {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.85;
}

.matrix-status-good {
  background: var(--success-50);
  border-color: var(--success-100);
  color: var(--success-700);
}

.matrix-status-warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.matrix-status-danger {
  background: var(--danger-50);
  border-color: var(--danger-100);
  color: var(--danger-700);
}


/* ══════════════════════════════════════════════════════════════════════
   20i. SMALL ICON BUTTONS (for unit actions — edit / delete)
   ══════════════════════════════════════════════════════════════════════ */
.btn-icon-sm {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}

.btn-icon-sm:hover {
  background: var(--slate-50);
  border-color: var(--slate-400);
  color: var(--text-primary);
}

.btn-icon-sm-danger:hover {
  background: var(--danger-50);
  border-color: var(--danger-200, #fecaca);
  color: var(--danger-600);
}


/* ══════════════════════════════════════════════════════════════════════
   20j. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .info-grid { grid-template-columns: repeat(2, 1fr); }
  .budget-globals { grid-template-columns: repeat(2, 1fr); }
  .shift-matrix {
    grid-template-columns: minmax(140px, 180px) repeat(3, 1fr) minmax(80px, 100px);
  }
  .sm-input { font-size: 16px; max-width: 64px; }
}

@media (max-width: 960px) {
  .settings-grid {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
  }
  .info-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .budget-globals { grid-template-columns: 1fr; }

  /* Unit item reflows — icon + info on row 1, census + actions on row 2 */
  .unit-item {
    grid-template-columns: 44px 1fr auto;
    row-gap: var(--space-3);
  }
  .unit-census {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .unit-actions {
    grid-row: 1;
    grid-column: 3;
  }

  .matrix-footer {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .shift-matrix {
    grid-template-columns: 120px repeat(3, minmax(56px, 1fr)) 72px;
    font-size: 12px;
  }
  .sm-row-label { padding: 12px; }
  .sm-row-name { font-size: 14px; }
  .sm-row-sub { display: none; }
  .sm-col-label { font-size: 11px; }
  .sm-col-time { display: none; }
  .sm-input { font-size: 14px; padding: 8px; max-width: 56px; }
  .sm-col-head { padding: 10px 4px; }
  .sm-col-total-label { font-size: 10px; padding: 10px; }
  .sm-grand-total { font-size: 16px; }
  .sm-row-total { font-size: 16px; }

  .settings-saved-flag { display: none; }
}/* ══════════════════════════════════════════════════════════════════════
   21. DAILY BOARD v2 — UNIT-GROUPED · LIVE KPIs · COVERAGE METRICS
   (Append to styles.css · supersedes older .db-hstat/.db-columns styles)

   Contents:
   21a. Live KPI header badges (.db-kpi-row / .db-kpi)
   21b. Unit cards container (.db-units)
   21c. Unit card + header (icon, name, unit stats)
   21d. Unit card shifts grid (3-column arrangement per unit)
   21e. Shift columns inside unit card (overrides baseline .db-column)
   21f. Shift column head (shift badge + time)
   21g. COVERAGE CHIPS — budget vs actual indicators
        (.db-cov-match / .db-cov-short / .db-cov-critical / .db-cov-over / .db-cov-none)
   21h. Staff list tweaks (+N more, over-budget staff)
   21i. Responsive
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   21a. LIVE KPI HEADER BADGES
   ══════════════════════════════════════════════════════════════════════ */
.db-kpi-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.db-kpi {
  position: relative;
  min-width: 200px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: #ffffff;
  overflow: hidden;
}

/* Left-edge accent strip, colored per state */
.db-kpi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
}

.db-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.db-kpi-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.db-kpi-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.db-kpi-values {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.db-kpi-actual {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.db-kpi-divider {
  font-size: 20px;
  font-weight: 400;
  color: var(--text-muted);
  margin: 0 1px;
}

.db-kpi-target {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-secondary);
}

.db-kpi-unit {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-left: 4px;
  letter-spacing: 0;
}

.db-kpi-sub {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-top: 3px;
}

/* State: GOOD (under/matching target — HPPD within budget) */
.db-kpi-good {
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 55%);
  border-color: var(--success-100);
}
.db-kpi-good::before { background: var(--success-500); }
.db-kpi-good .db-kpi-badge {
  background: var(--success-500);
  color: #ffffff;
}
.db-kpi-good .db-kpi-actual { color: var(--success-700); }

/* State: WARN (short shifts / approaching threshold) */
.db-kpi-warn {
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 55%);
  border-color: #fde68a;
}
.db-kpi-warn::before { background: var(--warning-500); }
.db-kpi-warn .db-kpi-badge {
  background: var(--warning-500);
  color: #ffffff;
}
.db-kpi-warn .db-kpi-actual { color: #b45309; }

/* State: BAD (over target — budget blown) */
.db-kpi-bad {
  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 55%);
  border-color: var(--danger-100);
}
.db-kpi-bad::before { background: var(--danger-500); }
.db-kpi-bad .db-kpi-badge {
  background: var(--danger-500);
  color: #ffffff;
}
.db-kpi-bad .db-kpi-actual { color: var(--danger-700); }


/* ══════════════════════════════════════════════════════════════════════
   21b. UNITS CONTAINER
   ══════════════════════════════════════════════════════════════════════ */
.db-units {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}


/* ══════════════════════════════════════════════════════════════════════
   21c. UNIT CARD + HEADER
   ══════════════════════════════════════════════════════════════════════ */
.db-unit-card {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.db-unit-card:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-sm);
}

/* Unit header bar */
.db-unit-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: 16px 24px;
  background: linear-gradient(180deg, #fbfcfe 0%, #ffffff 100%);
  border-bottom: 1px solid var(--border-subtle);
}

.db-unit-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

/* Unit icon tile — color-coded per unit type (matches settings page) */
.db-unit-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.db-unit-icon-rehab    { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1d4ed8; }
.db-unit-icon-longterm { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #15803d; }
.db-unit-icon-memory   { background: linear-gradient(135deg, #f3e8ff, #e9d5ff); color: #7e22ce; }
.db-unit-icon-skilled  { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #b45309; }

.db-unit-info { min-width: 0; }

.db-unit-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

.db-unit-meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* Right-side unit stats */
.db-unit-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.db-unit-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
}

.db-unit-stat-num {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.db-unit-stat-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.db-unit-stat-warn {
  background: var(--warning-50, #fffbeb);
  border-color: #fde68a;
  color: #92400e;
}
.db-unit-stat-warn .db-unit-stat-num { color: #b45309; }

.db-unit-stat-over {
  background: var(--danger-50);
  border-color: var(--danger-200, #fecaca);
  color: var(--danger-700);
}
.db-unit-stat-over .db-unit-stat-num { color: var(--danger-700); }


/* ══════════════════════════════════════════════════════════════════════
   21d. UNIT CARD SHIFTS GRID — 3 columns inside each unit
   ══════════════════════════════════════════════════════════════════════ */
.db-unit-shifts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}


/* ══════════════════════════════════════════════════════════════════════
   21e. SHIFT COLUMNS INSIDE UNIT CARDS
   Overrides baseline .db-column (from old daily board) which had its own
   borders/shadow. Inside a unit card, the unit owns the frame — columns
   are flush dividers with a subtle colored top accent per shift.
   ══════════════════════════════════════════════════════════════════════ */
.db-unit-shifts .db-column {
  position: relative;
  background: #ffffff;
  border: none;
  border-right: 1px solid var(--border-subtle);
  border-radius: 0;
  box-shadow: none;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.db-unit-shifts .db-column:last-child { border-right: none; }

/* Subtle top accent per shift type (color only on the top edge) */
.db-unit-shifts .db-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0.7;
}
.db-unit-shifts .db-column-day::before   { background: linear-gradient(90deg, #60a5fa, #2563eb); }
.db-unit-shifts .db-column-eve::before   { background: linear-gradient(90deg, #fbbf24, #d97706); }
.db-unit-shifts .db-column-night::before { background: linear-gradient(90deg, #6366f1, #312e81); }


/* ══════════════════════════════════════════════════════════════════════
   21f. SHIFT COLUMN HEAD — badge + time
   ══════════════════════════════════════════════════════════════════════ */
.db-col-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.db-col-shift-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 4px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
}

.db-column-day   .db-col-shift-badge { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.db-column-eve   .db-col-shift-badge { background: linear-gradient(135deg, #fbbf24, #d97706); }
.db-column-night .db-col-shift-badge { background: linear-gradient(135deg, #6366f1, #312e81); }

.db-col-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}


/* ══════════════════════════════════════════════════════════════════════
   21g. COVERAGE CHIPS — the budget vs actual indicators (Task 3)

   State semantics:
   .db-cov-match    → scheduled === budgeted (green, healthy)
   .db-cov-short    → scheduled < budgeted by 1 (amber, attention)
   .db-cov-critical → scheduled < budgeted by 2+ OR 0/N (red, urgent)
   .db-cov-over     → scheduled > budgeted (BOLD filled red, budget waste)
   .db-cov-none     → not budgeted for this shift (neutral gray, "—")
   ══════════════════════════════════════════════════════════════════════ */
.db-coverage {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 10px;
  background: var(--slate-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.db-cov-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  transition: transform 0.12s;
}

.db-cov-chip:hover { transform: translateY(-1px); }

.db-cov-label {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--slate-100);
  color: var(--text-tertiary);
}

.db-cov-frac {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* MATCH — perfectly staffed (green) */
.db-cov-match {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: var(--success-700);
}
.db-cov-match .db-cov-label {
  background: var(--success-500);
  color: #ffffff;
}

/* SHORT — 1 under (amber) */
.db-cov-short {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.db-cov-short .db-cov-label {
  background: var(--warning-500);
  color: #ffffff;
}

/* CRITICAL — 0/N or 2+ under (red tint) */
.db-cov-critical {
  background: var(--danger-50);
  border-color: var(--danger-200, #fecaca);
  color: var(--danger-700);
}
.db-cov-critical .db-cov-label {
  background: var(--danger-500);
  color: #ffffff;
}

/* OVER — scheduled > budgeted (BOLD filled red, budget waste) */
.db-cov-over {
  background: var(--danger-600);
  border-color: var(--danger-700);
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.35);
}
.db-cov-over .db-cov-label {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}
.db-cov-over .db-cov-frac {
  font-weight: 900;
  font-size: 12.5px;
}
.db-cov-over::after {
  content: "OVER";
  font-size: 8.5px;
  font-weight: 800;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 3px;
  letter-spacing: 0.1em;
  margin-left: 2px;
}

/* NONE — position not budgeted for this shift */
.db-cov-none {
  background: #ffffff;
  border-color: var(--border-subtle);
  color: var(--text-muted);
  opacity: 0.72;
}
.db-cov-none .db-cov-label {
  background: var(--slate-100);
  color: var(--text-muted);
}
.db-cov-none .db-cov-frac {
  font-weight: 600;
  color: var(--text-muted);
}


/* ══════════════════════════════════════════════════════════════════════
   21h. STAFF LIST TWEAKS — over-budget marker + "+N more" collapsed
   ══════════════════════════════════════════════════════════════════════ */

/* Over-budget staff card — subtle red outline + hatched accent */
.db-unit-shifts .db-staff.db-staff-over {
  background:
    linear-gradient(90deg, #fef2f2 0%, #ffffff 40%);
  border-color: var(--danger-200, #fecaca);
  position: relative;
}
.db-unit-shifts .db-staff.db-staff-over::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--danger-500);
  border-radius: 3px 0 0 3px;
}
.db-unit-shifts .db-staff.db-staff-over .db-staff-meta {
  color: var(--danger-700);
  font-weight: 600;
}

/* "+ N more" collapsed staff row */
.db-staff-collapsed {
  background: var(--slate-50) !important;
  border: 1px dashed var(--border-default) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: all 0.15s;
}

.db-staff-collapsed:hover {
  background: #ffffff !important;
  border-color: var(--accent-400, #60a5fa) !important;
  border-style: solid !important;
}

.db-staff-more {
  color: var(--text-secondary) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

.db-staff-collapsed .db-staff-meta {
  color: var(--text-muted) !important;
  font-size: 11px;
}


/* ══════════════════════════════════════════════════════════════════════
   21i. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  /* Narrower: reduce padding + input size */
  .db-unit-shifts .db-column { padding: 14px 14px 16px; gap: 10px; }
  .db-coverage { padding: 6px 8px; gap: 4px; }
  .db-cov-chip { padding: 2px 7px 2px 6px; font-size: 10.5px; }
  .db-cov-frac { font-size: 11.5px; }
  .db-cov-label { font-size: 9px; }
  .db-kpi-actual { font-size: 24px; }
  .db-unit-name { font-size: 16px; }
}

@media (max-width: 960px) {
  /* Unit shifts stack vertically below unit header */
  .db-unit-shifts {
    grid-template-columns: 1fr;
  }
  .db-unit-shifts .db-column {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }
  .db-unit-shifts .db-column:last-child {
    border-bottom: none;
  }
  .db-unit-header {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .db-unit-stats { width: 100%; }
  .db-unit-stat { flex: 1; min-width: 0; justify-content: center; }

  .db-kpi-row { flex-direction: column; }
  .db-kpi { min-width: 0; width: 100%; }
}

@media (max-width: 600px) {
  .db-unit-header { padding: 14px 16px; }
  .db-unit-icon { width: 38px; height: 38px; }
  .db-unit-name { font-size: 15px; }
  .db-cov-over::after { display: none; }   /* hide the extra OVER tag on tiny screens */
  .db-kpi { padding: 12px 14px; }
  .db-kpi-actual { font-size: 22px; }
}/* ══════════════════════════════════════════════════════════════════════
   22. FORECAST ANALYTICS PAGE
   (Append to styles.css)

   Aesthetic: "Financial Hybrid" — dark navy hero band for the bottom-line
   KPIs; clean light sections below for charts; muted AI sidebar.

   Contents:
   22a. Page header actions (period picker · export · share)
   22b. Dark KPI Hero band
   22c. KPI cards (dark theme, tabular numerics)
   22d. Main layout (charts column + AI sidebar)
   22e. Chart cards (panel overrides + chart canvas sizing)
   22f. Chart legend (line chart top-right)
   22g. Donut chart (center label overlay + custom legend rows)
   22h. PPD Cost Heatmap (7-col calendar + 5 intensity levels)
   22i. Callouts (inline insights below charts)
   22j. AI Financial Strategy sidebar
   22k. AI items (warnings vs opportunities)
   22l. Responsive
   ══════════════════════════════════════════════════════════════════════ */


/* ── 22a. Page header actions ─────────────────────────────────────────── */
.fa-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.fa-period-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 0 12px;
  background: #ffffff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.fa-period-picker:focus-within {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}


/* ══════════════════════════════════════════════════════════════════════
   22b. DARK KPI HERO BAND
   ══════════════════════════════════════════════════════════════════════ */
.fa-hero {
  position: relative;
  margin: 0 var(--space-8) var(--space-5);
  padding: 28px 36px 32px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #0f172a 100%);
  color: #f1f5f9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 10px 32px -8px rgba(15, 23, 42, 0.35),
    0 2px 8px -2px rgba(15, 23, 42, 0.2);
}

/* Subtle dot-grid pattern on the hero for financial-terminal vibes */
.fa-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(148, 163, 184, 0.1) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
  opacity: 0.6;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.1));
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.1));
}

.fa-hero > * {
  position: relative;
  z-index: 1;
}

.fa-hero-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fa-hero-eyebrow {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #60a5fa;
  margin-bottom: 4px;
}

.fa-hero-title {
  font-size: 18px;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0;
}

.fa-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
}

.fa-hero-pulse {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  animation: fa-pulse 2s ease-out infinite;
  flex-shrink: 0;
}

@keyframes fa-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(16, 185, 129, 0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);    }
  100% { box-shadow: 0 0 0 0    rgba(16, 185, 129, 0);    }
}


/* ══════════════════════════════════════════════════════════════════════
   22c. KPI CARDS — dark theme, tabular numerics
   ══════════════════════════════════════════════════════════════════════ */
.fa-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.fa-kpi {
  position: relative;
  padding: 4px 0 4px 20px;
  border-left: 1px solid rgba(148, 163, 184, 0.15);
}

/* First KPI has no left border */
.fa-kpi:first-child {
  border-left: none;
  padding-left: 0;
}

.fa-kpi-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #94a3b8;
  margin-bottom: 12px;
}

.fa-kpi-value {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 34px;
  font-weight: 800;
  color: #f8fafc;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 10px;
}

.fa-kpi-currency {
  font-size: 22px;
  font-weight: 600;
  color: #64748b;
  margin-right: 2px;
}

.fa-kpi-unit {
  font-size: 20px;
  font-weight: 600;
  color: #64748b;
  margin-left: 2px;
}

.fa-kpi-value-bad { color: #f87171; }

/* Delta indicator (±X% / +$X / ↑↓ arrow) */
.fa-kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  margin-bottom: 8px;
  background: rgba(148, 163, 184, 0.1);
  color: #cbd5e1;
}

.fa-kpi-delta-sub {
  font-weight: 500;
  color: #94a3b8;
  letter-spacing: 0;
  margin-left: 2px;
}

.fa-kpi-delta-good {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}
.fa-kpi-delta-warn {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}
.fa-kpi-delta-bad {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.fa-kpi-foot {
  font-size: 11.5px;
  font-weight: 500;
  color: #64748b;
  line-height: 1.4;
}


/* ══════════════════════════════════════════════════════════════════════
   22d. MAIN LAYOUT — charts column + AI sidebar
   ══════════════════════════════════════════════════════════════════════ */
.fa-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-5);
  margin: 0 var(--space-8) var(--space-6);
  align-items: start;
}

.fa-charts {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.fa-chart-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
}


/* ══════════════════════════════════════════════════════════════════════
   22e. CHART CARDS — panel overrides + canvas sizing
   ══════════════════════════════════════════════════════════════════════ */
.fa-chart-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.fa-chart-canvas {
  position: relative;
  height: 240px;
  width: 100%;
}

.fa-chart-canvas-lg {
  height: 320px;
}

.fa-chart-canvas canvas {
  max-width: 100%;
  max-height: 100%;
}


/* ── 22f. Chart legend (line chart header right) ───────────────────── */
.fa-chart-legend {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.fa-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.fa-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fa-legend-dot-dashed {
  width: 16px;
  height: 2px;
  background: repeating-linear-gradient(90deg, #94a3b8 0 4px, transparent 4px 7px);
  border-radius: 0;
}

/* Chart footer — stats row below the canvas */
.fa-chart-foot {
  display: flex;
  gap: 20px;
  padding: 14px 16px;
  background: var(--slate-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}

.fa-chart-foot-tight {
  padding: 12px 14px;
  gap: 10px;
}

.fa-chart-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fa-chart-stat-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.fa-chart-stat-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.fa-chart-stat-day {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-left: 4px;
  letter-spacing: 0;
}

.fa-val-good { color: var(--success-600) !important; }
.fa-val-bad  { color: var(--danger-600) !important; }


/* ══════════════════════════════════════════════════════════════════════
   22g. DONUT CHART — center label overlay + custom legend
   ══════════════════════════════════════════════════════════════════════ */
.fa-donut-body {
  display: grid;
  grid-template-columns: minmax(0, 200px) 1fr;
  gap: 20px;
  align-items: center;
  padding: var(--space-2) 0;
}

.fa-donut-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  min-width: 0;
}

.fa-donut-wrap canvas {
  max-width: 100%;
  max-height: 100%;
}

.fa-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.fa-donut-total {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.fa-donut-total span:first-child {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 1px;
}

.fa-donut-k {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-tertiary);
}

.fa-donut-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

.fa-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.fa-legend-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}

.fa-legend-chip {
  width: 10px;
  height: 40px;
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: 2px;
}

.fa-legend-main { min-width: 0; }

.fa-legend-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}

.fa-legend-values {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.fa-legend-amt {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.fa-legend-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  background: var(--slate-100);
  border-radius: 3px;
}

.fa-legend-pct-bad {
  background: #fef2f2;
  color: var(--danger-700);
}

.fa-legend-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-top: 3px;
}


/* ══════════════════════════════════════════════════════════════════════
   22h. PPD COST HEATMAP — 7-col calendar, 5 intensity levels
   ══════════════════════════════════════════════════════════════════════ */
.fa-heatmap-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.fa-heat-scale {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-end;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  background: var(--slate-50);
  border-radius: 999px;
}

.fa-heat-scale-label {
  font-variant-numeric: tabular-nums;
}

.fa-heat-scale-bar {
  display: inline-flex;
  gap: 2px;
}

.fa-heat-swatch {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
}

/* Heatmap grid */
.fa-heatmap {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  background: var(--slate-50);
  padding: 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  min-width: 0;
}

.fa-heat-dow {
  text-align: center;
  padding: 4px 0;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.fa-heat-dow-weekend { color: var(--accent-600); }

.fa-heat-cell {
  position: relative;
  min-height: 58px;
  padding: 6px 8px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform 0.12s, box-shadow 0.15s;
  cursor: pointer;
  min-width: 0;
}

.fa-heat-cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
  z-index: 1;
}

.fa-heat-date {
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.fa-heat-amt {
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* 5-level intensity scale: green (cheap) → red (expensive) */
.fa-heat-1, .fa-heat-1 .fa-heat-swatch {
  background: #d1fae5;  /* cool mint */
}
.fa-heat-1 .fa-heat-date { color: #047857; }
.fa-heat-1 .fa-heat-amt  { color: #065f46; }

.fa-heat-2 {
  background: #e0e7ff;  /* cool blue */
}
.fa-heat-2 .fa-heat-date { color: #3730a3; }
.fa-heat-2 .fa-heat-amt  { color: #4338ca; }

.fa-heat-3 {
  background: #fef3c7;  /* mild amber */
}
.fa-heat-3 .fa-heat-date { color: #b45309; }
.fa-heat-3 .fa-heat-amt  { color: #92400e; }

.fa-heat-4 {
  background: #fed7aa;  /* warm orange */
}
.fa-heat-4 .fa-heat-date { color: #9a3412; }
.fa-heat-4 .fa-heat-amt  { color: #7c2d12; }

.fa-heat-5 {
  background: #fecaca;  /* hot red */
  border: 1px solid #fca5a5;
}
.fa-heat-5 .fa-heat-date { color: #991b1b; font-weight: 900; }
.fa-heat-5 .fa-heat-amt  { color: #7f1d1d; font-weight: 800; }

/* Swatch scale in legend bar (uses same palette) */
.fa-heat-swatch.fa-heat-1 { background: #d1fae5; }
.fa-heat-swatch.fa-heat-2 { background: #e0e7ff; }
.fa-heat-swatch.fa-heat-3 { background: #fef3c7; }
.fa-heat-swatch.fa-heat-4 { background: #fed7aa; }
.fa-heat-swatch.fa-heat-5 { background: #fecaca; border: 1px solid #fca5a5; }


/* ══════════════════════════════════════════════════════════════════════
   22i. CALLOUTS — inline insights below charts
   ══════════════════════════════════════════════════════════════════════ */
.fa-callout {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid transparent;
  width: 100%;
}

.fa-callout strong {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.fa-callout svg { flex-shrink: 0; }

.fa-callout-warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.fa-callout-bad {
  background: var(--danger-50);
  border-color: var(--danger-100);
  color: var(--danger-700);
}


/* ══════════════════════════════════════════════════════════════════════
   22j. AI FINANCIAL STRATEGY SIDEBAR
   ══════════════════════════════════════════════════════════════════════ */
.fa-ai-sidebar {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--topbar-h) - 32px);
}

.fa-ai-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #fbfcfe 0%, #ffffff 100%);
  border-bottom: 1px solid var(--border-subtle);
}

.fa-ai-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eff6ff 0%, #f3e8ff 100%);
  flex-shrink: 0;
}

.fa-ai-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 2px;
}

.fa-ai-sub {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-tertiary);
  line-height: 1.3;
  margin: 0;
}

/* Impact summary block at the top */
.fa-ai-impact {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}

.fa-ai-impact-num {
  font-size: 24px;
  font-weight: 800;
  color: var(--success-700);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1;
}

.fa-ai-impact-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--success-600);
  margin-top: 4px;
  margin-bottom: 10px;
}

.fa-ai-impact-bar {
  height: 6px;
  background: var(--slate-100);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}

.fa-ai-impact-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--success-400, #34d399), var(--success-600));
  border-radius: 999px;
}

.fa-ai-impact-foot {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* Group (Warnings / Opportunities sections) */
.fa-ai-group {
  padding: 12px 16px 16px;
  border-bottom: 1px solid var(--border-subtle);
  overflow-y: auto;
}

.fa-ai-group:last-of-type { border-bottom: none; }

.fa-ai-group-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--danger-700);
  margin-bottom: 10px;
}

.fa-ai-group-head svg { color: var(--danger-500); }

.fa-ai-group-head-opp {
  color: var(--success-700);
}
.fa-ai-group-head-opp svg { color: var(--warning-500); }

.fa-ai-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  background: var(--danger-500);
  color: #ffffff;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-left: 2px;
}

.fa-ai-group-count-opp { background: var(--success-500); }


/* ══════════════════════════════════════════════════════════════════════
   22k. AI ITEMS — warning vs opportunity cards
   ══════════════════════════════════════════════════════════════════════ */
.fa-ai-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.fa-ai-item:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-xs);
}

.fa-ai-item:last-child { margin-bottom: 0; }

/* Left accent strip */
.fa-ai-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
}

.fa-ai-item-warn::before { background: var(--danger-500); }
.fa-ai-item-opp::before  { background: var(--success-500); }

.fa-ai-item-body {
  padding-left: 4px;
  min-width: 0;
}

.fa-ai-item-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  line-height: 1.35;
  margin: 0 0 4px;
}

.fa-ai-item-desc {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 8px;
}

.fa-ai-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.fa-ai-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--slate-100);
  color: var(--text-secondary);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.fa-ai-tag-good {
  background: #ecfdf5;
  color: var(--success-700);
  font-weight: 700;
}

.fa-ai-tag-bad {
  background: var(--danger-50);
  color: var(--danger-700);
  font-weight: 700;
}

/* Item CTA button */
.fa-ai-item-cta {
  align-self: flex-start;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: #ffffff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
  margin-left: 4px;
}

.fa-ai-item-cta:hover {
  background: var(--slate-50);
  border-color: var(--slate-400);
  color: var(--text-primary);
}

.fa-ai-item-cta-primary {
  background: var(--accent-600);
  border-color: var(--accent-600);
  color: #ffffff;
}

.fa-ai-item-cta-primary:hover {
  background: var(--accent-700);
  border-color: var(--accent-700);
  color: #ffffff;
}

/* Sidebar footer */
.fa-ai-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--slate-50);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.fa-ai-foot-meta {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}


/* ══════════════════════════════════════════════════════════════════════
   22l. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1380px) {
  .fa-kpi-row { gap: 20px; }
  .fa-kpi-value { font-size: 30px; }
  .fa-kpi-currency, .fa-kpi-unit { font-size: 19px; }
}

@media (max-width: 1280px) {
  .fa-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
  .fa-kpi-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 24px;
  }
  .fa-kpi {
    border-left: none !important;
    padding-left: 0 !important;
  }
  .fa-kpi:nth-child(2) {
    border-left: 1px solid rgba(148, 163, 184, 0.15) !important;
    padding-left: 20px !important;
  }
  .fa-kpi:nth-child(4) {
    border-left: 1px solid rgba(148, 163, 184, 0.15) !important;
    padding-left: 20px !important;
  }
  .fa-donut-body {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .fa-donut-wrap { height: 160px; }
}

@media (max-width: 960px) {
  .fa-layout, .fa-hero {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
  }
  .fa-layout {
    grid-template-columns: 1fr;
  }
  .fa-ai-sidebar {
    position: static;
    max-height: none;
  }
  .fa-chart-row {
    grid-template-columns: 1fr;
  }
  .fa-hero { padding: 22px 24px; }
  .fa-hero-title { font-size: 16px; }
}

@media (max-width: 680px) {
  .fa-kpi-row {
    grid-template-columns: 1fr;
  }
  .fa-kpi {
    border-left: none !important;
    padding-left: 0 !important;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
  }
  .fa-kpi:first-child {
    padding-top: 0;
    border-top: none;
  }
  .fa-kpi-value { font-size: 28px; }
  .fa-hero-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .fa-chart-foot { gap: 14px; }
  .fa-chart-stat-val { font-size: 14px; }
  .fa-header-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .fa-period-picker { flex: 1; min-width: 140px; }
  .fa-heat-amt { font-size: 9px; }
  .fa-heat-date { font-size: 10px; }
  .fa-heat-cell { min-height: 48px; padding: 4px 5px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TIME & ATTENDANCE — V2 REFACTOR
   - Native page scroll (no inner max-height on the table wrap)
   - Dense rows, tighter padding & font
   - Inline geofence dot (replaces the Location column)
   - Agency-only badge
   - Floating AI assistant (FAB + chat card)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fix scroll: table flows naturally; page scrolls natively ─────── */
.ta-roster-wrap.ta-roster-wrap-flow {
  max-height: calc(100vh - 300px);
  overflow-y: auto;   /* inner vertical scroll for the employee list */
  overflow-x: auto;   /* horizontal scroll only on very narrow viewports */
}

/* ── Dense table: smaller font, tighter padding ──────────────────── */
.ta-roster-table.ta-roster-table-dense {
  font-size: 12px;
  min-width: 1080px;
}
.ta-roster-table.ta-roster-table-dense thead th {
  padding: 8px var(--space-3);
  font-size: 10px;
  letter-spacing: 0.07em;
}
.ta-roster-table.ta-roster-table-dense tbody td,
.ta-roster-panel-dense .ta-row td {
  padding: 7px 10px;
  vertical-align: middle;
}
.ta-roster-panel-dense .ta-emp-avatar {
  width: 30px;
  height: 30px;
  font-size: 11px;
}
.ta-roster-panel-dense .ta-emp-name {
  font-size: 12.5px;
  line-height: 1.25;
  gap: 6px;
}
.ta-roster-panel-dense .ta-emp-role {
  font-size: 11px;
  margin-top: 1px;
}
.ta-roster-panel-dense .ta-shift-time,
.ta-roster-panel-dense .ta-punch-time {
  font-size: 12px;
  font-weight: 600;
}
.ta-roster-panel-dense .ta-shift-label,
.ta-roster-panel-dense .ta-punch-note,
.ta-roster-panel-dense .ta-meal-sub,
.ta-roster-panel-dense .ta-impact-detail {
  font-size: 10.5px;
}
.ta-roster-panel-dense .ta-punch-stack { gap: 4px; }
.ta-roster-panel-dense .ta-punch-line { gap: 6px; }
.ta-roster-panel-dense .ta-var-stack { gap: 4px; }
.ta-roster-panel-dense .ta-var-badge {
  padding: 2px 7px;
  font-size: 10.5px;
}
.ta-roster-panel-dense .ta-meal-label,
.ta-roster-panel-dense .ta-impact-label {
  font-size: 12px;
  font-weight: 600;
}
.ta-roster-panel-dense .ta-action-btn {
  padding: 4px 9px;
  font-size: 11px;
}

/* ── Inline geofence indicator ───────────────────────────────────── */
.ta-geo-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: help;
  transition: transform 0.12s ease;
}
.ta-geo-dot:hover { transform: scale(1.15); }

.ta-geo-dot-ok {
  background: #ecfdf5;
  color: #059669;
  box-shadow: inset 0 0 0 1px #a7f3d0;
}
.ta-geo-dot-bad {
  background: #fef2f2;
  color: #dc2626;
  box-shadow: inset 0 0 0 1px #fecaca;
}

/* ── Agency-only badge (no STAFF / In-House badges anymore) ──────── */
.ta-agency-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px 1px 5px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(146, 64, 14, 0.18);
  vertical-align: middle;
}
.ta-agency-badge svg {
  width: 9px;
  height: 9px;
}

/* ═════════════════════════════════════════════════════════════════════
   FLOATING AI ASSISTANT — premium SaaS widget
   ═════════════════════════════════════════════════════════════════════ */
.ai-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ── The button itself ─────────────────────────────────────────────── */
.ai-fab-btn {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 60%, #a855f7 100%);
  box-shadow:
    0 10px 30px -8px rgba(124, 58, 237, 0.55),
    0 4px 12px -2px rgba(37, 99, 235, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
  isolation: isolate;
}
.ai-fab-btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 16px 36px -8px rgba(124, 58, 237, 0.65),
    0 6px 16px -2px rgba(37, 99, 235, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.ai-fab-btn:active { transform: translateY(-1px) scale(1.01); }

.ai-fab-btn-icon {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

/* Soft outer glow */
.ai-fab-btn-glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.32) 0%, transparent 70%);
  filter: blur(8px);
  z-index: 0;
  opacity: 0.85;
  animation: aiFabBreath 3.6s ease-in-out infinite;
}
@keyframes aiFabBreath {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.08); }
}

/* Live pulse dot — signals "online" */
.ai-fab-btn-pulse {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 2px #ffffff, 0 0 8px rgba(52, 211, 153, 0.7);
  z-index: 3;
}
.ai-fab-btn-pulse::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #34d399;
  animation: aiFabPing 2s ease-out infinite;
}
@keyframes aiFabPing {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ── Chat overlay card ─────────────────────────────────────────────── */
.ai-fab-card {
  position: absolute;
  right: 0;
  bottom: 72px;
  width: 360px;
  max-width: calc(100vw - 48px);
  background: #ffffff;
  border-radius: 18px;
  box-shadow:
    0 24px 60px -16px rgba(15, 23, 42, 0.28),
    0 8px 24px -8px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(226, 232, 240, 0.9);
  overflow: hidden;
  transform-origin: bottom right;
  transform: translateY(12px) scale(0.94);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.18s ease;
}

/* Hover-to-peek + click-to-pin */
.ai-fab:hover .ai-fab-card,
.ai-fab.is-open .ai-fab-card {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* ── Card header ───────────────────────────────────────────────────── */
.ai-fab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5ff 100%);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}
.ai-fab-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ai-fab-avatar {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.12), inset 0 0 0 1px rgba(124, 58, 237, 0.14);
  flex-shrink: 0;
}
.ai-fab-title-text { min-width: 0; }
.ai-fab-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.ai-fab-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: #64748b;
  margin-top: 1px;
}
.ai-fab-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.25);
}
.ai-fab-close {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.ai-fab-close:hover { background: rgba(15, 23, 42, 0.06); color: #0f172a; }

/* ── Card body (greeting + chips) ──────────────────────────────────── */
.ai-fab-body {
  padding: 16px;
}
.ai-fab-greeting {
  margin-bottom: 14px;
}
.ai-fab-greeting-bubble {
  display: inline-block;
  padding: 10px 12px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 14px 14px 14px 4px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #334155;
  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.9);
}
.ai-fab-chips-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 8px;
}
.ai-fab-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ai-fab-chip {
  display: flex;
  align-items: center;
  text-align: left;
  padding: 9px 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: all 0.14s ease;
  position: relative;
}
.ai-fab-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #a855f7);
  margin-right: 9px;
  flex-shrink: 0;
  opacity: 0.7;
}
.ai-fab-chip:hover {
  border-color: #c7d2fe;
  background: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%);
  color: #1e293b;
  transform: translateX(2px);
  box-shadow: 0 2px 8px -2px rgba(124, 58, 237, 0.15);
}
.ai-fab-chip:hover::before { opacity: 1; }

/* ── Card footer (input + send) ────────────────────────────────────── */
.ai-fab-footer {
  padding: 12px 16px 14px;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  background: #fafbfc;
}
.ai-fab-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 4px 4px 4px 12px;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.ai-fab-input-wrap:focus-within {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12);
}
.ai-fab-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  color: #0f172a;
  padding: 7px 0;
}
.ai-fab-input::placeholder { color: #94a3b8; }
.ai-fab-send {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: none;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s, box-shadow 0.18s;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3);
}
.ai-fab-send:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.4);
}
.ai-fab-disclaimer {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 8px;
  text-align: center;
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ai-fab { right: 16px; bottom: 16px; }
  .ai-fab-card { width: calc(100vw - 32px); right: -4px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TIME & ATTENDANCE — PHASE 2 (Meal Break Status + Context Actions)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Meal Break Status cells ─────────────────────────────────────── */
/* Auto-Deducted — the default reality for 90% of staff. Muted, secondary. */
.ta-meal-cell.mb-auto {
  color: #94a3b8;
}
.ta-meal-cell.mb-auto .ta-meal-icon {
  color: #94a3b8;
  background: #f1f5f9;
  box-shadow: inset 0 0 0 1px #e2e8f0;
}
.ta-meal-cell.mb-auto .ta-meal-label {
  color: #64748b;
  font-weight: 500;
}
.ta-meal-cell.mb-auto .ta-meal-sub {
  color: #94a3b8;
  font-style: italic;
}

/* Punched Out — they actually clocked in/out. Standard text. */
.ta-meal-cell.mb-punched .ta-meal-icon {
  color: #0369a1;
  background: #e0f2fe;
  box-shadow: inset 0 0 0 1px #bae6fd;
}
.ta-meal-cell.mb-punched .ta-meal-label {
  color: #0f172a;
  font-weight: 600;
}
.ta-meal-cell.mb-punched .ta-meal-sub {
  color: #64748b;
}

/* Missed Meal Exception — attested; compliance + pay flag. BOLD RED. */
.ta-meal-cell.mb-missed .ta-meal-icon {
  color: #b91c1c;
  background: #fee2e2;
  box-shadow: inset 0 0 0 1px #fecaca;
}
.ta-meal-cell.mb-missed .ta-meal-label {
  color: #b91c1c;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.ta-meal-cell.mb-missed .ta-meal-sub {
  color: #dc2626;
  font-weight: 500;
}

/* ── Context-aware Action buttons ──────────────────────────────────
   Three operationally distinct actions replace the legally fuzzy
   "Edit Punch" / "Approve OT" pair. */
.ta-action-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ta-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.06s;
}
.ta-action-btn:active { transform: translateY(0.5px); }
.ta-action-icon { display: inline-flex; align-items: center; }

/* Clear Flag — neutral, low-stakes dismissal */
.ta-action-btn.ta-action-clear {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}
.ta-action-btn.ta-action-clear:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}

/* Resolve Exception — amber, opens audit modal */
.ta-action-btn.ta-action-resolve {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.ta-action-btn.ta-action-resolve:hover {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #78350f;
}

/* Authorize Payroll — blue/primary, the high-stakes financial action */
.ta-action-btn.ta-action-payroll {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  border-color: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(29, 78, 216, 0.25);
}
.ta-action-btn.ta-action-payroll:hover {
  background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%);
  box-shadow: 0 2px 5px rgba(29, 78, 216, 0.35);
}

/* Ellipsis "more" — secondary affordance for less-common operations */
.ta-action-more {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ta-action-more:hover {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}

/* ═══════════════════════════════════════════════════════════════════════
   TIME & ATTENDANCE — PHASE 3
   - Split In-Punch / Out-Punch columns
   - Sortable header indicators
   - Centered Actions header
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Header inner flex (text + sort icon side-by-side) ──────────────── */
.ta-roster-table thead th .ta-th-inner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}

/* ── Sort icon ─────────────────────────────────────────────────────── */
.ta-sort-icon {
  width: 10px;
  height: 10px;
  opacity: 0.35;
  color: #64748b;
  flex-shrink: 0;
  transition: opacity 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

/* ── Sortable header — pointer cursor + hover affordance ───────────── */
.ta-roster-table thead th.is-sortable {
  cursor: pointer;
  user-select: none;
  transition: background 0.14s ease, color 0.14s ease;
}
.ta-roster-table thead th.is-sortable:hover {
  background: #eef2f7;
  color: #1e293b;
}
.ta-roster-table thead th.is-sortable:hover .ta-sort-icon {
  opacity: 0.85;
  color: #2563eb;
}
.ta-roster-table thead th.is-sortable:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: -2px;
}

/* Active sort states (ready for JS to wire up later) */
/* Active sort column — blue and high-contrast */
.ta-roster-table thead th.is-sortable.is-sorted-asc .ta-sort-icon,
.ta-roster-table thead th.is-sortable.is-sorted-desc .ta-sort-icon {
  opacity: 1;
  color: #2563eb;
}

/* Dim the inactive arrow so the direction reads at a glance.
   (Rotation alone didn't help because the double-arrow is vertically
   symmetric — dimming one half is what actually communicates ↑ vs ↓.) */
.ta-roster-table thead th.is-sortable.is-sorted-asc  .ta-sort-down,
.ta-roster-table thead th.is-sortable.is-sorted-desc .ta-sort-up {
  opacity: 0.18;
}

/* The active arrow paints bold so the direction is unmistakable */
.ta-roster-table thead th.is-sortable.is-sorted-asc  .ta-sort-up,
.ta-roster-table thead th.is-sortable.is-sorted-desc .ta-sort-down {
  stroke-width: 2;
}

/* ── New split punch columns ───────────────────────────────────────── */
.ta-col-punch-in,
.ta-col-punch-out {
  min-width: 145px;
  white-space: nowrap;
}

/* The single-line punch row inside each cell */
.ta-col-punch-in .ta-punch-line,
.ta-col-punch-out .ta-punch-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Center the Actions column header (was off-center vs buttons) ──── */
.ta-roster-table thead th.ta-col-actions,
.ta-roster-table.ta-roster-table-dense thead th.ta-col-actions {
  text-align: center;
}
.ta-roster-table tbody td.ta-col-actions {
  text-align: center;
}
.ta-roster-table tbody td.ta-col-actions .ta-action-group {
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   TIME & ATTENDANCE — REPORT BUILDER MODAL
   Premium centered modal for generating Punch Variance Reports.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── The trigger button (filter-bar action group) ─────────────────── */
.ta-filter-group.ta-filter-group-action {
  align-self: flex-end;
}
.ta-report-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

/* ── Modal root: hidden by default ────────────────────────────────── */
.ktd-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ktd-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Lock body scroll while modal is open */
body.ktd-modal-locked {
  overflow: hidden;
}

/* ── Backdrop ─────────────────────────────────────────────────────── */
.ktd-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

/* ── Modal card ───────────────────────────────────────────────────── */
.ktd-modal-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  background: #ffffff;
  border-radius: 16px;
  box-shadow:
    0 32px 80px -20px rgba(15, 23, 42, 0.35),
    0 12px 32px -8px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(226, 232, 240, 0.9);
  /* overflow: visible so the multi-select dropdown can float OUTSIDE
     the modal card without being clipped. */
  overflow: visible;
  display: flex;
  flex-direction: column;
  transform: translateY(12px) scale(0.96);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ktd-modal.is-open .ktd-modal-card {
  transform: translateY(0) scale(1);
}

/* ── Header ───────────────────────────────────────────────────────── */
.ktd-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 24px 18px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5ff 100%);
  border-bottom: 1px solid rgba(226, 232, 240, 0.7);
}
.ktd-modal-header-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -2px rgba(124, 58, 237, 0.35);
}
.ktd-modal-header-text {
  flex: 1;
  min-width: 0;
}
.ktd-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0;
}
.ktd-modal-sub {
  font-size: 12.5px;
  color: #64748b;
  margin: 4px 0 0;
  line-height: 1.4;
}
.ktd-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: none;
  background: rgba(255, 255, 255, 0.6);
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.ktd-modal-close:hover {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

/* ── Body / form rows ─────────────────────────────────────────────── */
.ktd-modal-body {
  padding: 22px 24px;
  /* overflow visible so an absolutely-positioned multi-select menu
     can escape the body and float above the card. */
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ktd-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ktd-form-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #334155;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.ktd-form-hint {
  font-size: 11.5px;
  color: #94a3b8;
  margin: 2px 0 0;
  line-height: 1.4;
}

/* ── Custom date-range fields (revealed when Timeframe = "custom") ── */
.ktd-date-range {
  /* The "row" wrapping the From/To grid — no extra label of its own */
  margin-top: -4px;
}
.ktd-date-range-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ktd-date-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ktd-form-date {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;                 /* cloud-soft corners */
  font-family: inherit;
  font-size: 13.5px;
  color: #0f172a;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.14s, box-shadow 0.14s, background 0.12s;
}
.ktd-form-date:hover {
  border-color: #cbd5e1;
  background: #fafbfc;
}
.ktd-form-date:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
  background: #ffffff;
}
.ktd-form-date::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.12s;
}
.ktd-form-date:hover::-webkit-calendar-picker-indicator,
.ktd-form-date:focus::-webkit-calendar-picker-indicator {
  opacity: 0.85;
}

/* ── Footer ───────────────────────────────────────────────────────── */
.ktd-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px 20px;
  background: #fafbfc;
  border-top: 1px solid rgba(226, 232, 240, 0.7);
}
.ktd-modal-submit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .ktd-modal { padding: 12px; }
  .ktd-modal-header { padding: 18px 18px 14px; gap: 12px; }
  .ktd-modal-header-icon { width: 34px; height: 34px; border-radius: 10px; }
  .ktd-modal-title { font-size: 15.5px; }
  .ktd-modal-body { padding: 18px; gap: 16px; }
  .ktd-modal-footer { padding: 14px 18px 16px; flex-wrap: wrap; }
  .ktd-modal-footer .btn-ghost,
  .ktd-modal-footer .btn-primary { flex: 1; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────────
   .ta-multi inside the modal — pill trigger + cloud menu.
   The base trigger rules in styles.css are scoped to .ta-filter-bar-compact,
   so the modal needs its own scoped copy.
   ───────────────────────────────────────────────────────────────────── */
.ktd-modal .ta-multi {
  position: relative;
  width: 100%;
}
.ktd-modal .ta-multi-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: 40px;
  padding: 0 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;            /* same pill aesthetic as the bar */
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: #0f172a;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.14s, background 0.12s, box-shadow 0.18s;
}
.ktd-modal .ta-multi-trigger:hover {
  border-color: #cbd5e1;
  background: #fafbfc;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.ktd-modal .ta-multi.is-open .ta-multi-trigger {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
  background: #ffffff;
}
/* The label fills the available width; the chevron stays on the right */
.ktd-modal .ta-multi-trigger .ta-multi-label { flex: 1; }
.ktd-modal .ta-multi.has-partial .ta-multi-label { color: #2563eb; }
.ktd-modal .ta-multi.is-open .ta-multi-caret {
  transform: rotate(180deg);
  color: #2563eb;
}

/* Menu floats above the modal card. The menu's own z-index (9999) already
   beats anything else inside the modal card, and overflow:visible on the
   modal-card + body lets the menu visually escape downward. */
.ktd-modal .ta-multi-menu {
  z-index: 10001;          /* above the modal root (10000) for safety */
  min-width: 100%;
  max-width: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   TIME & ATTENDANCE — SINGLE-LINE COMPACT CONTROL BAR
   - Tighten page-header → filter-bar → table vertical rhythm
   - Force the filter bar onto one row (no wrap)
   - Compact controls: 30px tall, 12-13px font
   - Multi-select dropdowns styled as buttons
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tighten vertical rhythm (kill the dead space) ────────────────── */
/* .page-header-compact is now folded into the base .page-header (single shared
   header). Kept as a no-op alias so existing markup that carries the class is
   harmless and nothing drifts. */

/* Filter bar sits flush under the header */
/* Children keep their natural width — the bar itself scrolls horizontally
   (matches the old .control-bar behavior; scorecard adopted this bar). */
/* Roster panel slides up — no extra top gap */
.ta-roster-panel.ta-roster-panel-dense {
  margin: 0 var(--space-8) var(--space-5);
}
.ta-roster-panel.ta-roster-panel-dense > .panel-header {
  padding-top: 12px;
  padding-bottom: 10px;
}

/* Bar wraps naturally below 1100px — no override needed */

/* ── Generic control "chip" used by date/shift/variance ───────────── */
.ta-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  color: #0f172a;
  white-space: nowrap;
  flex-shrink: 0;
}
.ta-ctrl-prefix,
.ta-ctrl-suffix {
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Date stepper */
.ta-ctrl-date { gap: 2px; padding: 0 4px 0 4px; }
.ta-ctrl-nav {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.ta-ctrl-nav:hover { background: #f1f5f9; color: #0f172a; }
.ta-ctrl-date-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 4px;
  font-weight: 600;
  color: #0f172a;
}
.ta-ctrl-date-text svg { color: #94a3b8; }
.ta-ctrl-today {
  height: 22px;
  padding: 0 8px;
  margin-left: 2px;
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.ta-ctrl-today:hover { background: #e0e7ff; }

/* Variance chip — compact "Variance ⓘ [ − 7 + ]" layout */
.ta-ctrl-variance {
  padding: 0 4px 0 12px;
  gap: 8px;
}

/* The little ⓘ tooltip next to the "Variance" label */
.ta-ctrl-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  font-size: 9.5px;
  font-weight: 700;
  cursor: help;
  transition: background 0.12s, color 0.12s;
}
.ta-ctrl-help:hover,
.ta-ctrl-help:focus-visible {
  background: #cbd5e1;
  color: #0f172a;
  outline: none;
}

/* Stepper wrapper — fills the chip height so the +/- buttons are tall
   enough to feel clickable and line up with neighboring controls. */
.ta-ctrl-stepper {
  display: inline-flex;
  align-items: stretch;
  align-self: stretch;
  height: 34px;
  margin: -1px -5px -1px 0; /* negative right margin so the stepper kisses the chip's right edge */
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.ta-ctrl-stepper input {
  width: 36px;
  border: none;
  background: transparent;
  text-align: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  outline: none;
  padding: 0;
  -moz-appearance: textfield;
}
.ta-ctrl-stepper input::-webkit-outer-spin-button,
.ta-ctrl-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* +/- buttons — stretch to fill the wrapper's full height */
.ta-ctrl-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: auto;
  align-self: stretch;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.12s, color 0.12s;
  padding: 0;
}
.ta-ctrl-step:hover { background: #e2e8f0; color: #0f172a; }
.ta-ctrl-step:first-child { border-right: 1px solid #e2e8f0; }
.ta-ctrl-step:last-child  { border-left:  1px solid #e2e8f0; }

/* Spacer pushes the Reports button to the far right */
.ta-ctrl-spacer { flex: 1 1 auto; min-width: 8px; }

/* Compact Reports button override */
.ta-report-btn-compact {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: 8px;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Multi-select dropdown (Facility, Position) ───────────────────── */
.ta-multi {
  position: relative;
  flex-shrink: 0;
}
/* Pill-shaped dropdown toggle — fully rounded "cloud" trigger */
.ta-multi-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 16px 0 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.12s, background 0.12s, box-shadow 0.18s, transform 0.06s;
}
.ta-multi-trigger:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.ta-multi-trigger:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}
.ta-multi.is-open .ta-multi-trigger {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
  background: #ffffff;
}
.ta-multi-icon { color: #64748b; flex-shrink: 0; }
.ta-multi-caret { color: #94a3b8; flex-shrink: 0; transition: transform 0.18s; }

/* ── Sitewide "disabled filter — awaits canonical store" pattern ─────────────
   ONE intentional treatment everywhere: a greyed, inert .ta-multi paired with a
   dashed .dp-backend-flag chip. Used on pages whose data has no real per-X split
   yet (per-facility / per-region / per-period). These controls go live with the
   canonical data store (backend slice 2/3). Honest placeholder, never mocked. */
.ta-multi.is-disabled .ta-multi-trigger,
.ta-multi.is-loading .ta-multi-trigger {
  cursor: not-allowed;
  pointer-events: none;
  background: var(--slate-50, #f8fafc);
  color: var(--text-tertiary, #94a3b8);
}
.ta-multi.is-disabled .ta-multi-icon,
.ta-multi.is-disabled .ta-multi-caret,
.ta-multi.is-loading .ta-multi-icon,
.ta-multi.is-loading .ta-multi-caret { opacity: 0.5; }
.dp-backend-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary, #94a3b8);
  padding: 4px 9px;
  border: 1px dashed var(--slate-300, #cbd5e1);
  border-radius: var(--radius-pill, 999px);
  cursor: default;
}
.dp-backend-flag svg { opacity: 0.85; flex-shrink: 0; }
.ta-multi.is-open .ta-multi-caret { transform: rotate(180deg); color: var(--accent-500); }
.ta-multi.has-partial .ta-multi-label,
.ta-multi.is-partial .ta-multi-label {
  color: #2563eb;
}

/* Cloud-style floating menu — heavily rounded, borderless, diffuse shadow.
   In the modal it uses absolute positioning (modal-card has overflow:visible).
   In the filter bar it's overridden to position:fixed via the rule below,
   because the filter bar's overflow-x:auto would otherwise clip the menu. */
.ta-multi-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 280px;
  max-width: 340px;
  max-height: 360px;
  overflow-y: auto;
  background: #ffffff;
  border: none;                              /* no harsh outline */
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-cloud);
  padding: 10px;
  z-index: 9999;                             /* float above everything */
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: normal;
}
.ta-multi.is-open .ta-multi-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Filter-bar dropdowns: position:fixed so they escape the bar's overflow.
   JS sets top/left from the trigger's bounding rect on open + on scroll/resize. */
.filters-bar .ta-multi-menu,
.ta-filter-bar .ta-multi-menu,
.control-bar .ta-multi-menu {
  position: fixed;
  top: 0;
  left: 0;
}

.ta-multi-menu-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 10px;
  border-bottom: 1px solid #f1f5f9;        /* very soft divider */
  margin-bottom: 6px;
}
.ta-multi-menu-title {
  flex: 1;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
}
.ta-multi-count {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ta-multi-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 2px 4px 7px;
  padding: 7px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--slate-50);
  color: var(--text-tertiary);
}
.ta-multi-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
}
.ta-multi-menu-action {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: #2563eb;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 999px;                    /* match the cloud aesthetic */
  transition: background 0.12s;
}
.ta-multi-menu-action:hover { background: #eef2ff; }

/* Rounded, comfortably-padded list items */
.ta-multi-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;                       /* roomier than before */
  border-radius: 10px;                     /* softer rounded hover */
  font-size: 13px;
  color: #0f172a;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.ta-multi-option:hover {
  background: #f1f5ff;                     /* light blue tint on hover */
  color: #1e293b;
}
.ta-multi-option:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: -2px;
  background: var(--accent-50);
}
.ta-multi-option[hidden] { display: none; }

/* ── Single-select variant (data-single="true") ──────────────────────
   - Hide the radio input (uses the option click to drive selection)
   - Selected option gets a soft blue tint + a checkmark on the right */
.ta-multi[data-single="true"] .ta-multi-option {
  padding-right: 34px;                     /* room for the checkmark */
  position: relative;
}
.ta-multi[data-single="true"] .ta-multi-option input[type="radio"] {
  /* Visually hidden but still focusable for accessibility */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.ta-multi[data-single="true"] .ta-multi-option:has(input:checked) {
  background: #eef4ff;
  color: #1d4ed8;
  font-weight: 600;
}
.ta-multi[data-single="true"] .ta-multi-option:has(input:checked)::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%231d4ed8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7L6 10L11 4'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}
/* Keyboard focus ring still works on the (visually-hidden) radio */
.ta-multi[data-single="true"] .ta-multi-option:has(input:focus-visible) {
  outline: 2px solid rgba(37, 99, 235, 0.4);
  outline-offset: -2px;
}
.ta-multi-option input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 4px;
  background: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
}
.ta-multi-option input[type=checkbox]:checked {
  background: #2563eb;
  border-color: #2563eb;
}
.ta-multi-option input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L4 7L8 3'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}
.ta-multi-option-text { line-height: 1.3; }

/* ── Compact quick-filter pills ───────────────────────────────────── */
.ta-pills.ta-pills-compact {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}
.ta-pills-compact .ta-pill {
  height: 30px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 7px;
  gap: 5px;
}
.ta-pills-compact .ta-pill-count {
  font-size: 10.5px;
  padding: 1px 5px;
}

/* ── Mobile fallback (very narrow) ───────────────────────────────── */
@media (max-width: 720px) {
  .ta-roster-panel.ta-roster-panel-dense { margin: 0 var(--space-5) var(--space-4); }
}

/* ═══════════════════════════════════════════════════════════════════════
   TIME & ATTENDANCE — NEW POSITION COLUMN + CSS GRID LAYOUT
   The <tr>s become CSS grids so column widths are explicit, balanced,
   and consistent between thead and tbody.
   Column order:
     Employee | Position | Scheduled | In-Punch | Out-Punch | Variance | Impact | Actions
   ═══════════════════════════════════════════════════════════════════════ */

/* Standard <table> rendering — no display:grid, no fixed column widths.
   Let the browser auto-size columns based on content for natural fit. */
.ta-roster-table.ta-roster-table-dense {
  table-layout: auto;
  min-width: 1240px;
  border-collapse: collapse;
}

/* Center-align Variance + Actions (text-align inherits to th and td) */
.ta-roster-table.ta-roster-table-dense .ta-col-variance,
.ta-roster-table.ta-roster-table-dense .ta-col-actions {
  text-align: center;
}
.ta-roster-table.ta-roster-table-dense tbody td.ta-col-variance .ta-var-stack {
  justify-content: center;
}

/* Body cells — more vertical breathing room + softer row borders */
.ta-roster-table.ta-roster-table-dense tbody td {
  padding: 13px 14px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;  /* slate-100 — much lighter than slate-200 */
}

/* Override the legacy .ta-row border so the soft tone wins everywhere */
.ta-roster-panel-dense .ta-row {
  border-bottom-color: #f1f5f9;
}

/* Last row: no border so the panel edge isn't doubled */
.ta-roster-table.ta-roster-table-dense tbody tr:last-child > td {
  border-bottom: none;
}

/* Header underline can stay slightly stronger to anchor the table top */
.ta-roster-table.ta-roster-table-dense thead th {
  border-bottom: 1px solid #e2e8f0;
  padding: 10px 14px;
}

/* ── Text alignment per column ───────────────────────────────────── */
/* Default: text left-aligned (already the table default). */
/* Variance: center the badges so they read as numeric pills. */
.ta-roster-table.ta-roster-table-dense thead th.ta-col-variance,
.ta-roster-table.ta-roster-table-dense tbody td.ta-col-variance {
  text-align: center;
}
.ta-roster-table.ta-roster-table-dense tbody td.ta-col-variance .ta-var-stack {
  justify-content: center;
}
/* Times can stay left so the IN/OUT pill + geo dot read naturally. */

/* ── New Position column ─────────────────────────────────────────── */
.ta-pos-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.ta-pos-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
  background: #f1f5f9;
  color: #475569;
  box-shadow: inset 0 0 0 1px #e2e8f0;
  white-space: nowrap;
}
.ta-pos-detail {
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Color-coded position pills — faster scanning for clinical roles */
.ta-pos-badge.ta-pos-rn {
  background: #eef4ff;
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px #c7d2fe;
}
.ta-pos-badge.ta-pos-lpn {
  background: #f3e8ff;
  color: #6d28d9;
  box-shadow: inset 0 0 0 1px #ddd6fe;
}
.ta-pos-badge.ta-pos-cna {
  background: #fef3c7;
  color: #92400e;
  box-shadow: inset 0 0 0 1px #fde68a;
}
.ta-pos-badge.ta-pos-ma {
  background: #ecfeff;
  color: #155e75;
  box-shadow: inset 0 0 0 1px #a5f3fc;
}
.ta-pos-badge.ta-pos-dietary {
  background: #ecfdf5;
  color: #047857;
  box-shadow: inset 0 0 0 1px #a7f3d0;
}

/* Employee cell: name no longer carries the role — surface the staff ID
   as a quiet sub-line so the cell still has two lines and stays visually
   balanced with the rest of the row. */
/* Employee meta line — facility · ID on a single row beneath the name */
.ta-emp-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 500;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  line-height: 1.2;
}
.ta-emp-meta .ta-emp-facility,
.ta-emp-meta .ta-emp-id {
  /* Inherit the meta line's compact style — no per-span overrides */
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.ta-emp-meta .ta-emp-id {
  font-variant-numeric: tabular-nums;
}
.ta-emp-meta-sep {
  color: #cbd5e1;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════
   TIME & ATTENDANCE — CLOUD DATE CONTROL
   - Segmented pill: [‹ prev] [📅 Thu, Feb 13, 2026 ▾] [next ›]
   - Standalone "Today" pill next to it
   - Hidden <input type="date"> backs the trigger; the browser's native
     calendar picker pops up anchored to the input's position, so it
     escapes overflow/z-index rules automatically.
   ═══════════════════════════════════════════════════════════════════════ */

.ta-date-control {
  position: relative;       /* anchor for the hidden input */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Clean — no outer frame, no shadow, no focus ring on the container.
   Each segment has its own subtle hover, but the date control sits
   inline with the rest of the bar without a visible box around it. */
.ta-date-stepper {
  display: inline-flex;
  align-items: stretch;
  height: 34px;
  background: transparent;
  border: none;
  border-radius: 999px;
  overflow: visible;
  box-shadow: none;
}

/* The ‹ / › step buttons — circular hover, no fixed background */
.ta-date-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.ta-date-step:hover { background: #f1f5f9; color: #0f172a; }
.ta-date-step:focus-visible {
  outline: none;
  background: #eef2ff;
  color: #1d4ed8;
}

/* The clickable date trigger — clean inline label, no segment dividers */
.ta-date-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.ta-date-trigger:hover { background: #f1f5f9; }
.ta-date-trigger:focus-visible {
  outline: none;
  background: #eef2ff;
}
.ta-date-cal-icon { color: #64748b; flex-shrink: 0; }
.ta-date-caret    { color: #94a3b8; flex-shrink: 0; transition: color 0.12s; }
.ta-date-trigger:hover .ta-date-caret,
.ta-date-trigger:focus-visible .ta-date-caret { color: #2563eb; }

/* Standalone "Today" pill — distinct from the stepper */
.ta-date-today {
  height: 34px;
  padding: 0 16px;
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(67, 56, 202, 0.06);
  transition: background 0.12s, box-shadow 0.18s, transform 0.06s;
}
.ta-date-today:hover {
  background: #e0e7ff;
  box-shadow: 0 2px 6px rgba(67, 56, 202, 0.18);
}
.ta-date-today:active { transform: translateY(0.5px); }
.ta-date-today:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.22),
              0 2px 6px rgba(67, 56, 202, 0.18);
}

/* Hidden native <input type="date"> — visually invisible but kept on
   the DOM so .showPicker() can anchor the OS calendar to its position.
   We tuck it directly under the trigger so the picker pops up below the
   pill, where the user expects it. */
.ta-date-hidden-input {
  position: absolute;
  top: 100%;
  left: 35px;          /* aligned with the date trigger (after the prev step) */
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;       /* in case the browser puts the picker inline */
}

/* ═══════════════════════════════════════════════════════════════════════
   TIME & ATTENDANCE — TABLE TOOLBAR (metric badges + icon-only export)
   Title block on the LEFT · metrics + export icon group on the RIGHT.
   ═══════════════════════════════════════════════════════════════════════ */

.ta-roster-panel-dense .panel-header.ta-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
/* Title block can shrink/elide; actions hold their natural size */
.ta-roster-panel-dense .panel-header.ta-toolbar > div:first-child {
  flex: 1 1 auto;
  min-width: 0;          /* allow text to truncate inside flex */
}

/* Right-side group: metrics + export icon, vertically centred.
   flex-shrink: 0 so they don't get squeezed into nothing by the title. */
.ta-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ── Unified metrics strip — 4 segments in a single pill ─────────── */
.ta-toolbar-metrics {
  display: inline-flex;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;                      /* clips dividers cleanly */
  white-space: nowrap;
}

/* Each data segment */
.ta-metric-seg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  position: relative;
}
/* 1px vertical divider between every pair of segments */
.ta-metric-seg + .ta-metric-seg {
  border-left: 1px solid #e2e8f0;
}

/* Status dot — red for short-staffing risk, amber for OT risk */
.ta-metric-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ta-metric-dot-danger {
  background: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
}
.ta-metric-dot-warn {
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.14);
}

/* Stacked label + value */
.ta-metric-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.ta-metric-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
}
.ta-metric-value {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* ── Icon-only export button ─────────────────────────────────────── */
.ta-export-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #475569;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.12s, background 0.12s, color 0.12s, box-shadow 0.18s;
}
.ta-export-icon-btn:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.ta-export-icon-btn:focus-visible {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

/* Narrow viewports: actions can wrap to a new row below the title, but
   keep their natural width so badges + button stay legible. */
@media (max-width: 720px) {
  .ta-toolbar-actions { justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ACTIONS COLUMN — primary review button + "..." menu
   Read-only auditing affordance; turns green when clicked to simulate
   an admin signing off on the row.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Primary action button ───────────────────────────────────────── */
.ta-primary-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s, border-color 0.14s, color 0.14s, box-shadow 0.18s;
}
.ta-primary-action:hover {
  border-color: #94a3b8;
  background: #f8fafc;
  color: #0f172a;
}
.ta-primary-action:focus-visible {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.ta-primary-action-icon {
  display: inline-flex;
  align-items: center;
}

/* Acknowledge-Gap variant — slightly amber-tinted hover */
.ta-primary-action.ta-primary-acknowledge:hover {
  border-color: #fcd34d;
  background: #fffbeb;
  color: #92400e;
}

/* ── Reviewed (post-click) state — green ─────────────────────────
   Each property is a longhand with !important so no shorthand-parsing
   quirk can drop these declarations. */
.ta-primary-action.is-reviewed {
  background-color: #dcfce7 !important;
  border-color: #86efac !important;
  color: #15803d !important;
  cursor: default;
  box-shadow: none;
}
.ta-primary-action.is-reviewed:hover {
  background-color: #dcfce7 !important;
  border-color: #86efac !important;
  color: #15803d !important;
}
.ta-primary-action.is-reviewed .ta-primary-action-icon {
  color: #16a34a !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TIMESHEET MODAL — wide centered viewer with a dense 14-day grid
   ═══════════════════════════════════════════════════════════════════════ */

/* Wide variant — overrides the default 520px max-width */
.ktd-modal.ktd-modal-wide .ktd-modal-card {
  max-width: 920px;
  max-height: calc(100vh - 48px);
}

/* Body becomes a scrollable region so 14 rows always fit */
.ktd-modal.ktd-modal-wide .ktd-modal-body.ktd-modal-body-table {
  padding: 0;                  /* table extends edge-to-edge */
  display: block;
  overflow-y: auto;
  overflow-x: auto;
  max-height: 62vh;
}

/* ── Dense timesheet table ───────────────────────────────────────── */
.ktd-timesheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.ktd-timesheet-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}
.ktd-timesheet-table thead th {
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  text-align: left;
  white-space: nowrap;
}
.ktd-timesheet-table tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid #f1f5f9;     /* soft row dividers */
  color: #0f172a;
  white-space: nowrap;
  vertical-align: middle;
}
.ktd-timesheet-table tbody tr:last-child td {
  border-bottom: none;
}
.ktd-timesheet-table tbody tr:hover {
  background: #f8fafc;
}

/* Day-off rows fade out */
.ktd-ts-row-off td { color: #94a3b8; }

/* No-show rows tinted */
.ktd-ts-row-miss { background: rgba(239, 68, 68, 0.04); }
.ktd-ts-row-miss:hover { background: rgba(239, 68, 68, 0.07); }

/* Date column slightly stronger */
.ktd-ts-date { font-weight: 600; color: #0f172a; }

/* Variance value colors (inline) */
.ktd-ts-var-late   { color: #dc2626; font-weight: 600; }
.ktd-ts-var-early  { color: #d97706; font-weight: 600; }
.ktd-ts-var-ontime { color: #64748b; }

/* Status pill */
.ktd-ts-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.ktd-ts-status-ok    { background: #dcfce7; color: #15803d; }
.ktd-ts-status-late  { background: #fee2e2; color: #b91c1c; }
.ktd-ts-status-early { background: #fef3c7; color: #92400e; }
.ktd-ts-status-off   { background: #f1f5f9; color: #94a3b8; }
.ktd-ts-status-miss  { background: #fee2e2; color: #b91c1c; font-weight: 700; }

/* Footer aligned right, single Close action */
.ktd-modal.ktd-modal-wide .ktd-modal-footer {
  justify-content: flex-end;
}

/* Responsive — collapse table padding on narrow viewports */
@media (max-width: 720px) {
  .ktd-modal.ktd-modal-wide .ktd-modal-card { max-width: calc(100vw - 24px); }
  .ktd-timesheet-table thead th,
  .ktd-timesheet-table tbody td { padding: 8px 10px; font-size: 12px; }
  .ktd-modal.ktd-modal-wide .ktd-modal-body.ktd-modal-body-table { max-height: 70vh; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MANAGER NOTE MODAL — narrow, focused note-taking form
   + persistent "📝 Note Added" row badge
   ═══════════════════════════════════════════════════════════════════════ */

/* Narrow modal variant — even tighter than the default 520px */
.ktd-modal.ktd-modal-narrow .ktd-modal-card {
  max-width: 460px;
}

/* Textarea — full-width, comfortable, focus ring matches the dropdown style */
.ktd-form-textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  color: #0f172a;
  resize: vertical;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.14s, box-shadow 0.14s;
}
.ktd-form-textarea::placeholder {
  color: #94a3b8;
}
.ktd-form-textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

/* Visibility hint under the textarea */
.ktd-form-visibility {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 11.5px;
  color: #94a3b8;
  font-style: italic;
}
.ktd-form-visibility svg {
  flex-shrink: 0;
  color: #94a3b8;
}

/* Save button — full primary affordance, matches the report modal's "Generate CSV" */
.ktd-note-save {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* ── Row badge — appears on the employee's name after a note is saved ── */
.ta-note-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 7px 1px 6px;
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  color: #4338ca;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(67, 56, 202, 0.18);
  cursor: help;
  vertical-align: middle;
  white-space: nowrap;
}
.ta-note-badge-icon {
  font-size: 9px;
  line-height: 1;
}
.ta-note-badge-text {
  font-size: 9.5px;
}

/* ═══════════════════════════════════════════════════════════════════════
   UNEXCUSED FLAG BADGE — critical alert pill in the Impact column
   Highly visible so HR/DON can scan a long table and spot the flagged
   rows immediately.
   ═══════════════════════════════════════════════════════════════════════ */
.ta-badge-unexcused {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: help;
  vertical-align: middle;
  box-shadow: 0 1px 2px rgba(185, 28, 28, 0.08);
}
/* Status-dot prefix — the "I'm alarming you" cue */
.ta-badge-unexcused::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   STRICT COLUMN CENTERING — utility used by the Variance column
   Applied to both <th class="ta-center-col"> and <td class="ta-center-col">.
   !important locks out any earlier cascade rule (e.g. table-layout defaults
   or roster-table overrides) that was leaving the column left-aligned.
   ═══════════════════════════════════════════════════════════════════════ */
.ta-center-col,
th.ta-center-col,
td.ta-center-col {
  text-align: center !important;
}

/* Any flex container inside a centered cell must also center its own content,
   so badge stacks don't drift to the left edge of the cell. */
.ta-center-col > * {
  margin-left: auto;
  margin-right: auto;
}
.ta-center-col .ta-var-stack,
td.ta-center-col .ta-var-stack {
  display: flex;
  justify-content: center !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
/* The sort-icon wrapper inside a centered <th> also re-centers */
th.ta-center-col .ta-th-inner {
  justify-content: center;
}
/* ══════════════════════════════════════════════════════════════════════
   23. APP-SHELL ADDITIONS  ·  Cloud UI primitives not covered by §1–22
   ──────────────────────────────────────────────────────────────────────
   Only selectors MISSING from §1–22 are kept here. Duplicate re-declarations
   of existing classes (tokens, reset, .sidebar, .topbar, .kpi-card, .panel,
   .mx-* matrix, .fa-heat* heatmap, buttons, .status-pill, page header, …)
   were removed so the appended block can't override §1–22 via the cascade.
   Consumed by facility-details / payroll-audit / payroll-scorecard + shell.
   ══════════════════════════════════════════════════════════════════════ */

/* ── App shell layout ─────────────────────────────────────────────────── */
.app-content {
  flex: 1;
  padding: var(--space-6) var(--space-8) var(--space-10);
}

/* ── Sidebar footer — user-meta (rest of the sidebar lives in §3) ─────── */
.user-meta { text-align: left; min-width: 0; }

/* ── Topbar — mobile menu toggle (hidden until the 1024px breakpoint) ─── */
.sidebar-toggle {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background var(--t-fast);
}
.sidebar-toggle:hover { background: var(--slate-100); }

/* ── Pill-shaped dropdown toggle ──────────────────────────────────────── */
.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--border-default);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.dropdown-toggle:hover {
  border-color: var(--slate-400);
  box-shadow: var(--shadow-sm);
}

/* Control-bar-only content. Shared bar geometry lives in section 7. */

.control-bar-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-right: var(--space-1);
}

.control-bar-divider {
  width: 1px;
  height: 24px;
  background: var(--border-subtle);
  margin: 0 var(--space-1);
}

.control-bar-spacer { flex: 1 0 var(--space-4); min-width: var(--space-4); }


/* ══════════════════════════════════════════════════════════════════════
   4-TIER METRICS STRIP  ·  Early In · Early Out · Late In · Late Out
   ══════════════════════════════════════════════════════════════════════ */
.metrics-strip {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 4px;
  box-shadow: var(--shadow-xs);
}

.metric-tier {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: background var(--t-fast);
}
.metric-tier + .metric-tier { border-left: 1px solid var(--border-subtle); border-radius: 0; }
.metric-tier:last-child  { border-top-right-radius: var(--radius-pill); border-bottom-right-radius: var(--radius-pill); }
.metric-tier:first-child { border-top-left-radius:  var(--radius-pill); border-bottom-left-radius:  var(--radius-pill); }

.metric-tier .mt-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.04);
}

.metric-tier .mt-label {
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: -0.005em;
}

.metric-tier .mt-value {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Semantic tones — Red (problem) / Yellow (caution) / Neutral */
.mt-warn  .mt-dot { background: var(--warning-500); }
.mt-warn  .mt-value { color: var(--warning-700); }

.mt-bad   .mt-dot { background: var(--danger-500); }
.mt-bad   .mt-value { color: var(--danger-700); }

.mt-ok    .mt-dot { background: var(--slate-300); }


/* ── KPI grid columns + tone variants (base .kpi-* live in §8) ────────── */
.kpi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.kpi-foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--text-tertiary);
}

.kpi-delta-good { background: var(--success-50); color: var(--success-700); }
.kpi-delta-bad  { background: var(--danger-50);  color: var(--danger-700); }
.kpi-delta-warn { background: var(--warning-50); color: var(--warning-700); }
.kpi-delta-neutral { background: var(--slate-100); color: var(--text-secondary); }

/* Tone variants — left accent stripe */
.kpi-card-danger  { box-shadow: var(--shadow-cloud), inset 4px 0 0 0 var(--danger-500); }
.kpi-card-warning { box-shadow: var(--shadow-cloud), inset 4px 0 0 0 var(--warning-500); }
.kpi-card-success { box-shadow: var(--shadow-cloud), inset 4px 0 0 0 var(--success-500); }
.kpi-card-accent  { box-shadow: var(--shadow-cloud), inset 4px 0 0 0 var(--accent-500); }


/* ── Section heading + 2-col split ────────────────────────────────────── */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-8) 0 var(--space-4);
}
.section-head:first-child { margin-top: 0; }
.section-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
}
.section-sub {
  font-size: 12.5px;
  color: var(--text-tertiary);
}

.split-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
}

/* ── Panel head (compact header variant; §9 owns .panel / .panel-header) ─ */
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* ── Chart canvas wrapper + legend extras (base .chart-legend in §1–22) ── */
.chart-wrap {
  position: relative;
  width: 100%;
  height: 280px;
}
.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--text-secondary);
}
.chart-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ── Ranked list (Top OT Earners, etc.) ───────────────────────────────── */
.rank-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 calc(var(--space-2) * -1);
}
.rank-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: 10px var(--space-2);
  border-radius: var(--radius-md);
  transition: background var(--t-fast);
}
.rank-item + .rank-item { border-top: 1px solid var(--border-subtle); border-radius: 0; }
.rank-item:hover { background: var(--slate-50); }

.rank-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--slate-100);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.rank-item:nth-child(1) .rank-num { background: var(--warning-100); color: var(--warning-700); }
.rank-item:nth-child(2) .rank-num { background: var(--slate-200);   color: var(--slate-700); }
.rank-item:nth-child(3) .rank-num { background: #fed7aa;            color: #9a3412; }

.rank-meta { min-width: 0; }
.rank-name { font-weight: 600; font-size: 13px; color: var(--text-primary); line-height: 1.2; }
.rank-sub  { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }

.rank-value {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.rank-value-sub {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-align: right;
  margin-top: 2px;
}


/* ══════════════════════════════════════════════════════════════════════
   DATA TABLE  ·  standard HTML grid (sortable)
   ══════════════════════════════════════════════════════════════════════ */
.table-wrap {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-cloud);
  overflow: hidden;
}

.table-scroll { overflow-x: auto; }
/* Cloud-style horizontal scrollbar for the expand-layer matrices. The table is
   wider than the card on narrow viewports, so a default scrollbar parks a heavy
   grey band across the card bottom. Instead: a thin pill thumb on a transparent
   track that stays hidden at rest and reveals only while the table is hovered —
   no layout shift (the 10px gutter is always reserved, just transparent). */
.table-scroll { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.table-scroll:hover { scrollbar-color: var(--slate-300) transparent; }
.table-scroll::-webkit-scrollbar { height: 10px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }
.table-scroll::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  border: 3px solid transparent;   /* insets the visible thumb to ~4px */
  background-clip: padding-box;
}
.table-scroll:hover::-webkit-scrollbar-thumb { background: var(--slate-300); background-clip: padding-box; }
.table-scroll::-webkit-scrollbar-thumb:hover,
.table-scroll::-webkit-scrollbar-thumb:active { background: var(--slate-400); background-clip: padding-box; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead th {
  background: var(--slate-50);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
  user-select: none;
}

.data-table tbody td {
  padding: 14px var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background var(--t-fast); }
.data-table tbody tr:hover { background: var(--slate-50); }

/* Sortable headers */
.data-table th.is-sortable {
  cursor: pointer;
  transition: color var(--t-fast);
}
.data-table th.is-sortable:hover { color: var(--text-primary); }
.data-table th.is-sortable::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  margin-left: 6px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--slate-300);
  opacity: 0.5;
}
.data-table th.is-sorted-asc::after {
  border-top: none;
  border-bottom: 4px solid var(--accent-600);
  opacity: 1;
}
.data-table th.is-sorted-desc::after {
  border-top: 4px solid var(--accent-600);
  opacity: 1;
}
.data-table th.is-sorted-asc,
.data-table th.is-sorted-desc { color: var(--accent-700); }

/* Employee cell */
.emp-cell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.emp-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-500), var(--accent-700));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.emp-meta { min-width: 0; }
.emp-name { font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.emp-sub  { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }

.punch-cell { font-variant-numeric: tabular-nums; font-weight: 500; }


/* ══════════════════════════════════════════════════════════════════════
   ROW ACTIONS  ·  primary button + "..." menu (event-delegated)
   ══════════════════════════════════════════════════════════════════════ */
.row-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Primary "Review Variance" — pill */
.btn-review {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--border-default);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), box-shadow var(--t-fast);
}
.btn-review:hover {
  border-color: var(--accent-500);
  color: var(--accent-700);
  box-shadow: var(--shadow-sm);
}
.btn-review .br-icon { color: var(--text-tertiary); transition: color var(--t-fast); }
.btn-review:hover .br-icon { color: var(--accent-600); }

/* Reviewed state — solid green pill */
.btn-review.is-reviewed,
.btn-review.is-reviewed:hover {
  background: var(--success-50) !important;
  border-color: #86efac !important;
  color: var(--success-700) !important;
  box-shadow: none !important;
  cursor: default;
}
.btn-review.is-reviewed .br-icon { color: var(--success-600) !important; }

/* ── Utilities ────────────────────────────────────────────────────────── */
.tabular-nums { font-variant-numeric: tabular-nums; }

.scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 45;
}


/* ── Responsive — new app-shell classes only (§13 owns .sidebar/.topbar/…) ─ */
@media (max-width: 1024px) {
  .app-content { padding: var(--space-5) var(--space-5) var(--space-8); }
  .kpi-grid-4  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-grid-6  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-2     { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .app-content { padding: var(--space-4) var(--space-4) var(--space-8); }
  .kpi-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .kpi-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .kpi-grid-6 { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════
   TOPBAR UTILITIES  (datapoint-topbar.js)
   Shared global utility bar — clickable Home brand, center command/search
   pill + palette, sync/refresh, notifications, export and user menus. Built
   on existing Cloud UI tokens; no new color values.
   ══════════════════════════════════════════════════════════════════════ */

/* clickable brand → Home (keeps the visual DataP•int wordmark exactly) */
a.sidebar-brand { text-decoration: none; color: inherit; }
a.sidebar-brand--panel:hover { opacity: 0.92; }
a.sidebar-brand:focus-visible { outline: 2px solid var(--accent-500); outline-offset: -2px; }

/* Fixed-zone topbar: the breadcrumb zone and the actions zone are given the SAME
   fixed width (--dp-side), so the search pill is pinned dead-center and lands at the
   exact same x on every page — only the breadcrumb text inside the left zone changes.
   --dp-side ≥ the actions cluster's natural width (~443px) so nothing wraps. Below
   1400px the fixed zones would crush the pill, so they're released (see media query). */
:root { --dp-side: 448px; }
.dp-topbar-left { flex: 0 0 var(--dp-side); }                                          /* left: breadcrumb + workspace */
.dp-actions { flex: 0 0 var(--dp-side); justify-content: flex-end; }                    /* right: utilities */
.dp-burger { display: none; }
.dp-nav-backdrop { display: none; }
.dp-actions-placeholder {
  display: block;
  width: 132px;
  height: 36px;
  margin-left: auto;
  border-radius: var(--radius-pill);
  background: var(--slate-100);
}
.dp-action-reserved { display: block; flex: 0 0 36px; width: 36px; height: 36px; visibility: hidden; }

/* command / search pill — centered between the two equal fixed zones. It's a trigger
   button (opens the full command palette), so a compact centered width is intentional.
   max-width keeps it centered (via the topbar's space-between) on ultra-wide screens. */
.dp-search { flex: 1 1 auto; max-width: 560px; margin: 0 var(--space-4, 16px); display: inline-flex; align-items: center; gap: var(--space-2, 8px); height: 38px; padding: 0 12px; background: var(--slate-50, #f8fafc); border: 1px solid var(--border-default, #cbd5e1); border-radius: var(--radius-pill, 999px); color: var(--text-tertiary, #94a3b8); font: inherit; font-size: 13px; cursor: pointer; min-width: 0; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.dp-search-shell:disabled { cursor: wait; opacity: 1; }
.dp-search-shell-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.dp-search-shell-icon::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -2px;
  width: 5px;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  transform-origin: left center;
}
.dp-search:hover { border-color: var(--slate-400, #94a3b8); background: #fff; }
.dp-search:focus-visible { outline: none; border-color: var(--accent-500, #2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.dp-search > svg { flex-shrink: 0; color: var(--text-tertiary, #94a3b8); }
.dp-search-text { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-search-kbd { flex-shrink: 0; display: inline-flex; align-items: center; gap: 1px; font-size: 11px; font-weight: 600; color: var(--text-tertiary, #94a3b8); background: #fff; border: 1px solid var(--border-subtle, #e2e8f0); border-radius: 6px; padding: 1px 6px; }

/* Current-account (client org) label — subtle left-zone context, just after the
   breadcrumb. Reads as "whose data this is," never competes with the page title.
   Name is hydrated only from authenticated DataPointAuth state. */
.dp-org { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-width: 140px; max-width: 210px; margin-left: var(--space-3, 12px); padding: 5px 8px 5px var(--space-3, 12px); border: 1px solid transparent; border-left-color: var(--border-subtle, #e2e8f0); border-radius: var(--radius-sm); background: transparent; white-space: nowrap; font: inherit; text-align: left; }
.dp-org:disabled { cursor: default; opacity: 1; }
.dp-org:not(:disabled):focus-visible { outline: 2px solid var(--accent-500); outline-offset: 1px; }
.dp-org-icon { color: var(--text-muted, #cbd5e1); flex-shrink: 0; }
.dp-org-shell-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 1.5px solid var(--text-muted, #cbd5e1);
  border-radius: 4px;
}
.dp-org-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--text-secondary, #475569); letter-spacing: -0.005em; }
.dp-org-name-muted { color: var(--text-tertiary, #94a3b8); }
.dp-org-loading { cursor: default; }
.dp-org-logo { height: 20px; width: auto; max-width: 96px; object-fit: contain; border-radius: 3px; display: block; }
.dp-org-switch { background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer; font: inherit; transition: background var(--t-fast), border-color var(--t-fast); }
.dp-org-switch:hover { background: var(--slate-100); border-color: var(--slate-200); }
.dp-org-switch .dp-org-name { font-weight: 600; }
.dp-switch-menu { min-width: 260px; padding: 6px; }
.dp-switch-item { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; text-align: left; }
.dp-switch-item > span:not(.dp-switch-mark):not(.dp-switch-check) { min-width: 0; }
.dp-switch-item strong { display: block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-switch-item.is-active { background: var(--accent-50); }
.dp-switch-logo { height: 22px; width: 22px; object-fit: contain; border-radius: 4px; flex: none; background: #fff; border: 1px solid var(--slate-200); }
.dp-switch-mark { flex: none; width: 22px; height: 22px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; background: var(--slate-100); color: var(--slate-500); }
.dp-switch-check { margin-left: auto; color: var(--accent-600); font-weight: 800; }
.dp-kbd-mod { font-size: 12px; }

/* right-side cluster */
.dp-actions { gap: var(--space-2, 8px); }
.dp-sync { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-tertiary, #94a3b8); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dp-sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--slate-400, #94a3b8); box-shadow: 0 0 0 3px rgba(148,163,184,0.14); flex-shrink: 0; }
.dp-sync.is-ready .dp-sync-dot { background: var(--success-500, #22c55e); box-shadow: 0 0 0 3px rgba(34,197,94,0.15); }
.dp-sync.is-empty .dp-sync-dot { background: var(--slate-400, #94a3b8); }
.dp-sync.is-partial .dp-sync-dot { background: var(--warning-500, #f59e0b); box-shadow: 0 0 0 3px rgba(245,158,11,0.16); }
.dp-sync.is-error .dp-sync-dot, .dp-sync.is-forbidden .dp-sync-dot { background: var(--danger-500, #ef4444); box-shadow: 0 0 0 3px rgba(239,68,68,0.14); }
.dp-sync.is-partial .dp-sync-text { color: var(--warning-700, #b45309); font-weight: 600; }
.dp-sync.is-error .dp-sync-text, .dp-sync.is-forbidden .dp-sync-text { color: var(--danger-700, #b91c1c); font-weight: 600; }
.dp-sync.is-fresh .dp-sync-text { color: var(--success-600, #16a34a); font-weight: 600; }
.dp-icon { background: transparent; border: 0; cursor: pointer; }
.dp-export:disabled { color: var(--text-tertiary, #94a3b8); cursor: not-allowed; }
.dp-export:disabled:hover { background: transparent; color: var(--text-tertiary, #94a3b8); }
.dp-refresh.is-spinning svg { animation: dp-spin 0.7s linear infinite; }
@keyframes dp-spin { to { transform: rotate(360deg); } }
.dp-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--danger-600, #dc2626); color: #fff; font-size: 10px; font-weight: 700; line-height: 14px; text-align: center; box-shadow: 0 0 0 2px #fff; }

/* user button */
.dp-user { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 5px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-pill, 999px); cursor: pointer; font: inherit; max-width: 220px; }
.dp-user:hover { background: var(--slate-50, #f8fafc); border-color: var(--border-subtle, #e2e8f0); }
.dp-user:focus-visible { outline: 2px solid var(--accent-500, #2563eb); outline-offset: 1px; }
.dp-user-avatar { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--accent-500, #3b82f6), var(--accent-700, #1d4ed8)); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.dp-user-avatar.lg { width: 38px; height: 38px; font-size: 13px; }
.dp-user-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; text-align: left; }
.dp-user-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary, #0f172a); white-space: nowrap; }
.dp-user-role { font-size: 10.5px; color: var(--text-tertiary, #94a3b8); white-space: nowrap; }
.dp-user-email { font-size: 11px; color: var(--text-secondary, #64748b); white-space: nowrap; margin-top: 3px; }
.dp-user > svg { color: var(--text-tertiary, #94a3b8); flex-shrink: 0; }

/* dropdown menus (fixed; positioned by JS) */
.dp-menu { position: fixed; z-index: 1200; min-width: 240px; max-width: 340px; background: #fff; border: 1px solid var(--border-default, #cbd5e1); border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow-lg, 0 12px 32px rgba(15,23,42,0.16)); padding: 6px; }
.dp-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px; }
.dp-menu-head strong { font-size: 13px; color: var(--text-primary, #0f172a); }
.dp-menu-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 9px; background: transparent; border: 0; cursor: pointer; font: inherit; color: var(--text-primary, #0f172a); text-decoration: none; }
.dp-menu-item:hover { background: var(--slate-50, #f8fafc); }
.dp-menu-item > svg { flex-shrink: 0; margin-top: 1px; color: var(--text-tertiary, #94a3b8); }
.dp-menu-item strong { font-size: 13px; font-weight: 600; display: block; }
.dp-menu-sub { font-size: 11.5px; color: var(--text-tertiary, #94a3b8); }
.dp-menu-item.is-disabled { opacity: 0.55; cursor: default; }
.dp-menu-item.is-disabled:hover { background: transparent; }
.dp-menu-sep { height: 1px; background: var(--border-subtle, #e2e8f0); margin: 4px 0; }
.dp-user-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; }

/* notifications dropdown */
.dp-notif-menu { width: 340px; max-width: calc(100vw - 24px); padding: 0; }
.dp-notif-menu .dp-menu-head { padding: 12px 14px; border-bottom: 1px solid var(--border-subtle, #e2e8f0); }
.dp-notif-summary { color: var(--text-tertiary, #64748b); font-size: 11.5px; font-weight: 600; }
.dp-notif-list { max-height: 360px; overflow-y: auto; padding: 4px; }
.dp-notif-empty { cursor: default; color: var(--slate-500); font-size: 12.5px; padding: 14px 16px; }
.dp-notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 9px; text-decoration: none; }
.dp-notif-item:hover { background: var(--slate-50, #f8fafc); }
.dp-notif-item.is-status { cursor: default; }
.dp-notif-item.is-status:hover { background: transparent; }
.dp-sev { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.dp-sev-critical { background: var(--danger-500, #ef4444); }
.dp-sev-warning { background: var(--warning-500, #f59e0b); }
.dp-sev-info { background: var(--accent-500, #3b82f6); }
.dp-notif-body { min-width: 0; }
.dp-notif-title { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary, #0f172a); }
.dp-notif-meta { display: block; font-size: 11.5px; color: var(--text-tertiary, #94a3b8); margin-top: 1px; }
.dp-sev-label { text-transform: capitalize; }

/* command palette */
.dp-no-scroll { overflow: hidden; }
.dp-cmdk { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: flex-start; justify-content: center; }
.dp-cmdk-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.45); }
.dp-cmdk-panel { position: relative; margin-top: 12vh; width: 640px; max-width: calc(100vw - 24px); max-height: 72vh; background: #fff; border-radius: var(--radius-xl, 18px); box-shadow: 0 24px 64px rgba(15,23,42,0.30); display: flex; flex-direction: column; overflow: hidden; }
.dp-cmdk-search { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle, #e2e8f0); }
.dp-cmdk-search > svg { color: var(--text-tertiary, #94a3b8); flex-shrink: 0; }
.dp-cmdk-input { flex: 1; border: 0; outline: none; font: inherit; font-size: 15px; color: var(--text-primary, #0f172a); background: transparent; }
.dp-cmdk-search kbd, .dp-cmdk-foot kbd { font-size: 11px; font-weight: 600; color: var(--text-tertiary, #94a3b8); background: var(--slate-100, #f1f5f9); border: 1px solid var(--border-subtle, #e2e8f0); border-radius: 5px; padding: 1px 6px; }
.dp-cmdk-status { padding: 8px 16px; border-bottom: 1px solid var(--border-subtle, #e2e8f0); background: var(--slate-50, #f8fafc); color: var(--text-secondary, #64748b); font-size: 11.5px; line-height: 1.4; }
.dp-cmdk-status.is-partial, .dp-cmdk-status.is-error, .dp-cmdk-status.is-unavailable { background: var(--warning-50, #fffbeb); color: var(--warning-700, #b45309); }
.dp-cmdk-results { overflow-y: auto; padding: 6px; }
.dp-cmdk-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 10px; background: transparent; border: 0; cursor: pointer; font: inherit; }
.dp-cmdk-item[aria-selected="true"] { background: var(--accent-50, #eff6ff); }
.dp-cmdk-type { flex-shrink: 0; width: 66px; text-align: center; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 0; border-radius: 6px; color: #fff; }
.dp-type-page { background: var(--slate-500, #64748b); }
.dp-type-facility { background: var(--accent-600, #2563eb); }
.dp-type-employee { background: #7c3aed; }
.dp-type-payroll { background: var(--warning-600, #d97706); }
.dp-type-alert { background: var(--danger-600, #dc2626); }
.dp-cmdk-main { flex: 1; min-width: 0; }
.dp-cmdk-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-primary, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-cmdk-desc { display: block; font-size: 11.5px; color: var(--text-tertiary, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-cmdk-dest { flex-shrink: 0; font-size: 11px; color: var(--text-tertiary, #cbd5e1); font-variant-numeric: tabular-nums; }
.dp-cmdk-empty { padding: 28px 16px; text-align: center; font-size: 13px; color: var(--text-tertiary, #94a3b8); }
.dp-cmdk-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--border-subtle, #e2e8f0); font-size: 11.5px; color: var(--text-tertiary, #94a3b8); }
.dp-cmdk-foot span { display: inline-flex; align-items: center; gap: 4px; }

/* responsive — keep the bar from overflowing on small screens */
/* Below 1400px the two fixed side zones would crush the centered pill, so release
   them: breadcrumb hugs left, actions pinned right, pill fills the middle (anchored
   right). Still identical page-to-page at any given width — only the centering relaxes. */
@media (max-width: 1399px) {
  .dp-topbar-left { flex: 1 1 auto; }
  .dp-actions { flex: 0 0 auto; margin-left: auto; }
}
@media (max-width: 1100px) { .dp-search-kbd { display: none; } .dp-user-role { display: none; } }
@media (max-width: 960px) {
  :root { --topbar-h: 54px; }
  .topbar { height: 54px; min-height: 54px; padding: 7px 10px; gap: 8px; }
  .filters-bar,
  .ta-filter-bar,
  .control-bar { padding: var(--space-3) var(--space-5); }
  .filters-bar button,
  .ta-filter-bar button,
  .control-bar button,
  .filters-bar .ta-multi-trigger,
  .ta-filter-bar .ta-multi-trigger,
  .control-bar .ta-multi-trigger,
  .dp-filter-scope { min-height: 44px; }
  .dp-burger { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--slate-200); border-radius: 9px; background: #fff; color: var(--slate-600); }
  .dp-burger:active { background: var(--slate-100); }
  .dp-burger:disabled { cursor: wait; opacity: 1; }
  .dp-topbar-left { flex: 1 1 auto; max-width: 44vw; height: 44px; overflow: hidden; }
  .breadcrumb { display: none; }
  .dp-org { display: inline-flex; max-width: 100%; margin-left: 0; padding-left: 6px; border-left-color: transparent; }
  .dp-actions { flex: 0 0 auto; gap: 4px; height: 44px; margin-left: 0; }
  .dp-actions-placeholder { width: 84px; height: 36px; }
  .dp-sync, .dp-export, .dp-refresh, .dp-action-reserved { display: none; }
  .dp-search { flex: 0 0 44px; max-width: 44px; min-height: 44px; margin: 0; width: 44px; padding: 0; justify-content: center; }
  .dp-search-text { display: none; }
  .dp-user-meta { display: none; }
  .dp-user { max-width: none; min-width: 44px; min-height: 44px; padding: 4px; }
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .btn-icon,
  .dp-icon,
  .dp-menu-item,
  .nav-item,
  .nav-group > summary,
  .form-select,
  .ta-multi-option,
  .ta-multi-menu-action { min-width: 44px; min-height: 44px; }
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { min-height: 44px; }
  .dp-menu { max-width: calc(100vw - 14px); }
  .dp-switch-menu { min-width: 0; width: calc(100vw - 24px); }
  .dp-cmdk-panel { width: calc(100vw - 14px); max-width: none; }
  .dlv-panel,
  .dlo-panel,
  .dli-panel { margin-left: 12px; margin-right: 12px; padding: 14px 12px 12px; }
  .dlv-controls { margin-left: 0; width: 100%; justify-content: flex-start; }
  .dlv-kpis,
  .dlo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-banner-slot { top: 54px; left: 0; }
  .app-live-panel-slot[data-reserve="live-panel"] { min-height: 260px; }
  .app-live-panel-slot--settings[data-reserve="live-panel"]:not(.is-ready) { min-height: 350px; }
  .app-live-panel-slot--targets[data-reserve="live-panel"]:not(.is-hydrated) { min-height: 520px; }
  .app-live-panel-slot--targets:not(.is-hydrated) .dlv-panel { min-height: 496px; }
  .app-live-panel-slot[data-reserve="live-panel"]:not(.is-ready)::before { left: var(--space-4); right: var(--space-4); }
}
@media (max-width: 560px) { .dp-cmdk-panel { margin-top: 0; max-height: 100vh; height: 100%; width: 100%; max-width: 100%; border-radius: 0; } }

/* [hidden] overrides — .dp-cmdk has display:flex and .dp-menu is block; both beat the UA
   [hidden]{display:none} rule. !important restores the expected hidden-attribute behavior. */
.dp-cmdk[hidden],
.dp-menu[hidden],
.dp-badge[hidden] { display: none !important; }

/* All motion is optional. This final override covers page-local animations,
   chart transitions, the drawer, and future components without duplicating
   a media query in every route stylesheet. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}