: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 */
.btn-fbk {
    color: rgba(var(--primary-text-color), 0.8);
}

.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);
}

.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);
}

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

.btn-fbk-primary:hover:enabled,
.btn-fbk-outline:hover:enabled {
    background-color: rgba(var(--accent-color), 0.2);
    border-color: rgba(var(--accent-color), 1);
    color: rgb(var(--primary-text-color));
}

.btn-fbk-outline {
    background-color: rgb(var(--surface-color));
    color: rgb(var(--primary-text-color));
}

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

.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 */
}