/* =========================================================
   SEJAConSmart shared lightweight UI primitives
   Cross-page controls only; feature layouts remain locally owned.
   ========================================================= */
:root {
  /* SEJA brand source-of-truth: one OKLCH purple family (H≈286).
     Hex values are stable fallbacks; capable browsers use the authored OKLCH values below. */
  --seja-brand-50: #f3f3ff;
  --seja-brand-100: #e8e8ff;
  --seja-brand-200: #d6d5ff;
  --seja-brand-300: #bebbff;
  --seja-brand-400: #9e96f8;
  --seja-brand-500: #8070ec;
  --seja-brand-600: #705adc;
  --seja-brand-700: #5f4ac3;
  --seja-brand-800: #4a3999;
  --seja-brand-900: #352972;
  --seja-brand-soft: var(--seja-brand-100);
  --seja-brand-focus: var(--seja-brand-600);

  /* Cross-page theme source-of-truth. Pages alias their historical variable names to
     these tokens so Light/Dark tone ownership stays centralized. Status hues remain
     semantic rather than being converted to brand purple. */
  --seja-dark-bg: #0c0b19;
  --seja-dark-sidebar: #080714;
  --seja-dark-card: #171628;
  --seja-dark-card-soft: #201f34;
  --seja-dark-input: #12111f;
  --seja-dark-text: #c8c8d2;
  --seja-dark-text-strong: #f6f6fb;
  --seja-dark-muted: #9797a4;
  --seja-dark-border: #36344e;
  --seja-light-bg: #f8f9fb;
  --seja-light-sidebar: #f1f3f7;
  --seja-light-card: #ffffff;
  --seja-light-card-soft: #f3f4f8;
  --seja-light-input: #fafbfe;
  --seja-light-text: #475569;
  --seja-light-text-strong: #0f172a;
  --seja-light-muted: #64748b;
  --seja-light-border: #e2e8f0;
  --seja-success: #22c55e;
  --seja-success-strong: #15803d;
  --seja-warning: #f59e0b;
  --seja-warning-strong: #b45309;
  /* Demo is an environment identity, not a warning state. Orange stays visually
     distinct from the SEJA violet brand and the more yellow warning family. */
  --seja-demo: #f97316;
  --seja-demo-strong: #c2410c;
  --seja-danger: #ef4444;
  --seja-danger-strong: #b91c1c;
  --seja-info: #38bdf8;
  --seja-info-strong: #0369a1;
  --seja-on-primary: #ffffff;
  --seja-on-warning: #241a08;

  /* Shared semantic theme contract. Modules may specialize layout, but not redefine
     the meaning of core surfaces/text/status colors. These aliases resolve dynamically
     against the current page theme and therefore work in both Light and Dark modes. */
  --surface: var(--card, #191821);
  --surface-2: var(--card-soft, #211f2a);
  --surface-soft: color-mix(in srgb, var(--surface-2) 94%, var(--primary, var(--seja-brand-600)) 6%);
  --surface-elevated: color-mix(in srgb, var(--surface) 96%, white 4%);
  --surface-selected: color-mix(in srgb, var(--surface) 91%, var(--primary, var(--seja-brand-600)) 9%);
  --text-strong: var(--text-light, #f9f7ff);
  --text-body: var(--text, #cdc8d8);
  --text-muted: var(--muted, #aaa4b6);
  --seja-success-soft: color-mix(in srgb, var(--success, #22c55e) 12%, var(--surface));
  --seja-warning-soft: color-mix(in srgb, var(--warning, #f59e0b) 12%, var(--surface));
  --seja-danger-soft: color-mix(in srgb, var(--danger, #ef4444) 11%, var(--surface));
  --seja-info-soft: color-mix(in srgb, var(--info, #38bdf8) 11%, var(--surface));
  --seja-secondary-button-bg: color-mix(in srgb, var(--surface-2) 88%, var(--primary, var(--seja-brand-600)) 12%);
  --seja-secondary-button-border: color-mix(in srgb, var(--border, #383442) 84%, var(--primary, var(--seja-brand-600)) 16%);

  --seja-field-height: 58px;
  --seja-field-radius: 14px;
  --seja-field-pad-x: 16px;
  --seja-field-font: 0.98rem;
  --seja-field-weight: 760;

  /* Shared Liquid-Glass-inspired tokens. Feature modules consume these primitives
     instead of re-declaring their own blur/tint recipes. */
  --seja-glass-blur: 18px;
  --seja-glass-blur-soft: 12px;
  --seja-glass-saturation: 138%;
  --seja-glass-border: color-mix(in srgb, var(--border, #334155) 68%, rgba(255,255,255,.22));
  --seja-glass-base: color-mix(in srgb, var(--surface, var(--card, #0f172a)) 68%, transparent);
  --seja-glass-highlight-top: rgba(255,255,255,.10);
  --seja-glass-highlight-bottom: rgba(255,255,255,.025);
  --seja-glass-inset-highlight: rgba(255,255,255,.16);
  --seja-glass-shadow: 0 12px 30px color-mix(in srgb, #020617 18%, transparent);
  --seja-glass-primary-border: color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 54%, rgba(255,255,255,.34));
  --seja-glass-primary-start: color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 82%, transparent);
  --seja-glass-primary-end: color-mix(in srgb, var(--primary-2, var(--seja-brand-500, #8070ec)) 74%, transparent);
  --seja-glass-primary-highlight-top: rgba(255,255,255,.20);
  --seja-glass-primary-highlight-bottom: rgba(255,255,255,.035);
  --seja-glass-primary-inset-highlight: rgba(255,255,255,.34);
  --seja-glass-primary-shadow: 0 10px 26px color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 23%, transparent);


  /* Shared interaction vocabulary. Keep motion tactile and reversible without
     turning product feedback into decorative animation. */
  --seja-motion-fast: 140ms;
  --seja-motion-control: 180ms;
  --seja-motion-panel: 210ms;
  --seja-motion-ease: cubic-bezier(.2,.8,.2,1);
  --seja-elevation-utility-rest: 0 2px 6px color-mix(in srgb, #020617 12%, transparent);
  --seja-elevation-utility-hover: 0 7px 18px color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 16%, transparent);
  --seja-elevation-utility-pressed: 0 2px 5px color-mix(in srgb, #020617 14%, transparent);
  --seja-elevation-floating: 0 14px 34px color-mix(in oklch, #020617 20%, transparent);
  --seja-elevation-panel: -14px 0 38px color-mix(in oklch, #020617 16%, transparent);

  /* Shared dialog visual contract. Feature modules keep their sizing/content layout,
     while shell/header/footer presentation remains in one SEJA family. */
  --seja-dialog-radius: 24px;
  --seja-dialog-border: color-mix(in srgb, var(--border, #334155) 82%, rgba(255,255,255,.12));
  --seja-dialog-bg: var(--surface, var(--card, #0f172a));
  --seja-dialog-header-bg:
    linear-gradient(180deg, color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 9%, var(--surface, var(--card, #0f172a))), var(--surface, var(--card, #0f172a)));
  --seja-dialog-footer-bg: color-mix(in srgb, var(--surface-2, var(--surface, #0f172a)) 88%, transparent);
  --seja-dialog-shadow: 0 34px 96px rgba(2,6,23,.42);
  --seja-selection-bg: color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 28%, transparent);
}

@supports (color: oklch(0.56 0.19 286)) {
  :root {
    --seja-brand-50: oklch(0.97 0.02 286);
    --seja-brand-100: oklch(0.94 0.04 286);
    --seja-brand-200: oklch(0.89 0.07 286);
    --seja-brand-300: oklch(0.82 0.10 286);
    --seja-brand-400: oklch(0.72 0.14 286);
    --seja-brand-500: oklch(0.62 0.18 286);
    --seja-brand-600: oklch(0.56 0.19 286);
    --seja-brand-700: oklch(0.50 0.18 286);
    --seja-brand-800: oklch(0.42 0.15 286);
    --seja-brand-900: oklch(0.34 0.12 286);
    --seja-success: oklch(0.69 0.18 145);
    --seja-success-strong: oklch(0.52 0.16 145);
    --seja-warning: oklch(0.76 0.16 75);
    --seja-warning-strong: oklch(0.57 0.15 65);
    --seja-demo: oklch(0.70 0.19 45);
    --seja-demo-strong: oklch(0.52 0.17 42);
    --seja-danger: oklch(0.64 0.22 27);
    --seja-danger-strong: oklch(0.49 0.19 27);
    --seja-info: oklch(0.72 0.15 235);
    --seja-info-strong: oklch(0.51 0.14 235);
    --seja-dark-bg: oklch(0.160 0.030 286);
    --seja-dark-sidebar: oklch(0.140 0.028 286);
    --seja-dark-card: oklch(0.210 0.036 286);
    --seja-dark-card-soft: oklch(0.250 0.040 286);
    --seja-dark-input: oklch(0.185 0.030 286);
    --seja-dark-text: oklch(0.835 0.014 286);
    --seja-dark-text-strong: oklch(0.975 0.007 286);
    --seja-dark-muted: oklch(0.680 0.020 286);
    --seja-dark-border: oklch(0.340 0.045 286);
    --seja-light-bg: oklch(0.988 0.003 260);
    --seja-light-sidebar: oklch(0.972 0.005 260);
    --seja-light-card: oklch(0.998 0.002 260);
    --seja-light-card-soft: oklch(0.975 0.005 260);
    --seja-light-input: oklch(0.995 0.002 260);
    --seja-light-text: oklch(0.420 0.015 260);
    --seja-light-text-strong: oklch(0.180 0.015 260);
    --seja-light-muted: oklch(0.520 0.015 260);
    --seja-light-border: oklch(0.890 0.010 260);
  }
}

html[data-theme="light"] body {
  --seja-glass-border: color-mix(in srgb, var(--border, #cbd5e1) 66%, rgba(255,255,255,.72));
  --seja-glass-base: rgba(255,255,255,.58);
  --seja-glass-highlight-top: rgba(255,255,255,.74);
  --seja-glass-highlight-bottom: rgba(255,255,255,.22);
  --seja-glass-inset-highlight: rgba(255,255,255,.86);
  --seja-glass-shadow: 0 10px 26px rgba(15,23,42,.10);
  --seja-glass-primary-border: color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 48%, rgba(255,255,255,.68));
  --seja-glass-primary-start: color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 88%, transparent);
  --seja-glass-primary-end: color-mix(in srgb, var(--primary-2, var(--seja-brand-500, #8070ec)) 78%, transparent);
  --seja-glass-primary-highlight-top: rgba(255,255,255,.30);
  --seja-glass-primary-highlight-bottom: rgba(255,255,255,.055);
  --seja-glass-primary-inset-highlight: rgba(255,255,255,.52);
  --seja-glass-primary-shadow: 0 9px 24px color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 22%, transparent);
  --seja-elevation-utility-rest: 0 2px 7px rgba(15,23,42,.08);
  --seja-elevation-utility-hover: 0 7px 18px color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 14%, rgba(15,23,42,.07));
  --seja-elevation-utility-pressed: 0 2px 5px rgba(15,23,42,.09);
  --seja-elevation-floating: 0 12px 30px rgba(15,23,42,.12);
  --seja-elevation-panel: -12px 0 30px rgba(15,23,42,.10);
  --seja-dialog-border: color-mix(in srgb, var(--border, #cbd5e1) 86%, rgba(255,255,255,.74));
  --seja-dialog-bg: var(--surface, var(--card, #ffffff));
  --seja-dialog-header-bg:
    linear-gradient(180deg, color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 7%, var(--surface, var(--card, #ffffff))), var(--surface, var(--card, #ffffff)));
  --seja-dialog-footer-bg: color-mix(in srgb, var(--surface-2, #f8fafc) 92%, transparent);
  --seja-dialog-shadow: 0 28px 72px rgba(51,65,85,.18);
  --seja-selection-bg: color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 22%, transparent);
  --seja-secondary-button-bg: color-mix(in srgb, var(--surface-2, #f8f6fe) 90%, var(--primary, var(--seja-brand-600)) 10%);
  --seja-secondary-button-border: color-mix(in srgb, var(--border, #ded9ea) 82%, var(--primary, var(--seja-brand-600)) 18%);
}

/* Native hidden semantics must win over component display rules. */
:where([hidden]) { display: none !important; }

/* Search is a reusable list-filter primitive; business filtering stays feature-owned. */
.seja-list-search {
  --seja-list-search-bg: var(--input, var(--surface, #0f172a));
  --seja-list-search-text: var(--text-light, var(--text-strong, #f8fafc));
  --seja-list-search-muted: var(--muted, #94a3b8);
  --seja-list-search-border: var(--border, #334155);
  --seja-list-search-focus: var(--primary, var(--seja-brand-600, #705adc));
  min-height: var(--seja-field-height) !important;
  height: var(--seja-field-height) !important;
  border: 1px solid var(--seja-list-search-border) !important;
  border-radius: var(--seja-field-radius) !important;
  background: var(--seja-list-search-bg) !important;
  color: var(--seja-list-search-text) !important;
  padding: 0 18px !important;
  font-size: var(--seja-field-font) !important;
  font-weight: 700 !important;
  outline: none !important;
  box-shadow: none !important;
  appearance: none;
}

.seja-list-search:focus {
  border-color: var(--seja-list-search-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--seja-list-search-focus) 16%, transparent) !important;
}

.seja-list-search::placeholder {
  color: var(--seja-list-search-muted) !important;
  font-weight: 650 !important;
  opacity: .92 !important;
}

.seja-list-search::-webkit-search-decoration,
.seja-list-search::-webkit-search-cancel-button,
.seja-list-search::-webkit-search-results-button,
.seja-list-search::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

/* =========================================================
   Shared form / segmented / filter / glass primitives
   Feature modules own layout; these classes own cross-page behavior.
   ========================================================= */
.seja-form-control {
  --seja-control-bg: var(--input, var(--surface, #0f172a));
  --seja-control-text: var(--text-light, var(--text-strong, #f8fafc));
  --seja-control-muted: var(--muted, #94a3b8);
  --seja-control-border: var(--border, #334155);
  --seja-control-focus: var(--primary, var(--seja-brand-600, #705adc));
  width: 100%;
  min-height: var(--seja-field-height);
  padding: 12px var(--seja-field-pad-x);
  border: 1px solid var(--seja-control-border) !important;
  border-radius: var(--seja-field-radius) !important;
  background: var(--seja-control-bg) !important;
  color: var(--seja-control-text) !important;
  font: inherit;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

textarea.seja-form-control {
  min-height: 112px;
  resize: vertical;
}

.seja-form-control::placeholder {
  color: var(--seja-control-muted) !important;
  opacity: .92;
}

.seja-form-control:hover:not(:disabled):not([readonly]) {
  border-color: color-mix(in srgb, var(--seja-control-focus) 55%, var(--seja-control-border)) !important;
}

.seja-form-control:focus,
.seja-form-control:focus-visible {
  border-color: var(--seja-control-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--seja-control-focus) 16%, transparent) !important;
}

.seja-form-control:disabled,
.seja-form-control[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .62;
}

.seja-form-control[readonly] {
  color: var(--seja-control-text) !important;
  background: color-mix(in srgb, var(--seja-control-focus) 7%, var(--seja-control-bg)) !important;
}

.seja-segmented-control {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border, #334155);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface, #0f172a) 88%, transparent);
}

.seja-segmented-item {
  position: relative;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--muted, #94a3b8);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  transition: color .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.seja-segmented-item:hover:not(:disabled) {
  color: var(--text-light, var(--text-strong, #f8fafc));
  background: color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 10%, transparent);
}

.seja-segmented-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 22%, transparent);
}

.seja-segmented-item.active,
.seja-segmented-item[aria-pressed="true"] {
  color: #fff;
  border-color: color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 58%, transparent);
  background: linear-gradient(135deg, var(--primary, var(--seja-brand-600, #705adc)), var(--primary-2, var(--seja-brand-500, #8070ec)));
  box-shadow: 0 9px 22px color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 26%, transparent);
}

/* Selected segmented options keep their selected identity on hover/focus. */
.seja-segmented-item.active:hover:not(:disabled),
.seja-segmented-item[aria-pressed="true"]:hover:not(:disabled) {
  color: #fff;
  border-color: color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 66%, transparent);
  background: linear-gradient(135deg, var(--primary, var(--seja-brand-600, #705adc)), var(--primary-2, var(--seja-brand-500, #8070ec)));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 30%, transparent);
}

/* Standalone pill-segment modifier for workflows that need exclusive choices
   without the contained segmented-control slab. The interaction/state primitive
   remains .seja-segmented-item; modules only opt into this presentation. */
.seja-segmented-control--pills {
  display: flex;
  grid-auto-flow: unset;
  grid-auto-columns: unset;
  align-items: center;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.seja-segmented-control--pills > .seja-segmented-item {
  flex: 0 1 auto;
  min-height: 42px;
  height: auto;
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px !important;
  box-shadow: none !important;
  transform: none !important;
}

.seja-segmented-control--pills > .seja-segmented-item:hover:not(:disabled),
.seja-segmented-control--pills > .seja-segmented-item:focus-visible,
.seja-segmented-control--pills > .seja-segmented-item.active,
.seja-segmented-control--pills > .seja-segmented-item[aria-pressed="true"] {
  transform: none !important;
  box-shadow: none !important;
}

/* Text + icon account actions keep related content grouped instead of split across the menu row. */
.account-menu-action-content {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.seja-filter-pill {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid var(--border, #334155);
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--input, var(--surface, #0f172a)) 92%, transparent) !important;
  color: var(--text, var(--text-light, #f8fafc)) !important;
  font: inherit;
  font-weight: 780;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.seja-filter-pill:hover:not(:disabled),
.seja-filter-pill:focus-visible {
  border-color: var(--primary, var(--seja-brand-600, #705adc)) !important;
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 12%, transparent);
}

.seja-filter-pill.active,
.seja-filter-pill[aria-selected="true"],
.seja-filter-pill[aria-pressed="true"] {
  border-color: var(--primary, var(--seja-brand-600, #705adc)) !important;
  background: var(--primary, var(--seja-brand-600, #705adc)) !important;
  color: var(--seja-on-primary, #fff) !important;
}

.seja-glass-surface {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--seja-glass-border) !important;
  background:
    linear-gradient(180deg, var(--seja-glass-highlight-top), var(--seja-glass-highlight-bottom)),
    var(--seja-glass-base) !important;
  box-shadow:
    inset 0 1px 0 var(--seja-glass-inset-highlight),
    var(--seja-glass-shadow);
  backdrop-filter: blur(var(--seja-glass-blur)) saturate(var(--seja-glass-saturation));
  -webkit-backdrop-filter: blur(var(--seja-glass-blur)) saturate(var(--seja-glass-saturation));
}

/* Shared inline form action slot. Keeps compact actions optically aligned
   with 58px field rows without inflating the action itself. */
.seja-inline-form-action {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: var(--seja-field-height, 58px);
  min-width: 0;
  margin-top: 8px;
}
.seja-inline-form-action > .seja-button {
  margin: 0 !important;
}

/* =========================================================
   Shared glass action variants
   ========================================================= */
.seja-glass-surface--primary {
  border-color: var(--seja-glass-primary-border) !important;
  background:
    linear-gradient(180deg, var(--seja-glass-primary-highlight-top), var(--seja-glass-primary-highlight-bottom)),
    linear-gradient(135deg, var(--seja-glass-primary-start), var(--seja-glass-primary-end)) !important;
  color: var(--seja-on-primary, #fff) !important;
  box-shadow:
    inset 0 1px 0 var(--seja-glass-primary-inset-highlight),
    var(--seja-glass-primary-shadow) !important;
}

/* Icon-first compact rail used by workspace/category selectors.
   Visual structure is shared; Liquid Glass is opt-in via .seja-glass-surface. */
.seja-icon-tab-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 7px 4px;
  overflow-y: visible;
}

/* Active-only workspace rail. The rail owns compact/expanded geometry so
   feature modules only provide the workspace identity, icon, label and count. */
.seja-icon-tab-rail--active-only > .seja-icon-tab {
  flex: 0 0 auto;
}
.seja-icon-tab-rail--active-only > .seja-icon-tab > .seja-icon-tab-label {
  display: none !important;
}
.seja-icon-tab-rail--active-only > .seja-icon-tab:not(.active):not([aria-selected="true"]):not([aria-checked="true"]) {
  width: var(--seja-icon-tab-collapsed-size, 44px);
  min-width: var(--seja-icon-tab-collapsed-size, 44px);
  height: var(--seja-icon-tab-collapsed-size, 44px);
  min-height: var(--seja-icon-tab-collapsed-size, 44px);
  padding: 0 !important;
  gap: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  place-content: center;
  overflow: visible;
}
.seja-icon-tab-rail--active-only > .seja-icon-tab.active,
.seja-icon-tab-rail--active-only > .seja-icon-tab[aria-selected="true"],
.seja-icon-tab-rail--active-only > .seja-icon-tab[aria-checked="true"] {
  width: auto;
  min-width: 0;
  padding-inline: 16px;
  gap: 8px;
}
.seja-icon-tab-rail--active-only > .seja-icon-tab.active > .seja-icon-tab-label,
.seja-icon-tab-rail--active-only > .seja-icon-tab[aria-selected="true"] > .seja-icon-tab-label,
.seja-icon-tab-rail--active-only > .seja-icon-tab[aria-checked="true"] > .seja-icon-tab-label {
  display: inline-flex !important;
}

.seja-icon-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--border, #334155) !important;
  border-radius: 999px !important;
  background: var(--input, var(--surface-2, var(--surface, #0f172a))) !important;
  color: var(--text-light, var(--text-strong, #f8fafc));
  box-shadow: 0 6px 16px color-mix(in srgb, #020617 10%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font: inherit;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 210ms ease, border-color 210ms ease, background 210ms ease, box-shadow 210ms ease, transform 210ms ease;
}

.seja-icon-tab:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 46%, var(--border, #334155)) !important;
  background: color-mix(in srgb, var(--input, var(--surface-2, #0f172a)) 88%, var(--primary, var(--seja-brand-600, #705adc)) 12%) !important;
  transform: translateY(-1px);
}

.seja-icon-tab:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 72%, var(--border, #334155)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 18%, transparent) !important;
}

.seja-icon-tab.active,
.seja-icon-tab[aria-selected="true"],
.seja-icon-tab[aria-checked="true"] {
  border-color: var(--primary, var(--seja-brand-600, #705adc)) !important;
  background: var(--primary, var(--seja-brand-600, #705adc)) !important;
  color: var(--seja-on-primary, #fff) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 20%, transparent) !important;
}

/* Active compact rails keep their selected identity on hover. The hover
   treatment must never wash a selected tab back into a pale/Glass-like state. */
.seja-icon-tab.active:hover:not(:disabled),
.seja-icon-tab[aria-selected="true"]:hover:not(:disabled),
.seja-icon-tab[aria-checked="true"]:hover:not(:disabled) {
  border-color: var(--primary, var(--seja-brand-600, #705adc)) !important;
  background: var(--primary, var(--seja-brand-600, #705adc)) !important;
  color: var(--seja-on-primary, #fff) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 24%, transparent) !important;
}

html[data-theme="light"] body .seja-icon-tab {
  color: var(--text, #0f172a);
  box-shadow: 0 5px 14px rgba(15,23,42,.06);
}

html[data-theme="light"] body .seja-icon-tab.active,
html[data-theme="light"] body .seja-icon-tab[aria-selected="true"],
html[data-theme="light"] body .seja-icon-tab[aria-checked="true"] {
  color: var(--seja-on-primary, #fff) !important;
}

.seja-icon-tab > .seja-icon-tab-glyph,
.seja-icon-tab > .seja-static-icon-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  pointer-events: none;
}

.seja-icon-tab > .seja-icon-tab-glyph .seja-ui-icon,
.seja-icon-tab > .seja-static-icon-glyph .seja-ui-icon,
.seja-static-icon-glyph > .seja-ui-icon {
  width: 19px;
  height: 19px;
  display: block;
}

/* Passive SVG hosts are visual glyphs only. They must never acquire the
   interactive 44px icon-button shell used by actual actions. */
.seja-static-icon-glyph {
  line-height: 0;
}

.seja-icon-tab-count {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: inherit;
  font-size: .68rem;
  font-weight: 950;
}

.seja-action-tab-badge {
  --seja-action-badge-bg: var(--danger, #dc2626);
  --seja-action-badge-border: color-mix(in srgb, var(--seja-action-badge-bg) 72%, var(--border, #334155));
  --seja-action-badge-text: #ffffff;
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  border: 2px solid var(--seja-action-badge-border);
  background: var(--seja-action-badge-bg);
  color: var(--seja-action-badge-text);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--seja-action-badge-bg) 28%, transparent);
  font-size: .68rem;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.seja-icon-tab > .seja-action-tab-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  z-index: 2;
}

.seja-segmented-item > .seja-action-tab-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  margin: 0;
}

.seja-action-tab-badge[hidden] { display: none !important; }

/* Shared tooltip presentation. Positioning/behavior is owned by seja-ui-runtime.js. */
.seja-tooltip {
  position: fixed;
  z-index: 15000;
  display: block;
  max-width: min(260px, calc(100vw - 20px));
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--border, #334155) 74%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface, var(--card, #0f172a)) 92%, transparent);
  color: var(--text-light, var(--text-strong, #f8fafc));
  box-shadow: 0 14px 34px rgba(15,23,42,.24);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px) scale(.98);
  transition: opacity 120ms ease, transform 120ms ease;
}

html[data-theme="light"] body .seja-tooltip {
  border-color: color-mix(in srgb, var(--border, #cbd5e1) 74%, transparent);
  background: rgba(255,255,255,.94);
  color: var(--text, #0f172a);
  box-shadow: 0 12px 28px rgba(15,23,42,.13);
}

.seja-tooltip.show { opacity: 1; transform: none; }
.seja-tooltip::after {
  content: "";
  position: absolute;
  left: var(--seja-tooltip-arrow-x, 50%);
  width: 8px;
  height: 8px;
  border-right: 1px solid color-mix(in srgb, var(--border, #334155) 74%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border, #334155) 74%, transparent);
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.seja-tooltip[data-placement="bottom"]::after { top: -5px; transform: translateX(-50%) rotate(225deg); }
.seja-tooltip[data-placement="top"]::after { bottom: -5px; transform: translateX(-50%) rotate(45deg); }


/* =========================================================
   Shared inline empty / information surface
   Works inside cards, tables, dialogs and media grids without parent-specific styling.
   ========================================================= */
.seja-inline-empty {
  width: 100%;
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  padding: 20px 22px;
  border: 1px dashed color-mix(in srgb, var(--border, #334155) 78%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-2, var(--surface, #0f172a)) 92%, var(--primary, var(--seja-brand-600, #705adc)) 8%);
  color: var(--muted, #94a3b8);
  text-align: center;
  line-height: 1.45;
}
.seja-inline-empty strong {
  color: var(--text, var(--text-light, #f8fafc));
  font-weight: 900;
}
.seja-inline-empty span {
  display: block;
  max-width: 720px;
  color: var(--muted, #94a3b8);
}
.seja-inline-empty--compact {
  padding-block: 16px;
}
html[data-theme="light"] body .seja-inline-empty {
  background: color-mix(in srgb, #fff 94%, var(--primary, var(--seja-brand-600, #705adc)) 6%);
}

/* =========================================================
   Shared dialog presentation
   Generic visual shell only; modal sizing and business content stay feature-owned.
   ========================================================= */
.seja-dialog-shell {
  border: 1px solid var(--seja-dialog-border) !important;
  border-radius: var(--seja-dialog-radius) !important;
  background: var(--seja-dialog-bg) !important;
  color: var(--text, var(--text-light, #f8fafc));
  box-shadow: var(--seja-dialog-shadow) !important;
}

.seja-dialog-header {
  border-bottom: 1px solid var(--seja-dialog-border) !important;
  background: var(--seja-dialog-header-bg) !important;
}

.seja-dialog-body {
  min-height: 0;
}

.seja-dialog-footer {
  border-top: 1px solid var(--seja-dialog-border) !important;
  background: var(--seja-dialog-footer-bg) !important;
}

::selection {
  background: var(--seja-selection-bg);
  color: inherit;
}

body.seja-dialog-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .seja-icon-tab,
  .seja-segmented-item,
  .seja-tooltip { transition: none !important; }
}


/* =========================================================
   Shared Privacy Policy content
   The policy text/version is canonical across Public + Auth. Feature shells own
   modal/page sizing only; document typography and section rhythm live here.
   ========================================================= */
.seja-policy-content {
  --seja-policy-intro-size: 1rem;
  --seja-policy-body-size: .95rem;
  --seja-policy-heading-size: 1.12rem;
  --seja-policy-section-space: 22px;
  color: var(--text-muted, var(--muted, #94a3b8));
}
.seja-policy-content .policy-intro {
  margin: 0;
  color: var(--text-muted, var(--muted, #94a3b8));
  font-size: var(--seja-policy-intro-size);
  font-weight: 600;
  line-height: 1.72;
}
.seja-policy-content .policy-effective-date {
  display: inline-flex;
  width: fit-content;
  margin-top: 16px;
  padding: 6px 10px;
  border: 1px solid color-mix(in oklch, var(--border, #334155) 78%, var(--primary, #705adc) 22%);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-2, #1f2937) 91%, var(--primary, #705adc) 9%);
  color: var(--text-strong, var(--text-light, #f8fafc));
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .01em;
}
.seja-policy-content .policy-section {
  margin-top: var(--seja-policy-section-space);
  padding-top: var(--seja-policy-section-space);
  border-top: 1px solid color-mix(in oklch, var(--border, #334155) 88%, var(--primary, #705adc) 12%);
}
.seja-policy-content .policy-section h2 {
  margin: 0 0 9px;
  color: var(--text-strong, var(--text-light, #f8fafc));
  font-size: var(--seja-policy-heading-size);
  font-weight: 850;
  line-height: 1.3;
}
.seja-policy-content .policy-section p,
.seja-policy-content .policy-section li {
  margin: 0;
  color: var(--text-muted, var(--muted, #94a3b8));
  font-size: var(--seja-policy-body-size);
  font-weight: 550;
  line-height: 1.68;
}
.seja-policy-content .policy-section ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
}
.seja-policy-content .policy-section a {
  color: var(--seja-primary-icon-foreground, var(--primary, #705adc));
  font-weight: 800;
  text-underline-offset: 3px;
}


/* =========================================================
   Shared portable text-action buttons
   A button's visual contract must not depend on its parent container.
   ========================================================= */
.seja-button {
  --seja-button-bg: var(--primary, var(--seja-brand-600, #705adc));
  --seja-button-text: var(--seja-on-primary, #fff);
  --seja-button-border: color-mix(in srgb, var(--seja-button-bg) 72%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--seja-button-border) !important;
  border-radius: 12px !important;
  background: var(--seja-button-bg) !important;
  color: var(--seja-button-text) !important;
  box-shadow: 0 9px 20px color-mix(in srgb, var(--seja-button-bg) 18%, transparent);
  font: inherit;
  font-weight: 850;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease, opacity .14s ease;
}

.seja-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 11px 24px color-mix(in srgb, var(--seja-button-bg) 23%, transparent);
}

.seja-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary, var(--seja-brand-600, #705adc)) 18%, transparent), 0 11px 24px color-mix(in srgb, var(--seja-button-bg) 20%, transparent);
}

.seja-button:disabled,
.seja-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
  transform: none;
  box-shadow: none;
}

.seja-button--primary {
  --seja-button-bg: var(--primary, var(--seja-brand-600, #705adc));
}

.seja-button--secondary {
  --seja-button-bg: var(--seja-secondary-button-bg);
  --seja-button-text: var(--seja-secondary-button-text);
  --seja-button-border: var(--seja-secondary-button-border);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--surface-overlay, #0f172a) 10%, transparent);
}

.seja-button--success {
  --seja-button-bg: var(--success, #22c55e);
  --seja-button-text: var(--seja-on-primary, #fff);
}

.seja-button--danger {
  --seja-button-bg: var(--danger, #ef4444);
}

.seja-button--warning {
  --seja-button-bg: var(--warning, #f59e0b);
  --seja-button-text: var(--seja-on-warning, #241a08);
}



/* =========================================================
   Shared SEJA Calendar shell
   One visual/interaction family for Admin, Attendance, Absence and Employee Profile.
   Feature modules own selection semantics only (single/specific/range).
   ========================================================= */
.seja-calendar-popover {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, #020617 64%, transparent);
}
.seja-calendar-popover.show { display: flex; }
.seja-calendar-card {
  width: min(1100px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border, #383442);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text-strong);
  box-shadow: var(--seja-dialog-shadow);
}
.seja-calendar-side {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}
.seja-calendar-side .seja-calendar-presets {
  padding-right: 0;
  padding-bottom: 1rem;
  border-right: 0;
  border-bottom: 1px solid var(--border, #383442);
}
.seja-calendar-context-summary {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  padding: 14px 12px;
  border: 1px solid color-mix(in srgb, var(--border, #383442) 88%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary, #705adc) 7%, var(--surface-2, #111827));
  color: var(--text-strong);
  text-align: center;
}
.seja-calendar-context-summary-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary, #705adc) 15%, transparent);
  color: var(--primary, #8070ec);
}
.seja-calendar-context-summary-icon .seja-ui-icon { width: 18px; height: 18px; }
.seja-calendar-context-summary-label {
  color: var(--primary, #8070ec);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.seja-calendar-context-summary-value {
  color: var(--text-strong);
  font-size: .98rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.seja-calendar-context-summary-detail {
  color: var(--text-muted, var(--muted, #94a3b8));
  font-size: .74rem;
  font-weight: 800;
  line-height: 1.35;
}
.seja-calendar-context-summary-detail.is-error {
  color: var(--danger, #dc2626);
}
.seja-calendar-main { min-width: 0; }
.seja-calendar-presets {
  display: grid;
  align-content: start;
  gap: .4rem;
  padding: .35rem 1rem .35rem 0;
  border-right: 1px solid var(--border, #383442);
}
.seja-calendar-presets button,
.seja-calendar-nav,
.seja-calendar-footer button {
  min-height: 42px;
  border: 1px solid var(--border, #383442);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-body);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  box-shadow: none;
}
.seja-calendar-presets button { width: 100%; padding: .65rem .85rem; text-align: left; background: transparent; }
.seja-calendar-presets button:hover,
.seja-calendar-presets button:focus-visible,
.seja-calendar-nav:hover,
.seja-calendar-nav:focus-visible,
.seja-calendar-footer button:hover,
.seja-calendar-footer button:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border));
  background: var(--surface-selected);
  color: var(--text-strong);
  outline: none;
}
.seja-calendar-top {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 1rem;
  margin-bottom: .9rem;
}
.seja-calendar-nav { width: 44px; min-width: 44px; height: 44px; padding: 0; display: grid; place-items: center; }
.seja-calendar-title { text-align: center; color: var(--text-strong); font-weight: 950; line-height: 1.25; }
.seja-calendar-title small { display: block; margin-top: .2rem; color: var(--text-muted); font-size: .8rem; font-weight: 800; text-transform: none; }
.seja-calendar-jump-row {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr);
  align-items: center;
  gap: .65rem;
  margin: 0 0 1rem;
}
.seja-calendar-jump-row label { color: var(--text-muted); font-size: .82rem; font-weight: 900; }
.seja-calendar-jump-group { display: grid; grid-template-columns: minmax(210px, 1fr) minmax(178px, 200px); gap: .5rem; }
.seja-calendar-jump {
  min-height: 42px;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border, #383442);
  border-radius: 12px;
  background: var(--input, var(--surface-2));
  color: var(--text-strong);
  padding: 0 .8rem;
  font: inherit;
  font-weight: 850;
  outline: none;
}
.seja-calendar-jump:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.seja-calendar-month-combo { position: relative; min-width: 0; }
.seja-calendar-month-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.seja-calendar-select-caret { display: grid; place-items: center; width: 34px; min-width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.seja-calendar-select-caret .seja-ui-icon { width: 17px; height: 17px; }
.seja-calendar-year-combo { position: relative; display: grid; grid-template-columns: minmax(96px, 1fr) 52px; min-width: 178px; }
.seja-calendar-year-combo .seja-calendar-jump { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.seja-calendar-year-toggle {
  min-width: 52px;
  border: 1px solid var(--border, #383442);
  border-left: 0;
  border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-2));
  color: var(--primary);
  display: grid;
  place-items: center;
}
.seja-calendar-year-toggle .seja-ui-icon { width: 17px; height: 17px; }
.seja-calendar-month-menu,
.seja-calendar-year-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  align-content: start;
  grid-template-columns: repeat(3, minmax(68px, 1fr));
  gap: 6px;
  min-width: 250px;
  max-height: 260px;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 10px;
  border: 1px solid var(--border, #383442);
  border-radius: 14px;
  background: var(--surface-elevated);
  box-shadow: 0 20px 46px rgba(2,6,23,.24);
}
.seja-calendar-month-menu { left: 0; right: auto; grid-template-columns: repeat(2, minmax(112px, 1fr)); min-width: min(320px, calc(100vw - 48px)); }
.seja-calendar-month-menu.open,
.seja-calendar-year-menu.open { display: grid; }
.seja-calendar-month-menu button,
.seja-calendar-year-menu button {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-strong);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
.seja-calendar-year-menu .seja-calendar-year-page { grid-column: 1 / -1; min-height: 34px; border-color: color-mix(in srgb, var(--primary) 22%, var(--border)); background: color-mix(in srgb, var(--primary) 7%, var(--surface-2)); color: var(--text-muted); }
.seja-calendar-month-menu button:hover,
.seja-calendar-month-menu button.selected,
.seja-calendar-year-menu button:hover,
.seja-calendar-year-menu button.selected { background: var(--primary); color: #fff; }
.seja-calendar-months { display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 1.1rem; }
.seja-calendar-months.single-month { grid-template-columns: minmax(260px, 420px); justify-content: center; }
.seja-calendar-month { min-width: 0; padding: 1rem; border: 1px solid color-mix(in srgb, var(--border) 78%, transparent); border-radius: 16px; background: var(--surface-soft); }
.seja-calendar-month h3 { margin: 0 0 .8rem; color: var(--text-strong); text-align: center; font-size: .95rem; }
.seja-calendar-weekdays,
.seja-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.seja-calendar-weekdays { gap: .15rem; }
.seja-calendar-weekdays span { padding: .35rem 0; color: var(--text-muted); font-size: .76rem; font-weight: 900; text-align: center; }
.seja-calendar-grid { grid-auto-rows: 42px; column-gap: 0; row-gap: .35rem; }
.seja-calendar-day {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent !important;
  color: var(--text-body);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: none !important;
  transform: none !important;
}
.seja-calendar-day::before,
.seja-calendar-day::after { content: ""; position: absolute; pointer-events: none; transition: background .16s ease, box-shadow .16s ease, border-radius .16s ease; }
.seja-calendar-day::before { inset: 7px 0; z-index: -2; border-radius: 0; background: transparent; }
.seja-calendar-day::after { inset: 5px 6px; z-index: -1; border-radius: 999px; background: transparent; }
.seja-calendar-day.outside { color: color-mix(in srgb, var(--text-muted) 44%, transparent); }
.seja-calendar-day:disabled,
.seja-calendar-day.disabled {
  cursor: not-allowed;
  color: color-mix(in srgb, var(--text-muted) 42%, transparent);
  opacity: .52;
}
.seja-calendar-day:disabled::before,
.seja-calendar-day:disabled::after,
.seja-calendar-day.disabled::before,
.seja-calendar-day.disabled::after { background: transparent !important; box-shadow: none !important; }
.seja-calendar-day:hover:not(:disabled) { border-color: color-mix(in srgb, var(--primary) 48%, transparent); color: var(--text-strong); }
.seja-calendar-day:hover:not(:disabled)::before { background: color-mix(in srgb, var(--primary) 9%, var(--surface-soft)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent); border-radius: 999px; }
.seja-calendar-day.in-range { color: var(--text-strong); }
.seja-calendar-day.in-range::before { background: color-mix(in srgb, var(--primary) 20%, var(--surface-soft)); }
.seja-calendar-day.range-week-start.in-range::before,
.seja-calendar-day.range-start.in-range::before { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.seja-calendar-day.range-week-end.in-range::before,
.seja-calendar-day.range-end.in-range::before { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
.seja-calendar-day.selected:not(.in-range)::after,
.seja-calendar-day.range-start::after,
.seja-calendar-day.range-end::after { background: linear-gradient(135deg, var(--primary), var(--primary-2, var(--seja-brand-500))); box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 28%, transparent); }
.seja-calendar-day.selected,
.seja-calendar-day.range-start,
.seja-calendar-day.range-end { color: #fff; }
.seja-calendar-day.range-start.range-end::before { background: transparent; }
.seja-calendar-attention-marker {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 3;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 72%, var(--border, #334155));
  border-radius: 999px;
  background: var(--danger, #dc2626);
  color: #fff;
  font-size: .52rem;
  font-weight: 950;
  line-height: 12px;
  pointer-events: none;
}
.seja-calendar-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .95rem; }
.seja-calendar-footer strong { color: var(--text-strong); }
.seja-calendar-footer .modal-actions { margin: 0; }
@media (max-width: 980px) {
  .seja-calendar-card,
  .seja-calendar-months { grid-template-columns: 1fr; }
  .seja-calendar-jump-row,
  .seja-calendar-jump-group { grid-template-columns: 1fr; }
  .seja-calendar-year-combo { max-width: none; }
  .seja-calendar-presets { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 1rem; }
}
@media (max-width: 640px) {
  .seja-calendar-popover { padding: 10px; }
  .seja-calendar-card { width: calc(100vw - 20px); max-height: calc(100vh - 20px); padding: .8rem; }
  .seja-calendar-top { gap: .55rem; }
  .seja-calendar-month { padding: .75rem; }
}


/* =========================================================
   Shared guided field-validation presentation
   Feature logic owns validation rules; this primitive owns
   accessible Light/Dark error presentation only.
   ========================================================= */
.seja-field-validation.has-error :is(input, select, textarea),
.seja-field-validation.has-error .seja-date-control,
.seja-field-validation.has-error .seja-custom-select-trigger {
  border-color: color-mix(in srgb, var(--danger, #ef4444) 70%, var(--border)) !important;
}
.seja-field-validation.has-error :is(input, select, textarea):focus,
.seja-field-validation.has-error .seja-custom-select-trigger:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger, #ef4444) 16%, transparent) !important;
}
.seja-field-error {
  display: block;
  margin-top: 7px;
  color: var(--seja-danger-foreground, var(--danger, #ef4444));
  font-size: .82rem;
  font-weight: 750;
  line-height: 1.35;
}
.seja-field-error[hidden] { display: none !important; }

/* =========================================================
   Shared authenticated/local Admin media viewer
   Feature modules provide URLs and labels; this primitive owns viewing only.
   Single-photo and gallery presentation adapt automatically while preserving
   the complete source image at the initial fit.
   ========================================================= */
.seja-media-viewer {
  position: fixed;
  inset: 0;
  z-index: 1900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--seja-backdrop-bg, rgba(2, 6, 23, .78));
}
.seja-media-viewer.is-open { display: flex; }
.seja-media-viewer-dialog {
  width: min(1120px, calc(100vw - 28px));
  height: min(94vh, 920px);
  max-height: min(94vh, 920px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--seja-dialog-border);
  border-radius: var(--seja-dialog-radius);
  background: var(--seja-dialog-bg);
  color: var(--text-light, var(--text-strong, #f8fafc));
  box-shadow: var(--seja-dialog-shadow);
}
.seja-media-viewer-header,
.seja-media-viewer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}
.seja-media-viewer-header { border-bottom: 1px solid var(--border, #334155); background: var(--seja-dialog-header-bg); }
.seja-media-viewer-footer { border-top: 1px solid var(--border, #334155); background: var(--seja-dialog-footer-bg); flex-wrap: wrap; }
.seja-media-viewer.is-single-media .seja-media-viewer-footer { justify-content: flex-end; }
.seja-media-viewer-title { min-width: 0; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seja-media-viewer-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--primary, #705adc) 5%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface-2, #020617) 90%, #000 10%);
  touch-action: none;
  cursor: zoom-in;
}
html[data-theme="light"] .seja-media-viewer-stage {
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--primary, #705adc) 4%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-2, #f4f6fb) 96%, white 4%);
}
.seja-media-viewer-stage.is-zoomed { cursor: grab; }
.seja-media-viewer-stage.is-dragging { cursor: grabbing; }
.seja-media-viewer-image-shell {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  min-width: 0;
  min-height: 0;
  padding: 16px 62px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border, #334155) 58%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-2, #020617) 90%, black 10%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
}
html[data-theme="light"] .seja-media-viewer-image-shell {
  border-color: color-mix(in srgb, var(--border, #d8d3e1) 72%, white 28%);
  background: color-mix(in srgb, var(--surface-2, #f4f6fb) 96%, white 4%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}
.seja-media-viewer.is-single-media .seja-media-viewer-image-shell { padding-inline: 20px; }
.seja-media-viewer-backdrop {
  position: absolute;
  z-index: 0;
  inset: -8%;
  width: 116%;
  height: 116%;
  object-fit: cover;
  opacity: .075;
  filter: blur(22px) brightness(.48) saturate(1.02);
  transform: scale(1.035);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.seja-media-viewer.is-portrait-media .seja-media-viewer-backdrop { opacity: .095; }
.seja-media-viewer.is-square-media .seja-media-viewer-backdrop { opacity: .085; }
.seja-media-viewer.is-landscape-media .seja-media-viewer-backdrop { opacity: .060; }
html[data-theme="light"] .seja-media-viewer-backdrop {
  opacity: .050;
  filter: blur(21px) brightness(1.01) saturate(.94);
}
html[data-theme="light"] .seja-media-viewer.is-portrait-media .seja-media-viewer-backdrop { opacity: .065; }
html[data-theme="light"] .seja-media-viewer.is-square-media .seja-media-viewer-backdrop { opacity: .058; }
html[data-theme="light"] .seja-media-viewer.is-landscape-media .seja-media-viewer-backdrop { opacity: .042; }
.seja-media-viewer-stage.is-zoomed .seja-media-viewer-backdrop { opacity: .025; }
html[data-theme="light"] .seja-media-viewer-stage.is-zoomed .seja-media-viewer-backdrop { opacity: .018; }
.seja-media-viewer-image-shell::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, .08), transparent 24%, transparent 74%, rgba(2, 6, 23, .18)),
    radial-gradient(circle at 50% 42%, transparent 45%, color-mix(in srgb, var(--surface-2, #020617) 34%, transparent) 100%);
}
html[data-theme="light"] .seja-media-viewer-image-shell::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .10), transparent 28%, transparent 72%, rgba(71, 85, 105, .05)),
    radial-gradient(circle at 50% 42%, transparent 52%, color-mix(in srgb, var(--surface-2, #f4f6fb) 24%, transparent) 100%);
}
.seja-media-viewer-image {
  position: relative;
  z-index: 2;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  user-select: none;
  -webkit-user-drag: none;
  object-fit: contain;
  border: 1px solid color-mix(in srgb, white 28%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface, #111827) 92%, transparent);
  box-shadow: 0 16px 42px rgba(2, 6, 23, .26);
  transform-origin: center center;
  will-change: transform;
}
html[data-theme="light"] .seja-media-viewer-image {
  border-color: color-mix(in srgb, var(--border, #d8d3e1) 58%, white 42%);
  background: color-mix(in srgb, var(--surface, #ffffff) 94%, transparent);
  box-shadow: 0 14px 36px rgba(51, 65, 85, .16);
}
.seja-media-viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; }
.seja-media-viewer-prev { left: 14px; }
.seja-media-viewer-next { right: 14px; }
.seja-media-viewer-nav[hidden],
.seja-media-viewer-counter[hidden] { display: none !important; }
.seja-media-viewer-controls { display: inline-flex; align-items: center; gap: 8px; }
.seja-media-viewer-counter { font-weight: 850; color: var(--muted, #94a3b8); }
.seja-media-viewer-controls :is(button:disabled, .seja-button:disabled) {
  cursor: not-allowed;
  opacity: .46;
  box-shadow: none;
}
@supports (height: 100dvh) {
  .seja-media-viewer-dialog { height: min(94dvh, 920px); max-height: min(94dvh, 920px); }
}
@media (prefers-reduced-motion: reduce) {
  .seja-media-viewer-image-shell { scroll-behavior: auto; }
}
@media (max-width: 720px) {
  .seja-media-viewer { padding: 8px; }
  .seja-media-viewer-dialog { width: calc(100vw - 16px); height: calc(100vh - 16px); max-height: calc(100vh - 16px); grid-template-rows: auto minmax(0, 1fr) auto; border-radius: 18px; }
  .seja-media-viewer-stage { min-height: 0; }
  .seja-media-viewer-image-shell { width: calc(100% - 12px); height: calc(100% - 12px); padding: 8px 48px; border-radius: 16px; }
  .seja-media-viewer.is-single-media .seja-media-viewer-image-shell { padding-inline: 8px; }
  .seja-media-viewer-image { border-radius: 11px; }
  .seja-media-viewer-footer { justify-content: center; }
  .seja-media-viewer.is-single-media .seja-media-viewer-footer { justify-content: center; }
}

/* Shared semantic checkbox. Use for independent multi-selection, not persistent on/off settings. */
.seja-checkbox-input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  margin: 0 !important;
  border: 1px solid var(--border, rgba(148, 163, 184, .45)) !important;
  border-radius: 6px !important;
  background: var(--input, var(--card-soft, #111827)) !important;
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  cursor: pointer;
  box-shadow: none !important;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.seja-checkbox-input::after {
  content: "";
  width: 10px;
  height: 10px;
  background: #ffffff;
  clip-path: polygon(14% 44%, 0 59%, 38% 100%, 100% 18%, 84% 4%, 36% 68%);
  transform: scale(0);
  transform-origin: center;
  transition: transform .16s ease;
}
.seja-checkbox-input:checked {
  background: var(--primary, #5b4cf0) !important;
  border-color: var(--primary, #5b4cf0) !important;
}
.seja-checkbox-input:checked::after { transform: scale(1); }
.seja-checkbox-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #5b4cf0) 22%, transparent) !important;
}
.seja-checkbox-input:disabled { opacity: .55; cursor: not-allowed; }

/* Shared on/off switch for persistent settings. Business meaning stays feature-owned. */
.seja-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  width: fit-content;
  color: var(--text, var(--text-light, #e5e7eb));
  cursor: pointer;
  user-select: none;
}
.seja-switch input[type="checkbox"] {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
}
.seja-switch-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 46px;
  height: 26px;
  padding: 3px;
  border: 1px solid var(--border, rgba(148,163,184,.45));
  border-radius: 999px;
  background: color-mix(in srgb, var(--input, var(--card-soft, #111827)) 92%, var(--muted, #64748b) 8%);
  flex: 0 0 46px;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.seja-switch-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, #fff 94%, var(--muted, #64748b) 6%);
  box-shadow: 0 2px 6px rgba(15,23,42,.20);
  transform: translateX(0);
  transition: transform .18s ease, background .18s ease;
}
.seja-switch input:checked + .seja-switch-track {
  border-color: var(--primary, #5b4cf0);
  background: var(--primary, #5b4cf0);
}
.seja-switch input:checked + .seja-switch-track .seja-switch-thumb { transform: translateX(20px); }
.seja-switch input:focus-visible + .seja-switch-track {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary, #5b4cf0) 18%, transparent);
}
.seja-switch input:disabled + .seja-switch-track,
.seja-switch:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.seja-switch-label { font-weight: 760; line-height: 1.25; }

/* Shared compact semantic check control */
.seja-compact-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--text, #e5e7eb);
  cursor: pointer;
  user-select: none;
}

.seja-compact-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--border, rgba(148, 163, 184, .45));
  border-radius: 6px;
  background: var(--input, var(--card-soft, #111827));
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.seja-compact-check input[type="checkbox"]::after {
  content: "";
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform .16s ease;
}

.seja-compact-check input[type="checkbox"]:checked {
  background: var(--primary, #5b4cf0);
  border-color: var(--primary, #5b4cf0);
}

.seja-compact-check input[type="checkbox"]:checked::after { transform: translateY(-1px) rotate(45deg) scale(1); }
.seja-compact-check input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #5b4cf0) 22%, transparent);
}
.seja-compact-check input[type="checkbox"]:disabled { opacity: .55; cursor: not-allowed; }
.seja-compact-check:has(input:disabled) { opacity: .7; cursor: not-allowed; }

/* Shared selectable check-card; modules own only layout/content density. */
.seja-check-card {
  border: 1px solid var(--border, rgba(148, 163, 184, .32));
  border-radius: 16px;
  background: var(--surface-soft, rgba(255,255,255,.025));
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.seja-check-card:hover { border-color: color-mix(in srgb, var(--primary, #5b4cf0) 40%, var(--border, #cbd5e1)); }
.seja-check-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary, #5b4cf0) 70%, var(--border, #cbd5e1));
  background: var(--surface-selected);
}

/* 2026-08-16 final Demo semantic lock: SEJA violet owns structure; Demo orange
   owns environment identity. Warning remains a separate yellow/gold semantic. */
.seja-demo-context {
  --seja-demo-context-structure-accent: var(--primary, var(--seja-brand-600, #705adc));
  --seja-demo-context-marker: var(--seja-demo-foreground, var(--seja-demo, #f97316));
  --seja-demo-context-border: color-mix(in srgb, var(--seja-demo-context-structure-accent) 34%, var(--border, rgba(148,163,184,.28)));
  --seja-demo-context-bg: color-mix(in srgb, var(--seja-demo-context-structure-accent) 8%, var(--card, #111827));
  --seja-demo-context-text: var(--text-light, var(--text, #e5e7eb));
  --seja-demo-context-muted: var(--muted, #94a3b8);
  border-color: var(--seja-demo-context-border) !important;
  background: var(--seja-demo-context-bg) !important;
  color: var(--seja-demo-context-text) !important;
}
.seja-demo-context strong,
.seja-demo-context .seja-demo-context-kicker {
  color: var(--seja-demo-context-marker) !important;
}
.seja-demo-context span:not(.badge-demo):not(.seja-demo-badge) { color: var(--seja-demo-context-muted); }
.seja-demo-context--warning {
  --seja-demo-context-structure-accent: var(--warning, #f59e0b);
  --seja-demo-context-marker: var(--seja-warning-foreground, var(--warning, #f59e0b));
}

/* Compact Demo markers are intentionally orange and are only rendered by Demo-aware
   templates/runtime. Defining the tokens globally does not recolor Real-mode UI. */
.seja-demo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--seja-demo-border, color-mix(in srgb, var(--seja-demo, #f97316) 38%, var(--border, #383442)));
  background: var(--seja-demo-soft, color-mix(in srgb, var(--seja-demo, #f97316) 12%, var(--surface, #191821)));
  color: var(--seja-demo-foreground, var(--seja-demo, #f97316));
  border-radius: 999px;
  font-weight: 900;
}

/* =========================================================
   UNIVERSAL UTILITY LIQUID-GLASS & COMPACT ICON CONTROL PRIMITIVE
   Authoritative owner of compact utility buttons across
   Auth family, Public Presence, and Admin modules.
   ========================================================= */
.seja-icon-button {
  display: inline-flex;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 1px solid var(--notify-border, var(--border, rgba(148, 163, 184, .25)));
  border-radius: 12px;
  background: var(--notify-surface, var(--surface-soft, rgba(255, 255, 255, .04)));
  color: var(--notify-text, var(--text, #e2e8f0));
  box-shadow: var(--seja-elevation-utility-rest);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition:
    transform var(--seja-motion-control) var(--seja-motion-ease),
    opacity var(--seja-motion-control) ease,
    background var(--seja-motion-control) ease,
    border-color var(--seja-motion-control) ease,
    color var(--seja-motion-control) ease,
    box-shadow var(--seja-motion-control) ease;
}

.seja-icon-button:hover:not(:disabled) {
  opacity: .98;
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary, #5b4cf0) 45%, var(--border, rgba(148, 163, 184, .25)));
  background: color-mix(in srgb, var(--primary, #5b4cf0) 9%, var(--notify-surface, rgba(255, 255, 255, .06)));
  box-shadow: var(--seja-elevation-utility-hover);
}

.seja-icon-button:active:not(:disabled) {
  transform: translateY(0) scale(.955);
  box-shadow: var(--seja-elevation-utility-pressed);
  transition-duration: var(--seja-motion-fast);
}

.seja-icon-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary, #5b4cf0) 70%, transparent);
  outline-offset: 2px;
}


/* Semantic icon color variants are resolved by seja-theme-authority.css.
   This primitive owns geometry, motion, elevation, focus, and optional glass composition only. */

/* Liquid Glass is opt-in and composable. These selectors intentionally outrank
   page-local .icon-button/.seja-icon-button bases so the shared glass class is
   not silently neutralized by load order. */
:is(.seja-icon-button, .icon-button).seja-glass-surface {
  border-color: var(--seja-glass-border) !important;
  background:
    linear-gradient(180deg, var(--seja-glass-highlight-top), var(--seja-glass-highlight-bottom)),
    var(--seja-glass-base) !important;
  color: var(--text-strong, var(--notify-text, var(--text, #e2e8f0)));
  box-shadow:
    inset 0 1px 0 var(--seja-glass-inset-highlight),
    var(--seja-glass-shadow) !important;
  backdrop-filter: blur(var(--seja-glass-blur)) saturate(var(--seja-glass-saturation));
  -webkit-backdrop-filter: blur(var(--seja-glass-blur)) saturate(var(--seja-glass-saturation));
}
:is(.seja-icon-button, .icon-button).seja-glass-surface:hover:not(:disabled) {
  border-color: color-mix(in oklch, var(--seja-glass-border) 72%, var(--primary, #705adc) 28%) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--seja-glass-highlight-top) 88%, white 12%), var(--seja-glass-highlight-bottom)),
    color-mix(in oklch, var(--seja-glass-base) 90%, var(--primary, #705adc) 10%) !important;
  box-shadow:
    inset 0 1px 0 var(--seja-glass-inset-highlight),
    var(--seja-elevation-utility-hover) !important;
}
:is(.seja-icon-button, .icon-button).seja-glass-surface:active:not(:disabled) {
  transform: translateY(0) scale(.955);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--seja-glass-inset-highlight) 72%, transparent),
    var(--seja-elevation-utility-pressed) !important;
}
:is(.seja-icon-button, .icon-button).seja-glass-surface--primary {
  border-color: var(--seja-glass-primary-border) !important;
  background:
    linear-gradient(180deg, var(--seja-glass-primary-highlight-top), var(--seja-glass-primary-highlight-bottom)),
    linear-gradient(135deg, var(--seja-glass-primary-start), var(--seja-glass-primary-end)) !important;
  color: var(--seja-on-primary, #fff) !important;
  box-shadow:
    inset 0 1px 0 var(--seja-glass-primary-inset-highlight),
    var(--seja-glass-primary-shadow) !important;
}
:is(.seja-icon-button, .icon-button).seja-glass-surface--primary:hover:not(:disabled) {
  box-shadow:
    inset 0 1px 0 var(--seja-glass-primary-inset-highlight),
    0 13px 30px color-mix(in oklch, var(--primary, #705adc) 25%, transparent) !important;
}

/* Explicit shared compact icon-control variant. Feature styles may choose
   this size semantically, but generic geometry remains owned here. */
.seja-icon-button[data-seja-icon-size="compact"] {
  flex: 0 0 28px;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  border-radius: 8px;
}

.seja-icon-button[data-seja-icon-size="compact"] .seja-ui-icon {
  width: 16px;
  height: 16px;
}

.seja-icon-button:disabled,
.seja-icon-button[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.seja-button:active:not(:disabled) {
  transform: translateY(0) scale(.985);
}

.seja-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary, #5b4cf0) 70%, transparent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .seja-icon-button,
  .seja-button {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ======================================================================
   Shared stack primitive
   ----------------------------------------------------------------------
   One current surface is interactive at a time. Rear depth is paint-only.
   This file is the single geometry owner for Toast and Notification stacks.
   The stack steps downward with inline inset; rear cards keep stable opacity
   and do not carry independent elevation shadows.

   Visual layer invariant:
     size 1  -> 0 rear surfaces
     size 2  -> 1 rear surface
     size 3+ -> 2 rear surfaces
   ====================================================================== */
.seja-stack-surface {
  --seja-stack-surface-bg: var(--surface-elevated, var(--surface, #0f172a));
  --seja-stack-border: var(--border, #334155);
  --seja-stack-radius: 16px;
  --seja-stack-step-y: 6px;
  --seja-stack-step-inline: 8px;
  --seja-stack-reserve: 12px;
  position: relative;
  isolation: isolate;
}

.seja-stack-surface[data-seja-stack-depth="true"] {
  margin-bottom: var(--seja-stack-reserve);
}

.seja-stack-surface[data-seja-stack-depth="true"]::before,
.seja-stack-surface[data-seja-stack-depth="true"]::after {
  content: "";
  position: absolute;
  border: 1px solid var(--seja-stack-border);
  border-radius: var(--seja-stack-radius);
  background: var(--seja-stack-surface-bg);
  box-shadow: none;
  pointer-events: none;
  transition:
    inset var(--seja-motion-control) var(--seja-motion-ease),
    border-color var(--seja-motion-control) ease,
    background var(--seja-motion-control) ease;
}

.seja-stack-surface[data-seja-stack-depth="true"]::before {
  z-index: -1;
  top: var(--seja-stack-step-y);
  right: var(--seja-stack-step-inline);
  bottom: calc(-1 * var(--seja-stack-step-y));
  left: var(--seja-stack-step-inline);
}

.seja-stack-surface[data-seja-stack-depth="true"]::after {
  z-index: -2;
  top: calc(var(--seja-stack-step-y) * 2);
  right: calc(var(--seja-stack-step-inline) * 2);
  bottom: calc(-2 * var(--seja-stack-step-y));
  left: calc(var(--seja-stack-step-inline) * 2);
}

.seja-stack-surface.is-stack-expanded,
.seja-stack-surface[data-seja-stack-size="1"] {
  margin-bottom: 0;
}

.seja-stack-surface.is-stack-expanded::before,
.seja-stack-surface.is-stack-expanded::after,
.seja-stack-surface[data-seja-stack-size="1"]::before,
.seja-stack-surface[data-seja-stack-size="1"]::after {
  display: none;
}

/* Two real items must never paint a fake third card. */
.seja-stack-surface[data-seja-stack-size="2"]::after {
  display: none;
}

.seja-stack-traversal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.seja-stack-position {
  min-width: 56px;
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 850;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.seja-stack-surface.is-stack-shifting-forward {
  animation: seja-stack-shift-forward var(--seja-motion-control) var(--seja-motion-ease);
}

.seja-stack-surface.is-stack-shifting-backward {
  animation: seja-stack-shift-backward var(--seja-motion-control) var(--seja-motion-ease);
}

@keyframes seja-stack-shift-forward {
  0% { transform: translateY(0); }
  45% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

@keyframes seja-stack-shift-backward {
  0% { transform: translateY(0); }
  45% { transform: translateY(4px); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .seja-stack-surface,
  .seja-stack-surface::before,
  .seja-stack-surface::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Protected media failure state: explicit, readable, and independent of image pixels. */
.seja-media-viewer-error{
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  z-index:4;
  width:min(440px,calc(100% - 40px));
  padding:16px 18px;
  border:1px solid color-mix(in srgb,var(--danger) 34%,var(--border));
  border-radius:14px;
  background:color-mix(in srgb,var(--surface-2) 94%,transparent);
  color:var(--text);
  box-shadow:0 16px 40px color-mix(in srgb,var(--text) 18%,transparent);
  text-align:center;
  line-height:1.5;
}
.seja-media-viewer-error[hidden]{display:none!important}