:root {
    --primary-text-color: 0, 0, 0;
    --header-text-color: 0, 0, 0;
    --sidebar-background-color: 255, 255, 255;
    --sidebar-text-color: 0, 0, 0;
    --sidebar-hover-background-color: 14, 187, 179;
    --sidebar-active-background-color: 14, 187, 179;
    --accent-color: 14, 187, 179;
    --tertiary-color: 14, 187, 179;
    --secondary-background-color: 250, 250, 253;
    --tertiary-background-color: 235, 235, 240;
    --accent-text-color: 255, 255, 255;
    --filter-row-background-color: 248, 249, 250;
    --filter-row-border-color: 222, 226, 230;
    --summary-row-background-color: 0, 0, 0;
    --summary-row-text-color: 255, 255, 255;
    --summary-row-border-color: 0, 0, 0;

    /* Semantic colors for consistent theming */
    --surface-color: 255, 255, 255;
    --border-color: 222, 226, 230;
    --muted-text-color: 108, 117, 125;
    --input-background-color: 255, 255, 255;
    --success-color: 200, 255, 200;
    --warning-color: 255, 226, 200;
    --error-color: 255, 200, 200;
}

/* Color Utility Classes */
.color-primary {
    color: rgba(var(--accent-color), 1) !important;
    accent-color: rgba(var(--accent-color), 1) !important;
}

.background-color-primary {
    background-color: rgba(var(--accent-color), 1);
}

.background-color-primary-transparent {
    background-color: rgba(var(--accent-color), 0.05);
}

.background-color-secondary {
    background-color: rgb(var(--secondary-background-color));
}

.background-color-secondary-transparent {
    background-color: rgba(var(--secondary-background-color), 0.8);
}

.background-color-tertiary {
    background-color: rgb(var(--tertiary-background-color));
}

.accordion-button.collapsed {
    background-color: rgb(var(--tertiary-background-color));
}

.border-color-primary {
    border-color: rgba(var(--accent-color), 1);
}

.border-color-secondary {
    border: 1px solid rgba(var(--primary-text-color), 0.175);
}

/* Semantic Color Utility Classes */
.bg-surface {
    background-color: rgb(var(--surface-color));
}

.border-default {
    border-color: rgb(var(--border-color));
}

.border-subtle {
    border-color: rgba(var(--border-color), 0.5);
}

.text-muted-theme {
    color: rgb(var(--muted-text-color));
}

.input-background {
    background-color: rgb(var(--input-background-color));
}

.bg-success-theme {
    background-color: rgb(var(--success-color));
}

.bg-warning-theme {
    background-color: rgb(var(--warning-color));
}

.bg-error-theme {
    background-color: rgb(var(--error-color));
}

/* Navbar/Header Styling */
.navbar .nav-item > a {
    color: rgba(var(--header-text-color), 0.8) !important;
}

.navbar .nav-item > a:hover {
    color: rgba(var(--header-text-color), 1) !important;
}

.navbar-override {
    background-color: rgba(var(--accent-text-color), 1);
    border-bottom: 1px solid rgba(var(--primary-text-color), 0.175);
}

.brand-header-text {
    color: rgba(var(--header-text-color), 1) !important;
}

/* Link Styling */
a {
    color: rgba(var(--accent-color), 0.8);
}

a:hover {
    color: rgba(var(--accent-color), 1);
}

/* Sidebar Styling */
.sidebar {
    background-color: rgba(var(--sidebar-background-color), 1);
    border-right: 1px solid rgba(var(--sidebar-text-color), 0.175);
}

.sidebar-button {
    color: rgba(var(--sidebar-text-color), 0.8);
}

.sidebar-button:hover {
    background-color: rgba(var(--sidebar-hover-background-color), 0.1);
}

.sidebar-button.active {
    border-right: 3px solid rgba(var(--tertiary-color), 1);
    background-color: rgba(var(--sidebar-active-background-color), 0.15);
}

/* The expanded active accent bar is handled in xerini.css: the parent of a selected
   portal gets a square-left highlight with no bar, and only the currently-viewed
   portal draws a thin bar (via .sidebar-button.current::before). */

/* Dark mode: increase sidebar hover/active visibility */
[data-theme="dark"] .sidebar-button:hover {
    background-color: rgba(var(--sidebar-hover-background-color), 0.4);
}

[data-theme="dark"] .sidebar-button.active {
    background-color: rgba(var(--sidebar-active-background-color), 0.35);
}

.sidebar-child-menu {
    background-color: rgb(var(--sidebar-background-color));
    border: 1px solid rgba(var(--accent-color), 0.1);
}

.child-portals-backdrop {
    background-color: rgba(var(--primary-text-color), 0.3);
}

/* Text Utilities */
.powered-by-text {
    color: rgba(var(--sidebar-text-color), 0.5);
}

/* Portal/Portlet Styling */
.portal-container {
    background-color: rgb(var(--tertiary-background-color));
}

.portlet {
    background-color: rgb(var(--secondary-background-color));
}

.portal-with-background .portlet {
    background-color: rgba(var(--secondary-background-color), 0.8) !important;
}

/* Button Styling */
/* Bootstrap only defines --bs-btn-hover/active/disabled-color on its own colour variants, so on
   btn-fbk those var() lookups are invalid at computed-value time and `color` silently falls back to
   the inherited value. Setting them keeps every state on one colour: disabled reads as disabled via
   Bootstrap's opacity alone, and enabling a button no longer animates a colour change. */
.btn-fbk {
    color: rgb(var(--primary-text-color));
    --bs-btn-hover-color: rgb(var(--primary-text-color));
    /* Bootstrap reads a background and a border alongside each state colour: `.btn:focus-visible`
       takes the hover pair, `.btn:active` the active pair. Base .btn defines neither background, and
       an undefined custom property is invalid at computed-value time, so the background falls back
       to transparent and the border to currentColor. Stating all six keeps a tab-focused button
       painted and a pressed one from drawing a hard border. They mirror the :hover:enabled and
       :active:enabled rules below, which outrank them on pointer states and leave these to govern
       keyboard focus. */
    --bs-btn-hover-bg: rgba(var(--primary-text-color), 0.08);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: rgb(var(--primary-text-color));
    --bs-btn-active-bg: rgba(var(--primary-text-color), 0.15);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: rgb(var(--primary-text-color));
    --bs-btn-disabled-opacity: 0.5;
    /* Base .btn never defines this, so Bootstrap's `.btn:disabled` background is invalid at
       computed-value time and falls back to the initial value. Stating it makes the transparent
       ghost background a decision rather than a side effect; btn-fbk-outline overrides it with
       the surface colour, which is the case that was actually going wrong. */
    --bs-btn-disabled-bg: transparent;
    /* Bootstrap's own .btn is `1px solid transparent`, and keeping it means a plain and an outline
       button occupy the same box, so their labels sit at the same inset along a toolbar. min-height
       pins the height either way, so this is a width difference rather than a baseline one. It also
       keeps the border-colour states above meaningful, which at zero width they silently are not. */
    border: 1px solid transparent;
}

.btn-fbk:disabled {
    border: 1px solid transparent;
}

.btn-fbk-primary {
    background-color: rgba(var(--accent-color), 1);
    border: 1px solid rgba(var(--accent-color), 1);
    color: rgba(var(--accent-text-color), 1);
    --bs-btn-hover-color: rgba(var(--accent-text-color), 1);
    --bs-btn-hover-bg: rgba(var(--accent-color), 0.85);
    --bs-btn-hover-border-color: rgba(var(--accent-color), 0.85);
    --bs-btn-active-color: rgba(var(--accent-text-color), 1);
    --bs-btn-active-bg: rgba(var(--accent-color), 0.7);
    --bs-btn-active-border-color: rgba(var(--accent-color), 0.7);
    --bs-btn-disabled-color: rgba(var(--accent-text-color), 1);
}

.btn-fbk-primary:disabled {
    background-color: rgba(var(--accent-color), 0.9);
    border: 1px solid rgba(var(--primary-text-color), 0.175);
    color: rgba(var(--accent-text-color), 1);
}

.btn-fbk-primary:hover {
    color: rgba(var(--accent-text-color), 1);
}

/* Hover and press are lightness steps rather than accent washes, so they read without relying on
   hue separation. Press lands deeper than hover so a click registers as arriving.
   Only the background is stated: the border and text come from the --bs-btn-hover-* variables above,
   which carry the same values at a lower specificity, so a toggled-on button keeps its accent ring
   under the pointer instead of having it overridden. */
.btn-fbk:hover:enabled {
    background-color: rgba(var(--primary-text-color), 0.08);
}

.btn-fbk:active:enabled {
    background-color: rgba(var(--primary-text-color), 0.15);
}

.btn-fbk-primary:hover:enabled {
    background-color: rgba(var(--accent-color), 0.85);
    border-color: rgba(var(--accent-color), 0.85);
}

.btn-fbk-primary:active:enabled {
    background-color: rgba(var(--accent-color), 0.7);
    border-color: rgba(var(--accent-color), 0.7);
}

/* The border is deliberately faint: a hard 1px lift underneath is what separates the button from
   the surface, and a heavier border on top of it reads as clutter once several sit in a row.
   The lift carries no blur on purpose — blur spreads sideways as well as down, and in a dense row
   of buttons that lateral spill reads as murk between neighbours rather than as depth. */
.btn-fbk-outline {
    background-color: rgb(var(--surface-color));
    color: rgb(var(--primary-text-color));
    border: 1px solid rgba(var(--primary-text-color), 0.14);
    box-shadow: 0 1px 0 0 rgba(var(--primary-text-color), 0.04);
    --bs-btn-hover-bg: rgba(var(--primary-text-color), 0.09);
    --bs-btn-hover-border-color: rgba(var(--accent-color), 0.9);
    --bs-btn-active-bg: rgba(var(--primary-text-color), 0.15);
    --bs-btn-active-border-color: rgba(var(--primary-text-color), 0.14);
    --bs-btn-disabled-bg: rgb(var(--surface-color));
}

.btn-fbk-outline:hover:enabled {
    background-color: rgba(var(--primary-text-color), 0.09);
}

.btn-fbk-outline:active:enabled {
    background-color: rgba(var(--primary-text-color), 0.15);
}

/* A shadow does not read against a dark ground, so the lift becomes a fill there instead. */
[data-theme="dark"] .btn-fbk-outline {
    box-shadow: none;
    /* Layered over an opaque surface rather than applied as an alpha fill, so the button
       reads the same shade wherever it sits instead of picking up the ground behind it. */
    background-image: linear-gradient(rgba(var(--primary-text-color), 0.07), rgba(var(--primary-text-color), 0.07));
}

.btn-fbk-outline:disabled {
    border: 1px solid rgba(var(--primary-text-color), 0.14);
}

/* Native <button> is cursor:default and Bootstrap overrides it to pointer. Restoring the default
   keeps the hand meaning "this navigates".
   Both qualifiers are load-bearing. `button` scopes this to real buttons, because anchors styled as
   buttons (external-data-builder/review-step.tsx) do navigate and must keep the hand — an author
   rule here would beat the UA stylesheet that would otherwise give it to them. `:not(:disabled)`
   matches the specificity of Reboot's `button:not(:disabled)`, which a bare `.btn` loses to. */
button.btn:not(:disabled) {
    cursor: default;
}

.nav-tabs .nav-link,
.xefr-tabs .nav-link {
    cursor: pointer;
}

/* A disabled .btn is `pointer-events: none` in Bootstrap, which makes the hover land on whatever
   sits behind it — inside a `.clickable` card that means the card's hand cursor shows through on a
   button that cannot be pressed. Restoring pointer events puts the arrow back. Scoped to `button`
   because `a.btn.disabled` has no disabled attribute and still needs the events blocked to be
   genuinely unclickable. */
button.btn:disabled {
    pointer-events: auto;
    cursor: default;
}

/* Toggled-on, which the ghost tier states with the accent ring its transparent border leaves room
   for — the same signal the outline tier uses, so the two read as one state across a toolbar. The
   fill is cleared because --bs-btn-active-bg is a press value, momentary by design, and holding it
   for as long as a menu stays open turns the button into a solid block. .btn-fbk-outline.active
   follows and wins for that tier, which adds its own surface behind the ring. */
.btn-fbk.active {
    background-color: transparent;
    border-color: rgba(var(--accent-color), 1);
    color: rgba(var(--accent-color), 1);
}

.btn-fbk-outline.active {
    background-color: rgb(var(--surface-color));
    border-color: rgba(var(--accent-color), 1);
    color: rgba(var(--accent-color), 1);
}

/* Portal Select Buttons */
.portal-select-button {
    background-color: rgb(var(--surface-color));
}

.portal-select-button.with-background {
    background-color: rgba(var(--surface-color), 0.8);
}

.portal-select-button:hover,
.portal-select-button:hover .portal-select-icon {
    border-color: rgba(var(--tertiary-color), 1);
    background-color: rgb(var(--surface-color));
}

.portal-select-button:hover .portal-select-icon {
    color: rgba(var(--tertiary-color), 1);
}

/* Loader */
.loader {
    border: 2px solid rgba(var(--accent-color), 0.2);
    border-top: 2px solid rgba(var(--accent-color), 1);
}

/* Icons and Misc */
.portal-button-image-style {
    color: rgba(var(--tertiary-color), 1);
}

.squirrel-footer-row .squirrel-row {
    background-color: rgb(var(--summary-row-background-color)) !important;
    color: rgb(var(--summary-row-text-color)) !important;
}

.settings-icon {
    color: rgb(var(--accent-text-color)) !important;
}

.hamburger-icon {
    color: rgb(var(--header-text-color)) !important;
}

.map-sidebar-title {
    color: rgb(var(--primary-text-color)) !important;
}

.map-sidebar-link,
.map-sidebar-label {
    color: rgb(var(--accent-color)) !important;
}

/* Schema Accordion */
.schema-accordion-button {
    background-color: rgb(var(--secondary-background-color));
}

.schema-accordion-button:not(.collapsed) {
    background-color: rgb(var(--tertiary-background-color));
}

/* Bootstrap Accordion Overrides for Dark Mode */
.accordion {
    --bs-accordion-color: rgb(var(--primary-text-color));
    --bs-accordion-bg: rgb(var(--surface-color));
    --bs-accordion-border-color: rgb(var(--border-color));
    --bs-accordion-btn-color: rgb(var(--primary-text-color));
    --bs-accordion-btn-bg: rgb(var(--tertiary-background-color));
    --bs-accordion-active-color: rgb(var(--primary-text-color));
    --bs-accordion-active-bg: rgb(var(--tertiary-background-color));
}

.accordion-item {
    background-color: rgb(var(--surface-color));
    border-color: rgb(var(--border-color));
    color: rgb(var(--primary-text-color));
}

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

.accordion-button:not(.collapsed) {
    color: rgb(var(--primary-text-color)) !important;
    background-color: rgb(var(--tertiary-background-color)) !important;
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 rgb(var(--border-color));
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--accent-color), 0.25);
    border-color: rgba(var(--accent-color), 0.5);
}

.accordion-body {
    background-color: rgb(var(--surface-color));
    color: rgb(var(--primary-text-color));
}

/* Dark mode accordion icon inversion */
[data-theme="dark"] .accordion-button::after {
    filter: invert(1);
}

/* Bootstrap Form Controls for Dark Mode */
.form-control {
    background-color: rgb(var(--input-background-color));
    color: rgb(var(--primary-text-color));
    border-color: rgb(var(--border-color));
}

.form-control:focus {
    background-color: rgb(var(--input-background-color));
    color: rgb(var(--primary-text-color));
    border-color: rgba(var(--accent-color), 0.5);
    box-shadow: 0 0 0 0.25rem rgba(var(--accent-color), 0.25);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: rgb(var(--tertiary-background-color));
    color: rgb(var(--muted-text-color));
}

.form-control::placeholder {
    color: rgb(var(--muted-text-color));
}

.form-select {
    background-color: rgb(var(--input-background-color));
    color: rgb(var(--primary-text-color));
    border-color: rgb(var(--border-color));
}

.form-select:focus {
    border-color: rgba(var(--accent-color), 0.5);
    box-shadow: 0 0 0 0.25rem rgba(var(--accent-color), 0.25);
}

.form-check-input {
    background-color: rgb(var(--input-background-color, 255, 255, 255));
    border-color: rgb(var(--border-color, 206, 212, 218));
}

.form-check-input:checked {
    background-color: rgb(var(--accent-color));
    border-color: rgb(var(--accent-color));
}

/* Pin the toggle's font-size so the em-based switch dimensions stay constant
   regardless of the surrounding control's font-size (e.g. BooleanControl wraps
   its toggle in a 12px container, which otherwise shrinks the pill). Every
   slider then renders the same height everywhere. --xefr-slider-on is the ON
   colour: the brand accent shifted toward blue, derived from --accent-color so
   it still follows a client's rebranded accent. */
.xefr-slider {
    font-size: 0.9rem;
    --xefr-slider-on: color-mix(in srgb, rgb(var(--accent-color)) 65%, #0d6efd 35%);
}

/* Inset the pill slightly within its wrapper (default Bootstrap pulls it flush
   to the left edge) so the rounded left end and the hover glow never clip
   against a container's edge. */
.xefr-slider .form-check-input {
    margin-left: -2.25em;
}

/* Hover affordance: a soft accent glow + firmer border so toggles read as
   interactive. A lightness/halo change (not just a hue tint), clearly
   perceptible. Scoped to sliders (so it doesn't touch e.g. the header theme
   switch); excludes disabled controls. */
.xefr-slider .form-check-input:hover:not(:disabled) {
    cursor: pointer;
    border-color: rgb(var(--accent-color));
    box-shadow: 0 0 0 0.2rem rgba(var(--accent-color), 0.3);
}

/* Toggle ON: brand accent shifted toward blue (see --xefr-slider-on above). */
.xefr-slider .form-check-input:checked {
    background-color: var(--xefr-slider-on);
    border-color: var(--xefr-slider-on);
}

/* Toggle OFF: a sharper, higher-contrast border so an empty toggle reads as
   interactive, not disabled. --muted-text-color contrasts in both themes. The
   :not(:disabled) also raises specificity above the dark-mode rule below, so the
   sharper border survives in dark mode (and genuinely disabled toggles keep the
   default, dimmer border). */
.xefr-slider .form-check-input:not(:checked):not(:disabled) {
    border-color: rgb(var(--muted-text-color));
}

/* Inline-edit grid cells render each editor through the control's standard
   form-group/row/col wrapper (built for full forms). Its bottom margin (mb-3)
   makes the cell centre the editor around that margin — pushing it up so the
   taller slider toggle clips at the top — and its grid gutters stop the editor
   filling the cell width. Neutralise both inside edit cells so every inline
   editor (toggle, text, dropdown) sits centred and spans the cell. */
.squirrel-row.editing .squirrel-cell .form-group {
    margin-bottom: 0 !important;
    --bs-gutter-x: 0;
}

/* Dark mode: use a darker background for unchecked checkboxes/radios */
[data-theme="dark"] .form-check-input:not(:checked) {
    background-color: rgb(var(--input-background-color, 61, 61, 61));
    border-color: rgb(var(--border-color, 64, 64, 64));
}

/* Style all checkboxes and radio buttons for dark mode (including non-Bootstrap ones).
   Exclude .form-check-input — Bootstrap switches/checkboxes are themed above. */
[data-theme="dark"] input[type="checkbox"]:not(.form-check-input),
[data-theme="dark"] input[type="radio"] {
    accent-color: rgb(var(--accent-color, 14, 187, 179));
    background-color: rgb(var(--input-background-color, 61, 61, 61));
}

/* For browsers that support appearance customization */
[data-theme="dark"] input[type="checkbox"]:not(.form-check-input):not(:checked),
[data-theme="dark"] input[type="radio"]:not(:checked) {
    filter: invert(0.85) hue-rotate(180deg);
}

/* Bootstrap Card Overrides */
.card {
    background-color: rgb(var(--surface-color));
    border-color: rgb(var(--border-color));
    color: rgb(var(--primary-text-color));
}

.card-header {
    background-color: rgb(var(--tertiary-background-color));
    border-bottom-color: rgb(var(--border-color));
}

.card-footer {
    background-color: rgb(var(--tertiary-background-color));
    border-top-color: rgb(var(--border-color));
}

/* Bootstrap Modal Overrides */
.modal-content {
    background-color: rgb(var(--surface-color));
    border-color: rgb(var(--border-color));
    color: rgb(var(--primary-text-color));
}

.modal-header {
    border-bottom-color: rgb(var(--border-color));
}

.modal-footer {
    border-top-color: rgb(var(--border-color));
}

/* Bootstrap Dropdown Overrides */
.dropdown-menu {
    background-color: rgb(var(--surface-color));
    border-color: rgb(var(--border-color));
    color: rgb(var(--primary-text-color));
}

.dropdown-item {
    color: rgb(var(--primary-text-color));
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgb(var(--tertiary-background-color));
    color: rgb(var(--primary-text-color));
}

/* Bootstrap Table Overrides */
.table {
    color: rgb(var(--primary-text-color));
    border-color: rgb(var(--border-color));
}

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

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(var(--tertiary-background-color), 0.5);
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(var(--accent-color), 0.1);
}

/* Bootstrap Alert Overrides */
.alert {
    color: rgb(var(--primary-text-color));
}

/* Text Utilities for Dark Mode */
.text-muted {
    color: rgb(var(--muted-text-color)) !important;
}

/* Border utilities */
.border {
    border-color: rgb(var(--border-color)) !important;
}

/* Body/Root background */
body {
    background-color: rgb(var(--tertiary-background-color));
    color: rgb(var(--primary-text-color));
}

/* Nav Link Active State */
a.nav-link.active {
    background-color: rgba(var(--primary-text-color), 0) !important;
    border-bottom: 1px solid rgb(var(--secondary-background-color)) !important;
    color: rgb(var(--primary-text-color)) !important;
}

/* Active tabs in portals with background images - use semi-transparent background to match portlets */
.portal-with-background a.nav-link.active {
    background-color: rgba(var(--secondary-background-color), 0.8) !important;
    border-bottom: 1px solid rgba(var(--secondary-background-color), 0.8) !important;
    color: rgb(var(--primary-text-color)) !important;
}

/* Nav-tabs container border should also be semi-transparent with background images */
.portal-with-background .nav-tabs {
    border-bottom-color: rgba(var(--primary-text-color), 0.14) !important;
}

/* Bootstrap Nav-tabs Overrides for Dark Mode */
.nav-tabs {
    --bs-nav-tabs-link-active-color: rgb(var(--primary-text-color));
    --bs-nav-tabs-link-active-bg: rgb(var(--surface-color));
    --bs-nav-tabs-link-active-border-color: rgb(var(--border-color)) rgb(var(--border-color)) rgb(var(--surface-color));
    border-bottom-color: rgb(var(--border-color));
}

.nav-tabs .nav-link {
    color: rgb(var(--primary-text-color));
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: rgb(var(--primary-text-color));
    border-color: rgb(var(--border-color)) rgb(var(--border-color)) transparent;
}

.nav-tabs .nav-link.active {
    color: rgb(var(--primary-text-color));
    background-color: rgb(var(--surface-color));
    border-color: rgb(var(--border-color)) rgb(var(--border-color)) rgb(var(--surface-color));
}

/* ============================================================
   Underline tabs (layout TabbedView) — connected, fewer lines than
   boxy nav-tabs: no per-tab box, a single rail, and an accent
   underline on the active tab. Scoped to .xefr-tabs so other
   nav-tabs usages (admin, etc.) are unaffected. !important is used
   only to beat the global `a.nav-link.active { … !important }`.
   ============================================================ */
.xefr-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 2px;
    align-items: flex-end;
    list-style: none;
    margin: 0;
    padding: 0 6px;
    /* no rail — the active tab's accent underline alone marks selection */
}

.xefr-tabs .nav-item {
    margin: 0;
}

.xefr-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 12px 8px;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0;
    background: none !important;
    color: rgba(var(--primary-text-color), 0.5) !important;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.xefr-tabs .nav-link:hover {
    color: rgb(var(--primary-text-color)) !important;
    border-bottom-color: rgba(var(--primary-text-color), 0.25) !important;
}

.xefr-tabs .nav-link.active {
    /* dark bold text (accent teal is too light to read as text) + accent underline */
    color: rgb(var(--primary-text-color)) !important;
    /* full shorthand so the global `a.nav-link.active` !important can't force 1px */
    border-bottom: 3px solid rgb(var(--accent-color)) !important;
    background: none !important;
    font-weight: 600;
}

/* Themed Pill Variants - adapt to light/dark mode */
.pill-themed {
    font-size: 10px;
    background-color: rgba(var(--primary-text-color), 0.08);
    color: rgba(var(--primary-text-color), 0.7);
    border: 1px solid rgba(var(--primary-text-color), 0.15);
}

.pill-success {
    font-size: 10px;
    background-color: rgba(40, 167, 69, 0.15);
    color: rgb(40, 167, 69);
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.pill-info {
    font-size: 10px;
    background-color: rgba(23, 162, 184, 0.15);
    color: rgb(23, 162, 184);
    border: 1px solid rgba(23, 162, 184, 0.3);
}

.pill-primary {
    font-size: 10px;
    background-color: rgba(var(--accent-color), 0.15);
    color: rgba(var(--accent-color), 1);
    border: 1px solid rgba(var(--accent-color), 0.3);
}

.pill-warning {
    font-size: 10px;
    background-color: rgba(255, 193, 7, 0.15);
    color: rgb(180, 135, 0);
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.pill-danger {
    font-size: 10px;
    background-color: rgba(220, 53, 69, 0.15);
    color: rgb(220, 53, 69);
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.pill-purple {
    font-size: 10px;
    background-color: rgba(111, 66, 193, 0.15);
    color: rgb(111, 66, 193);
    border: 1px solid rgba(111, 66, 193, 0.3);
}

.pill-orange {
    font-size: 10px;
    background-color: rgba(253, 126, 20, 0.15);
    color: rgb(220, 110, 17);
    border: 1px solid rgba(253, 126, 20, 0.3);
}

.pill-slate {
    font-size: 10px;
    background-color: rgba(var(--primary-text-color), 0.1);
    color: rgba(var(--primary-text-color), 0.6);
    border: 1px solid rgba(var(--primary-text-color), 0.2);
}

/* Dark mode adjustments for warning pills (yellow needs special handling) */
[data-theme="dark"] .pill-warning {
    color: rgb(255, 210, 80);
}

/* Dark mode: lighter grid header/axis text */
[data-theme="dark"] .squirrel-header-row {
    color: rgba(255, 255, 255, 0.7);
}

/* Inline edit save/cancel button colors - use bold colors for visibility */
.squirrel-row-edit-save {
    color: rgb(40, 167, 69) !important;
}

.squirrel-row-edit-cancel {
    color: rgb(220, 53, 69) !important;
}

[data-theme="dark"] .squirrel-row-edit-save {
    color: rgb(72, 199, 101) !important;
}

[data-theme="dark"] .squirrel-row-edit-cancel {
    color: rgb(255, 99, 112) !important;
}

/* Dark mode: number input spinner buttons */
[data-theme="dark"] input[type="number"]::-webkit-inner-spin-button,
[data-theme="dark"] input[type="number"]::-webkit-outer-spin-button {
    filter: invert(1);
}

/* Dark mode: SquirrelGrid row hover and banded rows */
[data-theme="dark"] .squirrel-grid {
    --squirrel-grid-alt-color: rgba(255, 255, 255, 0.025);
}

/* Dark mode banded rows - sticky cells need opaque base with alt color overlay.
   :not(.selected) so a selected row's sticky cells keep the selection overlay
   (otherwise this out-specifies the selection rule and the highlight is lost). */
[data-theme="dark"]
    .squirrel-grid-banded
    > .squirrel-table
    > tbody
    > .squirrel-row:nth-child(odd):not(.selected)
    > .squirrel-sticky {
    background-color: var(--squirrel-grid-base-color);
    background-image: linear-gradient(var(--squirrel-grid-alt-color), var(--squirrel-grid-alt-color));
}

/* Dark mode banded row hover - sticky cells need combined overlay (not on selected rows) */
[data-theme="dark"]
    .squirrel-grid-banded
    > .squirrel-table
    > tbody
    > .squirrel-row:nth-child(odd):hover:not(.selected)
    > .squirrel-sticky {
    background-color: var(--squirrel-grid-base-color);
    background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
}

[data-theme="dark"] .squirrel-grid-nested-mod-1 {
    --squirrel-grid-alt-color: rgba(255, 255, 255, 0.015);
}

/* Dark mode: shadow for sticky column edge */
[data-theme="dark"] .squirrel-sticky:not(:has(+ .squirrel-sticky))::after {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.15), transparent);
}

/* --- Phone in landscape: force the mobile navigation chrome -------------------------------
   data-device="phone" is set from isPhoneDevice() in theme-context.tsx. The desktop/mobile nav
   switch is a pure Bootstrap md (768px) breakpoint, so a phone whose landscape width is >=768px
   would wrongly get the desktop sidebar. Below md, Bootstrap already yields the mobile chrome,
   so we ONLY override at >=768px — portrait is left entirely untouched. Scope is deliberately
   the nav chrome ONLY (column stacking, compact portlets, search stay width-driven). !important
   beats Bootstrap's own !important display utilities; each override keeps the element's own base
   display (e.g. the overlay stays flex) and only defeats Bootstrap's d-md-* hiding. */
@media (min-width: 768px) {
    [data-device="phone"] .sidebar.xefr-nav {
        display: none !important;
    } /* hide desktop sidebar */
    [data-device="phone"] .navigation-overlay {
        display: flex !important;
    } /* show overlay, keeping its base flex backdrop layout; only mounts when opened */
    [data-device="phone"] .nav-mobile-toggle {
        display: block !important;
    } /* hamburger + mobile master-nav toggle */
    [data-device="phone"] .nav-desktop-toggle {
        display: none !important;
    } /* hide desktop master-nav toggle */
}