/*
 * BNESIM Admin — Chrome theming (P1)
 *
 * Theme-aware rules for shared chrome: top header, sidebar, user dropdown,
 * search typeahead, and the two theme-picker surfaces (user menu + Profile →
 * Appearance).
 *
 * Loaded after custom.css so these rules win against style.css + colors/admin.css.
 * Dark overrides are scoped under [data-theme="dark"]; light mode inherits the
 * existing BNESIM look (no visible change in light mode).
 */

/* ─── Body / page surface ───────────────────────────────────────────── */

[data-theme="dark"] body,
[data-theme="dark"] #wrapper,
[data-theme="dark"] #page-wrapper,
[data-theme="dark"] #page-wrapper .container-fluid {
    background-color: var(--bg-base);
    color: var(--text-primary);
}

[data-theme="dark"] .preloader {
    background: var(--bg-base);
}

/* Link color — scoped to page content only (`#page-wrapper`). The header,
   sidebar, dropdowns, and other chrome define their own anchor colors
   (e.g. .dropdown-menu links get --text-secondary from the rule below)
   and this rule was outranking them by specificity. Also exclude buttons
   and known nav triggers from even the page-scoped rule. */
[data-theme="dark"] #page-wrapper a:not([class*="btn"]):not(.dropdown-toggle):not(.tab-pill) {
    color: var(--text-link);
}

/* Any anchor that is also a `.btn` should inherit the button's native text
   color (Bootstrap defaults set it on colored variants). */
[data-theme="dark"] a.btn,
[data-theme="dark"] a.btn-primary,
[data-theme="dark"] a.btn-info,
[data-theme="dark"] a.btn-success,
[data-theme="dark"] a.btn-warning,
[data-theme="dark"] a.btn-danger {
    color: #fff;
}
[data-theme="dark"] a.btn-default,
[data-theme="dark"] a.btn-light {
    color: var(--text-primary);
}

/* style.css has a base `h1..h6 { color: #2b2b2b }` (and `h5 { color: #3e4d6c !important }`)
   that renders near-invisible on dark surfaces. Force the right token on all
   headings regardless of context. Scoped-specific heading rules (.bg-title h4,
   .white-box > .box-title, modal headers, etc.) still win because they're
   more specific. */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .bg-title h4,
[data-theme="dark"] .page-title {
    color: var(--text-primary);
}

/* ═════════════════════════════════════════════════════════════════════
   Modern top header — neutral surface, hairline brand-gradient divider,
   refined logo + search pill. Works in both themes; the legacy
   blue.css teal fill is overridden here for everyone.
   ═════════════════════════════════════════════════════════════════════ */

#header.navbar-default,
.navbar-header {
    background-color: var(--bg-surface) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    box-shadow: none !important;
    min-height: 60px;
    height: 60px;
}
#header.navbar-default {
    position: sticky;
    top: 0;
    z-index: 200;
}

/* Hairline brand gradient — fades coral → teal across the divider line. */
#header.navbar-default::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--accent) 40%,
        var(--accent-secondary) 60%,
        transparent 100%
    );
    opacity: 0.35;
    pointer-events: none;
    z-index: 1;
}

.top-left-part {
    background: transparent !important;
    border-right: 1px solid var(--border-subtle) !important;
    width: auto !important;
    display: flex;
    align-items: center;
}

/* Mobile hamburger — legacy rule colored it rgba(255,255,255,.5) which is
   invisible against the new neutral bg. Match the other nav icons. */
.navbar-header .navbar-toggle,
.navbar-header .navbar-toggle:focus {
    color: var(--text-secondary) !important;
    background: transparent !important;
}
.navbar-header .navbar-toggle:hover {
    color: var(--text-primary) !important;
    background: var(--bg-subtle) !important;
}

.top-left-part .logo {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 0 22px !important;
    height: 60px;
    text-transform: none !important;
    font-size: 13px !important;
    color: var(--text-primary) !important;
}

.top-left-part .logo .logo-mark {
    display: block;
    width: 108px;
    height: 30px;
    background: url('/css/images/bnesim_logo.svg') left center / contain no-repeat;
    flex-shrink: 0;
}
html[data-theme="dark"] .top-left-part .logo .logo-mark {
    background-image: url('/css/images/bnesim_logo-dark.svg');
}

.top-left-part .logo .logo-img {
    height: 36px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

.top-left-part .logo .logo-caption {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    padding-left: 10px;
    border-left: 1px solid var(--border-subtle);
    line-height: 1.4;
}

/* Navbar left actions (sidebar toggler) — muted, subtle hover */
.navbar-top-links > li > a {
    color: var(--text-secondary) !important;
    height: 60px;
    line-height: 60px !important;
    padding: 0 16px !important;
    transition: color var(--motion-fast) var(--ease-out),
                background-color var(--motion-fast) var(--ease-out);
}
.navbar-top-links > li > a:hover,
.navbar-top-links > li > a:focus {
    color: var(--text-primary) !important;
    background-color: var(--bg-subtle) !important;
}

/* ─── Header search — modern pill, icon inside ─────────────────────── */

/* Pin the form exactly to 60px by zeroing the legacy `margin-top: 15px`
   from style.css on the input and using symmetrical margin on the form. */
.app-search {
    margin: 12px 0 12px 12px !important;
    position: relative;
}

.app-search .form-control,
.app-search .form-control:focus,
#search-box-engine .form-control,
#header-search-box-engine .form-control {
    background: var(--bg-subtle) !important;
    border: 1px solid transparent !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    padding: 0 16px 0 40px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    border-radius: var(--radius-pill) !important;
    background-image: none !important;
    box-shadow: none !important;
    width: 240px !important;
    transition: border-color var(--motion-fast) var(--ease-out),
                background-color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out),
                width var(--motion-base) var(--ease-out);
}

@media (min-width: 1024px) {
    .app-search .form-control:focus {
        width: 340px !important;
    }
}

.app-search .form-control:focus {
    background: var(--bg-surface) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-ring) !important;
}

.app-search .form-control::placeholder,
#search-box-engine .form-control::placeholder,
#header-search-box-engine .form-control::placeholder {
    color: var(--text-tertiary) !important;
    font-weight: 500;
}

/* Magnifier icon moves to the LEFT, inside the pill */
.app-search a#search-box-button {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%);
    left: 14px !important;
    right: auto !important;
    color: var(--text-tertiary) !important;
    font-size: 13px;
    z-index: 2;
    pointer-events: none;
}

/* Twitter Typeahead clones the input into a .tt-hint sibling and freezes
   computed background styles inline at init time, so the visible background
   (the hint, since .tt-input is forced transparent) stays stuck on whatever
   theme was active at page-load. Use `!important` to beat the inline style
   and bind it to the current theme tokens. Applied globally — any typeahead
   input (header search, affiliate-edit parent picker, sim-card search, etc.)
   inherits it. */
.tt-hint,
.twitter-typeahead .tt-hint {
    background-color: var(--bg-elevated) !important;
    background-image: none !important;
    color: var(--text-tertiary) !important;
}
html[data-theme="dark"] .tt-hint,
html[data-theme="dark"] .twitter-typeahead .tt-hint {
    background-color: var(--bg-elevated) !important;
    color: var(--text-tertiary) !important;
}
/* The chrome search boxes sit on a coloured header surface, so they
   want the subtler pill-fill instead. */
.app-search .tt-hint,
#search-box-engine .tt-hint,
#header-search-box-engine .tt-hint {
    background-color: var(--bg-subtle) !important;
}
/* .tt-input is the user-typed layer stacked on top of .tt-hint. Keep it
   transparent so the themed .tt-hint background shows through — otherwise
   the plugin freezes a white inline background on init. */
.tt-input,
.twitter-typeahead .tt-input {
    background-color: transparent !important;
}

/* ─── Right side: profile dropdown trigger ─────────────────────────── */

.profile-pic {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    height: 60px;
    padding: 0 16px !important;
    transition: background-color var(--motion-fast) var(--ease-out);
}
.profile-pic:hover,
.profile-pic:focus {
    background-color: var(--bg-subtle) !important;
}
.profile-pic img {
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
}
.profile-pic b {
    color: var(--text-primary) !important;
    font-weight: 600;
    font-size: 13px;
}

.dropdown-user > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dropdown-user > li > a > i {
    line-height: 1;
}

[data-theme="dark"] .tt-menu,
[data-theme="dark"] .tt-dropdown-menu {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .search-box-item {
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.search-box-item {
    transition: background-color var(--motion-fast) var(--ease-out);
}

.search-box-item:hover {
    background-color: var(--accent-muted);
}

/* ═════════════════════════════════════════════════════════════════════
   Modern sidebar/menu nav — cross-theme, token-driven. Replaces the
   legacy style.css + blue.css underline-on-active pattern with pill
   active states, subtle hover fills, and a polished flyout dropdown.
   ═════════════════════════════════════════════════════════════════════ */

#header-menu.navbar-default.sidebar,
.sidebar-nav {
    background-color: var(--bg-surface) !important;
    border: 0 !important;
    box-shadow: none !important;
}
/* Kill Bootstrap's default .navbar { margin-bottom: 20px } on the nav
   menu — that 20px sat in the flow between the sticky menu and the
   page wrapper and pushed the document just past 100dvh, producing a
   hairline scrollbar even on empty pages. #header has .m-b-0 so was
   already fine; the menu was the unhandled case. */
#header-menu.navbar-default {
    margin-bottom: 0 !important;
}

@media (min-width: 768px) {
    html[data-nav-layout="top"] #header-menu.navbar-default.sidebar {
        position: sticky;
        top: 60px;
        z-index: 150;
        border-bottom: 1px solid var(--border-subtle) !important;
    }
}

/* Sticky chrome offset — the vertical space taken by sticky top bars.
   - Mobile (<768px): header only (menu is a slide-in drawer) → 60px
   - ≥768px + sidebar layout: header only (menu is a left sidebar) → 60px
   - ≥768px + top-nav layout: header + nav menu → 120px
   Exposed as a var so any sticky element (toolbars, filter bars, tables)
   can set `top: var(--sticky-chrome-offset)` without duplicating media queries. */
html { --sticky-chrome-offset: 60px; }
@media (min-width: 768px) {
    html[data-nav-layout="top"] { --sticky-chrome-offset: 120px; }
}

/* Sticky toolbar utility — sits flush below the sticky chrome. Apply to
   filter/search/action rows that should stay in view while the page scrolls.
   Scoped to ≥768px (tablet + desktop) — on mobile the drawer navigation and
   shorter viewports mean a sticky toolbar just eats vertical space, so it
   scrolls normally there. */
@media (min-width: 768px) {
    .sticky-toolbar {
        position: sticky;
        top: var(--sticky-chrome-offset);
        z-index: 5;
        background: var(--bg-surface);
        padding-top: 24px;
        margin-top: -24px;
        padding-bottom: 16px;
        margin-bottom: -16px;
    }
}

#side-menu {
    padding: 8px 10px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

#side-menu > li {
    float: none !important;
    position: relative;
}

/* Hover bridge — invisible strip spanning the 4px gap between a trigger
   and its dropdown flyout. Keeps :hover alive on the <li> while the
   cursor crosses the gap, so the dropdown doesn't close mid-reach.
   Only rendered on items that actually have a submenu. */
#side-menu > li:has(> .nav-second-level)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 6px;
}
@media (min-width: 768px) {
    /* Collapsed sidebar: flyout opens to the right instead of below,
       so the bridge swaps to a vertical strip along the right edge. */
    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] #side-menu > li:has(> .nav-second-level)::after {
        top: 0;
        bottom: 0;
        left: 100%;
        right: auto;
        width: 6px;
        height: auto;
    }
    /* Expanded sidebar: submenu is inline accordion, no gap to bridge. */
    html[data-nav-layout="sidebar"]:not([data-nav-collapsed="true"]) #side-menu > li:has(> .nav-second-level)::after {
        content: none;
    }
}

#side-menu > li > a {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-secondary) !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: color var(--motion-fast) var(--ease-out),
                background-color var(--motion-fast) var(--ease-out);
}

#side-menu > li > a > i,
#side-menu > li > a > [class*="linea-icon"] {
    font-size: 16px;
    line-height: 1;
    color: inherit;
    transition: color var(--motion-fast) var(--ease-out);
}

#side-menu > li > a .hide-menu {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#side-menu > li > a .nav-chevron {
    margin-left: 4px;
    font-size: 12px;
    opacity: 0.55;
    transition: transform var(--motion-base) var(--ease-out),
                opacity var(--motion-fast) var(--ease-out);
}
#side-menu > li:hover > a .nav-chevron {
    opacity: 0.9;
}
/* Rotate the chevron only when the sub-menu is actually expanded
   (.nav-second-level.in), not when the item is merely .active
   (which just marks "you are here" for the current page). */
#side-menu > li:has(> .nav-second-level.in) > a .nav-chevron {
    transform: rotate(90deg);
    opacity: 0.9;
}

#side-menu > li > a:hover,
#side-menu > li > a:focus {
    color: var(--text-primary) !important;
    background-color: var(--bg-subtle) !important;
}

/* Page-active state. `<a>.active` is set by HeaderMenuView based on
   `active_panel` (which page you're on). The `<li>.active` variant that
   toggleMenu flips on/off only signals "dropdown is open" — that's
   already conveyed by the rotating chevron + visible flyout, so we don't
   paint the same accent pill on the trigger and collide with the real
   page-active indicator. */
#side-menu > li > a.active {
    color: var(--accent) !important;
    background-color: var(--accent-muted) !important;
    border: 0 !important;
    font-weight: 600 !important;
}

#side-menu > li > a.active i,
#side-menu > li > a.active > i,
#side-menu > li > a.active > [class*="linea-icon"] {
    color: var(--accent) !important;
}

/* ── Flyout dropdown (second-level nav) ─────────────────────────────── */

#side-menu .nav-second-level {
    padding: 6px !important;
    margin-top: 4px;
    min-width: 220px;
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
}

#side-menu .nav-second-level > li {
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--radius-sm) !important;
}

/* The `.submenu-title` row lives inside every `.nav-second-level` in
   the template, but only surfaces in collapsed sidebar mode (where it
   acts as the flyout's accent-colored header). Hide it everywhere
   else — expanded accordion already shows the label on the trigger,
   and top-nav / mobile layouts render their own parent labels. */
#side-menu .nav-second-level > li.submenu-title {
    display: none;
}

#side-menu .nav-second-level > li > a {
    position: relative;
    display: flex !important;
    align-items: center;
    padding: 8px 12px 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-sm) !important;
    transition: color var(--motion-fast) var(--ease-out),
                background-color var(--motion-fast) var(--ease-out);
}

#side-menu .nav-second-level > li > a::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    background: var(--accent);
    border-radius: var(--radius-pill);
    transition: transform var(--motion-fast) var(--ease-out);
}

/* Legacy style.css rule `.sidebar #side-menu > li:hover a { background:#f7fafc }`
   paints every <a> descendant of a hovered top-level <li> — both the trigger
   <a> itself and every row of the expanded submenu. Neutralize that entire
   cascade. The :not() pair keeps the actually-hovered/focused row themed via
   the explicit hover/focus rules below (and the top-level trigger's themed
   hover comes from #side-menu > li > a:hover further up). */
.sidebar #side-menu > li:hover a:not(:hover):not(:focus),
#side-menu > li:hover a:not(:hover):not(:focus) {
    background: transparent !important;
}

#side-menu .nav-second-level > li > a:hover,
#side-menu .nav-second-level > li > a:focus {
    color: var(--text-primary) !important;
    background-color: var(--bg-subtle) !important;
}

#side-menu .nav-second-level > li > a:hover::before,
#side-menu .nav-second-level > li > a:focus::before,
#side-menu .nav-second-level > li.active > a::before {
    transform: translateY(-50%) scaleY(1);
}

#side-menu .nav-second-level > li.active > a,
#side-menu .nav-second-level > li > a.active {
    color: var(--accent) !important;
    background-color: var(--accent-muted) !important;
    font-weight: 600 !important;
}

/* Sidebar search (mobile view) */
.sidebar-search {
    padding: 12px 10px 6px;
    list-style: none;
}
.sidebar-search .input-group.custom-search-form {
    position: relative;
    display: block;
    width: 100%;
}
.sidebar-search #header-search-box-engine {
    width: 100%;
}
.sidebar-search .form-control {
    background-color: var(--bg-subtle) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-pill) !important;
    height: 38px;
    padding: 0 44px 0 16px;
    width: 100%;
}
.sidebar-search .input-group .input-group-btn {
    position: absolute;
    top: 50%;
    right: 5px;
    display: block;
    width: auto;
    font-size: inherit;
    transform: translateY(-50%);
    z-index: 4;
}
.sidebar-search .input-group .input-group-btn .btn {
    background: var(--bg-elevated) !important;
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle) !important;
    border-radius: 50%;
    height: 28px;
    width: 28px;
    min-width: 0;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: color var(--motion-fast) var(--ease-out),
                background-color var(--motion-fast) var(--ease-out);
}
.sidebar-search .input-group .input-group-btn .btn:hover,
.sidebar-search .input-group .input-group-btn .btn:focus {
    background-color: var(--accent-muted) !important;
    border-color: var(--accent-muted) !important;
    color: var(--accent);
    outline: 0;
}
.sidebar-search .input-group .input-group-btn .btn .fa {
    font-size: 13px;
}

/* ── Mobile: stack items vertically, inline the dropdowns ──────────── */
@media (max-width: 767px) {
    #side-menu {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
        padding: 8px 10px !important;
    }
    #side-menu > li {
        width: 100%;
    }
    #side-menu > li > a {
        width: 100%;
        justify-content: flex-start;
        height: 48px;
        gap: 12px;
    }
    /* Mirrors the desktop sidebar rule: give every icon a fixed 20px
       box so labels line up regardless of the glyph's natural width
       (fa-users vs fa-mobile vs fa-cog, some with fa-fw, some without). */
    #side-menu > li > a > i,
    #side-menu > li > a > [class*="linea-icon"] {
        flex-shrink: 0;
        width: 20px;
        text-align: center;
    }
    /* Push the chevron to the far right when the row has full width. */
    #side-menu > li > a .hide-menu {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    /* Flyout becomes an inline expanded list — indented under parent,
       no floating panel chrome. Animated via max-height/padding: the
       .collapse wrapper is always display: block, and transitions
       smoothly between collapsed (0) and open (.in). */
    #side-menu .nav-second-level {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        padding-left: 20px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    #side-menu .nav-second-level.collapse {
        display: block;
        overflow: hidden;
        max-height: 0;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        transition: max-height var(--motion-base) var(--ease-out),
                    padding var(--motion-base) var(--ease-out),
                    margin var(--motion-base) var(--ease-out);
    }
    #side-menu .nav-second-level.collapse.in {
        max-height: 600px;
        margin: 2px 0 4px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    #side-menu .nav-second-level > li > a {
        padding-left: 16px !important;
    }
}

/* Collapse button hidden on mobile — the drawer/hamburger handles that. */
@media (max-width: 767px) {
    .sidebar-collapse-btn {
        display: none !important;
    }
}

/* ── Tablet: top nav shows icons only, expand on hover ─────────────── */
@media (min-width: 768px) and (max-width: 1199px) {
    html[data-nav-layout="top"] #side-menu > li > a {
        padding: 0 12px !important;
        gap: 0;
        transition: padding var(--motion-base) var(--ease-out),
                    gap var(--motion-base) var(--ease-out),
                    background-color var(--motion-fast) var(--ease-out);
    }
    html[data-nav-layout="top"] #side-menu > li > a .hide-menu {
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        white-space: nowrap;
        transition: max-width var(--motion-base) var(--ease-out),
                    opacity var(--motion-fast) var(--ease-out);
    }
    html[data-nav-layout="top"] #side-menu > li:hover > a,
    html[data-nav-layout="top"] #side-menu > li > a.active,
    html[data-nav-layout="top"] #side-menu > li.active > a {
        padding: 0 14px !important;
        gap: 10px;
    }
    html[data-nav-layout="top"] #side-menu > li:hover > a .hide-menu,
    html[data-nav-layout="top"] #side-menu > li > a.active .hide-menu,
    html[data-nav-layout="top"] #side-menu > li.active > a .hide-menu {
        max-width: 220px;
        opacity: 1;
    }
}

/* ── Top nav (tablet + desktop): dropdowns open downward, so the
      right-facing chevron adds visual noise — hide it. On mobile the
      nav collapses into a vertical sheet where the chevron is useful. */
@media (min-width: 768px) {
    html[data-nav-layout="top"] #side-menu > li > a .nav-chevron {
        display: none;
    }
}

/* ── Mobile sheet: sidebar slides in from the left as an overlay ───── */
.nav-sheet-backdrop {
    display: none;
}
@media (max-width: 767px) {
    #header-menu .sidebar-nav.collapse,
    #header-menu .sidebar-nav.collapse.in {
        display: block;
        height: auto;
    }
    #header-menu.navbar-default.sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        z-index: 1050;
        border-right: 1px solid var(--border-subtle) !important;
        box-shadow: 8px 0 24px rgba(0, 0, 0, 0.15) !important;
        /* !important defends against the legacy custom.js resize handler,
           which writes inline `overflow: inherit` on `.sidebar` whenever
           width < 1170px (a leftover from the old compact-sidebar layout).
           Without this, mobile sheet content longer than the viewport
           can't scroll. */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: translateX(-100%);
        transition: transform var(--motion-base) var(--ease-out);
        -webkit-overflow-scrolling: touch;
    }
    body.nav-sheet-open #header-menu.navbar-default.sidebar {
        transform: translateX(0);
    }
    .nav-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--motion-base) var(--ease-out);
    }
    body.nav-sheet-open .nav-sheet-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    body.nav-sheet-open {
        overflow: hidden;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   Desktop-only: collapsible left sidebar layout.
   Activates when html[data-nav-layout="sidebar"]. Mobile falls back to
   the existing stacked drawer above (this whole block is wrapped in a
   ≥768px media query).
   ═════════════════════════════════════════════════════════════════════ */

/* Hide the collapse button unless we're actually in sidebar mode. */
html:not([data-nav-layout="sidebar"]) .sidebar-collapse-btn {
    display: none !important;
}

@media (min-width: 768px) {

    html[data-nav-layout="sidebar"] #header-menu.navbar-default.sidebar {
        position: fixed;
        top: 60px;
        left: 0;
        bottom: 0;
        width: 240px;
        z-index: 100;
        border-right: 1px solid var(--border-subtle);
        overflow: visible;
        transition: width var(--motion-base) var(--ease-out);
        display: flex;
        flex-direction: column;
    }

    html[data-nav-layout="sidebar"] #header-menu .sidebar-nav {
        flex: 1 1 auto;
        display: flex !important;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        padding: 0;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Scroll the menu itself, not the whole sidebar-nav. That way the
       collapse button (sibling of #side-menu) sits outside the scroll
       area — it stays put and its horizontal width doesn't shift when
       the scrollbar appears. */
    html[data-nav-layout="sidebar"] #side-menu {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
        padding: 12px 10px !important;
        margin: 0 !important;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    html[data-nav-layout="sidebar"] #side-menu > li {
        width: 100%;
        position: relative;
    }

    html[data-nav-layout="sidebar"] #side-menu > li > a {
        width: 100%;
        justify-content: flex-start;
        height: 42px;
        padding: 0 12px !important;
        gap: 12px;
    }

    html[data-nav-layout="sidebar"] #side-menu > li > a > i,
    html[data-nav-layout="sidebar"] #side-menu > li > a > [class*="linea-icon"] {
        font-size: 18px;
        flex-shrink: 0;
        width: 20px;
        text-align: center;
    }

    html[data-nav-layout="sidebar"] #side-menu > li > a .hide-menu {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        white-space: nowrap;
        min-width: 0;
    }
    html[data-nav-layout="sidebar"] #side-menu > li > a .hide-menu .nav-chevron {
        flex-shrink: 0;
    }

    /* Sub-menus expand inline under their parent, same click-toggle
       accordion used on the mobile sheet. Animated via max-height so the
       .collapse wrapper can stay display:block and transition smoothly
       between collapsed (0) and open (.in). */
    html[data-nav-layout="sidebar"] #side-menu .nav-second-level {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        padding-left: 20px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    html[data-nav-layout="sidebar"] #side-menu .nav-second-level.collapse {
        display: block;
        overflow: hidden;
        max-height: 0;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        transition: max-height var(--motion-base) var(--ease-out),
                    padding var(--motion-base) var(--ease-out),
                    margin var(--motion-base) var(--ease-out);
    }
    html[data-nav-layout="sidebar"] #side-menu .nav-second-level.collapse.in {
        max-height: 600px;
        margin: 2px 0 4px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    html[data-nav-layout="sidebar"] #side-menu .nav-second-level > li > a {
        padding-left: 16px !important;
    }

    /* Main content shifts over for the sidebar. custom.css sets
       `#page-wrapper { width: 100% }` — combined with margin-left that would
       overflow the viewport, so clamp width with calc() too. */
    html[data-nav-layout="sidebar"] #page-wrapper {
        margin-left: 240px;
        width: calc(100% - 240px) !important;
        transition: margin-left var(--motion-base) var(--ease-out),
                    width var(--motion-base) var(--ease-out);
    }

    /* ── Collapsed state ─────────────────────────────────────────────── */

    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] #header-menu.navbar-default.sidebar {
        width: 64px;
    }

    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] #page-wrapper {
        margin-left: 64px;
        width: calc(100% - 64px) !important;
    }

    /* Collapsed: flyout sub-menus pop to the right, so the nav and menu
       must stop clipping horizontally. The expanded sidebar scrolls the
       list vertically; collapsed has only top-level items (no inline
       accordion), so dropping the scroll container here is safe. */
    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] #header-menu .sidebar-nav,
    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] #side-menu {
        overflow: visible !important;
    }

    /* Some content pages use sticky/absolute dropdowns up to z-index 1050
       (e.g., destination pickers). The sidebar creates a stacking context
       at z-index 100, which caps the flyout's effective stacking vs page
       content. Lift the whole sidebar only while a flyout is actually
       visible (hovered, focused, or click-opened via .in) so normal
       layering — modals, backdrops, header dropdowns — stays intact. */
    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] #header-menu.navbar-default.sidebar:has(#side-menu > li:hover > .nav-second-level),
    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] #header-menu.navbar-default.sidebar:has(#side-menu > li:focus-within > .nav-second-level),
    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] #header-menu.navbar-default.sidebar:has(#side-menu .nav-second-level.in) {
        z-index: 1055;
    }

    /* Collapsed: each item becomes a centered 40×40 rounded square, so
       the active pill reads as a well-proportioned chip instead of a
       tall, thin rectangle pressed against the sidebar edges.
       Switching from inline-flex → flex so `margin: 0 auto` actually
       centers the pill horizontally within the <li>. */
    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] #side-menu > li > a {
        display: flex !important;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        padding: 0 !important;
        justify-content: center;
        gap: 0;
        /* `.waves-effect` (ripple feedback) sets overflow: hidden on the
           <a>, which would clip the absolute-positioned label pill. Lift
           that clip here so the pill can extend to the right; the ripple
           itself stays inside the icon, so visual impact is nil. */
        overflow: visible;
    }

    /* Collapsed: items WITH a submenu render their label as the first
       row inside the submenu flyout panel (see `.submenu-title` below),
       so the flyout is a single connected card — one border, one shadow.
       Items WITHOUT a submenu don't have a flyout, so their label uses
       a floating tooltip pill positioned next to the icon. The rules
       below are scoped to items without a submenu only. */

    /* Right-edge hover bridge for items without a submenu: the label
       pill lives outside the <li>'s bounds, so the cursor must stay in
       hover across the 4px gap from icon to pill. */
    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] #side-menu > li:not(:has(> .nav-second-level))::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 100%;
        width: 6px;
    }

    /* Items with a submenu: hide the inline label — it's reproduced as
       the `.submenu-title` row inside the flyout instead. */
    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] #side-menu > li:has(> .nav-second-level) > a .hide-menu {
        display: none;
    }

    /* Items without a submenu: turn the inline label into a floating
       tooltip pill to the right of the 40×40 icon. Because `.waves-effect`
       sets the <a> to `position: relative`, the pill anchors to the <a>,
       not the <li>. The <li> is 44px wide (64px sidebar − 2×10px ul
       padding), so `margin: 0 auto` leaves 2px on each side of the <a>.
       Offset the pill by 6px (2px auto-margin + 4px gap) so it lines up
       with where the submenu flyout would land for items that have one. */
    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] #side-menu > li:not(:has(> .nav-second-level)) > a .hide-menu {
        display: inline-flex !important;
        position: absolute;
        left: calc(100% + 6px);
        top: 0;
        height: 40px;
        padding: 0 14px;
        background-color: var(--bg-surface);
        color: var(--accent);
        font-weight: 600;
        font-size: 13px;
        letter-spacing: 0.01em;
        white-space: nowrap;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        align-items: center;
        gap: 0;
        z-index: 1000;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-4px);
        pointer-events: none;
        transition: opacity var(--motion-base) var(--ease-out),
                    transform var(--motion-base) var(--ease-out),
                    visibility 0s linear var(--motion-base);
    }
    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] #side-menu > li:not(:has(> .nav-second-level)):hover > a .hide-menu,
    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] #side-menu > li:not(:has(> .nav-second-level)):focus-within > a .hide-menu {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        transition: opacity var(--motion-base) var(--ease-out),
                    transform var(--motion-base) var(--ease-out);
    }

    /* Collapsed sidebar: 64px is too narrow for inline accordion, so
       the sub-menu pops out as a floating panel to the right. Still
       click-toggled via the .in class from HeaderMenuView.toggleMenu —
       restores the flyout chrome that the expanded accordion overrode. */
    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] #side-menu .nav-second-level {
        position: absolute !important;
        left: calc(100% + 4px);
        top: 0;
        width: auto !important;
        min-width: 220px !important;
        margin-top: 0 !important;
        padding: 6px !important;
        background-color: var(--bg-surface) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: var(--radius-md) !important;
        box-shadow: var(--shadow-lg) !important;
        z-index: 1000;
    }

    /* Submenu title row — rendered as the first <li> inside every
       .nav-second-level in the template. Acts as an accent-colored
       header only in collapsed sidebar mode; the base rule below hides
       it everywhere else (expanded accordion, top-nav layout, mobile). */
    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] #side-menu .nav-second-level > li.submenu-title {
        display: block;
        padding: 6px 12px 8px;
        margin: 0 0 4px;
        color: var(--accent);
        font-weight: 600;
        font-size: 13px;
        letter-spacing: 0.01em;
        border-bottom: 1px solid var(--border-subtle) !important;
        border-radius: 0 !important;
        pointer-events: none;
    }
    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] #side-menu .nav-second-level.collapse {
        max-height: none;
        overflow: visible;
        transition: none;
    }
    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] #side-menu .nav-second-level.collapse.in {
        margin: 0 !important;
    }

    /* ── Flyout fade + slide animation ───────────────────────────────
       Top-nav dropdowns (and collapsed-sidebar flyouts) previously
       show/hide via display: none ↔ block, which is not animatable.
       Override display to always be block and drive visibility with
       opacity + transform instead. visibility transitions instantly on
       show and after the fade-out on hide, so the element cleanly
       leaves the tab order without flicker. */
    html[data-nav-layout="top"] #side-menu .nav-second-level,
    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] #side-menu .nav-second-level {
        display: block !important;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-4px);
        pointer-events: none;
        transition: opacity var(--motion-base) var(--ease-out),
                    transform var(--motion-base) var(--ease-out),
                    visibility 0s linear var(--motion-base);
    }
    html[data-nav-layout="top"] #side-menu > li:hover > .nav-second-level,
    html[data-nav-layout="top"] #side-menu > li:focus-within > .nav-second-level,
    html[data-nav-layout="top"] #side-menu > li > .nav-second-level.in,
    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] #side-menu > li:hover > .nav-second-level,
    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] #side-menu > li:focus-within > .nav-second-level,
    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] #side-menu > li > .nav-second-level.in {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        transition: opacity var(--motion-base) var(--ease-out),
                    transform var(--motion-base) var(--ease-out);
    }

    /* ── Collapse toggle button ──────────────────────────────────────── */

    html[data-nav-layout="sidebar"] .sidebar-collapse-btn {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: calc(100% - 20px);
        margin: 8px 10px 12px;
        padding: 0 12px;
        height: 36px;
        flex: 0 0 auto;
        background: transparent;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.02em;
        cursor: pointer;
        transition: background-color var(--motion-fast) var(--ease-out),
                    color var(--motion-fast) var(--ease-out),
                    border-color var(--motion-fast) var(--ease-out);
    }

    html[data-nav-layout="sidebar"] .sidebar-collapse-btn:hover,
    html[data-nav-layout="sidebar"] .sidebar-collapse-btn:focus {
        color: var(--text-primary);
        background: var(--bg-subtle);
        border-color: var(--border-default);
        outline: none;
    }

    html[data-nav-layout="sidebar"] .sidebar-collapse-btn .sidebar-collapse-icon {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        transition: transform var(--motion-base) var(--ease-out);
    }

    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] .sidebar-collapse-btn {
        justify-content: center;
        padding: 0;
        width: calc(100% - 20px);
    }

    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] .sidebar-collapse-btn .sidebar-collapse-icon {
        transform: rotate(180deg);
    }

    html[data-nav-layout="sidebar"][data-nav-collapsed="true"] .sidebar-collapse-btn .sidebar-collapse-label {
        display: none;
    }
}

/* ─── Form controls ─────────────────────────────────────────────────── */

[data-theme="dark"] .form-control,
[data-theme="dark"] input.form-control,
[data-theme="dark"] select.form-control,
[data-theme="dark"] textarea.form-control {
    background-color: var(--bg-elevated);
    border-color: var(--border-default);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--text-tertiary);
}

[data-theme="dark"] .form-control:focus {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

[data-theme="dark"] .form-control[disabled],
[data-theme="dark"] .form-control[readonly] {
    background-color: var(--bg-subtle);
    color: var(--text-secondary);
}

/* Native <input type="file"> — the "Choose File" button uses OS chrome
   by default, which reads as alien against a themed form. Style it via
   ::file-selector-button (standard) with a ::-webkit- fallback for
   older Safari. Tokens handle the light/dark switch automatically. */
input[type="file"] {
    color: var(--text-primary);
}
input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 4px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background-color: var(--bg-subtle);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out);
}
input[type="file"]::file-selector-button:hover {
    background-color: var(--accent-muted);
    border-color: var(--accent);
}
input[type="file"]::-webkit-file-upload-button {
    margin-right: 12px;
    padding: 4px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background-color: var(--bg-subtle);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out);
}
input[type="file"]::-webkit-file-upload-button:hover {
    background-color: var(--accent-muted);
    border-color: var(--accent);
}

/* Bare <select> nested in .input-group-addon (search-result, blacklist):
   the addon paints --bg-surface; without form-control the select falls
   back to native dark rendering and reads as washed-out. */
[data-theme="dark"] .input-group-addon select {
    background-color: transparent;
    color: var(--text-primary);
}

[data-theme="dark"] label {
    color: var(--text-primary);
}

/* ─── Horizontal rules ──────────────────────────────────────────────── */

[data-theme="dark"] hr {
    border-top-color: var(--border-subtle);
}

/* ─── Tables ────────────────────────────────────────────────────────── */

[data-theme="dark"] .table > thead > tr > th,
[data-theme="dark"] .table > tbody > tr > th,
[data-theme="dark"] .table > tfoot > tr > th {
    color: var(--text-primary);
    border-bottom-color: var(--border-default);
    background-color: var(--bg-subtle);
}

[data-theme="dark"] .table > tbody > tr > td,
[data-theme="dark"] .table > tfoot > tr > td {
    color: var(--text-secondary);
    border-top-color: var(--border-subtle);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--bg-subtle);
}

[data-theme="dark"] .table-hover > tbody > tr:hover,
[data-theme="dark"] .hover-table > tbody > tr:hover {
    background-color: var(--accent-muted);
}

[data-theme="dark"] .table-bordered,
[data-theme="dark"] .table-bordered > tbody > tr > td,
[data-theme="dark"] .table-bordered > tbody > tr > th,
[data-theme="dark"] .table-bordered > thead > tr > td,
[data-theme="dark"] .table-bordered > thead > tr > th {
    border-color: var(--border-subtle);
}

/* ─── Panels (Bootstrap 3) ──────────────────────────────────────────── */

[data-theme="dark"] .panel,
[data-theme="dark"] .panel-default {
    background-color: var(--bg-surface);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .panel-default > .panel-heading {
    background-color: var(--bg-subtle);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

[data-theme="dark"] .panel-body {
    color: var(--text-secondary);
}

/* ─── White-box container (legacy, used across many pages) ──────────── */

[data-theme="dark"] .white-box {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
}

/* ─── Modals ────────────────────────────────────────────────────────── */

[data-theme="dark"] .modal-content {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-subtle);
}

[data-theme="dark"] .modal-backdrop {
    background-color: #000;
}

/* ─── Logout confirmation modal ──────────────────────────────────────
   Bootstrap 3's default modal sits at the top of the viewport (margin
   auto, no vertical centering). For a small confirm dialog we want it
   "centered on desktop, bottom-sheet on mobile". The scope is
   `.logout-modal` so it never leaks to other modals.

   Strategy: anchor the dialog with `position: absolute` against the
   modal viewport (which is itself `position: fixed`). The dialog's
   placement is then independent of the modal's display/flex state, so
   it can't snap during Bootstrap's hide flow (where `.in` is removed
   ~300ms before `display: none` is set). The transform handles the
   open/close animation. */

.logout-modal .modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    width: calc(100% - 32px);
    max-width: 420px;
    padding: 0;
}

/* Closed state — centered + slightly shrunk, fades out via .fade. */
.logout-modal.fade .modal-dialog {
    -webkit-transform: translate(-50%, -50%) scale(0.94);
    -ms-transform: translate(-50%, -50%) scale(0.94);
    transform: translate(-50%, -50%) scale(0.94);
}

/* Open state — centered at full scale. */
.logout-modal.in .modal-dialog {
    -webkit-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}

.logout-modal .modal-content {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
}

.logout-modal .modal-body {
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.logout-modal__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-pill);
    background: var(--danger-muted);
    color: var(--danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.logout-modal__icon svg {
    width: 24px;
    height: 24px;
}

.logout-modal__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

.logout-modal__body {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.logout-modal__actions {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 14px;
}

.logout-modal__btn {
    flex: 1;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out),
                color var(--motion-fast) var(--ease-out),
                transform var(--motion-fast) var(--ease-out),
                filter var(--motion-fast) var(--ease-out);
}
.logout-modal__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.logout-modal__btn:active {
    transform: translateY(1px);
}

.logout-modal__btn--ghost {
    background: transparent;
    border-color: var(--border-default);
    color: var(--text-primary);
}
.logout-modal__btn--ghost:hover {
    background: var(--bg-subtle);
    border-color: var(--border-strong);
}

.logout-modal__btn--confirm {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}
.logout-modal__btn--confirm:hover {
    filter: brightness(0.94);
}
.logout-modal__btn--confirm:focus-visible {
    box-shadow: 0 0 0 3px var(--danger-muted);
}

/* Mobile — bottom sheet for easier thumb reach. Re-anchors the dialog
   to the bottom edge and swaps the centering scale animation for a
   slide-up. */
@media (max-width: 600px) {
    .logout-modal .modal-dialog {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
    }
    .logout-modal .modal-content {
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        border-bottom: 0;
    }
    .logout-modal .modal-body {
        padding: 22px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    }
    /* Drag-handle affordance on the top edge of the sheet. */
    .logout-modal .modal-content::before {
        content: "";
        display: block;
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--border-default);
        margin: 8px auto 4px;
    }
    .logout-modal.fade .modal-dialog {
        -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
        transform: translateY(100%);
    }
    .logout-modal.in .modal-dialog {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

/* ─── ApexCharts (used on dashboard + analytics + feedbacks) ────────── */
/* ApexCharts injects its own <style> at chart-construction time (after
   chrome.css loads), so we raise specificity with `html[data-theme="dark"]`
   and target every text node inside the chart canvas — beats series-color
   defaults on axis labels and legend text. Series/bar colors themselves
   still come through because they're set as `fill` on non-text elements. */

html[data-theme="dark"] .apexcharts-canvas text,
html[data-theme="dark"] .apexcharts-canvas tspan,
html[data-theme="dark"] .apexcharts-svg text,
html[data-theme="dark"] .apexcharts-svg tspan {
    fill: var(--text-secondary) !important;
}

html[data-theme="dark"] .apexcharts-title-text,
html[data-theme="dark"] .apexcharts-datalabel,
html[data-theme="dark"] .apexcharts-datalabels text {
    fill: var(--text-primary) !important;
}

/* Legend text is rendered as HTML (spans), not SVG — uses `color`, not `fill`.
   ApexCharts sets inline color = series color; override at higher specificity. */
html[data-theme="dark"] .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-text,
html[data-theme="dark"] .apexcharts-legend-text {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .apexcharts-gridline,
html[data-theme="dark"] .apexcharts-grid line,
html[data-theme="dark"] .apexcharts-grid-borders line {
    stroke: var(--border-subtle) !important;
    opacity: 0.7;
}

html[data-theme="dark"] .apexcharts-xaxis line,
html[data-theme="dark"] .apexcharts-yaxis line {
    stroke: var(--border-default) !important;
}

[data-theme="dark"] .apexcharts-tooltip,
[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light,
[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-dark {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-lg) !important;
}

[data-theme="dark"] .apexcharts-tooltip-title,
[data-theme="dark"] .apexcharts-tooltip-series-group.apexcharts-active,
[data-theme="dark"] .apexcharts-tooltip-series-group:last-child {
    background: var(--bg-subtle) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .apexcharts-xaxistooltip,
[data-theme="dark"] .apexcharts-yaxistooltip {
    background: var(--bg-elevated) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .apexcharts-menu {
    background: var(--bg-elevated) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .apexcharts-menu-item:hover {
    background: var(--accent-muted) !important;
}

[data-theme="dark"] .apexcharts-toolbar svg,
[data-theme="dark"] .apexcharts-menu-icon svg,
[data-theme="dark"] .apexcharts-zoom-icon svg,
[data-theme="dark"] .apexcharts-reset-icon svg,
[data-theme="dark"] .apexcharts-pan-icon svg,
[data-theme="dark"] .apexcharts-selection-icon svg {
    fill: var(--text-tertiary) !important;
}

[data-theme="dark"] .apexcharts-toolbar svg:hover,
[data-theme="dark"] .apexcharts-menu-icon:hover svg {
    fill: var(--text-primary) !important;
}

[data-theme="dark"] .apexcharts-legend-marker {
    /* keep series colors — they're semantic; just ensure stroke is visible */
    stroke: var(--border-default);
}

/* ─── Tabs (customtab used on profile + other pages) ────────────────── */

[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .nav-tabs > li > a {
    color: var(--text-secondary);
}

[data-theme="dark"] .nav-tabs > li > a:hover,
[data-theme="dark"] .nav-tabs > li.active > a,
[data-theme="dark"] .nav-tabs > li.active > a:focus,
[data-theme="dark"] .nav-tabs > li.active > a:hover {
    color: var(--text-primary);
    background-color: var(--bg-surface);
    border-color: var(--border-subtle) var(--border-subtle) var(--bg-surface);
}

/* ─── Dropdown menus ────────────────────────────────────────────────── */

[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .dropdown-menu > li > a {
    color: var(--text-secondary);
}

[data-theme="dark"] .dropdown-menu > li > a:hover,
[data-theme="dark"] .dropdown-menu > li > a:focus {
    background-color: var(--accent-muted);
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-menu .divider {
    background-color: var(--border-subtle);
}

/* ─── Theme toggle — user menu pill ─────────────────────────────────── */

.theme-toggle-group {
    /* Horizontal padding matches Bootstrap's `.dropdown-menu > li > a`
       (20px) so the APPEARANCE / MENU LAYOUT labels align with the icon
       column of the regular menu rows above and below. */
    padding: 6px 20px 10px;
}

.theme-toggle-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 6px;
}

.theme-toggle {
    display: flex;
    width: 100%;
    padding: 3px;
    gap: 2px;
    background-color: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
}

.theme-toggle .theme-option {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* min-height keeps the APPEARANCE (13px FA glyph) and MENU LAYOUT
       (18px SVG glyph) pills the same height despite their different
       icon sizes. */
    min-height: 30px;
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out),
                color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
}

.theme-toggle .theme-option:hover {
    color: var(--text-primary);
}

.theme-toggle .theme-option:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

.theme-toggle .theme-option.is-active {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.theme-toggle .theme-option i {
    font-size: 13px;
}

.theme-toggle .theme-option .theme-option-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* ─── Theme toggle — Profile → Appearance cards ─────────────────────── */

.appearance-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.appearance-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 16px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    transition: border-color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out),
                transform var(--motion-fast) var(--ease-out);
}

.appearance-card:hover {
    border-color: var(--border-default);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.appearance-card:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

.appearance-card.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.appearance-card .appearance-preview {
    display: flex;
    height: 56px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}

.appearance-card .appearance-preview > span {
    flex: 1 1 0;
}

.appearance-card .appearance-preview .preview-light { background: linear-gradient(135deg, #F5F6FA, #FFFFFF); }
.appearance-card .appearance-preview .preview-dark  { background: linear-gradient(135deg, #0F131A, #1C2230); }
.appearance-card .appearance-preview .preview-accent {
    flex: 0 0 18px;
    background: #FFAC42;
}

.appearance-card .appearance-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.appearance-card .appearance-desc {
    color: var(--text-secondary);
    font-size: 13px;
    margin: 0;
}

/* ═════════════════════════════════════════════════════════════════════
   Comprehensive dark-mode sweep
   ─────────────────────────────────────────────────────────────────────
   Covers every Bootstrap 3 component + the bundled plugins loaded in
   head.html/foot.html. Scoped under `html[data-theme="dark"]` both to
   raise specificity over style.css's existing `!important` rules and to
   isolate from light mode.

   If a component still shows light-mode colors, add it here — don't fix
   it per-page.
   ═════════════════════════════════════════════════════════════════════ */

/* ─── Tables (Bootstrap + DataTables + admin color-table/hover-table) ── */
/* style.css forces `#f7fafc !important` on .table-hover/.table-striped/
   .table .active states; we beat that with `html[data-theme="dark"]` prefix
   (one extra tag = higher specificity) + !important. */

html[data-theme="dark"] .table,
html[data-theme="dark"] table.dataTable {
    color: var(--text-secondary);
    background-color: transparent;
}

html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > thead > tr > td,
html[data-theme="dark"] table.dataTable > thead > tr > th,
html[data-theme="dark"] table.dataTable thead th,
html[data-theme="dark"] .color-table thead th {
    background-color: var(--bg-subtle) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-default) !important;
    border-top-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] table.dataTable tbody td,
html[data-theme="dark"] table.dataTable tbody th {
    background-color: transparent;
    border-top-color: var(--border-subtle) !important;
}

/* Skip cells with semantic text-color utilities — this selector is more
   specific than .text-success/.text-danger/.text-muted/.text-warning in
   components.css, so without the :not() it would win the !important
   tie-break and cancel getStatusClasses() colors inside tables. */
html[data-theme="dark"] .table > tbody > tr > th:not(.text-success):not(.text-danger):not(.text-muted):not(.text-warning),
html[data-theme="dark"] .table > tbody > tr > td:not(.text-success):not(.text-danger):not(.text-muted):not(.text-warning),
html[data-theme="dark"] table.dataTable tbody td:not(.text-success):not(.text-danger):not(.text-muted):not(.text-warning),
html[data-theme="dark"] table.dataTable tbody th:not(.text-success):not(.text-danger):not(.text-muted):not(.text-warning) {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .table > tfoot > tr > th,
html[data-theme="dark"] .table > tfoot > tr > td {
    color: var(--text-secondary);
    border-top-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > tbody > tr > td,
html[data-theme="dark"] .table-bordered > tbody > tr > th,
html[data-theme="dark"] .table-bordered > thead > tr > td,
html[data-theme="dark"] .table-bordered > thead > tr > th {
    border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme="dark"] table.dataTable.stripe > tbody > tr.odd,
html[data-theme="dark"] table.dataTable.display > tbody > tr.odd {
    background-color: var(--bg-subtle) !important;
}

html[data-theme="dark"] .table > tbody > tr.active > td,
html[data-theme="dark"] .table > tbody > tr.active > th,
html[data-theme="dark"] .table > tbody > tr > td.active,
html[data-theme="dark"] .table > tbody > tr > th.active,
html[data-theme="dark"] .table > thead > tr.active > td,
html[data-theme="dark"] .table > thead > tr.active > th,
html[data-theme="dark"] .table > thead > tr > td.active,
html[data-theme="dark"] .table > thead > tr > th.active,
html[data-theme="dark"] .table > tfoot > tr.active > td,
html[data-theme="dark"] .table > tfoot > tr.active > th {
    background-color: var(--accent-muted) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .table-hover > tbody > tr:hover,
html[data-theme="dark"] .hover-table > tbody > tr:hover,
html[data-theme="dark"] table.dataTable.hover > tbody > tr:hover,
html[data-theme="dark"] table.dataTable.display > tbody > tr:hover {
    background-color: var(--accent-muted) !important;
    color: var(--text-primary) !important;
}

/* DataTables default `table.dataTable tbody tr { bg: #fff }` sets white on
   every row with specificity [0,1,3]. Override here. */
html[data-theme="dark"] table.dataTable tbody tr,
html[data-theme="dark"] table.dataTable.display tbody tr,
html[data-theme="dark"] table.dataTable.stripe tbody tr,
html[data-theme="dark"] table.dataTable.hover tbody tr {
    background-color: transparent !important;
}

/* DataTables colors the *sorted* column cells with #fafafa / #f1f1f1 /
   #f3f3f3 / whitesmoke (the class name is .sorting_1 / .sorting_2 / .sorting_3,
   applied to every cell in the active sort column). High specificity — must
   re-override per selector. */
html[data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_1,
html[data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_2,
html[data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_3,
html[data-theme="dark"] table.dataTable.display tbody tr > .sorting_1,
html[data-theme="dark"] table.dataTable.display tbody tr > .sorting_2,
html[data-theme="dark"] table.dataTable.display tbody tr > .sorting_3 {
    background-color: transparent !important;
}

html[data-theme="dark"] table.dataTable.display tbody tr.odd > .sorting_1,
html[data-theme="dark"] table.dataTable.display tbody tr.odd > .sorting_2,
html[data-theme="dark"] table.dataTable.display tbody tr.odd > .sorting_3,
html[data-theme="dark"] table.dataTable.order-column.stripe tbody tr.odd > .sorting_1,
html[data-theme="dark"] table.dataTable.order-column.stripe tbody tr.odd > .sorting_2,
html[data-theme="dark"] table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 {
    background-color: var(--bg-subtle) !important;
}

html[data-theme="dark"] table.dataTable.display tbody tr.even > .sorting_1,
html[data-theme="dark"] table.dataTable.display tbody tr.even > .sorting_2,
html[data-theme="dark"] table.dataTable.display tbody tr.even > .sorting_3,
html[data-theme="dark"] table.dataTable.order-column tbody tr.even > .sorting_1,
html[data-theme="dark"] table.dataTable.order-column tbody tr.even > .sorting_2,
html[data-theme="dark"] table.dataTable.order-column tbody tr.even > .sorting_3 {
    background-color: transparent !important;
}

html[data-theme="dark"] table.dataTable.display tbody tr:hover > .sorting_1,
html[data-theme="dark"] table.dataTable.display tbody tr:hover > .sorting_2,
html[data-theme="dark"] table.dataTable.display tbody tr:hover > .sorting_3,
html[data-theme="dark"] table.dataTable.order-column.hover tbody tr:hover > .sorting_1,
html[data-theme="dark"] table.dataTable.order-column.hover tbody tr:hover > .sorting_2,
html[data-theme="dark"] table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
    background-color: var(--accent-muted) !important;
}

/* `tr.selected` row state (and its sorted-column variants) */
html[data-theme="dark"] table.dataTable tbody tr.selected,
html[data-theme="dark"] table.dataTable.stripe tbody tr.odd.selected,
html[data-theme="dark"] table.dataTable.hover tbody tr:hover.selected,
html[data-theme="dark"] table.dataTable.display tbody tr.selected,
html[data-theme="dark"] table.dataTable.display tbody tr.odd.selected,
html[data-theme="dark"] table.dataTable.display tbody tr:hover.selected {
    background-color: var(--accent-muted) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] table.dataTable tbody tr.selected > .sorting_1,
html[data-theme="dark"] table.dataTable tbody tr.selected > .sorting_2,
html[data-theme="dark"] table.dataTable tbody tr.selected > .sorting_3,
html[data-theme="dark"] table.dataTable.display tbody tr.selected > .sorting_1,
html[data-theme="dark"] table.dataTable.display tbody tr.selected > .sorting_2,
html[data-theme="dark"] table.dataTable.display tbody tr.selected > .sorting_3,
html[data-theme="dark"] table.dataTable.display tbody tr.odd.selected > .sorting_1,
html[data-theme="dark"] table.dataTable.display tbody tr.odd.selected > .sorting_2,
html[data-theme="dark"] table.dataTable.display tbody tr.odd.selected > .sorting_3 {
    background-color: var(--accent-muted) !important;
}

/* Row border colors DataTables sets to `#ddd` */
html[data-theme="dark"] table.dataTable.row-border tbody th,
html[data-theme="dark"] table.dataTable.row-border tbody td,
html[data-theme="dark"] table.dataTable.display tbody th,
html[data-theme="dark"] table.dataTable.display tbody td,
html[data-theme="dark"] table.dataTable.cell-border tbody th,
html[data-theme="dark"] table.dataTable.cell-border tbody td {
    border-top-color: var(--border-subtle) !important;
    border-right-color: var(--border-subtle) !important;
    border-left-color: var(--border-subtle) !important;
}

/* DataTables sort indicator chevrons (rendered via ::after fontawesome glyph) */
html[data-theme="dark"] table.dataTable thead .sorting:after,
html[data-theme="dark"] table.dataTable thead .sorting_asc:after,
html[data-theme="dark"] table.dataTable thead .sorting_desc:after,
html[data-theme="dark"] table.dataTable thead .sorting_asc_disabled:after,
html[data-theme="dark"] table.dataTable thead .sorting_desc_disabled:after {
    color: var(--text-tertiary) !important;
    opacity: 0.75;
}

html[data-theme="dark"] table.dataTable thead .sorting_asc:after,
html[data-theme="dark"] table.dataTable thead .sorting_desc:after {
    color: var(--accent) !important;
    opacity: 1;
}

/* ─── DataTables wrapper (info, length, filter, paginate, processing) ── */

html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_processing,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate,
html[data-theme="dark"] .dataTables_length,
html[data-theme="dark"] .dataTables_filter {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm);
    padding: 4px 8px;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_processing {
    background: var(--bg-elevated) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

html[data-theme="dark"] .dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom-color: var(--border-subtle) !important;
}

/* ─── Footer (`.footer-container`) ─────────────────────────────────── */

/* Modern footer — neutral surface, compact single row, hairline gradient
   accent mirroring the header so the app is bookended consistently.
   Overrides the legacy dark-fill from custom.css. */
.footer-container {
    background-color: var(--bg-surface) !important;
    border-top: 1px solid var(--border-subtle);
    position: relative;
    padding: 12px 24px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    text-align: left !important;
}

.footer-container::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--accent) 40%,
        var(--accent-secondary) 60%,
        transparent 100%
    );
    opacity: 0.35;
    pointer-events: none;
}

.footer-container .footer-description {
    margin: 0 !important;
    color: var(--text-tertiary) !important;
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: right !important;
}

.footer-container .footer-logo {
    height: 28px !important;
}

.footer-container .footer-logo-mark {
    display: inline-block;
    width: 128px;
    height: 28px;
    background: url('/css/images/bnesim_logo.svg') left center / contain no-repeat;
    margin: 0 !important;
    flex-shrink: 0;
}

html[data-theme="dark"] .footer-container .footer-logo-mark {
    background-image: url('/css/images/bnesim_logo-dark.svg');
}

/* ─── Page hero bar (`.bg-title`) ──────────────────────────────────── */

/* Modern page title treatment — promoted from dashboard.html so every
   page gets the same hero look. style.css ships `.bg-title` with heavy
   -25.5px L/R negative margins (legacy full-bleed pattern) and tiny
   14px padding; we reset to a normal `.row` gutter and add a larger,
   tighter-tracked heading with a gradient accent-bar on its left edge. */
.bg-title {
    padding: 28px 15px 18px !important;
    margin-left: -7.5px !important;
    margin-right: -7.5px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    overflow: visible !important;
}

.bg-title .page-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--text-primary) !important;
    position: relative;
    padding-left: 16px;
    line-height: 1.2;
    margin: 0 !important;
}

.bg-title .page-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 4px;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, var(--accent), var(--accent-secondary));
}

html[data-theme="dark"] .bg-title {
    border-bottom-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .bg-title h4,
html[data-theme="dark"] .bg-title .page-title {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .bg-title .breadcrumb a {
    color: var(--text-secondary);
}

html[data-theme="dark"] .bg-title .breadcrumb a:hover {
    color: var(--text-primary);
}

html[data-theme="dark"] .bg-title .breadcrumb .active {
    color: var(--accent);
}

/* ─── Alerts (all Bootstrap 3 variants) ────────────────────────────── */

html[data-theme="dark"] .alert {
    background-color: var(--bg-subtle);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

html[data-theme="dark"] .alert-success {
    background-color: var(--success-muted);
    border-color: var(--success);
    color: var(--success);
}

html[data-theme="dark"] .alert-info {
    background-color: var(--info-muted);
    border-color: var(--info);
    color: var(--info);
}

html[data-theme="dark"] .alert-warning {
    background-color: var(--warning-muted);
    border-color: var(--warning);
    color: var(--warning);
}

html[data-theme="dark"] .alert-danger {
    background-color: var(--danger-muted);
    border-color: var(--danger);
    color: var(--danger);
}

/* .alert-danger is ported in custom.css already (bg = --danger, white text) */

html[data-theme="dark"] .alert a,
html[data-theme="dark"] .alert .alert-link {
    color: inherit;
    text-decoration: underline;
}

/* ─── Well, blockquote, pre, code ──────────────────────────────────── */

html[data-theme="dark"] .well,
html[data-theme="dark"] pre,
html[data-theme="dark"] blockquote {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary);
}

html[data-theme="dark"] code,
html[data-theme="dark"] kbd {
    background-color: var(--bg-subtle);
    color: var(--accent);
    border: 1px solid var(--border-subtle);
}

/* ─── Breadcrumb, pagination, pager ────────────────────────────────── */

html[data-theme="dark"] .breadcrumb {
    background-color: var(--bg-subtle);
    color: var(--text-secondary);
}

html[data-theme="dark"] .breadcrumb > li + li::before {
    color: var(--text-tertiary);
}

html[data-theme="dark"] .breadcrumb > .active {
    color: var(--text-primary);
}

html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span {
    background-color: var(--bg-elevated);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

html[data-theme="dark"] .pagination > li > a:hover,
html[data-theme="dark"] .pagination > li > span:hover,
html[data-theme="dark"] .pagination > li > a:focus {
    background-color: var(--accent-muted);
    border-color: var(--border-default);
    color: var(--text-primary);
}

html[data-theme="dark"] .pagination > .active > a,
html[data-theme="dark"] .pagination > .active > span,
html[data-theme="dark"] .pagination > .active > a:hover,
html[data-theme="dark"] .pagination > .active > span:hover {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--text-on-accent) !important;
}

html[data-theme="dark"] .pagination > .disabled > a,
html[data-theme="dark"] .pagination > .disabled > span {
    background-color: var(--bg-subtle);
    color: var(--text-tertiary);
}

/* ─── List-group, nav-pills, nav.nav-list ──────────────────────────── */

html[data-theme="dark"] .list-group {
    background-color: transparent;
}

html[data-theme="dark"] .list-group-item {
    background-color: var(--bg-surface);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

html[data-theme="dark"] .list-group-item:hover {
    background-color: var(--bg-elevated);
}

html[data-theme="dark"] .list-group-item.active,
html[data-theme="dark"] .list-group-item.active:focus,
html[data-theme="dark"] .list-group-item.active:hover {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--text-on-accent) !important;
}

html[data-theme="dark"] .nav-pills > li > a {
    color: var(--text-primary);
}

html[data-theme="dark"] .nav-pills > li > a:hover,
html[data-theme="dark"] .nav-pills > li > a:focus {
    background-color: var(--bg-subtle);
    color: var(--text-primary);
}

html[data-theme="dark"] .nav-pills > li.active > a,
html[data-theme="dark"] .nav-pills > li.active > a:focus,
html[data-theme="dark"] .nav-pills > li.active > a:hover {
    background-color: var(--accent) !important;
    color: var(--text-on-accent) !important;
}

html[data-theme="dark"] .dropdown-header {
    color: var(--text-tertiary);
}

/* ─── Tooltips, popovers ───────────────────────────────────────────── */

html[data-theme="dark"] .tooltip-inner {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);
}

html[data-theme="dark"] .tooltip.top .tooltip-arrow,
html[data-theme="dark"] .tooltip.top-left .tooltip-arrow,
html[data-theme="dark"] .tooltip.top-right .tooltip-arrow { border-top-color: var(--border-subtle); }
html[data-theme="dark"] .tooltip.bottom .tooltip-arrow,
html[data-theme="dark"] .tooltip.bottom-left .tooltip-arrow,
html[data-theme="dark"] .tooltip.bottom-right .tooltip-arrow { border-bottom-color: var(--border-subtle); }
html[data-theme="dark"] .tooltip.left .tooltip-arrow { border-left-color: var(--border-subtle); }
html[data-theme="dark"] .tooltip.right .tooltip-arrow { border-right-color: var(--border-subtle); }

html[data-theme="dark"] .popover {
    background-color: var(--bg-elevated);
    border-color: var(--border-subtle);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .popover-title {
    background-color: var(--bg-subtle);
    border-bottom-color: var(--border-subtle);
    color: var(--text-primary);
}

html[data-theme="dark"] .popover.top > .arrow { border-top-color: var(--border-subtle); }
html[data-theme="dark"] .popover.top > .arrow::after { border-top-color: var(--bg-elevated); }
html[data-theme="dark"] .popover.bottom > .arrow { border-bottom-color: var(--border-subtle); }
html[data-theme="dark"] .popover.bottom > .arrow::after { border-bottom-color: var(--bg-elevated); }
html[data-theme="dark"] .popover.left > .arrow { border-left-color: var(--border-subtle); }
html[data-theme="dark"] .popover.left > .arrow::after { border-left-color: var(--bg-elevated); }
html[data-theme="dark"] .popover.right > .arrow { border-right-color: var(--border-subtle); }
html[data-theme="dark"] .popover.right > .arrow::after { border-right-color: var(--bg-elevated); }

/* ─── Progress bars ────────────────────────────────────────────────── */

html[data-theme="dark"] .progress {
    background-color: var(--bg-subtle);
}

/* ─── Labels, badges (Bootstrap 3) ─────────────────────────────────── */

/* Neutral base badge only — variants (.badge-success, .badge-warning, …)
   keep their Bootstrap color-coded backgrounds because they need to stay
   semantically meaningful. Earlier this selector caught everything and
   every badge collapsed into a near-invisible `--bg-subtle` block. */
html[data-theme="dark"] .label-default,
html[data-theme="dark"] .badge:not([class*="badge-"]) {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}

/* Token-aligned color variants — readable on dark surfaces. */
html[data-theme="dark"] .badge-success,
html[data-theme="dark"] .label-success {
    background-color: var(--success);
    color: var(--text-inverse);
}

html[data-theme="dark"] .badge-warning,
html[data-theme="dark"] .label-warning {
    background-color: var(--warning);
    color: var(--text-inverse);
}

html[data-theme="dark"] .badge-danger,
html[data-theme="dark"] .label-danger {
    background-color: var(--danger);
    color: var(--text-inverse);
}

html[data-theme="dark"] .badge-info,
html[data-theme="dark"] .label-info {
    background-color: var(--info);
    color: var(--text-inverse);
}

/* ─── Close buttons (× in modals/alerts) ───────────────────────────── */

html[data-theme="dark"] .close {
    color: var(--text-primary);
    text-shadow: none;
    opacity: 0.7;
}

html[data-theme="dark"] .close:hover,
html[data-theme="dark"] .close:focus {
    color: var(--text-primary);
    opacity: 1;
}

/* ─── Typeahead ( Bloodhound / Twitter typeahead.js ) ──────────────── */

html[data-theme="dark"] .tt-menu,
html[data-theme="dark"] .tt-dropdown-menu {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .tt-suggestion {
    color: var(--text-primary);
}

html[data-theme="dark"] .tt-suggestion:hover,
html[data-theme="dark"] .tt-suggestion.tt-cursor,
html[data-theme="dark"] .tt-suggestion:focus {
    background: var(--accent-muted) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .tt-hint,
html[data-theme="dark"] .twitter-typeahead .tt-hint {
    color: var(--text-tertiary) !important;
}

/* ─── DateRangePicker ──────────────────────────────────────────────── */

/* Shared layout for the wrapper pattern:
       <i class="fa fa-calendar date-range-icon"></i>
       <input class="form-control date-range-input" />
   inside a `position: relative` parent. Used across dashboard, analytics,
   customer-feedbacks, vouchers, and the activation pages. */
.date-range-icon {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateX(50%) translateY(-50%);
    margin-left: 0.25rem;
    pointer-events: none;
    opacity: 0.8;
}
.date-range-input {
    cursor: pointer;
    padding-left: 2rem;
}

html[data-theme="dark"] .daterangepicker {
    background-color: var(--bg-elevated);
    border-color: var(--border-subtle);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .daterangepicker::before,
html[data-theme="dark"] .daterangepicker::after {
    border-bottom-color: var(--border-subtle);
}

html[data-theme="dark"] .daterangepicker .calendar-table {
    background-color: var(--bg-elevated);
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .daterangepicker .calendar-table th,
html[data-theme="dark"] .daterangepicker .calendar-table td {
    background-color: transparent;
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .daterangepicker td.available:hover,
html[data-theme="dark"] .daterangepicker th.available:hover {
    background-color: var(--accent-muted);
    color: var(--text-primary);
}

html[data-theme="dark"] .daterangepicker td.in-range {
    background-color: var(--accent-muted);
    color: var(--text-primary);
}

html[data-theme="dark"] .daterangepicker td.active,
html[data-theme="dark"] .daterangepicker td.active:hover,
html[data-theme="dark"] .daterangepicker td.start-date,
html[data-theme="dark"] .daterangepicker td.end-date {
    background-color: var(--accent) !important;
    color: var(--text-on-accent) !important;
}

html[data-theme="dark"] .daterangepicker td.off,
html[data-theme="dark"] .daterangepicker td.off.in-range,
html[data-theme="dark"] .daterangepicker td.off.start-date,
html[data-theme="dark"] .daterangepicker td.off.end-date {
    background-color: transparent;
    color: var(--text-tertiary);
}

html[data-theme="dark"] .daterangepicker .ranges ul {
    background-color: var(--bg-elevated);
}

html[data-theme="dark"] .daterangepicker .ranges li {
    color: var(--text-primary);
}

html[data-theme="dark"] .daterangepicker .ranges li:hover {
    background-color: var(--accent-muted);
}

html[data-theme="dark"] .daterangepicker .ranges li.active {
    background-color: var(--accent);
    color: var(--text-on-accent);
}

html[data-theme="dark"] .daterangepicker select.hourselect,
html[data-theme="dark"] .daterangepicker select.minuteselect,
html[data-theme="dark"] .daterangepicker select.secondselect,
html[data-theme="dark"] .daterangepicker select.ampmselect,
html[data-theme="dark"] .daterangepicker select.yearselect,
html[data-theme="dark"] .daterangepicker select.monthselect,
html[data-theme="dark"] .daterangepicker input.input-mini {
    background-color: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

html[data-theme="dark"] .daterangepicker .drp-buttons {
    border-top-color: var(--border-subtle);
}

/* ─── bootstrap-select ─────────────────────────────────────────────── */

html[data-theme="dark"] .bootstrap-select > .dropdown-toggle,
html[data-theme="dark"] .bootstrap-select .btn,
html[data-theme="dark"] .bootstrap-select .btn-default {
    background-color: var(--bg-elevated) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .bootstrap-select .filter-option {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .bootstrap-select .dropdown-menu,
html[data-theme="dark"] .bootstrap-select.btn-group .no-results {
    background-color: var(--bg-elevated);
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .bootstrap-select .dropdown-menu > li > a {
    color: var(--text-primary);
}

html[data-theme="dark"] .bootstrap-select .dropdown-menu > li > a:hover,
html[data-theme="dark"] .bootstrap-select .dropdown-menu > li > a:focus,
html[data-theme="dark"] .bootstrap-select .dropdown-menu > li.selected > a {
    background-color: var(--accent-muted);
    color: var(--text-primary);
}

html[data-theme="dark"] .bootstrap-select .bs-searchbox .form-control {
    background-color: var(--bg-subtle);
}

/* ─── bootstrap-datepicker ─────────────────────────────────────────── */

html[data-theme="dark"] .datepicker,
html[data-theme="dark"] .datepicker-dropdown {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary);
    border-color: var(--border-subtle) !important;
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .datepicker table tr td,
html[data-theme="dark"] .datepicker table tr th {
    background-color: transparent !important;
    color: var(--text-primary);
}

html[data-theme="dark"] .datepicker table tr td.day:hover,
html[data-theme="dark"] .datepicker table tr td.focused {
    background-color: var(--accent-muted) !important;
    color: var(--text-primary);
}

html[data-theme="dark"] .datepicker table tr td.active,
html[data-theme="dark"] .datepicker table tr td.active:hover,
html[data-theme="dark"] .datepicker table tr td.active.active {
    background-color: var(--accent) !important;
    color: var(--text-on-accent) !important;
    background-image: none !important;
    text-shadow: none;
}

html[data-theme="dark"] .datepicker table tr td.old,
html[data-theme="dark"] .datepicker table tr td.new {
    color: var(--text-tertiary);
}

html[data-theme="dark"] .datepicker table tr td span {
    background-color: var(--bg-subtle) !important;
    color: var(--text-primary);
}

html[data-theme="dark"] .datepicker table tr td span:hover {
    background-color: var(--accent-muted) !important;
}

html[data-theme="dark"] .datepicker table tr td span.active {
    background-color: var(--accent) !important;
    color: var(--text-on-accent) !important;
}

/* ─── intl-tel-input ───────────────────────────────────────────────── */

html[data-theme="dark"] .intl-tel-input .selected-flag {
    background-color: var(--bg-elevated);
}

html[data-theme="dark"] .intl-tel-input .selected-flag:hover,
html[data-theme="dark"] .intl-tel-input .selected-flag:focus {
    background-color: var(--bg-subtle);
}

html[data-theme="dark"] .intl-tel-input .country-list {
    background-color: var(--bg-elevated);
    border-color: var(--border-subtle);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .intl-tel-input .country-list .country.highlight,
html[data-theme="dark"] .intl-tel-input .country-list .country:hover {
    background-color: var(--accent-muted);
}

html[data-theme="dark"] .intl-tel-input .country-list .dial-code {
    color: var(--text-secondary);
}

html[data-theme="dark"] .intl-tel-input .country-list .divider {
    border-bottom-color: var(--border-subtle);
}

/* ─── treeselectjs (used on dashboard & analytics) ─────────────────── */
/* treeselectjs.css is a CDN import in dashboard.html, loaded AFTER chrome.css
   so tied-specificity rules there win by source order. All overrides below
   use !important to reclaim the cascade. Real class names match the library's
   0.13.x output. */

/* Cross-theme layout / interaction tweaks (not theme-specific). */
.treeselect-input,
.treeselect-list {
    transition: all 300ms linear 0s;
}
.treeselect-input--opened.treeselect-input--bottom {
    border-bottom-color: var(--border-default);
}
.treeselect-list--bottom {
    top: calc(100% - 5px);
}

html[data-theme="dark"] .treeselect .treeselect-input,
html[data-theme="dark"] .affiliate-tree-select-input .form-control,
html[data-theme="dark"] .affiliate-tree-select-input {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .treeselect-input__edit {
    background: transparent !important;
    color: var(--text-primary) !important;
    caret-color: var(--accent);
}

html[data-theme="dark"] .treeselect-input__edit::placeholder {
    color: var(--text-tertiary) !important;
}

html[data-theme="dark"] .treeselect-input__tags-element {
    background-color: var(--bg-subtle) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .treeselect-input__tags-element:hover {
    background-color: var(--accent-muted) !important;
}

html[data-theme="dark"] .treeselect-input__arrow svg,
html[data-theme="dark"] .treeselect-input__clear svg {
    stroke: var(--text-tertiary) !important;
}

html[data-theme="dark"] .treeselect-input__arrow:hover svg,
html[data-theme="dark"] .treeselect-input__clear:hover svg {
    stroke: var(--text-primary) !important;
}

html[data-theme="dark"] .treeselect-list {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .treeselect-list__item {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .treeselect-list__item:hover,
html[data-theme="dark"] .treeselect-list__item--focused,
html[data-theme="dark"] .treeselect-list__item--checked,
html[data-theme="dark"] .treeselect-list__item--single-selected {
    background-color: var(--accent-muted) !important;
}

html[data-theme="dark"] .treeselect-list__item-checkbox-container {
    background-color: var(--bg-subtle) !important;
    border-color: var(--border-default) !important;
}

html[data-theme="dark"] .treeselect-list__item-label-counter {
    color: var(--text-tertiary) !important;
}

html[data-theme="dark"] .treeselect-list__item-icon svg,
html[data-theme="dark"] .treeselect-input__tags-cross svg {
    stroke: var(--text-tertiary) !important;
}

/* ─── BackGrid (legacy custom.css uses #fff for sort carets) ───────── */

html[data-theme="dark"] .backgrid .descending .sort-caret {
    border-top-color: var(--text-primary);
}

html[data-theme="dark"] .backgrid .ascending .sort-caret {
    border-bottom-color: var(--text-primary);
}

html[data-theme="dark"] .backgrid > tbody > tr:hover {
    background-color: var(--accent-muted);
}

/* ─── Morris / Flot / Chart.js containers (backgrounds only) ───────── */
/* Series colors and labels set in JS; we only theme the container + the
   injected hover tooltip div. Full chart theming = P5. */

html[data-theme="dark"] .flotTip,
html[data-theme="dark"] .morris-hover {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-md);
}

html[data-theme="dark"] .morris-hover-row-label {
    color: var(--text-primary) !important;
}

/* ─── Bootbox (uses .modal — already covered) / Toast (theme-neutral) ─ */

/* Nothing extra; .modal rules above handle bootbox. jquery.toast styles its
   own colored variants which stay fine in both themes. */

/* ─── Cropper.js (profile avatar) ──────────────────────────────────── */

html[data-theme="dark"] .cropper-view-box,
html[data-theme="dark"] .cropper-face {
    outline-color: var(--accent);
}

html[data-theme="dark"] .cropper-line,
html[data-theme="dark"] .cropper-point {
    background-color: var(--accent);
}

/* ─── Help-block / form hints ──────────────────────────────────────── */

html[data-theme="dark"] .help-block,
html[data-theme="dark"] .text-muted {
    color: var(--text-secondary) !important;
}

/* ─── Navs (generic .nav-tabs.customtab used on profile) ───────────── */

/* Don't require `.nav-link` — profile's tab anchors are raw <a>s and were
   otherwise caught by the page-wrapper link rule and tinted link-colored. */
html[data-theme="dark"] .customtab li a,
html[data-theme="dark"] .customtab li a.nav-link {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .customtab li.active a,
html[data-theme="dark"] .customtab li.active a.nav-link {
    color: var(--accent) !important;
    border-bottom-color: var(--accent) !important;
}

/* ─── Affiliate tree-select input wrapper (dashboard & others) ─────── */

html[data-theme="dark"] .affiliate-tree-select-input {
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
}

/* ═════════════════════════════════════════════════════════════════════
   Login / unauth redesign — modern centered card, gradient backdrop,
   silhouette logo, token-powered button hierarchy.
   Applies to `index.html`, `recoverpw.html`, `email-verification.html`
   (they all wrap content in `.login-register > .login-box > .white-box`).
   Scoped to `.login-register` so it never leaks to authenticated pages.
   ═════════════════════════════════════════════════════════════════════ */

.login-register {
    background: linear-gradient(135deg,
        var(--bg-base) 0%,
        var(--bg-surface) 55%,
        var(--bg-base) 100%) !important;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 24px 16px;
    overflow: hidden;
}

.login-register::before,
.login-register::after {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(8px);
}
.login-register::before {
    top: -240px;
    left: -160px;
    background: radial-gradient(circle, var(--accent-muted), transparent 65%);
}
.login-register::after {
    bottom: -280px;
    right: -180px;
    background: radial-gradient(circle, var(--accent-secondary-muted), transparent 65%);
}

.login-register .login-box {
    margin: 0 auto !important;
    max-width: 440px;
    width: 100%;
    position: relative;
    z-index: 1;
    background: transparent !important;
}

/* Scoped brand palette — align with bnesim.com (coral + sage teal) without
   disturbing the admin-wide tokens. These values come straight from the
   marketing site's stylesheet & logo SVG. */
.login-register {
    --accent:                   #F97C50;
    --accent-hover:              #FA9673;
    --accent-active:             #CE6540;
    --accent-muted:              rgba(249, 124, 80, 0.12);
    --accent-ring:               rgba(249, 124, 80, 0.35);
    --accent-secondary:          #8DC6BF;
    --accent-secondary-hover:    #A4D2CC;
    --accent-secondary-muted:    rgba(141, 198, 191, 0.18);
    --text-on-accent:            #FFFFFF;
    --text-link:                 #F97C50;
}

/* Header row (logo) — use the real multicolor BNESIM SVG from marketing. */
.login-register .login-box > .row:first-child {
    margin: 0 0 32px !important;
}
.login-register .login-box > .row:first-child .col-sm-12 {
    padding: 0;
    margin-top: 0 !important;
}
.login-register .login-box > .row:first-child img {
    display: none !important;
}
.login-register .login-box > .row:first-child a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 72px;
    transition: transform var(--motion-fast) var(--ease-out);
}
.login-register .login-box > .row:first-child a::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url('/css/images/bnesim_logo.svg') center / contain no-repeat;
    filter: drop-shadow(0 4px 16px rgba(249, 124, 80, 0.18));
}
html[data-theme="dark"] .login-register .login-box > .row:first-child a::before {
    background-image: url('/css/images/bnesim_logo-dark.svg');
    filter: drop-shadow(0 4px 16px rgba(249, 124, 80, 0.25));
}
.login-register .login-box > .row:first-child a:hover {
    transform: translateY(-1px);
}

/* Main card */
.login-register .white-box {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 36px 32px !important;
    min-height: auto !important;
}

.login-register .white-box .box-title {
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--text-primary) !important;
    text-transform: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 0 24px !important;
    line-height: 1.2;
}
.login-register .white-box .box-title::before {
    display: none !important;
}

.login-register .white-box .form-group {
    margin-bottom: 16px;
    overflow: visible !important;
    transition: all var(--motion-fast) var(--ease-out);
}
.login-register .white-box .form-group.m-b-0,
.login-register .white-box .form-group[class*="m-b-0"] {
    margin-bottom: 0 !important;
}

.login-register .white-box .form-control {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 14px !important;
    height: auto !important;
    font-size: 15px !important;
    color: var(--text-primary) !important;
    background-image: none !important;
    transition: border-color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
}
.login-register .white-box .form-control:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-ring) !important;
    outline: none;
    background-image: none !important;
}
.login-register .white-box .form-control::placeholder {
    color: var(--text-tertiary) !important;
}

/* Password reveal toggle — sits inside the password input on the right
   edge. Uses Alpine's local x-data to flip the input's type attribute. */
.login-register .white-box .password-field {
    position: relative;
}
.login-register .white-box .password-field input.form-control {
    padding-right: 46px !important;
}
.login-register .white-box .password-field__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0;
    transition: color var(--motion-fast) var(--ease-out),
                background-color var(--motion-fast) var(--ease-out);
}
.login-register .white-box .password-field__toggle:hover {
    color: var(--text-primary);
    background: var(--bg-subtle);
}
.login-register .white-box .password-field__toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-ring) !important;
    color: var(--text-primary);
}
.login-register .white-box .password-field__toggle svg {
    width: 18px;
    height: 18px;
    display: block;
}

.login-register .country-select-form-group {
    margin: 0 0 16px !important;
}
.login-register .country-select-form-group .btn-default,
.login-register .country-select-form-group .open > .dropdown-toggle.btn-default {
    background: var(--bg-elevated) !important;
    background-image: none !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    padding: 12px 14px !important;
    height: auto !important;
    font-size: 15px !important;
    box-shadow: none !important;
    outline: none !important;
}

.login-register .white-box .alert {
    border-radius: var(--radius-md);
    margin-bottom: 0;
    padding: 10px 14px;
    font-size: 14px;
}

.login-register .white-box .checkbox label {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    padding-left: 24px;
}

/* Remember-me checkbox — modern, token-driven, accessible. */
.login-register .white-box .login-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    user-select: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
}
.login-register .white-box .login-checkbox input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.login-register .white-box .login-checkbox__box {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--border-default);
    background: var(--bg-surface);
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out),
                color var(--motion-fast) var(--ease-out);
}
.login-register .white-box .login-checkbox__box svg {
    width: 12px;
    height: 12px;
    display: block;
}
.login-register .white-box .login-checkbox:hover .login-checkbox__box {
    border-color: var(--accent);
}
.login-register .white-box .login-checkbox input[type="checkbox"]:checked + .login-checkbox__box {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
}
.login-register .white-box .login-checkbox input[type="checkbox"]:focus-visible + .login-checkbox__box {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.login-register .white-box .login-checkbox__label {
    line-height: 1;
}

.login-register .white-box a[href="#"],
.login-register .white-box .pull-right {
    color: var(--text-link) !important;
    font-size: 13px;
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-out);
}
.login-register .white-box a:hover {
    color: var(--accent) !important;
}

/* Buttons — primary / secondary / tertiary hierarchy */
.login-register .white-box .btn {
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    font-size: 15px !important;
    padding: 12px 20px !important;
    height: auto !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    transition: background-color var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out),
                transform var(--motion-fast) var(--ease-out),
                filter var(--motion-fast) var(--ease-out);
}
.login-register .white-box .btn-success {
    background: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    color: var(--text-on-accent) !important;
}
.login-register .white-box .btn-success:hover:not(:disabled),
.login-register .white-box .btn-success:focus:not(:disabled) {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    filter: none !important;
    opacity: 1 !important;
}
.login-register .white-box .btn-success:active:not(:disabled) {
    background: var(--accent-active) !important;
    border-color: var(--accent-active) !important;
    transform: translateY(1px);
}
.login-register .white-box .btn-info {
    background: transparent !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
}
.login-register .white-box .btn-info:hover:not(:disabled),
.login-register .white-box .btn-info:focus:not(:disabled) {
    background: var(--bg-subtle) !important;
    border-color: var(--accent) !important;
    color: var(--text-primary) !important;
    opacity: 1 !important;
}
.login-register .white-box .btn-primary,
.login-register .white-box .btn-default {
    background: transparent !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary) !important;
}
.login-register .white-box .btn-primary:hover:not(:disabled),
.login-register .white-box .btn-default:hover:not(:disabled) {
    background: var(--bg-subtle) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
    opacity: 1 !important;
}
.login-register .white-box .btn-lg {
    font-size: 15px !important;
}

/* Keyboard focus ring — `* { outline: 0 !important }` in style.css and
   `.btn { box-shadow: none !important }` above strip native focus on
   buttons, so we restore one via box-shadow scoped to the login flow. */
.login-register .white-box .btn:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-ring) !important;
    outline: none !important;
}

.login-register .white-box .form-group .flex.flex-row.gap-4 {
    gap: 12px !important;
}
@media (max-width: 480px) {
    .login-register .white-box .form-group .flex.flex-row.gap-4 {
        flex-direction: column !important;
    }
}

.login-register .white-box #otp-input {
    text-align: center;
    letter-spacing: 0.25em;
    font-size: 18px !important;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.login-register .white-box p.text-sm,
.login-register .white-box p.mb-0.text-sm {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 4px;
}

.login-register .white-box .form-group.text-center.m-t-20 {
    margin-top: 20px !important;
}

.login-register .white-box #register-success-form .pull-right {
    float: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}

/* ═════════════════════════════════════════════════════════════════════
   Modern button system — cross-theme, token-driven. Replaces the legacy
   Bootstrap 3 saturated fills + heavy text-shadow pattern with softer
   brand-aligned colors, cleaner radius, subtle hover states. Applies to
   every `.btn-*` across the admin in one pass.
   ═════════════════════════════════════════════════════════════════════ */

.btn {
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: background-color var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out),
                color var(--motion-fast) var(--ease-out),
                transform var(--motion-fast) var(--ease-out),
                filter var(--motion-fast) var(--ease-out);
}

.btn:not(:disabled):hover {
    opacity: 1 !important;
}

.btn:not(:disabled):active {
    transform: translateY(1px);
}

.form-control {
    border-radius: var(--radius-md) !important;
}

/* ── Primary → brand coral accent ────────────────────────────────── */
.btn-primary,
.btn-primary.disabled,
.btn-primary[disabled] {
    background: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    color: #fff !important;
}
.btn-primary:not(:disabled):hover,
.btn-primary:not(:disabled):focus,
.btn-primary:not(:disabled):active,
.btn-primary:not(:disabled).active {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    color: #fff !important;
}

/* ── Info → sage teal secondary ─────────────────────────────────── */
.btn-info,
.btn-info.disabled,
.btn-info[disabled] {
    background: var(--accent-secondary) !important;
    border: 1px solid var(--accent-secondary) !important;
    color: #fff !important;
}
.btn-info:not(:disabled):hover,
.btn-info:not(:disabled):focus,
.btn-info:not(:disabled):active,
.btn-info:not(:disabled).active {
    background: var(--accent-secondary-hover) !important;
    border-color: var(--accent-secondary-hover) !important;
    color: #fff !important;
}

/* ── Success / Warning / Danger → semantic tokens ───────────────── */
.btn-success,
.btn-success.disabled,
.btn-success[disabled] {
    background: var(--success) !important;
    border: 1px solid var(--success) !important;
    color: #fff !important;
}
.btn-success:not(:disabled):hover,
.btn-success:not(:disabled):focus,
.btn-success:not(:disabled):active {
    filter: brightness(0.92);
    color: #fff !important;
}

.btn-warning,
.btn-warning.disabled,
.btn-warning[disabled] {
    background: var(--warning) !important;
    border: 1px solid var(--warning) !important;
    color: #fff !important;
}
.btn-warning:not(:disabled):hover,
.btn-warning:not(:disabled):focus,
.btn-warning:not(:disabled):active {
    filter: brightness(0.92);
    color: #fff !important;
}

.btn-danger,
.btn-danger.disabled,
.btn-danger[disabled] {
    background: var(--danger) !important;
    border: 1px solid var(--danger) !important;
    color: #fff !important;
}
.btn-danger:not(:disabled):hover,
.btn-danger:not(:disabled):focus,
.btn-danger:not(:disabled):active {
    filter: brightness(0.92);
    color: #fff !important;
}

/* ── Inverse → dark fill (flips per theme via `--bg-inverse`) ───── */
.btn-inverse,
.btn-inverse.disabled,
.btn-inverse[disabled] {
    background: var(--bg-inverse) !important;
    border: 1px solid var(--bg-inverse) !important;
    color: var(--text-inverse) !important;
}
.btn-inverse:not(:disabled):hover,
.btn-inverse:not(:disabled):focus,
.btn-inverse:not(:disabled):active {
    filter: brightness(1.15);
    color: var(--text-inverse) !important;
}

/* ── Default / Light → ghost neutral outlined ──────────────────── */
.btn-default,
.btn.btn-default,
.btn-light,
button.btn-light,
a.btn-light {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
}
.btn-default:not(:disabled):hover,
.btn-default:not(:disabled):focus,
.btn-default:not(:disabled):active,
.btn-default:not(:disabled).active,
.btn-light:not(:disabled):hover,
.btn-light:not(:disabled):focus {
    background: var(--bg-subtle) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

/* ═════════════════════════════════════════════════════════════════════
   Nav-layout swap — View Transitions API
   ─────────────────────────────────────────────────────────────────────
   Triggered from js/layout.js when the user switches between top-nav
   and sidebar layouts, or collapses/expands the sidebar. The browser
   snapshots the old chrome, applies the new `data-nav-layout` /
   `data-nav-collapsed` attribute, and cross-fades the two snapshots.
   This is what smooths over the non-animatable bits of the swap
   (position: sticky → fixed, flex-direction: row → column, display
   changes on submenu chrome).

   Tuning:
   - `animation-duration` is intentionally shorter than `--motion-slow`
     — the default 250ms cross-fade already feels long on a full-page
     snapshot, so we nudge to 220ms and use ease-out for a settled stop.
   - `::view-transition-group(root)` animates the root group only; we
     don't need per-element view-transition-names here since the whole
     chrome is reshaping at once.
   ═════════════════════════════════════════════════════════════════════ */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--motion-base);
    animation-timing-function: var(--ease-out);
}