/**
 * Light Surface Consistency — Pre-launch UI polish
 * Theme-scoped control/surface tokens so light mode is white/open
 * and dark/night mode stays solid dark. No glass. UI-only.
 */

/* ── Neutral scale (canonical; may be missing elsewhere) ─────────────── */
:root {
    --fo-neutral-50: #f8fafc;
    --fo-neutral-100: #f1f5f9;
    --fo-neutral-200: #e2e8f0;
    --fo-neutral-300: #cbd5e1;
    --fo-neutral-400: #94a3b8;
    --fo-neutral-500: #64748b;
    --fo-neutral-600: #475569;
    --fo-neutral-700: #334155;
    --fo-neutral-800: #1e293b;
    --fo-neutral-900: #0f172a;
    --fo-neutral-950: #020617;

    --fo-brand-500: #3b82f6;
    --fo-brand-600: #2563eb;
    --fo-brand-700: #1d4ed8;

    /* Product default is light; do not alias to app.css :root --fo-bg (#0f172a). */
    --fo-page-bg: #f7f8fa;
    --fo-surface: var(--fo-card);
    --fo-surface-raised: var(--fo-card);
    --fo-surface-subtle: var(--fo-bg-alt);
    --fo-surface-hover: rgba(148, 163, 184, 0.12);
    --fo-surface-selected: rgba(59, 130, 246, 0.14);

    --fo-control-bg: #1e293b;
    --fo-control-bg-hover: #273449;
    --fo-control-border: #334155;
    --fo-control-text: #f8fafc;
    --fo-control-placeholder: #64748b;
    --fo-control-disabled-bg: #0f172a;
    --fo-control-disabled-text: #64748b;
    --fo-control-focus-ring: rgba(14, 165, 233, 0.28);
    --fo-control-focus-border: #0ea5e9;

    --fo-divider: #334155;
    --fo-table-bg: #1e293b;
    --fo-table-header-bg: #0f172a;
    --fo-table-header-text: #94a3b8;
    --fo-table-row-hover: #273449;
    --fo-table-selected: rgba(14, 165, 233, 0.16);
    --fo-table-border: #273449;

    --fo-toolbar-bg: #1e293b;
    --fo-dropdown-bg: #1e293b;
    --fo-dropdown-hover: #60a5fa;
    --fo-dropdown-hover-text: #000000;
    --fo-dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);

    --fo-calendar-bg: #1e293b;
    --fo-calendar-header-bg: #0f172a;
    --fo-calendar-day-bg: #1e293b;
    --fo-calendar-day-hover: #283548;
    --fo-calendar-grid: #334155;
    --fo-calendar-text: #cbd5e1;
    --fo-calendar-muted: #94a3b8;
    --fo-calendar-today-bg: rgba(14, 165, 233, 0.12);

    --fo-search-bg: #1e293b;
    --fo-search-bg-hover: #273449;
    --fo-search-border: #334155;
    --fo-search-text: #e2e8f0;
    --fo-search-muted: #64748b;
    --fo-search-kbd-bg: #0f172a;
    --fo-search-results-bg: #1e293b;
    --fo-search-item-hover: #273449;

    --fo-form-label: #cbd5e1;
    --fo-input-group-bg: #1e293b;

    --bs-body-bg: var(--fo-page-bg);
    --bs-body-color: var(--fo-text-primary);
    --bs-secondary-bg: var(--fo-surface-subtle);
    --bs-tertiary-bg: var(--fo-surface-subtle);
    --bs-border-color: var(--fo-border);
    --bs-form-control-bg: var(--fo-control-bg);
    --bs-table-bg: var(--fo-table-bg);
    --bs-dropdown-bg: var(--fo-dropdown-bg);
}

/* ── LIGHT (product default) ─────────────────────────────────────────── */
html:not([data-fo-theme]),
html[data-fo-theme="light"] {
    color-scheme: light;

    --fo-bg: #f7f8fa;
    --fo-bg-alt: #f1f5f9;
    --fo-card: #ffffff;
    --fo-card-hover: #f8fafc;
    --fo-border: #e2e8f0;
    --fo-border-hover: #cbd5e1;
    --fo-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.06);
    --fo-shadow-rgb: 15, 23, 42;

    --fo-text-primary: #0f172a;
    --fo-text-secondary: #475569;
    --fo-text-tertiary: #64748b;
    --fo-text: var(--fo-text-primary);
    --fo-text-muted: var(--fo-text-secondary);

    --fo-page-bg: #f7f8fa;
    --fo-surface: #ffffff;
    --fo-surface-primary: #ffffff;
    --fo-surface-raised: #ffffff;
    --fo-surface-subtle: #f1f5f9;
    --fo-surface-secondary: #f1f5f9;
    --fo-surface-elevated: #ffffff;
    --fo-surface-muted: rgba(15, 23, 42, 0.04);
    --fo-surface-hover: rgba(15, 23, 42, 0.04);
    --fo-surface-selected: rgba(37, 99, 235, 0.1);
    --fo-card-bg: #ffffff;
    --fo-composer-bg: #f8fafc;
    --fo-message-incoming-bg: #f1f5f9;
    --fo-message-incoming-text: #0f172a;
    --fo-thread-selected-bg: rgba(37, 99, 235, 0.08);
    --fo-border-subtle: rgba(15, 23, 42, 0.08);

    --fo-control-bg: #ffffff;
    --fo-control-bg-hover: #f8fafc;
    --fo-control-border: #cbd5e1;
    --fo-control-text: #0f172a;
    --fo-control-placeholder: #94a3b8;
    --fo-control-disabled-bg: #f1f5f9;
    --fo-control-disabled-text: #94a3b8;
    --fo-control-focus-ring: rgba(37, 99, 235, 0.22);
    --fo-control-focus-border: #2563eb;

    --fo-divider: #e2e8f0;
    --fo-table-bg: #ffffff;
    --fo-table-header-bg: #f8fafc;
    --fo-table-header-text: #475569;
    --fo-table-row-hover: #f1f5f9;
    --fo-table-selected: rgba(37, 99, 235, 0.1);
    --fo-table-border: #e2e8f0;

    --fo-toolbar-bg: #ffffff;
    --fo-dropdown-bg: #ffffff;
    --fo-dropdown-hover: #eff6ff;
    --fo-dropdown-hover-text: #0f172a;
    --fo-dropdown-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);

    --fo-calendar-bg: #ffffff;
    --fo-calendar-header-bg: #f8fafc;
    --fo-calendar-day-bg: #ffffff;
    --fo-calendar-day-hover: #f1f5f9;
    --fo-calendar-grid: #e2e8f0;
    --fo-calendar-text: #0f172a;
    --fo-calendar-muted: #64748b;
    --fo-calendar-today-bg: rgba(37, 99, 235, 0.08);

    --fo-search-bg: #ffffff;
    --fo-search-bg-hover: #f8fafc;
    --fo-search-border: #cbd5e1;
    --fo-search-text: #0f172a;
    --fo-search-muted: #64748b;
    --fo-search-kbd-bg: #f1f5f9;
    --fo-search-results-bg: #ffffff;
    --fo-search-item-hover: #eff6ff;

    --fo-form-label: #334155;
    --fo-input-group-bg: #f8fafc;

    --fo-btn-secondary-bg: #ffffff;
    --fo-btn-secondary-bg-hover: #f1f5f9;
    --fo-btn-secondary-border: #cbd5e1;
    --fo-btn-secondary-border-hover: #94a3b8;
    --fo-btn-secondary-text: #0f172a;
    --fo-btn-focus-ring: #2563eb;
    --fo-btn-ghost-hover-bg: rgba(15, 23, 42, 0.06);

    --bs-body-bg: var(--fo-page-bg);
    --bs-body-color: var(--fo-text-primary);
    --bs-secondary-bg: var(--fo-surface-subtle);
    --bs-tertiary-bg: var(--fo-surface-subtle);
    --bs-border-color: var(--fo-border);
    --bs-form-control-bg: var(--fo-control-bg);
    --bs-table-bg: var(--fo-table-bg);
    --bs-dropdown-bg: var(--fo-dropdown-bg);
}

/* ── DARK / NIGHT ────────────────────────────────────────────────────── */
html[data-fo-theme="dark"] {
    color-scheme: dark;

    --fo-bg: #0f172a;
    --fo-bg-alt: #172033;
    --fo-card: #1e293b;
    --fo-card-hover: #273449;
    --fo-border: #334155;
    --fo-border-hover: #475569;
    --fo-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    --fo-shadow-rgb: 0, 0, 0;

    --fo-text-primary: #f1f5f9;
    --fo-text-secondary: #94a3b8;
    --fo-text-tertiary: #64748b;
    --fo-text: var(--fo-text-primary);
    --fo-text-muted: var(--fo-text-secondary);

    --fo-page-bg: #0f172a;
    --fo-surface: #1e293b;
    --fo-surface-primary: #1e293b;
    --fo-surface-raised: #1e293b;
    --fo-surface-subtle: #172033;
    --fo-surface-secondary: #172033;
    --fo-surface-elevated: #273449;
    --fo-surface-muted: rgba(148, 163, 184, 0.08);
    --fo-surface-hover: rgba(148, 163, 184, 0.12);
    --fo-surface-selected: rgba(59, 130, 246, 0.14);
    --fo-card-bg: #1e293b;
    --fo-composer-bg: #172033;
    --fo-message-incoming-bg: #273449;
    --fo-message-incoming-text: #f1f5f9;
    --fo-thread-selected-bg: rgba(14, 165, 233, 0.14);
    --fo-border-subtle: rgba(148, 163, 184, 0.22);

    --fo-control-bg: #1e293b;
    --fo-control-bg-hover: #273449;
    --fo-control-border: #334155;
    --fo-control-text: #f8fafc;
    --fo-control-placeholder: #64748b;
    --fo-control-disabled-bg: #0f172a;
    --fo-control-disabled-text: #64748b;
    --fo-control-focus-ring: rgba(14, 165, 233, 0.28);
    --fo-control-focus-border: #0ea5e9;

    --fo-divider: #334155;
    --fo-table-bg: #1e293b;
    --fo-table-header-bg: #0f172a;
    --fo-table-header-text: #94a3b8;
    --fo-table-row-hover: #273449;
    --fo-table-selected: rgba(14, 165, 233, 0.16);
    --fo-table-border: #273449;

    --fo-toolbar-bg: #1e293b;
    --fo-dropdown-bg: #1e293b;
    --fo-dropdown-hover: #60a5fa;
    --fo-dropdown-hover-text: #000000;
    --fo-dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);

    --fo-calendar-bg: #1e293b;
    --fo-calendar-header-bg: #0f172a;
    --fo-calendar-day-bg: #1e293b;
    --fo-calendar-day-hover: #283548;
    --fo-calendar-grid: #334155;
    --fo-calendar-text: #cbd5e1;
    --fo-calendar-muted: #94a3b8;
    --fo-calendar-today-bg: rgba(14, 165, 233, 0.12);

    --fo-search-bg: #1e293b;
    --fo-search-bg-hover: #273449;
    --fo-search-border: #334155;
    --fo-search-text: #e2e8f0;
    --fo-search-muted: #64748b;
    --fo-search-kbd-bg: #0f172a;
    --fo-search-results-bg: #1e293b;
    --fo-search-item-hover: #273449;

    --fo-form-label: #cbd5e1;
    --fo-input-group-bg: #1e293b;

    --fo-btn-secondary-bg: #1e293b;
    --fo-btn-secondary-bg-hover: #273449;
    --fo-btn-secondary-border: #334155;
    --fo-btn-secondary-border-hover: #475569;
    --fo-btn-secondary-text: #f1f5f9;
    --fo-btn-focus-ring: #93c5fd;
    --fo-btn-ghost-hover-bg: rgba(0, 0, 0, 0.25);

    --bs-body-bg: var(--fo-page-bg);
    --bs-body-color: var(--fo-text-primary);
    --bs-secondary-bg: var(--fo-surface-subtle);
    --bs-tertiary-bg: var(--fo-surface-subtle);
    --bs-border-color: var(--fo-border);
    --bs-form-control-bg: var(--fo-control-bg);
    --bs-table-bg: var(--fo-table-bg);
    --bs-dropdown-bg: var(--fo-dropdown-bg);
}

/* ── Form controls (global, theme-token driven) ──────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
textarea,
select,
.form-control,
.form-select,
.dark-input {
    background-color: var(--fo-control-bg) !important;
    border-color: var(--fo-control-border) !important;
    color: var(--fo-control-text) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus,
.dark-input:focus {
    background-color: var(--fo-control-bg) !important;
    border-color: var(--fo-control-focus-border) !important;
    color: var(--fo-control-text) !important;
    box-shadow: 0 0 0 0.2rem var(--fo-control-focus-ring) !important;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder,
.form-select::placeholder,
.dark-input::placeholder,
.topbar-search-input::placeholder,
.search-modal-input::placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
.form-control::-webkit-input-placeholder {
    color: var(--fo-control-placeholder) !important;
    -webkit-text-fill-color: var(--fo-control-placeholder) !important;
    opacity: 1 !important;
}

.form-control:disabled,
.form-select:disabled,
.dark-input:disabled,
input:not([type="checkbox"]):not([type="radio"]):disabled,
textarea:disabled,
select:disabled {
    background-color: var(--fo-control-disabled-bg) !important;
    border-color: var(--fo-control-border) !important;
    color: var(--fo-control-disabled-text) !important;
    opacity: 0.85;
}

.form-select option {
    background-color: var(--fo-dropdown-bg);
    color: var(--fo-control-text);
}

.form-label {
    color: var(--fo-form-label) !important;
}

.form-text,
.text-muted,
small.text-muted {
    color: var(--fo-text-secondary) !important;
}

.input-group-text {
    background-color: var(--fo-input-group-bg) !important;
    border-color: var(--fo-control-border) !important;
    color: var(--fo-form-label) !important;
}

.form-check-input {
    background-color: var(--fo-control-bg);
    border-color: var(--fo-control-border);
    width: 1.25em;
    height: 1.25em;
    min-width: 1.25em;
    min-height: 1.25em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: none;
}

.form-check-input:checked {
    background-color: #0ea5e9 !important;
    border-color: #0ea5e9 !important;
}

.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.form-check-input:focus {
    border-color: var(--fo-control-focus-border, #38bdf8);
    outline: 2px solid var(--fo-btn-focus-ring, #93c5fd);
    outline-offset: 2px;
    box-shadow: 0 0 0 0.2rem var(--fo-control-focus-ring, rgba(14, 165, 233, 0.25));
}

.form-check-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.form-check-label {
    color: var(--fo-form-label);
    cursor: pointer;
}

/* Native date/time scheme follows theme */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
    color-scheme: inherit;
}

html[data-fo-theme="light"] input[type="date"],
html[data-fo-theme="light"] input[type="datetime-local"],
html[data-fo-theme="light"] input[type="time"],
html:not([data-fo-theme]) input[type="date"],
html:not([data-fo-theme]) input[type="datetime-local"],
html:not([data-fo-theme]) input[type="time"] {
    color-scheme: light;
}

html[data-fo-theme="dark"] input[type="date"],
html[data-fo-theme="dark"] input[type="datetime-local"],
html[data-fo-theme="dark"] input[type="time"] {
    color-scheme: dark;
}

/* Browser chrome icons — invert only in dark so light stays readable */
html[data-fo-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-fo-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-fo-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-fo-theme="dark"] input[type="number"]::-webkit-inner-spin-button,
html[data-fo-theme="dark"] input[type="number"]::-webkit-outer-spin-button {
    filter: invert(1);
    opacity: 0.85;
}

html:not([data-fo-theme]) input[type="date"]::-webkit-calendar-picker-indicator,
html:not([data-fo-theme]) input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-fo-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-fo-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-fo-theme="light"] input[type="number"]::-webkit-inner-spin-button,
html[data-fo-theme="light"] input[type="number"]::-webkit-outer-spin-button,
html:not([data-fo-theme]) input[type="number"]::-webkit-inner-spin-button,
html:not([data-fo-theme]) input[type="number"]::-webkit-outer-spin-button {
    filter: none;
}

/* Autofill — keep readable on white or dark */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill,
.form-control:-webkit-autofill {
    -webkit-text-fill-color: var(--fo-control-text) !important;
    caret-color: var(--fo-control-text);
    transition: background-color 99999s ease-in-out 0s;
    box-shadow: 0 0 0 1000px var(--fo-control-bg) inset !important;
}

/* Validation */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.invalid {
    border-color: #ef4444 !important;
}

.form-control.is-valid,
.form-select.is-valid,
.was-validated .form-control:valid {
    border-color: #10b981 !important;
}

/* Blazor EditForm "valid" class on the control — border cue only; text stays control token */
input.valid,
textarea.valid,
select.valid,
.form-control.valid,
.form-select.valid,
.dark-input.valid {
    color: var(--fo-control-text) !important;
}

/* Blazor adds .valid to empty fields; do not let fill-color paint the placeholder as real text. */
input.valid::placeholder,
textarea.valid::placeholder,
.form-control.valid::placeholder,
.dark-input.valid::placeholder,
input.valid::-webkit-input-placeholder,
textarea.valid::-webkit-input-placeholder,
.form-control.valid::-webkit-input-placeholder {
    color: var(--fo-control-placeholder) !important;
    -webkit-text-fill-color: var(--fo-control-placeholder) !important;
    opacity: 1 !important;
}

/* ── Search bars + global search modal ───────────────────────────────── */
.topbar-search-bar,
.global-search-bar {
    background: var(--fo-search-bg) !important;
    background-color: var(--fo-search-bg) !important;
    border-color: var(--fo-search-border) !important;
    color: var(--fo-search-muted) !important;
}

.topbar-search-bar:hover,
.topbar-search-bar:focus-within,
.global-search-bar:hover {
    background: var(--fo-search-bg-hover) !important;
    background-color: var(--fo-search-bg-hover) !important;
    border-color: var(--fo-control-focus-border) !important;
    color: var(--fo-search-text) !important;
    box-shadow: 0 0 0 1px var(--fo-control-focus-ring);
}

.topbar-search-bar .topbar-search-icon,
.global-search-bar i {
    color: var(--fo-search-muted) !important;
}

.topbar-search-input,
.search-modal-input {
    background: var(--fo-control-bg, #ffffff) !important;
    color: var(--fo-search-text) !important;
}

.topbar-search-bar .topbar-search-kbd,
.search-shortcut {
    background: var(--fo-search-kbd-bg) !important;
    border-color: var(--fo-search-border) !important;
    color: var(--fo-search-muted) !important;
}

.topbar-search-mobile-btn {
    background: var(--fo-control-bg) !important;
    border-color: var(--fo-control-border) !important;
    color: var(--fo-text-secondary) !important;
}

.topbar-search-mobile-btn:hover {
    background: var(--fo-control-bg-hover) !important;
    color: var(--fo-text-primary) !important;
}

.search-modal-container {
    background-color: var(--fo-search-results-bg) !important;
    color: var(--fo-text-primary) !important;
    box-shadow: var(--fo-dropdown-shadow) !important;
}

.search-modal-input-wrapper {
    border-bottom-color: var(--fo-divider) !important;
}

.search-modal-input-wrapper i {
    color: var(--fo-search-muted) !important;
}

.search-section-title {
    color: var(--fo-text-tertiary) !important;
}

.search-result-item:hover,
.search-result-item.active,
.search-result-item:focus {
    background-color: var(--fo-search-item-hover) !important;
}

.search-result-title,
.search-result-primary {
    color: var(--fo-text-primary) !important;
}

.search-result-meta,
.search-result-secondary,
.search-result-subtitle {
    color: var(--fo-text-secondary) !important;
}

/* ── Dropdowns / menus ───────────────────────────────────────────────── */
.dropdown-menu,
.dropdown-menu.show,
.navbar .dropdown-menu,
.dropdown-menu-end,
.topbar-dropdown-menu {
    background-color: var(--fo-dropdown-bg) !important;
    border-color: var(--fo-border) !important;
    color: var(--fo-text-primary) !important;
    box-shadow: var(--fo-dropdown-shadow) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.dropdown-item {
    color: var(--fo-text-primary) !important;
    background-color: transparent !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--fo-dropdown-hover) !important;
    color: var(--fo-dropdown-hover-text) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--fo-dropdown-hover) !important;
    color: var(--fo-dropdown-hover-text) !important;
}

.dropdown-divider {
    border-color: var(--fo-divider) !important;
}

/* ── Tables / legacy dark grids ──────────────────────────────────────── */
.table {
    --bs-table-bg: var(--fo-table-bg);
    --bs-table-color: var(--fo-text-primary);
    --bs-table-border-color: var(--fo-table-border);
    --bs-table-striped-bg: var(--fo-surface-subtle);
    --bs-table-hover-bg: var(--fo-table-row-hover);
    color: var(--fo-text-primary);
    background-color: var(--fo-table-bg);
}

.table > :not(caption) > * > * {
    background-color: var(--fo-table-bg);
    color: var(--fo-text-primary);
    border-bottom-color: var(--fo-table-border);
}

.table thead th,
.table > thead {
    background-color: var(--fo-table-header-bg) !important;
    color: var(--fo-table-header-text) !important;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--fo-table-row-hover) !important;
    color: var(--fo-text-primary) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: var(--fo-surface-subtle);
    background-color: var(--fo-surface-subtle) !important;
    color: var(--fo-text-primary) !important;
}

/* Bootstrap legacy table-dark → theme table (light becomes light) */
.table-dark,
table.table-dark,
.table-dark > :not(caption) > * > * {
    --bs-table-bg: var(--fo-table-bg);
    --bs-table-color: var(--fo-text-primary);
    --bs-table-border-color: var(--fo-table-border);
    --bs-table-striped-bg: var(--fo-surface-subtle);
    --bs-table-hover-bg: var(--fo-table-row-hover);
    background-color: var(--fo-table-bg) !important;
    color: var(--fo-text-primary) !important;
    border-color: var(--fo-table-border) !important;
}

.table-dark thead th,
thead.table-dark th,
.table-dark > thead {
    background-color: var(--fo-table-header-bg) !important;
    color: var(--fo-table-header-text) !important;
}

.table-dark-custom {
    color: var(--fo-text-primary) !important;
}

.table-dark-custom thead th {
    background-color: var(--fo-table-header-bg) !important;
    color: var(--fo-table-header-text) !important;
    border-bottom-color: var(--fo-divider) !important;
}

.table-dark-custom tbody td {
    border-bottom-color: var(--fo-table-border) !important;
    color: var(--fo-text-secondary) !important;
}

.clickable-row:hover {
    background-color: var(--fo-table-row-hover) !important;
}

.customer-name {
    color: var(--fo-text-primary) !important;
}

/* ── Toolbars / filter bars ──────────────────────────────────────────── */
.fo-toolbar,
.fo-filter-bar,
.fo-page-toolbar,
.fo-list-toolbar,
.fo-workspace-toolbar,
.ops-panel__header,
.ops-calendar-actions,
.customer-workspace__toolbar,
.sales-workspace__toolbar,
.finance-toolbar,
.filter-bar,
.list-toolbar {
    background: var(--fo-toolbar-bg) !important;
    background-color: var(--fo-toolbar-bg) !important;
    border-color: var(--fo-border) !important;
    color: var(--fo-text-primary) !important;
}

/* ── Bootstrap dark utility leakage (office chrome only) ─────────────── */
html[data-fo-theme="light"] .modal-content.bg-dark,
html[data-fo-theme="light"] .modal-content.bg-dark .modal-header,
html[data-fo-theme="light"] .modal-content.bg-dark .modal-body,
html[data-fo-theme="light"] .modal-content.bg-dark .modal-footer,
html:not([data-fo-theme]) .modal-content.bg-dark,
html:not([data-fo-theme]) .modal-content.bg-dark .modal-header,
html:not([data-fo-theme]) .modal-content.bg-dark .modal-body,
html:not([data-fo-theme]) .modal-content.bg-dark .modal-footer {
    background: var(--fo-surface-raised) !important;
    background-color: var(--fo-surface-raised) !important;
    color: var(--fo-text-primary) !important;
    border-color: var(--fo-border) !important;
}

html[data-fo-theme="light"] .card.bg-dark,
html[data-fo-theme="light"] .list-group-item.bg-dark,
html:not([data-fo-theme]) .card.bg-dark,
html:not([data-fo-theme]) .list-group-item.bg-dark {
    background: var(--fo-surface) !important;
    background-color: var(--fo-surface) !important;
    color: var(--fo-text-primary) !important;
    border-color: var(--fo-border) !important;
}

html[data-fo-theme="light"] .list-group-item.bg-dark.text-white,
html:not([data-fo-theme]) .list-group-item.bg-dark.text-white {
    color: var(--fo-text-primary) !important;
}

/* ── Modals / offcanvas / panels ─────────────────────────────────────── */
.modal-content,
.offcanvas,
.accordion-item {
    background: var(--fo-surface-raised) !important;
    background-color: var(--fo-surface-raised) !important;
    color: var(--fo-text-primary) !important;
    border-color: var(--fo-border) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.modal-header,
.modal-body,
.modal-footer,
.offcanvas-header,
.offcanvas-body {
    background: var(--fo-surface-raised) !important;
    background-color: var(--fo-surface-raised) !important;
    color: var(--fo-text-primary) !important;
    border-color: var(--fo-border) !important;
}

.accordion-button {
    background-color: var(--fo-surface) !important;
    color: var(--fo-text-primary) !important;
}

.accordion-button:not(.collapsed) {
    background-color: var(--fo-surface-subtle) !important;
    color: var(--fo-text-primary) !important;
    box-shadow: none;
}

.list-group-item {
    background-color: var(--fo-surface) !important;
    color: var(--fo-text-primary) !important;
    border-color: var(--fo-border) !important;
}

/* ── Nav tabs / pills ────────────────────────────────────────────────── */
.nav-tabs {
    border-bottom-color: var(--fo-border) !important;
}

.nav-tabs .nav-link {
    color: var(--fo-text-secondary) !important;
    background-color: transparent !important;
}

.nav-tabs .nav-link:hover {
    color: var(--fo-text-primary) !important;
    background-color: var(--fo-surface-subtle) !important;
    border-radius: 6px;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--fo-brand-700) !important;
    background-color: var(--fo-surface-selected) !important;
    border-radius: 6px;
}

.nav-pills .nav-link {
    color: var(--fo-text-secondary) !important;
}

.nav-pills .nav-link.active {
    background-color: var(--fo-brand-600) !important;
    color: #ffffff !important;
}

/* ── Calendar / FullCalendar shell ───────────────────────────────────── */
#calendar,
.fc {
    background-color: var(--fo-calendar-bg) !important;
    color: var(--fo-calendar-text) !important;
}

.fc-theme-standard td,
.fc-theme-standard th,
.fc-theme-standard .fc-scrollgrid {
    border-color: var(--fo-calendar-grid) !important;
}

.fc .fc-col-header-cell {
    background-color: var(--fo-calendar-header-bg) !important;
    color: var(--fo-calendar-muted) !important;
}

.fc .fc-daygrid-day {
    background-color: var(--fo-calendar-day-bg) !important;
}

.fc .fc-daygrid-day:hover {
    background-color: var(--fo-calendar-day-hover) !important;
}

.fc .fc-daygrid-day-number,
.fc-timegrid-slot-label,
.fc-col-header-cell-cushion,
.fc-timegrid-axis-cushion {
    color: var(--fo-calendar-text) !important;
}

.fc .fc-day-today {
    background-color: var(--fo-calendar-today-bg) !important;
}

.fc .fc-day-today .fc-daygrid-day-number {
    color: var(--fo-brand-600) !important;
    font-weight: 700;
}

.fc .fc-timegrid-slot-label {
    color: var(--fo-calendar-muted) !important;
}

.fc .fc-toolbar-title {
    color: var(--fo-text-primary) !important;
}

.fc .fc-button {
    background-color: var(--fo-brand-600) !important;
    border-color: var(--fo-brand-600) !important;
    color: #ffffff !important;
}

/* Event cards keep semantic/crew colors; only ensure text contrast on chips */
.fc-event {
    /* do not override event background */
    color: #ffffff !important;
}

/* ── Page headings (legacy hard white) ───────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    color: var(--fo-text-primary);
}

/* ── Placeholders / empty states ─────────────────────────────────────── */
.placeholder-content {
    background-color: var(--fo-surface-subtle) !important;
    border-color: var(--fo-border) !important;
    color: var(--fo-text-secondary) !important;
}

.empty-state-headline {
    color: var(--fo-text-primary) !important;
}

.empty-state-subtext {
    color: var(--fo-text-secondary) !important;
}

/* ── Alerts (theme-aware, keep semantic strength) ────────────────────── */
html[data-fo-theme="light"] .alert-success,
html[data-fo-theme="light"] .fo-alert-success,
html[data-fo-theme="light"] .fo-alert--success,
html:not([data-fo-theme]) .alert-success,
html:not([data-fo-theme]) .fo-alert-success,
html:not([data-fo-theme]) .fo-alert--success {
    background-color: #ecfdf5 !important;
    border-color: #34d399 !important;
    color: #065f46 !important;
}

html[data-fo-theme="light"] .alert-warning,
html[data-fo-theme="light"] .fo-alert-warning,
html[data-fo-theme="light"] .fo-alert--warning,
html:not([data-fo-theme]) .alert-warning,
html:not([data-fo-theme]) .fo-alert-warning,
html:not([data-fo-theme]) .fo-alert--warning {
    background-color: #fffbeb !important;
    border-color: #fbbf24 !important;
    color: #92400e !important;
}

html[data-fo-theme="light"] .alert-danger,
html[data-fo-theme="light"] .fo-alert-danger,
html[data-fo-theme="light"] .fo-alert--danger,
html:not([data-fo-theme]) .alert-danger,
html:not([data-fo-theme]) .fo-alert-danger,
html:not([data-fo-theme]) .fo-alert--danger {
    background-color: #fef2f2 !important;
    border-color: #f87171 !important;
    color: #991b1b !important;
}

html[data-fo-theme="light"] .alert-info,
html[data-fo-theme="light"] .fo-alert-info,
html[data-fo-theme="light"] .fo-alert--info,
html:not([data-fo-theme]) .alert-info,
html:not([data-fo-theme]) .fo-alert-info,
html:not([data-fo-theme]) .fo-alert--info {
    background-color: #eff6ff !important;
    border-color: #60a5fa !important;
    color: #1e40af !important;
}

html[data-fo-theme="light"] .text-success:not(.badge),
html:not([data-fo-theme]) .text-success:not(.badge) {
    color: #15803d !important;
}

html[data-fo-theme="light"] .text-warning:not(.badge),
html:not([data-fo-theme]) .text-warning:not(.badge) {
    color: #b45309 !important;
}

html[data-fo-theme="light"] .text-danger:not(.badge),
html:not([data-fo-theme]) .text-danger:not(.badge) {
    color: #dc2626 !important;
}

html[data-fo-theme="light"] .text-info:not(.badge),
html:not([data-fo-theme]) .text-info:not(.badge) {
    color: #2563eb !important;
}

/* Light validation banners readable on white */
html[data-fo-theme="light"] .validation-message,
html:not([data-fo-theme]) .validation-message {
    background-color: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
}

/* ── Customer create / workspace sections ────────────────────────────── */
.customer-workspace,
.customer-create,
.customer-edit,
.fo-customer-form,
.customer-form-section {
    background: transparent;
    color: var(--fo-text-primary);
}

.customer-workspace .card,
.customer-create .card,
.customer-edit .card,
.fo-customer-form .card {
    background: var(--fo-surface) !important;
    border-color: var(--fo-border) !important;
}

.customer-workspace .card-header,
.customer-create .card-header,
.customer-edit .card-header {
    background: var(--fo-surface-subtle) !important;
    color: var(--fo-text-primary) !important;
    border-color: var(--fo-border) !important;
}

/* ── Prior solid-surface preserves (do not thin to glass) ────────────── */
.fo-time-entry-modal .modal-content,
.fo-time-entry-modal__surface,
.fo-wo-completion__panel,
.fo-receipt-surface,
.receipt-modal .modal-content {
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Field shell: keep field-solid-surfaces tokens; only ensure no light leak into intentional dark field if theme dark */

/* ── Auth still intentional dark card on marketing — leave .fieldops-dark */

/* ── Responsive control comfort ──────────────────────────────────────── */
@media (max-width: 430px) {
    .topbar-search-bar {
        max-width: 100%;
    }

    .search-modal-overlay {
        padding: 12px;
        align-items: flex-start;
        padding-top: max(12px, env(safe-area-inset-top));
    }

    .search-modal-container {
        max-height: calc(100dvh - 24px);
    }

    .form-control,
    .form-select,
    .dark-input {
        font-size: 16px; /* avoid iOS zoom */
    }
}

@media (max-width: 320px) {
    .fc .fc-toolbar {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ── Daylight contrast: leftover dark-theme white text on light surfaces ─
   Night mode is unchanged. Colored fills (buttons, badges, primary headers)
   keep white type. */
html[data-fo-theme="light"] .fieldops-shell,
html[data-fo-theme="light"] .content-area,
html[data-fo-theme="light"] .fo-office-page,
html[data-fo-theme="light"] .fo-card,
html[data-fo-theme="light"] .kpi-card,
html[data-fo-theme="light"] .card:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-dark),
html:not([data-fo-theme]) .fieldops-shell,
html:not([data-fo-theme]) .content-area,
html:not([data-fo-theme]) .fo-office-page {
    color: var(--fo-text-primary);
}

html[data-fo-theme="light"] .fieldops-shell .text-white:not(.btn):not(.badge):not(.fc-event):not(.fc-button):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-secondary),
html[data-fo-theme="light"] .content-area .text-white:not(.btn):not(.badge):not(.fc-event):not(.fc-button):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-secondary),
html[data-fo-theme="light"] .modal-content .text-white:not(.btn):not(.badge):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-secondary),
html[data-fo-theme="light"] .text-light:not(.btn):not(.badge),
html:not([data-fo-theme]) .fieldops-shell .text-white:not(.btn):not(.badge):not(.fc-event):not(.fc-button):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-secondary),
html:not([data-fo-theme]) .content-area .text-white:not(.btn):not(.badge):not(.fc-event):not(.fc-button):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-secondary),
html:not([data-fo-theme]) .text-light:not(.btn):not(.badge) {
    color: var(--fo-text-primary) !important;
}

html[data-fo-theme="light"],
html[data-fo-theme="light"] *,
html:not([data-fo-theme]),
html:not([data-fo-theme]) * {
    color-scheme: light;
}

html[data-fo-theme="dark"],
html[data-fo-theme="dark"] * {
    color-scheme: dark;
}

html[data-fo-theme="light"] .btn-primary,
html[data-fo-theme="light"] .btn-success,
html[data-fo-theme="light"] .btn-danger,
html[data-fo-theme="light"] .btn-info,
html[data-fo-theme="light"] .btn-dark,
html[data-fo-theme="light"] .badge.bg-primary,
html[data-fo-theme="light"] .badge.bg-success,
html[data-fo-theme="light"] .badge.bg-danger,
html[data-fo-theme="light"] .badge.bg-info,
html[data-fo-theme="light"] .badge.bg-dark,
html[data-fo-theme="light"] .badge.bg-secondary,
html[data-fo-theme="light"] .fc-event,
html[data-fo-theme="light"] .fc-button,
html[data-fo-theme="light"] .list-group-item.active,
html:not([data-fo-theme]) .btn-primary,
html:not([data-fo-theme]) .btn-success,
html:not([data-fo-theme]) .btn-danger,
html:not([data-fo-theme]) .fc-event,
html:not([data-fo-theme]) .fc-button {
    color: #fff !important;
}

html[data-fo-theme="light"] .workspace-nav-link,
html:not([data-fo-theme]) .workspace-nav-link {
    color: var(--fo-text-secondary) !important;
}

html[data-fo-theme="light"] .workspace-nav-link:hover,
html[data-fo-theme="light"] .workspace-nav-link--active,
html[data-fo-theme="light"] .workspace-nav-link.active,
html:not([data-fo-theme]) .workspace-nav-link:hover,
html:not([data-fo-theme]) .workspace-nav-link--active,
html:not([data-fo-theme]) .workspace-nav-link.active {
    color: var(--fo-text-primary) !important;
}

html[data-fo-theme="light"] .card-header:not([class*="bg-"]),
html:not([data-fo-theme]) .card-header:not([class*="bg-"]) {
    color: var(--fo-text-primary) !important;
}

/* Bootstrap .btn-outline-light is white-on-white on raised FieldOps cards in daylight. */
html[data-fo-theme="light"] .btn-outline-light,
html:not([data-fo-theme]) .btn-outline-light {
    --bs-btn-color: var(--fo-btn-secondary-text);
    --bs-btn-bg: var(--fo-btn-secondary-bg);
    --bs-btn-border-color: var(--fo-btn-secondary-border);
    --bs-btn-hover-color: var(--fo-btn-secondary-text);
    --bs-btn-hover-bg: var(--fo-btn-secondary-bg-hover);
    --bs-btn-hover-border-color: var(--fo-btn-secondary-border-hover);
    --bs-btn-active-color: var(--fo-btn-secondary-text);
    --bs-btn-active-bg: var(--fo-btn-secondary-bg-hover);
    --bs-btn-active-border-color: var(--fo-btn-secondary-border-hover);
    color: var(--fo-btn-secondary-text) !important;
    background-color: var(--fo-btn-secondary-bg) !important;
    border-color: var(--fo-btn-secondary-border) !important;
}

.wo-billing-lifecycle-steps {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    margin: 0 0 1rem;
}

.wo-billing-step {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--fo-border);
    background: var(--fo-surface-subtle);
    color: var(--fo-text-primary);
    font-size: 0.78rem;
    font-weight: 600;
}

.wo-billing-step.is-complete {
    border-color: #166534;
    background: rgba(22, 101, 52, 0.12);
}

.wo-billing-step.is-current {
    border-color: var(--fo-brand-600, #2563eb);
    box-shadow: 0 0 0 2px var(--fo-control-focus-ring);
}

.wo-billing-step.is-pending {
    color: var(--fo-text-secondary);
}

.wo-billing-step.is-blocked {
    border-color: #b45309;
    background: rgba(180, 83, 9, 0.12);
}

/* Employees directory sidebar — light page / dark preserved via tokens */
html:not([data-fo-theme]) .employee-sidebar-panel,
html[data-fo-theme="light"] .employee-sidebar-panel {
    background: var(--fo-surface, #ffffff);
    border-right-color: var(--fo-border, #e2e8f0);
}

html:not([data-fo-theme]) .employee-item,
html[data-fo-theme="light"] .employee-item {
    color: var(--fo-text-primary, #0f172a);
}

html[data-fo-theme="dark"] .employee-sidebar-panel {
    background: var(--fo-surface, #1e293b);
    border-right-color: var(--fo-border, #334155);
}

html[data-fo-theme="dark"] .employee-item {
    color: var(--fo-text-primary, #f1f5f9);
}