/* Sidebar menu icon alignment */
.navbar-vertical .navbar-nav .dropdown-menu .dropdown-item i {
    width: 1.25rem;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

/* Font Size Customizer */
[data-bs-theme-font-size="small"], [data-theme-font-size="small"] {
    --tblr-body-font-size: 0.8125rem; /* ~13px */
}
[data-bs-theme-font-size="medium"], [data-theme-font-size="medium"] {
    --tblr-body-font-size: 0.875rem;  /* ~14px (default) */
}
[data-bs-theme-font-size="large"], [data-theme-font-size="large"] {
    --tblr-body-font-size: 1rem;       /* ~16px */
}

/* Custom Vertical Sidebar Width Override (Default was 15rem / 240px, increased to 18rem / 288px) */
@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg {
        width: 18rem !important;
    }
    .navbar-vertical.navbar-expand-lg ~ .page-wrapper,
    .navbar-expand-lg.navbar-vertical ~ .page-wrapper {
        margin-inline-start: 18rem !important;
        margin-left: 18rem !important;
    }
    .navbar-vertical.navbar-expand-lg ~ .navbar,
    .navbar-expand-lg.navbar-vertical ~ .navbar {
        margin-inline-start: 18rem !important;
        margin-left: 18rem !important;
    }
}

/* The customer and card-distributor sidebars carry the operator's company name as a text brand.
   The vendor sets white-space: nowrap on .navbar-brand, so a long name ran out past the aside
   into the page instead of wrapping inside it. */
.navbar-vertical .navbar-brand {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
}

/* Responsive Navbar adjustments for Mobile View (collapsed sidebar view, screen width < 992px) */
@media (max-width: 991.98px) {
    /* Make the navbar container wrap items and add vertical gap */
    .navbar .container-xl {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }

    /* Row 1 & 2: Navbar nav (info & user dropdown) stretches full width and lays out vertically in reverse */
    .navbar .navbar-nav.order-md-last {
        width: 100% !important;
        display: flex !important;
        flex-direction: column-reverse !important;
        align-items: center !important;
        order: -1 !important;
        gap: 0.5rem !important;
    }

    /* Row 3: Search form stretches full width and displays at the bottom */
    .navbar form[role="search"] {
        width: 100% !important;
        order: 1 !important;
        margin: 0 !important;
    }
    
    .navbar form[role="search"] .input-icon,
    .navbar form[role="search"] .form-control {
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
 * Tabler 1.5.0: keep BOTH the vertical sidebar and the top navbar
 * --------------------------------------------------------------------------
 * 1.5.0 made the two navbars mutually exclusive. core/scss/layout/_navbar.scss
 * hides the aside on any page that also renders a horizontal navbar:
 *
 *   html:not([data-bs-navbar-position='vertical'])
 *     .page:has(> [class*='navbar-expand']:not(.navbar-vertical)) > .navbar-vertical { display: none }
 *
 * ...and setting data-bs-navbar-position="vertical" hides the horizontal one instead. The operator
 * layout renders both on purpose — the aside is the navigation, the header carries the account
 * balance, support ticket link, global search and the user menu — so neither branch of the vendor
 * rule fits it. This restores the aside plus the --tblr-sidebar-width its siblings offset against,
 * which the vendor rule zeroes out when it hides the aside.
 *
 * Operator layout only: the customer and card-distributor layouts render the aside alone, so the
 * vendor's :has() guard never fires there. Matching the vendor selector exactly means source order
 * decides, and custom.css is loaded after tabler.min.css.
 */
html:not([data-bs-navbar-position='vertical']) .page:has(> .navbar-vertical):has(> [class*='navbar-expand']:not(.navbar-vertical)) > .navbar-vertical {
    display: flex;
}

html:not([data-bs-navbar-position='vertical']) .page:has(> .navbar-vertical):has(> [class*='navbar-expand']:not(.navbar-vertical)) > .navbar,
html:not([data-bs-navbar-position='vertical']) .page:has(> .navbar-vertical):has(> [class*='navbar-expand']:not(.navbar-vertical)) > .page-wrapper {
    --tblr-sidebar-width: 18rem;
}

/* --------------------------------------------------------------------------
 * Typography: the vendor default
 * --------------------------------------------------------------------------
 * 1.5.0 stopped bundling a webfont - tabler.min.css carries zero @font-face rules and starts
 * --tblr-font-sans-serif at system-ui. The 1.5.0 upgrade carried the 1.4 Geist faces forward here
 * so the upgrade would not silently restyle every panel; that has now been dropped deliberately in
 * favour of the vendor's system-font stack, and public/themes/tabler140/fonts/ was deleted with it.
 *
 * Nothing overrides --tblr-font-sans-serif or --tblr-font-monospace any more. To go back to Geist,
 * restore the font files and re-add the @font-face block plus a :root override - see the 1.5.0
 * upgrade commit (c1620abd4) for the exact declarations.
 */

/* --------------------------------------------------------------------------
 * Tabler 1.5.0: colour fallback for browsers without light-dark()
 * --------------------------------------------------------------------------
 * 1.4.0 declared its themed colours concretely - the light values on
 * `:root,[data-bs-theme=light]` and the dark ones on `[data-bs-theme=dark]`. 1.5.0 collapsed both
 * halves into `light-dark()` on `:root` alone; the `[data-bs-theme=dark]` block now carries only
 * `color-scheme:dark` and a handful of `*-rgb` values.
 *
 * `light-dark()` is Chrome 123 / Firefox 120 / Safari 17.5 (the vendor's own .browserslistrc names
 * that floor). Windows 7 caps Chrome at 109, so there every one of those variables substitutes an
 * unknown function and becomes invalid at computed-value time.
 *
 * That is what blanks the sidebar. It renders as <aside class="navbar navbar-vertical"
 * data-bs-theme="dark">, and `.navbar` paints `background: var(--tblr-navbar-bg)` ->
 * `var(--tblr-bg-surface)`, which dies and falls back to `transparent`; its text keeps the literal
 * `--tblr-navbar-color: rgba(255,255,255,.7)` the dark navbar block still sets. White text on the
 * white page = an empty column. `--tblr-body-bg` and `--tblr-body-color` die the same way, which is
 * why the rest of the page merely loses its tint instead of disappearing.
 *
 * So restore 1.4.0's declarations, guarded on the feature itself. Modern browsers skip the whole
 * block; nothing here can affect them. Values are the two branches of each vendor `light-dark()`
 * verbatim, kept as `var(--tblr-gray-*)` so `data-bs-theme-base` (slate here) still selects the
 * palette. Two exceptions, noted inline, are branches the vendor writes with `color-mix()` - also
 * unsupported on Chrome 109, so a literal copy would die for the same reason.
 *
 * Not covered, because 1.4.0 broke identically on these browsers and this is not that regression:
 * the `color-mix()` variables (`--tblr-disabled-color`, `--tblr-*-translucent`, light
 * `--tblr-active-bg`) and the `light-dark()` in `.modal-backdrop` / `.offcanvas-backdrop`.
 */
@supports not (color: light-dark(#fff, #000)) {

    :root,
    [data-bs-theme='light'],
    [data-theme='light'] {
        --tblr-bg-surface: var(--tblr-bg-surface-primary);
        --tblr-bg-surface-secondary: var(--tblr-gray-50);
        --tblr-bg-surface-tertiary: var(--tblr-gray-50);
        --tblr-bg-surface-inverted: var(--tblr-gray-900);
        --tblr-bg-forms: var(--tblr-bg-surface);
        --tblr-bg-forms-disabled: var(--tblr-bg-surface-secondary);
        --tblr-text-inverted: var(--tblr-gray-100);
        --tblr-body-color: var(--tblr-gray-700);
        --tblr-body-bg: var(--tblr-bg-surface-secondary);
        --tblr-link-color: var(--tblr-primary);
        /* Vendor: color-mix(in srgb, var(--tblr-link-color), #000 20%) - no darkened variant here. */
        --tblr-link-hover-color: var(--tblr-link-color);
        --tblr-secondary: var(--tblr-gray-500);
        --tblr-border-color: var(--tblr-gray-200);
        /* Vendor: color-mix(in srgb, var(--tblr-gray-800) 11.9%, transparent) - opaque stand-in. */
        --tblr-border-color-translucent: var(--tblr-border-color);
        --tblr-border-dark-color: var(--tblr-gray-300);
        --tblr-border-active-color: var(--tblr-gray-400);
        --tblr-code-color: var(--tblr-gray-600);
        --tblr-code-bg: var(--tblr-gray-100);
    }

    /* Same specificity as the light block above, so source order decides - keep it second. This is
     * the scope the sidebar sits in: data-bs-theme="dark" on the <aside>, or on <html> when the
     * operator has dark mode on. */
    [data-bs-theme='dark'],
    [data-theme='dark'] {
        --tblr-bg-surface: var(--tblr-gray-800);
        --tblr-bg-surface-secondary: var(--tblr-gray-900);
        --tblr-bg-surface-tertiary: var(--tblr-gray-800);
        --tblr-bg-surface-inverted: var(--tblr-gray-100);
        --tblr-bg-forms: var(--tblr-gray-900);
        --tblr-bg-forms-disabled: var(--tblr-gray-800);
        --tblr-text-inverted: var(--tblr-gray-800);
        --tblr-body-color: var(--tblr-gray-200);
        --tblr-body-bg: var(--tblr-gray-900);
        /* Vendor: color-mix(in srgb, var(--tblr-primary), #fff 40%) - no lightened variant here. */
        --tblr-link-color: var(--tblr-primary);
        --tblr-link-hover-color: var(--tblr-link-color);
        --tblr-secondary: var(--tblr-gray-400);
        --tblr-border-color: var(--tblr-gray-700);
        --tblr-border-color-translucent: var(--tblr-dark-mode-border-color-translucent);
        --tblr-border-dark-color: var(--tblr-dark-mode-border-dark-color);
        --tblr-border-active-color: var(--tblr-dark-mode-border-active-color);
        --tblr-active-bg: rgb(13.5987232102%, 17.9854081167%, 24.1267669859%);
        --tblr-code-color: var(--tblr-gray-400);
        --tblr-code-bg: var(--tblr-gray-900);
    }
}

/* --------------------------------------------------------------------------
 * Sidebar: accent the active link
 * --------------------------------------------------------------------------
 * Tabler does ship an active state, but in the *vertical* navbar it is almost
 * invisible on purpose: a 6% white wash, white text and medium weight, with
 * `.nav-item.active::after { content: none }` explicitly killing the 2px accent bar the
 * horizontal navbar gets. The accent colour it would have used is `--tblr-primary` (blue).
 * So the colour below has to come from here - there is no vendor knob for it.
 *
 * The state itself is rendered server-side, not toggled on click: the blade marks the item whose
 * `$menuName` / `$linkName` matches the page being served, so the highlight survives the navigation
 * rather than flashing and dying. Nothing here needs JS.
 *
 * Scoped to `.navbar-vertical` so the top header navbar keeps the vendor's blue.
 *
 * The colour is tuned for reading comfort, not for contrast maxima. The sidebar sits on dark slate
 * (#1e293b), and a fully saturated warm hue at that lightness vibrates against it - Tabler's own
 * `--tblr-orange` / `--tblr-red` / `--tblr-pink` are all pitched for white surfaces and are tiring
 * here. Lightening and desaturating fixes it: these land around 7:1 on the sidebar, legible without
 * glare, and they stay quiet when several items are accented at once.
 *
 * To change the colour, edit the two tokens below together. They cannot be derived from one
 * another: `color-mix()` is unsupported on Chrome 109 (Windows 7), which is exactly the browser the
 * light-dark() block above exists for, so the wash has to be a literal rgba.
 *   soft teal  #5ec8b8 -> rgba(94, 200, 184, 0.12)
 *   soft rose  #eba0ac -> rgba(235, 160, 172, 0.12)
 *   lavender   #b8a6e9 -> rgba(184, 166, 233, 0.12)
 *
 * Soft teal is the chosen default. One thing to keep in mind if this palette is ever extended:
 * green reads as online/paid elsewhere in this panel and red as overdue/expired, so a teal accent
 * sits nearer the status vocabulary than rose or lavender would. It is distinct enough at this
 * lightness to work, but do not add a second green-family accent to the sidebar on top of it.
 */
.navbar-vertical {
    --isp-sidebar-active: #5ec8b8;
    --isp-sidebar-active-bg: rgba(94, 200, 184, 0.12);
}

/* Top-level item, plain or dropdown parent. The vendor resets the dropdown-toggle's background to
 * `0 0` at (0,7,0), so these mirror its selector shape exactly and win on source order - custom.css
 * is loaded after tabler.min.css. */
.navbar-vertical.navbar-expand-lg .navbar-nav .nav-item.active > .nav-link,
.navbar-vertical.navbar-expand-lg .navbar-nav .nav-item.active > .nav-link.dropdown-toggle {
    color: var(--isp-sidebar-active);
    background: var(--isp-sidebar-active-bg);
}

/* The accent bar, re-enabled as a leading edge rather than the horizontal underline the vendor
 * draws in the top navbar. `.nav-item.active` is already `position: relative` from the vendor.
 * One class more specific than the `content: none` rule that suppresses it. */
.navbar-vertical.navbar-expand-lg .navbar-collapse .navbar-nav > .nav-item.active::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    border: 0;
    background: var(--isp-sidebar-active);
}

/* Submenu entry - the actual page you are on. Same selector shape as the vendor's, which sets only
 * the wash. */
.navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item.active {
    color: var(--isp-sidebar-active);
    background: var(--isp-sidebar-active-bg);
}

/* Icons inherit the accent: the vendor already sets --tblr-nav-link-icon-color to currentColor on
 * an active link, but the submenu's <i> is a plain child of .dropdown-item, not a .nav-link-icon. */
.navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item.active i {
    color: inherit;
}