.card-header[data-bs-toggle="collapse"] {
    cursor: pointer;
    user-select: none;
}

:root[data-topbar-color=brand] {
    --abstack-topbar-bg: #0B1F33;
    --abstack-topbar-item-color: rgba(255, 255, 255, 0.9);
    --abstack-topbar-item-hover-color: #ffffff;
    --abstack-topbar-search-bg: rgba(255, 255, 255, 0.1);
    --abstack-topbar-user-bg: rgba(255, 255, 255, 0.1);
    --abstack-topbar-user-border: rgba(255, 255, 255, 0.15);
}

/* Lucide icon sizing helpers */
.icon-xs { width: 12px; height: 12px; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 28px; height: 28px; }
.icon-xl { width: 36px; height: 36px; }

/* Currency input group styling for money form widgets */
.currency-input-group {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}

.currency-input-group .input-group-text {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-right: none;
    color: #495057;
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    border-radius: 0.375rem 0 0 0.375rem;
}

.currency-input-group input {
    border-left: none;
    border-radius: 0 0.375rem 0.375rem 0;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.currency-input-group input:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    border-color: #86b7fe;
}

/* Ensure proper spacing in table cells */
td .currency-input-group {
    margin: 0;
}

/* ---- Global Search ---- */
#search-results {
    max-height: 420px;
    overflow-y: auto;
}

.search-group {
    padding: 0.25rem 0;
}

.search-group + .search-group {
    border-top: 1px solid var(--bs-border-color);
}

.search-group-label {
    padding: 0.5rem 1rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color, #6c757d);
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.1s;
    cursor: pointer;
}

.search-result-item:hover,
.search-result-item.active {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    color: inherit;
    text-decoration: none;
}

.search-result-icon {
    font-size: 1.1rem;
    width: 1.25rem;
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
    flex-shrink: 0;
}

.search-result-content {
    min-width: 0;
}

.search-result-title {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-subtitle {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-loading,
.search-no-results {
    padding: 1rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #6c757d);
    display: flex;
    align-items: center;
}

/* ── PO multi-select pill wrapping fix ──────────────────────────────────────
   AbStack's vendors.css sets display:inline-block + overflow:hidden +
   white-space:nowrap on .select2-selection__rendered, which clips pills
   to a single line with "...". These rules load after AbStack via
   containerCssClass hook, guaranteeing they win the cascade. */
.po-multi-select .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 3px !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: unset !important;
    width: 100% !important;
    padding: 2px 4px !important;
    height: auto !important;
}

/* ── Sidenav scrolling ──────────────────────────────────────────────────────
   The menu is wrapped in <div data-simplebar>, but SimpleBar's JS is not
   installed (it is in neither importmap.php nor assets/vendor/), so the
   theme's `.sidenav-menu [data-simplebar] { height: 100% }` produces a fixed
   -height box with overflow:visible — anything past the fold painted outside
   the sidebar and could not be reached. Loads after abstack/app.css, so the
   equal-specificity selector wins. */
.sidenav-menu [data-simplebar] {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 128, 128, 0.45) transparent;
}

.sidenav-menu [data-simplebar]::-webkit-scrollbar {
    width: 6px;
}

.sidenav-menu [data-simplebar]::-webkit-scrollbar-track {
    background: transparent;
}

.sidenav-menu [data-simplebar]::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.45);
    border-radius: 3px;
}

.sidenav-menu [data-simplebar]::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.7);
}

/* ── Sidenav section accordion ──────────────────────────────────────────────
   sidenav_collapse_controller.js marks the items of a collapsed section with
   this class instead of an inline style, so the rules below can suspend the
   accordion in the sizes where it makes no sense. */
.side-nav .side-nav-section-hidden {
    display: none;
}

/* `condensed` hides .side-nav-title outright (theme, `display: none !important`)
   and never expands, leaving no affordance to open a collapsed section — so every
   item has to be present there. Only reachable from a stored config now that the
   toggle uses `sm-hover`, but one click still has to get out of it. */
html[data-sidenav-size=condensed]:not([data-layout=topnav]) .side-nav .side-nav-section-hidden {
    display: block;
}

/* ── Collapsed sidenav rail ─────────────────────────────────────────────────
   `sm-hover` narrows the sidenav to ~70px while unhovered. Showing the menu at
   that width means 40+ unlabelled icons and a scrollbar, so hide it and present
   a grip instead: hovering the rail expands the sidenav and brings back the full
   grouped navigation, section titles and accordion included.

   Keyboard users cannot hover, so the menu is out of the tab order while
   collapsed — the topbar .sidenav-toggle-button remains the way back. */
.sidenav-rail-handle {
    display: none;
}

html[data-sidenav-size=sm-hover]:not([data-layout=topnav]) .sidenav-menu:not(:hover) .side-nav {
    display: none;
}

html[data-sidenav-size=sm-hover]:not([data-layout=topnav]) .sidenav-menu:not(:hover) .sidenav-rail-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    height: 100%;
    color: var(--abstack-menu-item-color);
    opacity: 0.75;
    transition: opacity 0.25s ease-in-out;
    user-select: none;
}

html[data-sidenav-size=sm-hover]:not([data-layout=topnav]) .sidenav-menu:not(:hover) .sidenav-rail-handle:hover {
    opacity: 1;
}

.sidenav-rail-handle-grip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid currentColor;
}

.sidenav-rail-handle-grip svg {
    width: 16px;
    height: 16px;
}

/* Rotated so the label reads bottom-to-top alongside the grip in a 70px rail. */
.sidenav-rail-handle-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ── Phones ─────────────────────────────────────────────────────────────────── */

/* X-21: the theme's phone rule gives topbar menus width:100% and left/right 10px, so
   the width wins over `right` and the menu ended 10px past the screen edge; freeing the
   width alone lets Popper's transform end-align it under the avatar, 10px past the left
   edge instead. On phones, place it under the (sticky, so positioned) topbar, 10px in
   from each side, and override Popper's inline position. */
@media (max-width: 575.98px) {
    .app-topbar .topbar-item,
    .app-topbar .topbar-item .dropdown {
        position: static;
    }

    .app-topbar .topbar-item .dropdown .dropdown-menu {
        width: auto;
        top: 100% !important;
        bottom: auto !important;
        transform: none !important;
        margin-top: 0 !important;
    }
}

/* X-23: iOS Safari zooms the page whenever a field under 16px is focused, and most of
   ours are 13.6–14px (.form-control-sm, theme sizes, some inline styles), so every tap
   into a field zoomed. !important is deliberate: it has to beat all of those. */
@media (max-width: 767.98px) {
    input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=image]),
    select,
    textarea,
    .select2-container .select2-selection,
    .select2-search__field {
        font-size: 16px !important;
    }
}

/* Disabled soft buttons. AbStack sets every .btn-soft-* disabled colour AND
   background to the same solid theme colour, so a disabled soft button renders as
   a blank coloured block — its label is painted in its own background colour. Keep
   the soft look instead; .btn:disabled's opacity marks it as unavailable.
   Doubled class so this holds whichever stylesheet is injected last. */
.btn.btn-soft-primary   { --abstack-btn-disabled-bg: var(--abstack-primary-bg-subtle); }
.btn.btn-soft-secondary { --abstack-btn-disabled-bg: var(--abstack-secondary-bg-subtle); }
.btn.btn-soft-success   { --abstack-btn-disabled-bg: var(--abstack-success-bg-subtle); }
.btn.btn-soft-info      { --abstack-btn-disabled-bg: var(--abstack-info-bg-subtle); }
.btn.btn-soft-warning   { --abstack-btn-disabled-bg: var(--abstack-warning-bg-subtle); }
.btn.btn-soft-danger    { --abstack-btn-disabled-bg: var(--abstack-danger-bg-subtle); }
.btn.btn-soft-light     { --abstack-btn-disabled-bg: var(--abstack-light-bg-subtle); }
.btn.btn-soft-dark      { --abstack-btn-disabled-bg: var(--abstack-dark-bg-subtle); }
.btn[class*="btn-soft-"] { --abstack-btn-disabled-border-color: transparent; }