/* ARETE: shared brand and appearance tokens. Theme choice is saved by the installer. */
:root,
[data-theme="dark"] {
    color-scheme: dark;
    --ef-page: #020617;
    --ef-surface: #0f172a;
    --ef-field: #020617;
    --ef-subtle: #172033;
    --ef-hover: #1e293b;
    --ef-text: #f1f5f9;
    --ef-secondary: #cbd5e1;
    --ef-muted: #94a3b8;
    --ef-border: #334155;
    --ef-line: #1e293b;
    --ef-accent: #e48c15;
    --ef-accent-hover: #f3a638;
    --ef-accent-text: #f6b34b;
    --ef-accent-soft: rgba(228, 140, 21, .14);
    --ef-accent-border: rgba(228, 140, 21, .5);
    --ef-focus: #e48c15;
    --ef-brand-card: #33220b;
    --ef-chart-grid: rgba(148, 163, 184, .14);
    --ef-success: #d1fae5;
    --ef-success-bg: #0b2922;
    --ef-success-card: #071b23;
    --ef-success-border: #34d399;
    --ef-danger: #fee2e2;
    --ef-danger-bg: #2a1216;
    --ef-danger-card: #240b14;
    --ef-danger-border: #f87171;
    --ef-warning: #fef3c7;
    --ef-warning-bg: #272008;
    --ef-warning-card: #211808;
    --ef-warning-border: #fbbf24;
    --ef-info: #e0f2fe;
    --ef-info-bg: #082f49;
    --ef-info-border: rgba(56, 189, 248, .45);
    --ef-today: #082f49;
}

[data-theme="light"] {
    color-scheme: light;
    --ef-page: #f3f5f7;
    --ef-surface: #ffffff;
    --ef-field: #ffffff;
    --ef-subtle: #f5f7fa;
    --ef-hover: #edf1f5;
    --ef-text: #202936;
    --ef-secondary: #3d4a5c;
    --ef-muted: #596779;
    --ef-border: #c7d0da;
    --ef-line: #dce2e8;
    --ef-accent-hover: #d7800d;
    --ef-accent-text: #8a4808;
    --ef-accent-soft: #fff3df;
    --ef-accent-border: #edbf80;
    --ef-focus: #a55a06;
    --ef-brand-card: #fff6e8;
    --ef-chart-grid: rgba(71, 85, 105, .15);
    --ef-success: #12613f;
    --ef-success-bg: #eaf8ef;
    --ef-success-card: #f0fbf4;
    --ef-success-border: #8ac9a6;
    --ef-danger: #a72332;
    --ef-danger-bg: #fff0f1;
    --ef-danger-card: #fff5f5;
    --ef-danger-border: #efadb4;
    --ef-warning: #80510c;
    --ef-warning-bg: #fff5d9;
    --ef-warning-card: #fffaeb;
    --ef-warning-border: #e6c66e;
    --ef-info: #18537a;
    --ef-info-bg: #eaf4ff;
    --ef-info-border: #a8ccec;
    --ef-today: #eaf4ff;
}

/* Keep the original framework accents throughout the dark installer, including its footer. */
html[data-theme="dark"][data-installer-appearance] {
    --ef-accent: #22d3ee;
    --ef-accent-hover: #67e8f9;
    --ef-accent-text: #7dd3fc;
    --ef-accent-soft: rgba(14, 165, 233, .14);
    --ef-accent-border: rgba(56, 189, 248, .45);
    --ef-focus: #22d3ee;
    --ef-brand-card: #082f49;
}
html[data-theme="dark"][data-installer-appearance] .ef-framework-card { color: #e0f2fe !important; }
html[data-theme="dark"][data-installer-appearance] .ef-framework-active { border-color: #22d3ee !important; background-color: rgba(34, 211, 238, .1) !important; color: #cffafe !important; }
html[data-theme="dark"][data-installer-appearance] .ef-framework-badge { border-color: rgba(34, 211, 238, .3) !important; background-color: rgba(6, 182, 212, .1) !important; color: #cffafe !important; }
html[data-theme="dark"][data-installer-appearance] .hover\:text-cyan-200:hover { color: #a5f3fc !important; }
html[data-theme="dark"][data-installer-appearance] .hover\:text-cyan-100:hover { color: #cffafe !important; }
html[data-theme="dark"][data-installer-appearance] .hover\:bg-cyan-500\/10:hover { background-color: rgba(6, 182, 212, .1) !important; }
html[data-theme="dark"][data-installer-appearance] .hover\:bg-cyan-400\/10:hover { background-color: rgba(34, 211, 238, .1) !important; }
html[data-theme="dark"][data-installer-appearance] .focus\:bg-cyan-500\/10:focus { background-color: rgba(6, 182, 212, .1) !important; }

/* Text-colored required marks and readable blue accents throughout the light installer. */
html[data-theme][data-installer-page="initial"] .ef-installer-section-icon { color: var(--ef-text) !important; }
html[data-theme="dark"][data-installer-page="initial"] .ef-required-star { color: var(--ef-text) !important; }
html[data-theme="light"][data-installer-workflow] .ef-required-star { color: inherit !important; }
html[data-theme="light"][data-installer-workflow] {
    --ef-accent: #0284c7;
    --ef-accent-hover: #0369a1;
    --ef-accent-text: #0369a1;
    --ef-accent-soft: #eaf4ff;
    --ef-accent-border: #a8ccec;
    --ef-focus: #0284c7;
    --ef-brand-card: #eaf4ff;
}
html[data-theme="light"][data-installer-workflow] .hover\:text-cyan-200:hover,
html[data-theme="light"][data-installer-workflow] .hover\:text-cyan-100:hover { color: #075985 !important; }
html[data-theme="light"][data-installer-workflow] :is(.ef-installer-project-icon, .ef-installer-module-icon) { color: var(--ef-text) !important; }

/* Second installer page: only section heading icons, without changing status colors. */
html[data-theme="light"] [data-installer-technical] .ef-installer-technical-icon { color: var(--ef-text) !important; }
html[data-theme="dark"] [data-installer-technical] .ef-installer-technical-icon { color: var(--ef-text) !important; }

/* Project step: white outer icon in dark mode; inner icons retain their status colors. */
html[data-theme="dark"][data-installer-appearance] .ef-installer-project-icon { color: var(--ef-text) !important; }

/* Module step: white outer icons only; inner icons keep neutral/error/warning colors. */
html[data-theme="dark"] [data-installer-modules] .ef-installer-module-icon { color: var(--ef-text) !important; }

/* Completed installer and Diagnostics status share neutral icons in both themes. */
html[data-theme] [data-installer-readonly] summary .ef-framework-text { color: var(--ef-text) !important; }
html[data-theme] [data-installer-readonly] details > :not(summary) .ef-framework-text { color: var(--ef-muted) !important; }
html[data-theme="dark"] [data-installer-status] .ef-installer-status-eyebrow { color: #f6b34b !important; }

/* Diagnostics keeps its amber footer even when the status page reuses the cyan installer. */
html[data-theme="dark"][data-installer-appearance] [data-diagnostics-footer] {
    --ef-accent-text: #f6b34b;
    --ef-accent-border: rgba(228, 140, 21, .5);
    --ef-focus: #e48c15;
}
html[data-theme="dark"][data-installer-appearance] [data-diagnostics-footer] .hover\:text-cyan-200:hover { color: var(--ef-accent-text) !important; }

/* Initial health cards: stronger icon tiles, lighter in dark mode and darker in light mode. */
html[data-theme="dark"] [data-installer-health] .ef-state-ok-icon { background-color: #124333 !important; }
html[data-theme="dark"] [data-installer-health] .ef-state-error-icon { background-color: #4b1e2b !important; }
html[data-theme="dark"] [data-installer-health] .ef-state-warning-icon { background-color: #493a12 !important; }
html[data-theme="light"] [data-installer-health] .ef-state-ok-icon { background-color: #d4ebde !important; }
html[data-theme="light"] [data-installer-health] .ef-state-error-icon { background-color: #f7dce0 !important; }
html[data-theme="light"] [data-installer-health] .ef-state-warning-icon { background-color: #f2e2b6 !important; }

/* Installer entry screen: pale blue actions and readable blue links in light mode. */
html[data-theme="light"][data-installer-page="entry"] {
    --ef-accent: #7dd3fc;
    --ef-accent-hover: #bae6fd;
    --ef-accent-text: #0369a1;
    --ef-accent-soft: #eaf4ff;
    --ef-accent-border: #a8ccec;
    --ef-focus: #0284c7;
    --ef-brand-card: #eaf4ff;
}
html[data-theme="light"][data-installer-page="entry"] .hover\:text-cyan-200:hover,
html[data-theme="light"][data-installer-page="entry"] .hover\:text-cyan-100:hover { color: #075985 !important; }

html[data-theme] body { background-color: var(--ef-page) !important; color: var(--ef-text) !important; }
/* Implicit grid tracks must shrink; wide tables keep their own scroll container. */
.ef-app-main, .ef-app-main .grid, .ef-app-main .grid > * { min-width: 0; }
.ef-app-main .grid:not([class*="grid-cols-"]) { grid-template-columns: minmax(0, 1fr); }
.ef-brand-header { width: 100%; max-width: 80rem; margin: 0 auto; padding: 1.25rem 1rem 0; }
.ef-brand-header-compact { max-width: 48rem; }
.ef-brand-identity { display: inline-flex; align-items: center; gap: .8rem; padding: .55rem .85rem; background: transparent; border: 1px solid transparent; border-radius: .75rem; text-decoration: none; }
.ef-brand-identity:focus-visible, .ef-auth-brand:focus-visible { outline: 3px solid var(--ef-focus); outline-offset: 4px; }
.ef-brand-symbol { width: 34px; height: 44px; object-fit: contain; }
.ef-brand-wordmark { width: 126px; height: 44px; object-fit: contain; }
.ef-brand-header + .ef-app-main { padding-top: 1.25rem; }
.ef-auth-main { padding-top: 2rem; }
.ef-auth-brand { display: block; width: fit-content; margin: 0 auto 1.5rem; padding: .8rem 1rem; border: 1px solid transparent; border-radius: 1rem; background: transparent; }
.ef-auth-brand img { display: block; width: 128px; height: 160px; object-fit: contain; }
html[data-theme] .ef-brand-on-dark { display: none; }
html[data-theme="dark"] .ef-brand-on-light { display: none; }
html[data-theme="dark"] .ef-brand-on-dark { display: block; }
html[data-theme="dark"] :is(.ef-brand-identity, .ef-auth-brand) { background: transparent; border-color: transparent; }
html[data-theme] .ef-brand-identity-frameless { background: transparent; border-color: transparent; }
html[data-theme] .ef-auth-brand-frameless { background: transparent; border-color: transparent; }
html[data-theme="light"][data-installer-appearance] .ef-brand-identity { background: transparent; border-color: transparent; }
html[data-theme="light"][data-installer-appearance] [role="progressbar"] { background-color: #d5dde6 !important; }

html[data-theme] .ef-framework-text { color: var(--ef-accent-text) !important; }
html[data-theme] .ef-framework-icon { background-color: var(--ef-accent-soft) !important; color: var(--ef-accent-text) !important; }
html[data-theme] .ef-framework-card { background-color: var(--ef-brand-card) !important; border-color: var(--ef-accent-border) !important; color: var(--ef-accent-text) !important; }
html[data-theme] :is(.ef-framework-active, .ef-framework-badge) { background-color: var(--ef-accent-soft) !important; border-color: var(--ef-accent-border) !important; color: var(--ef-accent-text) !important; }
html[data-theme] .ef-required-star { color: var(--ef-accent-text); }
html[data-theme] .ef-placeholder-select { color: var(--ef-muted) !important; }

html[data-theme] .ef-list-table,
html[data-theme] .ef-list-table :is(tbody, tbody tr) { background-color: var(--ef-surface); }
html[data-theme] .ef-list-table :is(thead, thead tr),
html[data-theme] .ef-list-footer { background-color: var(--ef-hover) !important; color: var(--ef-secondary) !important; border-color: var(--ef-border) !important; }
html[data-theme] .ef-list-table :is(tbody tr, tbody tr > *) { border-color: var(--ef-line) !important; }
html[data-theme] .ef-list-table tbody tr:hover { background-color: var(--ef-subtle); }
html[data-theme] .ef-list-footer-empty { background-color: var(--ef-surface) !important; border-color: var(--ef-line) !important; color: var(--ef-muted) !important; }
html[data-theme] .ef-state-neutral-card { background-color: var(--ef-surface) !important; border-color: var(--ef-line) !important; }

html[data-theme] :is(input, select, textarea) { color-scheme: inherit; }
html[data-theme] select:not([data-native-select]):not([data-no-dark-select]),
html[data-theme] .ef-select-dark,
html[data-theme] select :is(option, optgroup) { color-scheme: inherit; background-color: var(--ef-field) !important; color: var(--ef-text) !important; }
html[data-theme] select option:checked { background-color: var(--ef-hover) !important; color: var(--ef-text) !important; }
html[data-theme] input:is([type="checkbox"], [type="radio"]) { color: var(--ef-accent) !important; border-color: var(--ef-muted) !important; background-color: var(--ef-field) !important; background-image: none !important; accent-color: var(--ef-accent); }
html[data-theme] input:is([type="checkbox"], [type="radio"]):checked { border-color: var(--ef-accent) !important; background-color: var(--ef-accent) !important; }
html[data-theme] input:is([type="checkbox"], [type="radio"]):focus { outline-color: var(--ef-focus); }

/* Keep every light installer checkbox blue, as on its first page, without recoloring the app. */
html[data-theme="light"][data-installer-appearance] input[type="checkbox"] {
    --ef-accent: #0284c7;
    --ef-accent-border: #a8ccec;
    --ef-focus: #0284c7;
}

/* The native checkbox is visually hidden, so keyboard focus belongs on its switch track. */
html[data-theme][data-installer-workflow] input[role="switch"]:focus-visible + span[aria-hidden="true"] {
    outline: 2px solid var(--ef-focus);
    outline-offset: 3px;
}

html[data-theme] .flatpickr-calendar { background: var(--ef-field); border: 1px solid var(--ef-border); color: var(--ef-text); }
html[data-theme] .flatpickr-calendar:is(.arrowTop, .arrowBottom)::before,
html[data-theme] .flatpickr-calendar:is(.arrowTop, .arrowBottom)::after { border-top-color: var(--ef-field); border-bottom-color: var(--ef-field); }
html[data-theme] :is(.flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year) { color: var(--ef-text); background: transparent; }
html[data-theme] :is(.flatpickr-current-month .flatpickr-monthDropdown-months:hover, .flatpickr-current-month input.cur-year:hover, .flatpickr-current-month input.cur-year:focus) { background: var(--ef-hover); }
html[data-theme] .flatpickr-weekday { color: var(--ef-accent-text); }
html[data-theme] .flatpickr-day { color: var(--ef-secondary); }
html[data-theme] .flatpickr-day:is(:hover, :focus) { background: var(--ef-hover); border-color: var(--ef-border); color: var(--ef-text); }
html[data-theme] .flatpickr-day.today { border-color: var(--ef-accent); }
html[data-theme] .flatpickr-day:is(.selected, .startRange, .endRange) { background: var(--ef-accent); border-color: var(--ef-accent); color: #231f20; }
html[data-theme] .flatpickr-day:is(.prevMonthDay, .nextMonthDay, .flatpickr-disabled) { color: var(--ef-muted); opacity: .6; }
html[data-theme] :is(.flatpickr-prev-month, .flatpickr-next-month) { color: var(--ef-secondary); fill: var(--ef-secondary); }
html[data-theme] :is(.flatpickr-prev-month, .flatpickr-next-month):hover { color: var(--ef-accent-text); fill: var(--ef-accent-text); }

html[data-theme] #corsi-calendario {
    --fc-classic-today: var(--ef-today);
    --fc-classic-background: var(--ef-surface);
    --fc-classic-foreground: var(--ef-text);
    --fc-classic-muted-foreground: var(--ef-muted);
    --fc-classic-faint-foreground: var(--ef-muted);
    --fc-classic-border: var(--ef-line);
    --fc-classic-strong-border: var(--ef-border);
    --fc-classic-button: var(--ef-subtle);
    --fc-classic-button-border: var(--ef-border);
    --fc-classic-button-foreground: var(--ef-text);
    --fc-classic-button-strong: var(--ef-accent);
    --fc-classic-button-strong-border: var(--ef-accent);
    --fc-classic-primary: var(--ef-accent);
    --fc-classic-primary-foreground: #231f20;
    --fc-classic-event: #0e7490;
    --fc-classic-event-contrast: #ffffff;
}
html[data-theme="light"] #corsi-calendario { --fc-classic-faint: #00000005; --fc-classic-muted: #0000000a; --fc-classic-strong: #00000015; }
html[data-theme] #corsi-calendario [role="tab"][aria-selected="true"] { color: #231f20 !important; }

html[data-theme] :is(.swal2-popup, .ts-control, .ts-dropdown, .dataTables_processing) { background: var(--ef-surface); color: var(--ef-text); border-color: var(--ef-border); }
html[data-theme] :is(.swal2-title, .swal2-html-container, .ts-control input) { color: var(--ef-text); }
html[data-theme] .ts-dropdown .active { background: var(--ef-accent-soft); color: var(--ef-accent-text); }
/* DataTables 3 uses CSS tokens instead of inheriting the application's dark palette. */
html[data-theme] {
    --dt-html_background: var(--ef-page);
    --dt-control_color: var(--ef-text);
    --dt-header_border: 1px solid var(--ef-border);
    --dt-footer_border: 1px solid var(--ef-border);
    --dt-body_border: 1px solid var(--ef-line);
    --dt-order-arrow_color: var(--ef-muted);
    --dt-order-arrow_color-current: var(--ef-text);
    --dt-paging-button_color-disabled: var(--ef-muted);
    --dt-paging-button_background-current: var(--ef-accent-soft);
    --dt-paging-button_border-current: 1px solid var(--ef-accent-border);
    --dt-paging-button_color-current: var(--ef-accent-text);
    --dt-paging-button_background-current-hover: var(--ef-accent-soft);
    --dt-paging-button_border-current-hover: 1px solid var(--ef-accent-border);
    --dt-paging-button_color-current-hover: var(--ef-accent-text);
    --dt-paging-button_background-hover: var(--ef-hover);
    --dt-paging-button_color-hover: var(--ef-text);
    --dt-paging-button_border-radius: .5rem;
    --dt-input_border: 1px solid var(--ef-border);
    --dt-input_border-radius: .5rem;
    --dt-input_background: var(--ef-field);
    --dt-input_color: var(--ef-text);
}
html[data-theme] .swal2-confirm { background-color: var(--ef-accent) !important; color: #231f20 !important; }
html[data-theme] [role="dialog"].bg-slate-950\/80 { background-color: rgba(2, 6, 23, .65) !important; }

@media (max-width: 639px) {
    .ef-brand-header { padding-top: 1rem; }
    .ef-auth-main { padding-top: 1.25rem; }
    .ef-auth-brand { margin-bottom: 1.25rem; }
    .ef-auth-brand img { width: 104px; height: 130px; }
}

/* Existing utility classes share the same appearance tokens in every module. */
html[data-theme] .bg-cyan-400 { background-color: var(--ef-accent) !important; }
html[data-theme] .bg-cyan-500 { background-color: var(--ef-accent) !important; }
html[data-theme] .bg-cyan-500\/10 { background-color: color-mix(in srgb, var(--ef-accent) 10%, transparent) !important; }
html[data-theme="light"] .bg-orange-500\/10 { background-color: #fff3df !important; }
html[data-theme] .bg-red-500 { background-color: #b91c1c !important; }
html[data-theme] .bg-rose-500 { background-color: #b91c1c !important; }
html[data-theme="light"] .bg-sky-400\/10 { background-color: #eaf4ff !important; }
html[data-theme="light"] .bg-slate-700 { background-color: var(--ef-border) !important; }
html[data-theme="light"] .bg-slate-800 { background-color: var(--ef-hover) !important; }
html[data-theme="light"] .bg-slate-800\/70 { background-color: var(--ef-subtle) !important; }
html[data-theme="light"] .bg-slate-900 { background-color: var(--ef-surface) !important; }
html[data-theme="light"] .bg-slate-900\/70 { background-color: var(--ef-subtle) !important; }
html[data-theme="light"] .bg-slate-900\/95 { background-color: var(--ef-subtle) !important; }
html[data-theme="light"] .bg-slate-950 { background-color: var(--ef-field) !important; }
html[data-theme="light"] .bg-slate-950\/30 { background-color: var(--ef-subtle) !important; }
html[data-theme="light"] .bg-slate-950\/40 { background-color: var(--ef-subtle) !important; }
html[data-theme="light"] .bg-slate-950\/50 { background-color: var(--ef-subtle) !important; }
html[data-theme="light"] .bg-slate-950\/60 { background-color: var(--ef-subtle) !important; }
html[data-theme="light"] .bg-slate-950\/70 { background-color: var(--ef-subtle) !important; }
html[data-theme="light"] .bg-slate-950\/80 { background-color: var(--ef-subtle) !important; }
html[data-theme="light"] .bg-violet-400\/10 { background-color: #f4efff !important; }
html[data-theme="light"] .bg-violet-500\/10 { background-color: #f4efff !important; }
html[data-theme] .border-cyan-400 { border-color: var(--ef-accent-border) !important; }
html[data-theme] .border-cyan-400\/40 { border-color: var(--ef-accent-border) !important; }
html[data-theme] .border-cyan-500 { border-color: var(--ef-accent-border) !important; }
html[data-theme="light"] .border-sky-400\/40 { border-color: #18537a !important; }
html[data-theme="light"] .border-slate-600 { border-color: var(--ef-border) !important; }
html[data-theme="light"] .border-slate-700 { border-color: var(--ef-border) !important; }
html[data-theme="light"] .border-slate-700\/70 { border-color: var(--ef-border) !important; }
html[data-theme="light"] .border-slate-800 { border-color: var(--ef-line) !important; }
html[data-theme="light"] .border-slate-800\/70 { border-color: var(--ef-line) !important; }
html[data-theme="light"] .border-violet-400\/40 { border-color: #6840a1 !important; }
html[data-theme] .disabled\:hover\:bg-cyan-500:disabled:hover { background-color: var(--ef-accent) !important; }
/* Tailwind 4 draws dividers below each row: include the first row in the light palette. */
html[data-theme="light"] .divide-slate-800 > :not([hidden]) { border-color: var(--ef-line) !important; }
html[data-theme] .focus\:bg-cyan-500\/10:focus { background-color: color-mix(in srgb, var(--ef-accent) 10%, transparent) !important; }
html[data-theme="light"] .focus\:bg-slate-800:focus { background-color: var(--ef-hover) !important; }
html[data-theme] .focus\:border-cyan-400:focus { border-color: var(--ef-accent-border) !important; }
html[data-theme] .focus\:ring-cyan-400:focus { --tw-ring-color: color-mix(in srgb, var(--ef-accent) 100%, transparent) !important; }
html[data-theme] .focus\:ring-cyan-400\/20:focus { --tw-ring-color: color-mix(in srgb, var(--ef-accent) 20%, transparent) !important; }
html[data-theme] .focus\:ring-cyan-400\/40:focus { --tw-ring-color: color-mix(in srgb, var(--ef-accent) 40%, transparent) !important; }
html[data-theme] .hover\:bg-cyan-400:hover { background-color: var(--ef-accent-hover) !important; }
html[data-theme] .hover\:bg-cyan-400\/10:hover { background-color: color-mix(in srgb, var(--ef-accent) 10%, transparent) !important; }
html[data-theme] .hover\:bg-cyan-500\/10:hover { background-color: color-mix(in srgb, var(--ef-accent) 10%, transparent) !important; }
html[data-theme] .hover\:bg-red-400:hover { background-color: #991b1b !important; }
html[data-theme] .hover\:bg-rose-400:hover { background-color: #991b1b !important; }
html[data-theme="light"] .hover\:bg-slate-800:hover { background-color: var(--ef-hover) !important; }
html[data-theme="light"] .hover\:bg-slate-800\/80:hover { background-color: var(--ef-subtle) !important; }
html[data-theme="light"] .hover\:bg-slate-900:hover { background-color: var(--ef-surface) !important; }
html[data-theme] .hover\:border-cyan-400\/40:hover { border-color: var(--ef-accent-border) !important; }
html[data-theme] .hover\:border-cyan-400\/50:hover { border-color: var(--ef-accent-border) !important; }
html[data-theme="light"] .hover\:border-slate-500:hover { border-color: var(--ef-border) !important; }
html[data-theme="light"] .hover\:border-slate-700:hover { border-color: var(--ef-border) !important; }
html[data-theme] .hover\:text-cyan-100:hover { color: var(--ef-accent-text) !important; }
html[data-theme] .hover\:text-cyan-200:hover { color: var(--ef-accent-text) !important; }
html[data-theme="light"] .hover\:text-slate-100:hover { color: var(--ef-text) !important; }
@media (min-width: 1024px) { html[data-theme="light"] .lg\:border-slate-800 { border-color: var(--ef-line) !important; } }
html[data-theme] .peer:checked ~ .peer-checked\:bg-cyan-500 { background-color: var(--ef-accent) !important; }
html[data-theme] .placeholder\:text-slate-500::placeholder { color: var(--ef-muted) !important; }
html[data-theme="light"] .text-amber-200 { color: #80510c !important; }
html[data-theme="light"] .text-amber-300 { color: #80510c !important; }
html[data-theme] .text-cyan-200 { color: var(--ef-accent-text) !important; }
html[data-theme] .text-cyan-300 { color: var(--ef-accent-text) !important; }
html[data-theme] .text-cyan-400 { color: var(--ef-accent-text) !important; }
html[data-theme] .text-cyan-500 { color: var(--ef-accent-text) !important; }
html[data-theme="light"] .text-emerald-200 { color: #12613f !important; }
html[data-theme="light"] .text-orange-200 { color: #8a4808 !important; }
html[data-theme="light"] .text-orange-300 { color: #8a4808 !important; }
html[data-theme="light"] .text-rose-200 { color: #a72332 !important; }
html[data-theme="light"] .text-sky-100 { color: #18537a !important; }
html[data-theme="light"] .text-sky-200 { color: #18537a !important; }
html[data-theme="light"] .text-slate-100 { color: var(--ef-text) !important; }
html[data-theme="light"] .text-slate-200 { color: var(--ef-text) !important; }
html[data-theme="light"] .text-slate-300 { color: var(--ef-secondary) !important; }
html[data-theme="light"] .text-slate-400 { color: var(--ef-muted) !important; }
html[data-theme="light"] .text-slate-50 { color: var(--ef-text) !important; }
html[data-theme] .text-slate-500 { color: var(--ef-muted) !important; }
html[data-theme="light"] .text-slate-950 { color: #231f20 !important; }
html[data-theme="light"] .text-violet-100 { color: #6840a1 !important; }
html[data-theme="light"] .text-violet-200 { color: #6840a1 !important; }
html[data-theme="light"] .text-violet-300 { color: #6840a1 !important; }

/* State colors remain semantic and readable in both themes. */
html[data-theme] .ef-state-ok { border-color: var(--ef-success-border) !important; background-color: var(--ef-success-bg) !important; color: var(--ef-success) !important; }
html[data-theme] .ef-state-ok-card { border-color: var(--ef-success-border) !important; background-color: var(--ef-success-card) !important; color: var(--ef-success) !important; }
html[data-theme] .ef-state-ok-badge { border-color: var(--ef-success-border) !important; background-color: var(--ef-success-bg) !important; color: var(--ef-success) !important; }
html[data-theme] .ef-state-ok-icon { border-color: var(--ef-success-border) !important; background-color: var(--ef-success-bg) !important; color: var(--ef-success) !important; }
/* Separate green icon squares from success cards without changing installer colors. */
html[data-theme="light"]:not([data-installer-appearance]) .ef-state-ok-icon { background-color: #d5eadc !important; }
html[data-theme="dark"]:not([data-installer-appearance]) .ef-state-ok-icon { background-color: #052018 !important; }
html[data-theme] .ef-state-ok-text { color: var(--ef-success) !important; }
html[data-theme] .ef-action-ok { border-color: var(--ef-success-border) !important; color: var(--ef-success) !important; }
html[data-theme] .ef-action-ok:hover { background-color: var(--ef-success-bg) !important; }
html[data-theme] .ef-state-error { border-color: var(--ef-danger-border) !important; background-color: var(--ef-danger-bg) !important; color: var(--ef-danger) !important; }
html[data-theme] .ef-state-error-card { border-color: var(--ef-danger-border) !important; background-color: var(--ef-danger-card) !important; color: var(--ef-danger) !important; }
html[data-theme] .ef-state-error-badge { border-color: var(--ef-danger-border) !important; background-color: var(--ef-danger-bg) !important; color: var(--ef-danger) !important; }
html[data-theme] .ef-state-error-icon { border-color: var(--ef-danger-border) !important; background-color: var(--ef-danger-bg) !important; color: var(--ef-danger) !important; }
/* Slightly darker deletion icon squares; other status cards and installer colors stay unchanged. */
html[data-theme="light"] [data-delete-heading] .ef-state-error-icon { background-color: #f6dadd !important; }
html[data-theme="dark"] [data-delete-heading] .ef-state-error-icon { background-color: #250f14 !important; }
html[data-theme] .ef-state-error-text { color: var(--ef-danger) !important; }
html[data-theme] .ef-action-error { border-color: var(--ef-danger-border) !important; color: var(--ef-danger) !important; }
html[data-theme] .ef-action-error:hover { background-color: var(--ef-danger-bg) !important; }
html[data-theme] .ef-state-warning { border-color: var(--ef-warning-border) !important; background-color: var(--ef-warning-bg) !important; color: var(--ef-warning) !important; }
html[data-theme] .ef-state-warning-card { border-color: var(--ef-warning-border) !important; background-color: var(--ef-warning-card) !important; color: var(--ef-warning) !important; }
html[data-theme] .ef-state-warning-badge { border-color: var(--ef-warning-border) !important; background-color: var(--ef-warning-bg) !important; color: var(--ef-warning) !important; }
html[data-theme] .ef-state-warning-icon { border-color: var(--ef-warning-border) !important; background-color: var(--ef-warning-bg) !important; color: var(--ef-warning) !important; }
html[data-theme] .ef-state-warning-text { color: var(--ef-warning) !important; }
html[data-theme] .ef-action-warning { border-color: var(--ef-warning-border) !important; color: var(--ef-warning) !important; }
html[data-theme] .ef-action-warning:hover { background-color: var(--ef-warning-bg) !important; }
html[data-theme] .ef-state-info { border-color: var(--ef-info-border) !important; background-color: var(--ef-info-bg) !important; color: var(--ef-info) !important; }
html[data-theme] .ef-state-info-card { border-color: var(--ef-info-border) !important; background-color: var(--ef-info-bg) !important; color: var(--ef-info) !important; }
html[data-theme] .ef-state-info-badge { border-color: var(--ef-info-border) !important; background-color: var(--ef-info-bg) !important; color: var(--ef-info) !important; }
html[data-theme] .ef-state-info-icon { border-color: var(--ef-info-border) !important; background-color: var(--ef-info-bg) !important; color: var(--ef-info) !important; }
html[data-theme] .ef-state-info-text { color: var(--ef-info) !important; }
html[data-theme] .ef-ticket-free-toggle:has(input:checked),
html[data-theme] .ef-ticket-free-toggle:has(input:checked) :is(.ef-ticket-free-title, .ef-ticket-free-description) { border-color: var(--ef-success-border) !important; background-color: var(--ef-success-card) !important; color: var(--ef-success) !important; }
html[data-theme] .ef-field-ok { border-color: var(--ef-success-border) !important; }
html[data-theme] .ef-field-warning { border-color: var(--ef-warning-border) !important; }
html[data-theme] .ef-invalid-field { border-color: var(--ef-danger-border) !important; }
html[data-theme] .ef-field-ok:focus { border-color: var(--ef-success-border) !important; outline-color: var(--ef-success) !important; }
html[data-theme] .ef-field-warning:focus { border-color: var(--ef-warning-border) !important; outline-color: var(--ef-warning) !important; }
html[data-theme] .ef-invalid-field:focus { border-color: var(--ef-danger-border) !important; outline-color: var(--ef-danger) !important; }
html[data-theme] :is(button, a):is(.bg-red-500, .bg-rose-500) { color: #fff !important; }
html[data-theme] body.bg-slate-950 { background-color: var(--ef-page) !important; }
html[data-theme] [class~="focus:border-cyan-400"]:focus { border-color: var(--ef-focus) !important; }

/* Contextual page help: a flat, theme-aware drawer, used only where explicitly included. */
.ef-page-title { min-width: 0; }
.ef-page-title > h1 { overflow-wrap: anywhere; }
.ef-page-help-trigger { display: inline-grid; width: 32px; height: 32px; flex-shrink: 0; cursor: pointer; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ef-muted); }
.ef-page-help-trigger > [data-lucide] { width: 20px; height: 20px; }
.ef-page-help-trigger:hover { background: var(--ef-accent-soft); color: var(--ef-accent-text); }
html.ef-page-help-open { overflow: hidden; }
.ef-page-help {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(520px, 100%);
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--ef-border);
    background: var(--ef-surface);
    color: var(--ef-text);
    font: inherit;
}
.ef-page-help:not([open]) { display: none; }
.ef-page-help[open] { display: flex; flex-direction: column; }
.ef-page-help::backdrop { background: rgba(2, 6, 23, .64); }
.ef-page-help-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; border-bottom: 1px solid var(--ef-line); }
.ef-page-help-dismiss { display: grid; width: 36px; height: 36px; flex-shrink: 0; cursor: pointer; place-items: center; border: 1px solid var(--ef-border); border-radius: 8px; background: transparent; color: var(--ef-muted); }
.ef-page-help-dismiss:hover { background: var(--ef-hover); color: var(--ef-text); }
.ef-page-help-body { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px; font-size: 14px; line-height: 1.65; }
.ef-page-help-body > h2 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.4; }
.ef-page-help-intro { margin: 8px 0 20px; color: var(--ef-muted); }
.ef-page-help-section { margin-top: 12px; border: 1px solid var(--ef-line); border-radius: 8px; background: var(--ef-subtle); }
.ef-page-help-section > summary { display: flex; cursor: pointer; align-items: center; gap: 10px; padding: 14px; list-style: none; font-weight: 600; line-height: 1.5; }
.ef-page-help-section > summary::-webkit-details-marker { display: none; }
.ef-page-help-section > summary > svg { flex-shrink: 0; }
.ef-page-help-chevron { margin-left: auto; }
.ef-page-help-section[open] > summary > .ef-page-help-chevron { transform: rotate(180deg); }
.ef-page-help-section dl { margin: 0; padding: 0 16px 16px; }
.ef-page-help-section dl > div + div { margin-top: 12px; }
.ef-page-help-section dt { font-weight: 600; }
.ef-page-help-section dd { margin: 3px 0 0; color: var(--ef-secondary); }
.ef-page-help-footer { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-top: 1px solid var(--ef-line); }
.ef-page-help-footer p { margin: 0; max-width: 250px; color: var(--ef-muted); font-size: 12px; line-height: 1.5; }
.ef-page-help-footer button { flex-shrink: 0; }
@media (max-width: 380px) {
    .ef-page-help-footer { align-items: stretch; flex-direction: column; gap: 12px; }
    .ef-page-help-footer p { max-width: none; }
}

/* A sharp outline replaces shadow-based focus rings, including library controls. */
html[data-theme] :focus-visible,
html[data-theme] :is(input, select, textarea):focus,
html[data-theme] .ts-wrapper.focus .ts-control {
    outline: 2px solid var(--ef-focus) !important;
    outline-offset: 2px !important;
}
/* Tom Select exposes focus on its whole control, not on the nested text cursor. */
html[data-theme] .ts-control > input:focus { outline: none !important; }

/* DataTables uses inset shadows as row fills: retain selection with real colors. */
html[data-theme] table.dataTable tbody tr.selected > * {
    background-color: var(--ef-info-bg) !important;
    color: var(--ef-info) !important;
}