/* =========================================================
   SEJAConSmart FINAL THEME AUTHORITY
   Semantic Light/Dark ownership only. Raw OKLCH + sRGB palette values live in
   seja-ui-primitives.css so the Web has one palette source-of-truth.
   Feature CSS owns layout/business composition, not palette meaning.
   ========================================================= */


/* Browser lifecycle restoration is a correctness state, not an interaction.
   Suppress transitions only while the canonical Theme runtime is reconciling a
   fresh/BFCache document; normal user-driven Light/Dark motion remains intact. */
html[data-seja-theme-restoring] *,
html[data-seja-theme-restoring] *::before,
html[data-seja-theme-restoring] *::after {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

/* `data-theme` is the authority. Old .light-mode remains a compatibility signal only. */
html[data-theme="dark"] { color-scheme: dark; --seja-scroll-track: #0d0c1a; --seja-scroll-thumb: #4f4a68; --seja-scroll-thumb-hover: var(--seja-brand-500); }
html[data-theme="light"] { color-scheme: light; --seja-scroll-track: #f4f1fa; --seja-scroll-thumb: #c8c1d6; --seja-scroll-thumb-hover: var(--seja-brand-600); }

html[data-theme="dark"] body {
  --primary: var(--seja-brand-600);
  --primary-dark: var(--seja-brand-700);
  --primary-2: var(--seja-brand-500);
  --accent: var(--seja-brand-600);
  --bg: var(--seja-dark-bg);
  --sidebar: var(--seja-dark-sidebar);
  --card: var(--seja-dark-card);
  --card-soft: var(--seja-dark-card-soft);
  --input: var(--seja-dark-input);
  --text: var(--seja-dark-text);
  --text-light: var(--seja-dark-text-strong);
  --muted: var(--seja-dark-muted);
  --border: var(--seja-dark-border);
  --success: var(--seja-success);
  --warning: var(--seja-warning);
  --danger: var(--seja-danger);
  --info: var(--seja-info);
  --seja-success-foreground: color-mix(in oklch, var(--success) 58%, white 42%);
  --seja-warning-foreground: color-mix(in oklch, var(--warning) 62%, white 38%);
  --seja-demo-foreground: color-mix(in oklch, var(--seja-demo) 78%, white 22%);
  --seja-demo-soft: color-mix(in srgb, var(--seja-demo) 13%, var(--surface));
  --seja-demo-border: color-mix(in srgb, var(--seja-demo) 42%, var(--border));
  --seja-danger-foreground: color-mix(in oklch, var(--danger) 60%, white 40%);
  --seja-info-foreground: color-mix(in oklch, var(--info) 62%, white 38%);
  --seja-primary-icon-foreground: color-mix(in oklch, var(--primary) 58%, white 42%);
  --seja-on-primary: #ffffff;
  --nav-active-bg: var(--seja-brand-500);
  --nav-active-fg: var(--seja-on-primary);
  --nav-active-tonal-start: color-mix(in oklch, var(--nav-active-bg) 72%, var(--surface-elevated) 28%);
  --nav-active-tonal-end: var(--nav-active-bg);
  --nav-idle-fg: var(--text-light);
  --nav-brand-fg: var(--primary-2);
  --nav-section-fg: color-mix(in oklch, var(--text-light) 74%, var(--primary-2) 26%);
  --nav-hover-bg: color-mix(in oklch, var(--surface-elevated) 88%, var(--primary) 12%);
  --nav-hover-fg: var(--text-light);
  --nav-focus-ring: var(--primary-2);
  --nav-flyout-bg: var(--nav-hover-bg);
  --nav-flyout-fg: var(--nav-hover-fg);
  --nav-radius: 16px;
  --nav-icon-radius: 12px;
  --seja-on-warning: #241a08;
  --seja-backdrop-bg: color-mix(in srgb, #020617 70%, transparent);

  --surface: var(--card);
  --surface-2: var(--card-soft);
  --surface-soft: color-mix(in srgb, var(--card-soft) 92%, var(--primary) 8%);
  --surface-elevated: color-mix(in srgb, var(--card) 92%, white 8%);
  --surface-selected: color-mix(in srgb, var(--card) 84%, var(--primary) 16%);
  --surface-overlay: color-mix(in srgb, var(--card) 90%, black 10%);
  --bg-soft: var(--surface-2);
  --primary-soft: color-mix(in oklch, var(--primary) 16%, transparent);
  --text-strong: var(--text-light);
  --text-body: var(--text);
  --text-muted: var(--muted);

  --seja-success-soft: color-mix(in srgb, var(--success) 13%, var(--surface));
  --seja-warning-soft: color-mix(in srgb, var(--warning) 14%, var(--surface));
  --seja-danger-soft: color-mix(in srgb, var(--danger) 13%, var(--surface));
  --seja-info-soft: color-mix(in srgb, var(--info) 13%, var(--surface));
  --seja-secondary-button-bg: color-mix(in srgb, var(--surface-2) 88%, var(--primary) 12%);
  --seja-secondary-button-border: color-mix(in srgb, var(--border) 82%, var(--primary) 18%);
  --seja-secondary-button-text: var(--text-light);

  --seja-dialog-bg: var(--surface-elevated);
  --seja-dialog-header-bg: linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, var(--surface-elevated)), var(--surface-elevated));
  --seja-dialog-footer-bg: color-mix(in srgb, var(--surface-2) 92%, transparent);
  --seja-dialog-border: color-mix(in srgb, var(--border) 86%, white 14%);
  --seja-selection-bg: color-mix(in srgb, var(--primary) 28%, transparent);

  /* Retired token aliases: legacy consumers now inherit the same semantic graph. */
  --card-bg: var(--surface);
  --border-color: var(--border);
  --text-main: var(--text-light);
  --text-muted: var(--muted);

  /* Custom Select inherits the exact same current theme. */
  --seja-select-bg: var(--input);
  --seja-select-card: var(--surface-elevated);
  --seja-select-text: var(--text-light);
  --seja-select-muted: var(--muted);
  --seja-select-border: var(--border);
  --seja-select-menu-bg: var(--surface-elevated);
  --seja-select-menu-text: var(--text-light);
  --seja-select-menu-hover: color-mix(in srgb, var(--primary) 20%, var(--surface-elevated));
  --seja-select-menu-selected: color-mix(in srgb, var(--primary) 32%, var(--surface-elevated));
}

html[data-theme="light"] body {
  --primary: var(--seja-brand-600);
  --primary-dark: var(--seja-brand-700);
  --primary-2: var(--seja-brand-500);
  --accent: var(--seja-brand-600);
  --bg: var(--seja-light-bg);
  --sidebar: var(--seja-light-sidebar);
  --card: var(--seja-light-card);
  --card-soft: var(--seja-light-card-soft);
  --input: var(--seja-light-input);
  --text: var(--seja-light-text);
  --text-light: var(--seja-light-text-strong);
  --muted: var(--seja-light-muted);
  --border: var(--seja-light-border);
  --success: var(--seja-success);
  --warning: var(--seja-warning);
  --danger: var(--seja-danger);
  --info: var(--seja-info);
  --seja-success-foreground: var(--seja-success-strong);
  --seja-warning-foreground: var(--seja-warning-strong);
  --seja-demo-foreground: var(--seja-demo-strong);
  --seja-demo-soft: color-mix(in srgb, var(--seja-demo) 8%, var(--surface));
  --seja-demo-border: color-mix(in srgb, var(--seja-demo) 35%, var(--border));
  --seja-danger-foreground: var(--seja-danger-strong);
  --seja-info-foreground: var(--seja-info-strong);
  --seja-primary-icon-foreground: var(--primary-dark);
  --seja-on-primary: #ffffff;
  --nav-active-bg: var(--primary);
  --nav-active-fg: var(--seja-on-primary);
  --nav-active-tonal-start: color-mix(in oklch, var(--nav-active-bg) 84%, var(--surface-elevated) 16%);
  --nav-active-tonal-end: var(--nav-active-bg);
  --nav-idle-fg: var(--text-light);
  --nav-brand-fg: var(--primary);
  --nav-section-fg: color-mix(in oklch, var(--text-light) 74%, var(--primary) 26%);
  --nav-hover-bg: color-mix(in oklch, var(--surface-elevated) 90%, var(--primary) 10%);
  --nav-hover-fg: var(--text-light);
  --nav-focus-ring: var(--primary);
  --nav-flyout-bg: var(--nav-hover-bg);
  --nav-flyout-fg: var(--nav-hover-fg);
  --nav-radius: 16px;
  --nav-icon-radius: 12px;
  --seja-on-warning: #241a08;
  --seja-backdrop-bg: color-mix(in srgb, #0f172a 28%, transparent);

  --surface: var(--card);
  --surface-2: var(--card-soft);
  --surface-soft: color-mix(in srgb, var(--card-soft) 95%, var(--primary) 5%);
  --surface-elevated: color-mix(in srgb, var(--card) 98%, var(--primary) 2%);
  --surface-selected: color-mix(in srgb, var(--card) 90%, var(--primary) 10%);
  --surface-overlay: color-mix(in srgb, var(--card) 96%, var(--primary) 4%);
  --bg-soft: var(--surface-2);
  --primary-soft: color-mix(in oklch, var(--primary) 16%, transparent);
  --text-strong: var(--text-light);
  --text-body: var(--text);
  --text-muted: var(--muted);

  --seja-success-soft: color-mix(in srgb, var(--success) 10%, var(--surface));
  --seja-warning-soft: color-mix(in srgb, var(--warning) 10%, var(--surface));
  --seja-danger-soft: color-mix(in srgb, var(--danger) 9%, var(--surface));
  --seja-info-soft: color-mix(in srgb, var(--info) 9%, var(--surface));
  --seja-secondary-button-bg: color-mix(in srgb, var(--surface-2) 89%, var(--primary) 11%);
  --seja-secondary-button-border: color-mix(in srgb, var(--border) 82%, var(--primary) 18%);
  --seja-secondary-button-text: var(--text-light);

  --seja-dialog-bg: var(--surface-elevated);
  --seja-dialog-header-bg: linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, var(--surface-elevated)), var(--surface-elevated));
  --seja-dialog-footer-bg: color-mix(in srgb, var(--surface-2) 92%, transparent);
  --seja-dialog-border: color-mix(in srgb, var(--border) 88%, white 12%);
  --seja-selection-bg: color-mix(in srgb, var(--primary) 20%, transparent);

  --card-bg: var(--surface);
  --border-color: var(--border);
  --text-main: var(--text-light);
  --text-muted: var(--muted);

  --seja-select-bg: var(--input);
  --seja-select-card: var(--surface-elevated);
  --seja-select-text: var(--text-light);
  --seja-select-muted: var(--muted);
  --seja-select-border: var(--border);
  --seja-select-menu-bg: var(--surface-elevated);
  --seja-select-menu-text: var(--text-light);
  --seja-select-menu-hover: color-mix(in srgb, var(--primary) 10%, var(--surface-elevated));
  --seja-select-menu-selected: color-mix(in srgb, var(--primary) 17%, var(--surface-elevated));
}

@supports (color: color-mix(in oklch, red 50%, white)) {
  html[data-theme] body {
    --surface-soft: color-mix(in oklch, var(--surface-2) 95%, var(--primary) 5%);
    --surface-selected: color-mix(in oklch, var(--surface) 90%, var(--primary) 10%);
    --seja-success-soft: color-mix(in oklch, var(--success) 11%, var(--surface));
    --seja-warning-soft: color-mix(in oklch, var(--warning) 11%, var(--surface));
    --seja-danger-soft: color-mix(in oklch, var(--danger) 10%, var(--surface));
    --seja-info-soft: color-mix(in oklch, var(--info) 10%, var(--surface));
    --seja-secondary-button-bg: color-mix(in oklch, var(--surface-2) 89%, var(--primary) 11%);
    --seja-secondary-button-border: color-mix(in oklch, var(--border) 82%, var(--primary) 18%);
  }
  html[data-theme="dark"] body {
    --surface-soft: color-mix(in oklch, var(--surface-2) 92%, var(--primary) 8%);
    --surface-selected: color-mix(in oklch, var(--surface) 84%, var(--primary) 16%);
  }
}

html[data-theme] body {
  --seja-neutral-soft: var(--surface-soft);
  --seja-neutral-foreground: var(--text-muted);
  --seja-status-border-success: color-mix(in oklch, var(--success) 34%, var(--border));
  --seja-status-border-warning: color-mix(in oklch, var(--warning) 36%, var(--border));
  --seja-status-border-danger: color-mix(in oklch, var(--danger) 34%, var(--border));
  --seja-status-border-info: color-mix(in oklch, var(--info) 34%, var(--border));
}

/* Native scrollbars/controls must follow the active scheme, not Windows/browser defaults. */
html[data-theme] *,
html[data-theme] *::before,
html[data-theme] *::after { scrollbar-color: var(--seja-scroll-thumb) var(--seja-scroll-track); }
html[data-theme] *::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme] *::-webkit-scrollbar-track { background: var(--seja-scroll-track); }
html[data-theme] *::-webkit-scrollbar-thumb { background: var(--seja-scroll-thumb); border: 2px solid var(--seja-scroll-track); border-radius: 999px; }
html[data-theme] *::-webkit-scrollbar-thumb:hover { background: var(--seja-scroll-thumb-hover); }

/* Universal shared surfaces. Layout remains feature-owned. */
html[data-theme] body .seja-dialog-shell,
html[data-theme] body .modal-card.seja-dialog-shell,
html[data-theme] body .settings-structured-dialog.seja-dialog-shell {
  background: var(--seja-dialog-bg) !important;
  color: var(--text-body) !important;
  border-color: var(--seja-dialog-border) !important;
}
html[data-theme] body .seja-dialog-header { background: var(--seja-dialog-header-bg) !important; border-color: var(--seja-dialog-border) !important; }
html[data-theme] body .seja-dialog-footer { background: var(--seja-dialog-footer-bg) !important; border-color: var(--seja-dialog-border) !important; }

html[data-theme] body .seja-check-card,
html[data-theme] body .role-check-card.seja-check-card,
html[data-theme] body .permission-check-card.seja-check-card {
  background: var(--surface-soft) !important;
  border-color: var(--border) !important;
  color: var(--text-body) !important;
}
html[data-theme] body .seja-check-card:has(input:checked) {
  background: var(--surface-selected) !important;
  border-color: color-mix(in srgb, var(--primary) 62%, var(--border)) !important;
}
html[data-theme] body .seja-check-card strong,
html[data-theme] body .role-check-card strong { color: var(--text-light) !important; }
html[data-theme] body .seja-check-card small,
html[data-theme] body .role-check-card small { color: var(--muted) !important; }

/* Legacy text buttons now alias one semantic shared button system. */
html[data-theme] body .secondary-btn,
html[data-theme] body .cancel-edit-btn,
html[data-theme] body .profile-page .photo-btn,
html[data-theme] body .lifecycle-open-btn,
html[data-theme] body .history-refresh-btn {
  background: var(--seja-secondary-button-bg) !important;
  color: var(--seja-secondary-button-text) !important;
  border: 1px solid var(--seja-secondary-button-border) !important;
  box-shadow: 0 7px 16px color-mix(in srgb, var(--text-light) 7%, transparent) !important;
}
html[data-theme] body .action-btn,
html[data-theme] body .seja-button--primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
  color: #fff !important;
  border-color: color-mix(in srgb, var(--primary) 72%, var(--border)) !important;
}
html[data-theme] body .seja-button--secondary {
  background: var(--seja-secondary-button-bg) !important;
  color: var(--seja-secondary-button-text) !important;
  border-color: var(--seja-secondary-button-border) !important;
}
html[data-theme] body .seja-button--success { background: var(--success) !important; color: #fff !important; }
html[data-theme] body .seja-button--warning { background: var(--warning) !important; color: #1f1600 !important; }
html[data-theme] body .seja-button--danger { background: var(--danger) !important; color: #fff !important; }

/* Fields: shared dialogs/profile/settings must never mix opposite-theme controls. */
html[data-theme] body .settings-structured-dialog input:not([type="checkbox"]):not([type="radio"]),
html[data-theme] body .settings-structured-dialog textarea,
html[data-theme] body .settings-structured-dialog .seja-custom-select-trigger,
html[data-theme] body .profile-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme] body .profile-page textarea,
html[data-theme] body .profile-page .seja-custom-select-trigger {
  background: var(--input) !important;
  color: var(--text-light) !important;
  border-color: var(--border) !important;
}
html[data-theme] body input::placeholder,
html[data-theme] body textarea::placeholder { color: var(--muted); opacity: .92; }

/* Calendar visual owner. Selection semantics remain caller-owned. */
html[data-theme] body {
  --seja-calendar-shell: var(--surface-elevated);
  --seja-calendar-month: var(--surface-soft);
  --seja-calendar-control: color-mix(in srgb, var(--surface-2) 88%, var(--primary) 12%);
  --seja-calendar-context: color-mix(in srgb, var(--primary) 7%, var(--surface-2));
  --seja-calendar-range-middle: color-mix(in srgb, var(--primary) 20%, var(--surface-soft));
}

/* Light Calendar polish: tune L/C relationships without changing the global theme
   or introducing module-specific color ownership. Dark keeps the established tokens. */
html[data-theme="light"] body {
  --seja-calendar-shell: color-mix(in oklch, var(--surface-elevated) 96%, white 4%);
  --seja-calendar-month: color-mix(in oklch, var(--surface-soft) 96%, var(--border) 4%);
  --seja-calendar-control: color-mix(in oklch, var(--surface-2) 82%, var(--primary) 18%);
  --seja-calendar-context: color-mix(in oklch, var(--surface-2) 88%, var(--primary) 12%);
  --seja-calendar-range-middle: color-mix(in oklch, var(--surface-soft) 88%, var(--primary) 12%);
  --seja-calendar-outside-date: color-mix(in oklch, var(--text-muted) 58%, var(--surface-soft));
  --seja-calendar-disabled-date: color-mix(in oklch, var(--text-muted) 52%, var(--surface-soft));
}

html[data-theme] body .seja-calendar-card { background: var(--seja-calendar-shell) !important; color: var(--text-body) !important; border-color: var(--border) !important; }
html[data-theme] body .seja-calendar-presets { border-color: var(--border) !important; }
html[data-theme] body .seja-calendar-presets button,
html[data-theme] body .seja-calendar-nav { background: var(--seja-calendar-control) !important; color: var(--text-body) !important; border-color: var(--border) !important; }
html[data-theme] body .seja-calendar-footer button { background: var(--surface-2) !important; color: var(--text-body) !important; border-color: var(--border) !important; }
html[data-theme] body .seja-calendar-month { background: var(--seja-calendar-month) !important; border-color: color-mix(in srgb, var(--border) 84%, transparent) !important; }
html[data-theme] body .seja-calendar-jump,
html[data-theme] body .seja-calendar-month-toggle,
html[data-theme] body .seja-calendar-year-toggle { background: var(--seja-calendar-control) !important; color: var(--text-light) !important; border-color: var(--border) !important; }
html[data-theme] body .seja-calendar-context-summary { background: var(--seja-calendar-context) !important; }
html[data-theme] body .seja-calendar-select-caret,
html[data-theme] body .seja-calendar-year-toggle { color: var(--primary) !important; }
html[data-theme] body .seja-calendar-month-menu,
html[data-theme] body .seja-calendar-year-menu { background: var(--surface-elevated) !important; border-color: color-mix(in srgb, var(--primary) 42%, var(--border)) !important; }
html[data-theme] body .seja-calendar-month-menu button,
html[data-theme] body .seja-calendar-year-menu button { color: var(--text-light) !important; }
html[data-theme] body .seja-calendar-month-menu button:hover,
html[data-theme] body .seja-calendar-month-menu button.selected,
html[data-theme] body .seja-calendar-year-menu button:hover,
html[data-theme] body .seja-calendar-year-menu button.selected { background: var(--primary) !important; color: #fff !important; }

/* Range consumers keep their compact/two-month composition, but their
   equivalent Calendar primitives consume the same semantic family. */
html[data-theme] body .date-range-popover {
  background: var(--seja-calendar-shell) !important;
  color: var(--text-body) !important;
  border-color: var(--border) !important;
  border-radius: 20px !important;
  box-shadow: var(--seja-dialog-shadow) !important;
}
html[data-theme] body .date-range-summary {
  background: var(--seja-calendar-context) !important;
  color: var(--text-strong) !important;
  border-color: color-mix(in srgb, var(--border) 88%, transparent) !important;
  border-radius: 14px !important;
}
html[data-theme] body .date-range-summary-icon {
  width: 36px !important;
  height: 36px !important;
  background: color-mix(in srgb, var(--primary) 15%, transparent) !important;
  color: var(--primary) !important;
}
html[data-theme] body .date-range-summary-eyebrow { color: var(--primary) !important; }
html[data-theme] body .date-range-summary-start,
html[data-theme] body .date-range-summary-end,
html[data-theme] body .date-range-summary-single-value { color: var(--text-strong) !important; }
html[data-theme] body .date-range-summary-arrow { color: var(--primary) !important; }
html[data-theme] body .date-range-summary-count {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-2)) !important;
  color: var(--text-strong) !important;
}
html[data-theme] body .date-range-summary-single-detail { color: var(--text-muted) !important; }
html[data-theme] body .date-range-popover .date-range-preset {
  min-height: 42px;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--text-body) !important;
}
html[data-theme] body .date-range-popover .date-range-preset:hover,
html[data-theme] body .date-range-popover .date-range-preset.active {
  background: var(--surface-selected) !important;
  color: var(--text-strong) !important;
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border)) !important;
}
html[data-theme] body .date-range-popover .date-range-nav {
  background: var(--seja-calendar-control) !important;
  color: var(--text-body) !important;
  border-color: var(--border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
html[data-theme] body .date-range-popover .date-range-nav:hover:not(:disabled),
html[data-theme] body .date-range-popover .date-range-nav:focus-visible {
  background: var(--surface-selected) !important;
  color: var(--text-strong) !important;
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent) !important;
  transform: none !important;
}
html[data-theme] body .date-range-month {
  background: var(--seja-calendar-month) !important;
  border-color: color-mix(in srgb, var(--border) 84%, transparent) !important;
  border-radius: 16px !important;
}
html[data-theme] body .date-range-month-title { color: var(--text-strong) !important; }
html[data-theme] body .date-range-weekdays span { color: var(--text-muted) !important; }
html[data-theme] body .date-range-popover .date-range-day {
  background: transparent !important;
  color: var(--text-body) !important;
}
html[data-theme] body .date-range-popover .date-range-day.is-muted {
  color: color-mix(in srgb, var(--text-muted) 44%, transparent) !important;
}
html[data-theme] body .date-range-popover .date-range-day.is-selected-range,
html[data-theme] body .date-range-popover .date-range-day.is-in-range {
  color: var(--text-strong) !important;
}
html[data-theme] body .date-range-popover .date-range-day.is-selected-range::before {
  background: var(--seja-calendar-range-middle) !important;
}
html[data-theme] body .date-range-popover .date-range-day.is-in-range {
  color: var(--text-body) !important;
}
html[data-theme] body .date-range-popover .date-range-day.is-in-range::before {
  background: var(--seja-calendar-range-middle) !important;
}
html[data-theme] body .date-range-popover .date-range-day.is-range-start::after,
html[data-theme] body .date-range-popover .date-range-day.is-range-end::after {
  inset: 5px 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--primary), var(--primary-2, var(--seja-brand-500))) !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 28%, transparent) !important;
}
html[data-theme] body .date-range-popover .date-range-day:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 48%, transparent) !important;
  color: var(--text-strong) !important;
}
html[data-theme] body .date-range-popover .date-range-day:hover:not(:disabled)::before {
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-soft)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent) !important;
  border-radius: 999px !important;
}
html[data-theme] body .date-range-popover .date-range-day.is-today:not(.is-range-start):not(.is-range-end)::after {
  background: transparent !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 48%, transparent) !important;
}

html[data-theme="light"] body .seja-calendar-day.outside,
html[data-theme="light"] body .date-range-popover .date-range-day.is-muted {
  color: var(--seja-calendar-outside-date) !important;
  opacity: 1 !important;
}
html[data-theme="light"] body .seja-calendar-day:disabled,
html[data-theme="light"] body .seja-calendar-day.disabled {
  color: var(--seja-calendar-disabled-date) !important;
  opacity: 1 !important;
}

/* Main Admin legacy token consumers: route to semantic surfaces instead of fallback hex. */
html[data-theme] body .progress-review-summary .summary-tile,
html[data-theme] body .progress-review-context .progress-review-fact,
html[data-theme] body .progress-review-copy > div,
html[data-theme] body .progress-review-photo,
html[data-theme] body .progress-photo-upload,
html[data-theme] body .progress-review-dialog,
html[data-theme] body #settings .attendance-policy-grid,
html[data-theme] body .compensation-rate-summary > div,
html[data-theme] body .permission-role-summary > div,
html[data-theme] body .compensation-history-row,
html[data-theme] body .permission-module-group {
  background: var(--surface-soft) !important;
  border-color: var(--border) !important;
  color: var(--text-body) !important;
}
html[data-theme] body .progress-review-dialog,
html[data-theme] body .settings-structured-dialog { background: var(--surface-elevated) !important; }
html[data-theme] body #settings .attendance-policy-head { background: color-mix(in srgb, var(--primary) 6%, var(--surface-soft)) !important; }
html[data-theme] body #settings .attendance-policy-row { background: transparent !important; color: var(--text-body) !important; }
html[data-theme] body #settings .attendance-policy-event strong { color: var(--text-light) !important; }

/* Shared Web table/surface semantics: neutral content, restrained headers,
   and primary color reserved for selection/focus rather than the whole body. */
@media screen {
  html[data-theme] body .card table.wide-table th {
    background: color-mix(in oklch, var(--surface) 92%, var(--primary) 8%) !important;
    color: var(--text-light) !important;
  }
  html[data-theme] body .card table.wide-table > tbody > tr > td {
    background: var(--surface) !important;
    color: var(--text-body) !important;
  }
  html[data-theme] body .card table.wide-table > tbody > tr:hover > td {
    background: var(--surface-selected) !important;
  }
}

html[data-theme] body #settings .attendance-policy-grid,
html[data-theme] body #settings .compensation-rate-summary > div,
html[data-theme] body #settings .compensation-history-row {
  background: var(--surface) !important;
}

html[data-theme] body .seja-action-tab-badge {
  --seja-action-badge-bg: var(--danger) !important;
  --seja-action-badge-border: color-mix(in oklch, var(--danger) 72%, var(--surface) 28%) !important;
  --seja-action-badge-text: #ffffff !important;
}

/* Shared switch owns both schemes. */
html[data-theme] body .seja-switch-track { background: color-mix(in srgb, var(--border) 72%, var(--surface-2)) !important; border-color: var(--border) !important; }
html[data-theme] body .seja-switch input:checked + .seja-switch-track { background: color-mix(in srgb, var(--primary) 74%, var(--surface-2)) !important; border-color: var(--primary) !important; }
html[data-theme] body .seja-switch-thumb { background: var(--surface-elevated) !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--text-light) 14%, transparent) !important; }

/* Status containers keep semantic hues and derive theme-safe soft surfaces. */
html[data-theme] body .success,
html[data-theme] body .status-success { color: var(--success); }
html[data-theme] body .warning,
html[data-theme] body .status-warning { color: var(--warning); }
html[data-theme] body .error,
html[data-theme] body .danger,
html[data-theme] body .status-danger { color: var(--danger); }
html[data-theme] body .info,
html[data-theme] body .status-info { color: var(--info); }


/* Shared icon semantic variants resolve here so color meaning stays in the theme authority. */
html[data-theme] body [data-seja-icon-variant="primary"]:not(.seja-glass-surface) {
  background: var(--primary-soft) !important;
  color: var(--seja-primary-icon-foreground) !important;
  border-color: color-mix(in oklch, var(--primary) 34%, var(--border)) !important;
}
html[data-theme] body [data-seja-icon-variant="secondary"]:not(.seja-glass-surface),
html[data-theme] body [data-seja-icon-variant="neutral"]:not(.seja-glass-surface) {
  background: var(--surface-elevated) !important;
  color: var(--text-strong) !important;
  border-color: var(--border) !important;
}

/* Semantic component examples consume the semantic palette instead of local hex shades. */
html[data-theme] body .module-attention-badge,
html[data-theme] body [data-seja-icon-variant="danger"] { background: var(--seja-danger-soft) !important; color: var(--seja-danger-strong) !important; border-color: color-mix(in srgb, var(--danger) 36%, var(--border)) !important; }
html[data-theme] body [data-seja-icon-variant="success"] { background: var(--seja-success-soft) !important; color: var(--seja-success-strong) !important; border-color: color-mix(in srgb, var(--success) 32%, var(--border)) !important; }
html[data-theme] body [data-seja-icon-variant="warning"] { background: var(--seja-warning-soft) !important; color: var(--seja-warning-strong) !important; border-color: color-mix(in srgb, var(--warning) 34%, var(--border)) !important; }
html[data-theme] body [data-seja-icon-variant="info"] { background: var(--seja-info-soft) !important; color: var(--seja-info-strong) !important; border-color: color-mix(in srgb, var(--info) 32%, var(--border)) !important; }
html[data-theme] body [data-seja-icon-variant="success"]:hover:not(:disabled),
html[data-theme] body [data-seja-icon-variant="success"]:focus-visible { border-color: var(--success) !important; box-shadow: 0 0 0 4px color-mix(in oklch, var(--success) 16%, transparent), var(--seja-elevation-utility-hover) !important; }
html[data-theme] body [data-seja-icon-variant="warning"]:hover:not(:disabled),
html[data-theme] body [data-seja-icon-variant="warning"]:focus-visible { border-color: var(--warning) !important; box-shadow: 0 0 0 4px color-mix(in oklch, var(--warning) 16%, transparent), var(--seja-elevation-utility-hover) !important; }
html[data-theme] body [data-seja-icon-variant="danger"]:hover:not(:disabled),
html[data-theme] body [data-seja-icon-variant="danger"]:focus-visible { border-color: var(--danger) !important; box-shadow: 0 0 0 4px color-mix(in oklch, var(--danger) 16%, transparent), var(--seja-elevation-utility-hover) !important; }
html[data-theme] body [data-seja-icon-variant="info"]:hover:not(:disabled),
html[data-theme] body [data-seja-icon-variant="info"]:focus-visible { border-color: var(--info) !important; box-shadow: 0 0 0 4px color-mix(in oklch, var(--info) 16%, transparent), var(--seja-elevation-utility-hover) !important; }
html[data-theme] body .breakdown-weight-state.valid,
html[data-theme] body .assignment-status-badge[data-status="CONSISTENT"],
html[data-theme] body .employee-chip.status-active,
html[data-theme] body .managed-career-badge.status-open { color: var(--seja-success-strong) !important; }
html[data-theme] body .breakdown-weight-state.invalid,
html[data-theme] body .assignment-status-badge[data-status="NEEDS_REVIEW"] { color: var(--seja-warning-strong) !important; }
html[data-theme] body .assignment-status-badge[data-status="UNASSIGNED"] { color: var(--seja-danger-strong) !important; }

/* Theme changes should feel immediate but restrained. */
@media (prefers-reduced-motion: no-preference) {
  html[data-theme] body,
  html[data-theme] body .seja-dialog-shell,
  html[data-theme] body .seja-calendar-card,
  html[data-theme] body .seja-check-card,
  html[data-theme] body .progress-review-summary .summary-tile,
  html[data-theme] body #settings .attendance-policy-grid {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
  }
}