/* Theme color palette (light mode). Generated during CSS-variable migration - see plan.
 * Every value here is the exact original hardcoded color it replaces (Phase 1 = zero visual change).
 * Dark-mode overrides live in a [data-theme="dark"] block appended below once Phase 3 begins. */
:root {
    --color-brand-primary: #0084FF;
    --color-brand-primary-alt: #0085FF;
    --color-brand-primary-deep: #0059FF;
    --color-brand-primary-bright: #00B2FF;
    --color-brand-primary-tint: #70BAFF;
    --color-bootstrap-blue: #007BFF;
    --color-navy: #00008B;
    --color-accent-blue-bg: #E0F0FF;
    --color-accent-blue-bg-alt: #E0F0FE;
    --color-accent-blue-bg-soft: #E6F2FF;
    --color-accent-blue-bg-deep: #D1DFFF;
    --color-accent-blue-bg-cool: #E3E9FC;
    --color-accent-blue-bg-pale: #F4F7FD;
    --color-accent-blue-bg-faint: #F7FCFE;
    --color-accent-blue-bg-mist: #EEF1F7;
    --color-accent-blue-bg-gray: #E6ECF2;
    --color-blue-gray-border: #C3CBD4;
    --color-blue-gray-border-alt: #CBD3E8;
    --color-lavender-border: #C9C9E5;
    --color-lavender-bg: #DFDFF6;
    --color-lavender-bg-pale: #EFEFFF;
    --color-lavender-bg-pale-alt: #EFEFFE;
    --color-accent-amber: #FF8F00;
    --color-accent-amber-dark: #DD8617;
    --color-accent-orange: #FF9800;
    --color-warning: #F0AD4E;
    --color-warning-bg: #FDF6C3;
    --color-gold: #FDB12E;
    --color-gold-alt: #FCA61B;
    --color-accent-pink: #FF5080;
    --color-accent-pink-alt: #FF608B;
    --color-accent-pink-deep: #FF3D67;
    --color-accent-pink-pale: #FFB6C1;
    --color-accent-pink-bg: #FFE4E1;
    --color-accent-peach: #FF9A50;
    --color-accent-teal: #0EC1CC;
    --color-accent-teal-light: #6DEEEA;
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-near-black: #090909;
    --color-charcoal: #1C1C1C;
    --color-charcoal-alt: #291E1E;
    --color-gray-blue: #A0AEBD;
    --color-slate: #5B657D;
    --color-gray-slate: #7F858C;
    --color-gray-mid: #6E6E6E;
    --color-gray: #999999;
    --color-gray-dark: #666666;
    --color-gray-darker: #333333;
    --color-gray-light: #A8A8A8;
    --color-gray-border-light: #D8D8D8;
    --color-border-gray: #DBDCDC;
    --color-border-gray-alt: #DBDBDD;
    --color-border-gray-alt2: #DBDBDB;
    --color-border-light: #DDDDDD;
    --color-border-lighter: #CCCCCC;
    --color-border-acc: #AACCCC;
    --color-bg-faint: #EEEEEE;
    --color-bg-light-gray: #E9ECEF;
    --color-bg-pale-gray: #F2F2F2;
    --color-bg-off-white: #F8F9FA;
    --color-bg-near-white: #F9FAFC;
    --color-bg-near-white-alt: #FCFCFC;
    --color-loss: #FF0000;
    --color-gain: #008000;
    --color-warning-text: #FFA500;
    --color-gray-named: #808080;
    --color-gray-named-light: #D3D3D3;

    /* SB Admin 2 / Bootstrap-3-era theme colors (from sb-admin-2.css, formerly less/variables.less) */
    --color-sb-gray-lighter: #eeeeee;
    --color-sb-brand-primary: #428bca;
    --color-sb-brand-success: #5cb85c;
    --color-sb-brand-success-dark: #3f903f;
    --color-sb-brand-success-darker: #3d8b3d;
    --color-sb-brand-info: #5bc0de;
    --color-sb-brand-info-dark: #2e6da4;
    --color-sb-brand-warning-dark: #df8a13;
    --color-sb-brand-danger: #d9534f;
    --color-sb-brand-danger-dark: #b52b27;
    --color-sb-border-e7: #e7e7e7;
    --color-sb-border-d4: #d4d4d4;
    --color-sb-bg-f8: #f8f8f8;

    /* Upload/import dialog colors (v2/obj/new_import_*.htm, new_bankconfirmation_body.htm) */
    --color-bs5-primary: #0d6efd;
    --color-bs5-success: #198754;
    --color-bs5-danger: #dc3545;
    --color-bs5-border: #ced4da;
    --color-gray-555: #555555;
    --color-bg-near-white-f9: #f9f9f9;
    --color-bg-near-white-fa: #fafafa;
    --color-accent-orange-icon: #f39c12;
    --color-gray-hint: #888888;
    --color-gray-muted: #6c757d;
    --color-gray-label: #495057;
    --color-border-cool-gray: #dee2e6;
    --color-bg-green-tint: #f0f7f0;
    --color-gray-placeholder: #9ca3af;
    --color-select-bg: #e0e0e0;
    --color-trial-bg: #fdf6e3;
    --color-trial-accent: #f0932b;
    --color-hint-bg: #eaf6fb;
    --color-hint-accent: #0eabc1;

    /* RGB triplets for rgba()/rgb() usage */
    --color-brand-primary-rgb: 0, 132, 255;
    --color-shadow-gray-rgb: 120, 120, 120;
    --color-warning-rgb: 240, 173, 78;
    --color-accent-orange-rgb: 255, 152, 0;
    --color-black-rgb: 0, 0, 0;
    --color-accent-blue-bg-rgb: 224, 240, 255;
    --color-navy-shadow-rgb: 32, 81, 126;
    --color-white-rgb: 255, 255, 255;
    --color-bs5-primary-rgb: 13, 110, 253;

    /* Semantic surface/text tokens (Phase 3) - used by the structural dark-mode rules below.
     * Light-mode values just mirror the existing literal colors so nothing changes yet. */
    --surface-page-bg: var(--color-bg-off-white);
    --surface-card-bg: var(--color-white);
    --surface-border: var(--color-border-light);
    --surface-text-primary: var(--color-black);
    --surface-text-secondary: var(--color-gray-dark);
}

/* ===================================================================
 * Expressive themes. These deliberately change the whole visual identity,
 * rather than applying minor variations to the default blue palette.
 * Selected via Settings -> THEME -> data-theme on <html>.
 * =================================================================== */

/* Ocean: cool, saturated, and unmistakably aquatic. */
[data-theme="ocean"] {
    --color-brand-primary: #007C91;
    --color-brand-primary-alt: #005F73;
    --color-brand-primary-deep: #00475A;
    --color-brand-primary-bright: #00B4D8;
    --color-brand-primary-tint: #48CAE4;
    --color-brand-primary-rgb: 0, 124, 145;
    --color-accent-amber: #FFB000;
    --color-accent-amber-dark: #C77800;
    --color-accent-blue-bg: #CDEFF5;
    --color-accent-blue-bg-alt: #DDF7FA;
    --color-gain: #006B3C;
    --color-loss: #B42318;
    --surface-page-bg: #DFF6FA;
    --surface-card-bg: #F8FEFF;
    --surface-border: #65A9B5;
    --surface-border-strong: #277D8C;
    --surface-text-primary: #052E38;
    --surface-text-secondary: #315E67;
    --theme-chrome-bg: #003B4A;
    --theme-on-chrome: #FFFFFF;
    --color-hint-bg: #CDEFF5;
    --color-hint-accent: #007C91;
}

/* Ember: warm parchment surfaces with burgundy and burnt-orange chrome. */
[data-theme="ember"] {
    --color-brand-primary: #A63C06;
    --color-brand-primary-alt: #7F2704;
    --color-brand-primary-deep: #641B00;
    --color-brand-primary-bright: #E85D04;
    --color-brand-primary-tint: #FF9F1C;
    --color-brand-primary-rgb: 166, 60, 6;
    --color-accent-amber: #C44900;
    --color-accent-amber-dark: #923500;
    --color-accent-blue-bg: #FFE0B2;
    --color-accent-blue-bg-alt: #FFF0D1;
    --color-gain: #006B5B;
    --color-loss: #A51D2D;
    --surface-page-bg: #F7E6C4;
    --surface-card-bg: #FFF9EA;
    --surface-border: #B86A3C;
    --surface-border-strong: #853510;
    --surface-text-primary: #35160B;
    --surface-text-secondary: #694333;
    --theme-chrome-bg: #54101D;
    --theme-on-chrome: #FFF9EA;
    --color-hint-bg: #FFE0B2;
    --color-hint-accent: #A63C06;
}

/* High Contrast: pure surfaces, large targets, and non-color status cues. */
[data-theme="high-contrast"] {
    --color-brand-primary: #FFD800;
    --color-brand-primary-alt: #FFD800;
    --color-brand-primary-deep: #FFFFFF;
    --color-brand-primary-bright: #00FFFF;
    --color-brand-primary-tint: #FFFF00;
    --color-brand-primary-rgb: 255, 216, 0;
    --color-accent-amber: #FFD800;
    --color-accent-amber-dark: #FFFF00;
    --color-accent-blue-bg: #000000;
    --color-accent-blue-bg-alt: #000000;
    --color-gain: #00FFFF;
    --color-loss: #FF6BFF;
    --color-warning-text: #FFFF00;
    --surface-page-bg: #000000;
    --surface-card-bg: #000000;
    --surface-border: #FFFFFF;
    --surface-border-strong: #FFFFFF;
    --surface-text-primary: #FFFFFF;
    --surface-text-secondary: #FFFFFF;
    --theme-chrome-bg: #000000;
    --theme-on-chrome: #FFFFFF;
    --color-hint-bg: #000000;
    --color-hint-accent: #FFD800;
}

/* ===================================================================
 * Dark mode (Phase 3, first pass). Covers the main app chrome - nav,
 * sidebar, cards, tables, forms, modals. Narrow/rare components may
 * still need spot-fixes once reviewed live; --color-white etc. are left
 * alone here (they're also used as button/badge text on colored
 * backgrounds, which must stay white in dark mode too) - dark mode
 * instead uses its own --surface-* tokens, applied via the component
 * rules below rather than by redefining the literal color variables.
 * =================================================================== */
[data-theme="dark"] {
    --color-brand-primary: #4C9EFF;
    --color-brand-primary-rgb: 76, 158, 255;
    --surface-page-bg: #14171d;
    --surface-card-bg: #1c2028;
    --surface-border: #2c313c;
    --surface-text-primary: #e8eaf0;
    --surface-text-secondary: #a3aab8;
    /* --surface-border (#2c313c) is close in luminosity to --surface-card-bg (#1c2028) - fine
     * for card/table separators, but form fields need a border you can actually see the edges
     * of even when empty. */
    --surface-border-strong: #4a5265;

    /* Unlike --color-white, --color-black/--color-near-black/--color-charcoal are only ever
     * used as text/icon color in style.css (verified: zero background-color usages), so it's
     * safe to redefine them directly rather than write per-selector overrides - this is what
     * lights up icon-font glyphs (sidebar nav icons, kebab/dots menus, etc.) whose color comes
     * from these variables rather than any selector broad rules above already catch. */
    --color-black: #e8eaf0;
    --color-near-black: #e8eaf0;
    --color-charcoal: #d5d9e0;
    --color-charcoal-alt: #d5d9e0;
    --color-hint-bg: #16333b;
    --color-hint-accent: #4cc9e0;
}

/* !important throughout this block: style.css has hundreds of per-selector rules (some
 * already !important themselves) hardcoded to var(--color-white)/var(--color-black) for
 * specific components, which would otherwise out-specificity these broad theme overrides. */
[data-theme="dark"] body,
[data-theme="dark"] #page-wrapper {
    background-color: var(--surface-page-bg) !important;
    color: var(--surface-text-primary) !important;
}

[data-theme="dark"] .navbar,
[data-theme="dark"] .navbar-default,
[data-theme="dark"] #sidebar,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .navbar-default.sidebar {
    background-color: var(--surface-card-bg) !important;
    border-color: var(--surface-border) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .panel,
[data-theme="dark"] .list-group-item {
    background-color: var(--surface-card-bg) !important;
    border-color: var(--surface-border) !important;
    color: var(--surface-text-primary) !important;
}

[data-theme="dark"] table,
[data-theme="dark"] .table,
[data-theme="dark"] th,
[data-theme="dark"] td,
[data-theme="dark"] tr {
    background-color: var(--surface-card-bg) !important;
    border-color: var(--surface-border) !important;
    color: var(--surface-text-primary) !important;
}

[data-theme="dark"] .table>tbody>tr:hover,
[data-theme="dark"] tr:hover {
    background-color: var(--surface-page-bg) !important;
}

/* style.css has row-hover/selected rules that target td directly with the light
 * accent-blue background (style.css ~3019-3130), which out-specificities the
 * plain tr:hover rule above - these need their own dark override. */
[data-theme="dark"] .table-hover>tbody>tr:hover td,
[data-theme="dark"] .table>tbody>tr.selected>td,
[data-theme="dark"] .table .selected {
    background-color: var(--surface-page-bg) !important;
    color: var(--color-brand-primary) !important;
}

/* Right-hand detail/side panels (e.g. Exposures detail panel) use their own
 * .card-right class with a hardcoded white background, layered on top of .card. */
[data-theme="dark"] .card-right {
    background: var(--surface-card-bg) !important;
}

/* Fancytree (Exposures tree, etc.) sets its own text/icon colors in the vendor
 * CSS and in style.css, not through the app's color variables. */
[data-theme="dark"] span.fancytree-title,
[data-theme="dark"] span.fancytree-icon,
[data-theme="dark"] span.fancytree-expander,
[data-theme="dark"] ul.fancytree-container {
    color: var(--surface-text-primary) !important;
    background: transparent !important;
}
[data-theme="dark"] .fancytree-node:hover span.fancytree-title,
[data-theme="dark"] .fancytree-focus span.fancytree-title,
[data-theme="dark"] .fancytree-active span.fancytree-title {
    background: var(--surface-page-bg) !important;
}

/* Bootstrap-toggle (WebContent/v2/vendor/bootstrap-toggle) is styled via .btn-toggle
 * /.toggle-on/.toggle-off in style.css with hardcoded white backgrounds - the amber
 * handle (--color-accent-amber) stays as-is, only the pill background needs to change. */
[data-theme="dark"] .btn-toggle,
[data-theme="dark"] .toggle-off,
[data-theme="dark"] .toggle-on {
    background: var(--surface-card-bg) !important;
    border-color: var(--surface-border) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--surface-card-bg) !important;
    border-color: var(--surface-border-strong) !important;
    color: var(--surface-text-primary) !important;
}
[data-theme="dark"] .btn-icon {
    color: var(--surface-text-primary) !important;
}

[data-theme="dark"] .nav-tabs,
[data-theme="dark"] .nav-tabs .nav-link,
[data-theme="dark"] .tab-content,
[data-theme="dark"] .tab-pane,
[data-theme="dark"] .tab-content .tab-pane,
[data-theme="dark"] #myTabContent .tab-pane {
    background-color: var(--surface-card-bg) !important;
    border-color: var(--surface-border) !important;
    color: var(--surface-text-primary) !important;
}

/* :not(.btn) - button-styled anchors (.btn-primary, .btn-default, etc.) set their
 * own text color deliberately (e.g. white on an amber .btn-primary); this blanket
 * rule must not clobber that, only plain navigational links. */
[data-theme="dark"] a:not(.btn) {
    color: var(--color-brand-primary) !important;
}

/* Systematic sweep: every other selector in style.css found hardcoding
 * background: var(--color-white) that isn't already covered by a broader
 * rule above (each is a distinct element from its parent, so the parent's
 * dark override doesn't cascade down to it - background-color isn't inherited). */
[data-theme="dark"] .btn-default {
    background: var(--surface-card-bg) !important;
    color: var(--color-accent-amber) !important;
    border-color: var(--color-accent-amber) !important;
}
[data-theme="dark"] .btn-default.disabled,
[data-theme="dark"] .btn-default.disabled:hover {
    color: var(--surface-text-secondary) !important;
    border-color: var(--surface-border) !important;
}

/* .btn-tb / .btn-tb.btn-lg - the big stat-count buttons (Positions: Expire Soon,
 * Recent Opens; Back Office: Matched, Not Matched). Text color already gets flipped
 * to near-white by the broad h3 rule below, but the white background never did. */
[data-theme="dark"] .btn-tb {
    background: var(--surface-card-bg) !important;
    color: var(--surface-text-primary) !important;
}
[data-theme="dark"] .btn-tb:hover {
    background-color: var(--surface-page-bg) !important;
}
[data-theme="dark"] .btn-tb.active,
[data-theme="dark"] .btn-tb:focus,
[data-theme="dark"] .btn-tb:active {
    color: var(--color-white) !important;
    background-color: var(--color-brand-primary) !important;
}
[data-theme="dark"] .btn-tb.disabled,
[data-theme="dark"] .btn-tb.disabled:hover {
    color: var(--surface-text-secondary) !important;
    background: var(--surface-card-bg) !important;
}

[data-theme="dark"] .sidebar .nav-item.active,
[data-theme="dark"] .sidebar .nav-second-level {
    background-color: var(--surface-page-bg) !important;
}

[data-theme="dark"] .checkbox .checkmark,
[data-theme="dark"] .radio .checkmark {
    background-color: var(--surface-card-bg) !important;
    border-color: var(--surface-border) !important;
}

[data-theme="dark"] .sticky-table-h table,
[data-theme="dark"] .sticky-col,
[data-theme="dark"] .sticky-right-col,
[data-theme="dark"] .sticky-table-v tr td,
[data-theme="dark"] .table tr.level4 td {
    background-color: var(--surface-card-bg) !important;
    color: var(--surface-text-primary) !important;
}

/* jQuery UI datepicker popup (date fields throughout the app) */
[data-theme="dark"] .ui-datepicker.ui-widget-content,
[data-theme="dark"] .ui-widget-header {
    background: var(--surface-card-bg) !important;
    color: var(--surface-text-primary) !important;
    border-color: var(--surface-border) !important;
}
[data-theme="dark"] .ui-datepicker .ui-state-default {
    background: var(--surface-page-bg) !important;
    color: var(--surface-text-primary) !important;
    border-color: var(--surface-border) !important;
}
[data-theme="dark"] .ui-datepicker .ui-state-highlight,
[data-theme="dark"] .ui-datepicker .ui-state-active {
    background: var(--color-brand-primary) !important;
    color: var(--color-white) !important;
}

[data-theme="dark"] .input-group {
    color: var(--surface-text-primary) !important;
    border-color: var(--surface-border) !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] .page-header,
[data-theme="dark"] label {
    color: var(--surface-text-primary) !important;
}

/* ===================================================================
 * Tabulator (WebContent/v2/vendor/tabulator) - Admin Settings/Administration
 * Tools grids (Security Events, API Events, Free Trial, Error Tracking, Logs).
 * Entirely its own styling system (tabulator_bootstrap4.css), hardcoded white
 * throughout - not real <table> elements, so none of the rules above touch it.
 * =================================================================== */
[data-theme="dark"] .tabulator {
    background-color: var(--surface-card-bg) !important;
    border-color: var(--surface-border) !important;
    color: var(--surface-text-primary) !important;
}
[data-theme="dark"] .tabulator .tabulator-header,
[data-theme="dark"] .tabulator .tabulator-header .tabulator-col {
    background-color: var(--surface-card-bg) !important;
    border-color: var(--surface-border) !important;
    color: var(--surface-text-primary) !important;
}
[data-theme="dark"] .tabulator-row,
[data-theme="dark"] .tabulator-row .tabulator-cell {
    background-color: var(--surface-card-bg) !important;
    border-color: var(--surface-border) !important;
    color: var(--surface-text-primary) !important;
}
[data-theme="dark"] .tabulator-row.tabulator-row-even {
    background-color: var(--surface-page-bg) !important;
}
[data-theme="dark"] .tabulator-row.tabulator-selectable:hover {
    background-color: var(--surface-page-bg) !important;
}
[data-theme="dark"] .tabulator-row.tabulator-selected,
[data-theme="dark"] .tabulator-row.tabulator-selected:hover {
    background-color: var(--color-brand-primary) !important;
    color: var(--color-white) !important;
}
[data-theme="dark"] .tabulator .tabulator-footer {
    background-color: var(--surface-card-bg) !important;
    color: var(--surface-text-primary) !important;
    border-color: var(--surface-border) !important;
}

/* ===================================================================
 * Live Rates (WebContent/v2/pages/rates/lr_body.html) - a hand-rolled CSS
 * Grid, not a <table>, with its own embedded <style> block referencing
 * palette variables that were never redefined for dark mode.
 * =================================================================== */
[data-theme="dark"] .fx-header,
[data-theme="dark"] .fx-row:nth-child(odd) {
    background-color: var(--surface-card-bg) !important;
}
[data-theme="dark"] .fx-row,
[data-theme="dark"] .fx-cell,
[data-theme="dark"] .fx-header {
    color: var(--surface-text-primary) !important;
    border-color: var(--surface-border) !important;
}

/* ===================================================================
 * Trumbowyg (WebContent/v2/vendor/Trumbowyg) - Templates page WYSIWYG editor.
 * Ships its own trumbowyg-dark toolbar/chrome theme (enabled via a
 * "trumbowyg-dark" class on <html>, see WebContent/v2/obj/Head.jsp), but that
 * theme doesn't touch the actual editable content area - it has no explicit
 * background of its own, so it was just picking up unstyled browser white.
 * =================================================================== */
[data-theme="dark"] .trumbowyg-box,
[data-theme="dark"] .trumbowyg-editor-box,
[data-theme="dark"] .trumbowyg-editor {
    background-color: var(--surface-card-bg) !important;
    color: var(--surface-text-primary) !important;
}

/* ===================================================================
 * Sidebar nav icons (WebContent/v2/dist/css/svg_icons.css) are base64-embedded
 * SVGs with 3 states baked directly into the image data: amber (normal), blue
 * (active), gray #7f858c/#dbdcdc (disabled/restricted for this user). CSS
 * color/var() can't reach inside a data: URI, so a disabled item that's fine
 * on a white background (muted gray on white) becomes illegible on dark
 * (muted gray on near-black) - brighten via filter instead of re-encoding
 * every icon's SVG.
 * =================================================================== */
[data-theme="dark"] .disabled [class^="sidebar-"],
[data-theme="dark"] .disabled [class*=" sidebar-"] {
    filter: brightness(1.9);
}

/* ===================================================================
 * Expressive-theme structure. Candidate themes used to change only a
 * handful of variables, so almost every surface stayed white. These rules
 * carry each identity through navigation, content, forms, tables and dialogs.
 * =================================================================== */
html:not([data-theme="light"]):not([data-theme="dark"]) body,
html:not([data-theme="light"]):not([data-theme="dark"]) #page-wrapper {
    background-color: var(--surface-page-bg) !important;
    color: var(--surface-text-primary) !important;
}

html:not([data-theme="light"]):not([data-theme="dark"]) .navbar,
html:not([data-theme="light"]):not([data-theme="dark"]) .navbar-default,
html:not([data-theme="light"]):not([data-theme="dark"]) #sidebar,
html:not([data-theme="light"]):not([data-theme="dark"]) .sidebar,
html:not([data-theme="light"]):not([data-theme="dark"]) .navbar-default.sidebar {
    background-color: var(--theme-chrome-bg) !important;
    border-color: var(--surface-border) !important;
    color: var(--theme-on-chrome) !important;
}

html:not([data-theme="light"]):not([data-theme="dark"]) .sidebar a:not(.btn),
html:not([data-theme="light"]):not([data-theme="dark"]) .navbar a:not(.btn),
html:not([data-theme="light"]):not([data-theme="dark"]) .navbar label {
    color: var(--theme-on-chrome) !important;
}

html:not([data-theme="light"]):not([data-theme="dark"]) .sidebar .nav-item.active,
html:not([data-theme="light"]):not([data-theme="dark"]) .sidebar .nav-second-level {
    background-color: var(--color-brand-primary-deep) !important;
}

html:not([data-theme="light"]):not([data-theme="dark"]) .card,
html:not([data-theme="light"]):not([data-theme="dark"]) .card-body,
html:not([data-theme="light"]):not([data-theme="dark"]) .card-header,
html:not([data-theme="light"]):not([data-theme="dark"]) .card-footer,
html:not([data-theme="light"]):not([data-theme="dark"]) .card-right,
html:not([data-theme="light"]):not([data-theme="dark"]) .modal-content,
html:not([data-theme="light"]):not([data-theme="dark"]) .modal-header,
html:not([data-theme="light"]):not([data-theme="dark"]) .modal-footer,
html:not([data-theme="light"]):not([data-theme="dark"]) .panel,
html:not([data-theme="light"]):not([data-theme="dark"]) .list-group-item,
html:not([data-theme="light"]):not([data-theme="dark"]) .tab-content,
html:not([data-theme="light"]):not([data-theme="dark"]) .tab-pane {
    background-color: var(--surface-card-bg) !important;
    border-color: var(--surface-border) !important;
    color: var(--surface-text-primary) !important;
}

html:not([data-theme="light"]):not([data-theme="dark"]) table,
html:not([data-theme="light"]):not([data-theme="dark"]) .table,
html:not([data-theme="light"]):not([data-theme="dark"]) th,
html:not([data-theme="light"]):not([data-theme="dark"]) td,
html:not([data-theme="light"]):not([data-theme="dark"]) tr,
html:not([data-theme="light"]):not([data-theme="dark"]) .sticky-col,
html:not([data-theme="light"]):not([data-theme="dark"]) .sticky-right-col {
    background-color: var(--surface-card-bg) !important;
    border-color: var(--surface-border) !important;
    color: var(--surface-text-primary) !important;
}

html:not([data-theme="light"]):not([data-theme="dark"]) .table-hover>tbody>tr:hover td,
html:not([data-theme="light"]):not([data-theme="dark"]) .table>tbody>tr.selected>td,
html:not([data-theme="light"]):not([data-theme="dark"]) .table .selected {
    background-color: var(--color-accent-blue-bg) !important;
    color: var(--surface-text-primary) !important;
}

html:not([data-theme="light"]):not([data-theme="dark"]) .form-control,
html:not([data-theme="light"]):not([data-theme="dark"]) .form-select,
html:not([data-theme="light"]):not([data-theme="dark"]) input,
html:not([data-theme="light"]):not([data-theme="dark"]) select,
html:not([data-theme="light"]):not([data-theme="dark"]) textarea,
html:not([data-theme="light"]):not([data-theme="dark"]) .btn-default {
    background-color: var(--surface-card-bg) !important;
    border-color: var(--surface-border-strong) !important;
    color: var(--surface-text-primary) !important;
}

html:not([data-theme="light"]):not([data-theme="dark"]) h1,
html:not([data-theme="light"]):not([data-theme="dark"]) h2,
html:not([data-theme="light"]):not([data-theme="dark"]) h3,
html:not([data-theme="light"]):not([data-theme="dark"]) h4,
html:not([data-theme="light"]):not([data-theme="dark"]) h5,
html:not([data-theme="light"]):not([data-theme="dark"]) label {
    color: var(--surface-text-primary) !important;
}

html:not([data-theme="light"]):not([data-theme="dark"]) .tabulator,
html:not([data-theme="light"]):not([data-theme="dark"]) .tabulator .tabulator-header,
html:not([data-theme="light"]):not([data-theme="dark"]) .tabulator .tabulator-header .tabulator-col,
html:not([data-theme="light"]):not([data-theme="dark"]) .tabulator-row,
html:not([data-theme="light"]):not([data-theme="dark"]) .tabulator-row .tabulator-cell,
html:not([data-theme="light"]):not([data-theme="dark"]) .tabulator .tabulator-footer {
    background-color: var(--surface-card-bg) !important;
    border-color: var(--surface-border) !important;
    color: var(--surface-text-primary) !important;
}

html:not([data-theme="light"]):not([data-theme="dark"]) .tabulator-row.tabulator-row-even,
html:not([data-theme="light"]):not([data-theme="dark"]) .tabulator-row.tabulator-selectable:hover {
    background-color: var(--surface-page-bg) !important;
}

/* High Contrast prioritizes visibility over density. Yellow/black is used for
 * selection; gain/loss also receive arrows so meaning never depends on hue. */
[data-theme="high-contrast"] body {
    font-size: 16px !important;
    line-height: 1.5 !important;
}

[data-theme="high-contrast"] *,
[data-theme="high-contrast"] *::before,
[data-theme="high-contrast"] *::after {
    box-shadow: none !important;
    text-shadow: none !important;
}

[data-theme="high-contrast"] a:not(.btn) {
    color: #FFD800 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 0.18em;
}

[data-theme="high-contrast"] .navbar a:not(.btn),
[data-theme="high-contrast"] .sidebar a:not(.btn) {
    color: #FFFFFF !important;
}

[data-theme="high-contrast"] button,
[data-theme="high-contrast"] .btn,
[data-theme="high-contrast"] input,
[data-theme="high-contrast"] select,
[data-theme="high-contrast"] textarea,
[data-theme="high-contrast"] .form-control {
    min-height: 44px;
    border: 2px solid #FFFFFF !important;
    border-radius: 0 !important;
    color: #FFFFFF !important;
    background: #000000 !important;
    font-size: 16px !important;
}

[data-theme="high-contrast"] .btn-primary,
[data-theme="high-contrast"] .btn-default:hover,
[data-theme="high-contrast"] .btn-default:active,
[data-theme="high-contrast"] .btn-default:focus,
[data-theme="high-contrast"] option:checked,
[data-theme="high-contrast"] .table>tbody>tr.selected>td,
[data-theme="high-contrast"] .table .selected,
[data-theme="high-contrast"] .tabulator-row.tabulator-selected {
    background: #FFD800 !important;
    border-color: #FFD800 !important;
    color: #000000 !important;
}

[data-theme="high-contrast"] :focus,
[data-theme="high-contrast"] :focus-visible {
    outline: 4px solid #FFD800 !important;
    outline-offset: 3px !important;
}

[data-theme="high-contrast"] .color-green::before {
    content: "\25B2\00A0";
}

[data-theme="high-contrast"] .color-red::before {
    content: "\25BC\00A0";
}

[data-theme="high-contrast"] .disabled,
[data-theme="high-contrast"] :disabled {
    color: #CFCFCF !important;
    border-color: #CFCFCF !important;
    opacity: 1 !important;
}

[data-theme="high-contrast"] .disabled [class^="sidebar-"],
[data-theme="high-contrast"] .disabled [class*=" sidebar-"] {
    filter: grayscale(1) brightness(3);
}

[data-theme="high-contrast"] .trumbowyg-box,
[data-theme="high-contrast"] .trumbowyg-editor-box,
[data-theme="high-contrast"] .trumbowyg-editor,
[data-theme="high-contrast"] .ui-datepicker.ui-widget-content,
[data-theme="high-contrast"] .ui-widget-header,
[data-theme="high-contrast"] .ui-datepicker .ui-state-default {
    background: #000000 !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

@media (forced-colors: active) {
    [data-theme="high-contrast"] :focus,
    [data-theme="high-contrast"] :focus-visible {
        outline-color: Highlight !important;
    }

    [data-theme="high-contrast"] a:not(.btn) {
        color: LinkText !important;
    }
}