/* [CHANGE] Admin header: global search box and the sidebar collapse.
   Scoped to .admin-search / .sidebar-collapsed so nothing here can reach
   another screen's markup. */

.admin-search {
    position: relative;
    min-width: 260px;
    max-width: 460px;
    flex: 1 1 380px;
}

.admin-search .form-control {
    padding-right: 4.5rem;
}

.admin-search-kbd {
    left: auto;
    right: 0;
    pointer-events: none;
    opacity: .6;
}

.admin-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1050;
    /* Long result sets scroll inside the panel rather than growing the page. */
    max-height: 60vh;
    overflow-y: auto;
    padding: .25rem 0;
    margin: 0;
}

.admin-search-group {
    padding: .5rem .875rem .25rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .55;
}

.admin-search-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: .4rem .875rem;
    text-decoration: none;
    color: inherit;
}

.admin-search-item:hover,
.admin-search-item:focus,
.admin-search-item.is-active {
    background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, .04));
}

.admin-search-item.is-active {
    box-shadow: inset 3px 0 0 var(--tblr-primary, #206bc4);
}

.admin-search-error {
    color: var(--tblr-danger, #d63939);
    opacity: 1;
}

/* [2026-09-28] Hub top bar variant: same component on the dark top bar. */
.hub-search {
    min-width: 220px;
    max-width: 420px;
    flex: 1 1 320px;
}

.hub-search .form-control {
    background: rgba(255, 255, 255, .95);
    color: var(--tblr-body-color, #1d273b);
}

.hub-search {
    max-width: 360px;
}

/* The top bar is `text-white`; without this the results inherit white text
   on the white results card and read as blank rows. */
.hub-search .admin-search-results,
.hub-search .admin-search-results .admin-search-item {
    background-color: #fff;
    color: #1d273b;
}

.hub-search .admin-search-results .admin-search-item.is-active,
.hub-search .admin-search-results .admin-search-item:hover {
    background-color: #f1f5f9;
}

[data-bs-theme="dark"] .hub-search .admin-search-results,
[data-bs-theme="dark"] .hub-search .admin-search-results .admin-search-item {
    background-color: #1a2234;
    color: #f8fafc;
}

[data-bs-theme="dark"] .hub-search .admin-search-results .admin-search-item.is-active,
[data-bs-theme="dark"] .hub-search .admin-search-results .admin-search-item:hover {
    background-color: #243049;
}

.admin-search-title {
    font-size: .8125rem;
    font-weight: 500;
    /* An order id or a long product title must not widen the panel. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-search-subtitle {
    font-size: .6875rem;
    opacity: .6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-search-empty {
    padding: .75rem .875rem;
    font-size: .8125rem;
    opacity: .6;
}

/* --- Sidebar collapse ------------------------------------------------ */

/* [FIX] `position: absolute` inside the sidebar put the button in the right
   place and then had it CLIPPED away: the aside carries `overflow: auto`, so
   the half of the button straddling the edge simply was not painted, and the
   whole control was unclickable. Fixed positioning takes it out of that clip.

   --admin-sidebar-width tracks Tabler's sidebar (256px) and drops to 0 when
   the sidebar is collapsed, so the button rides the edge either way. */
:root {
    /* The sidebar is widened to 16rem (256px) by assets/css/custom.css. */
    --admin-sidebar-width: 16rem;
}

body.sidebar-collapsed {
    --admin-sidebar-width: 0px;
}

#sidebar-collapse-toggle {
    position: fixed;
    top: 1.25rem;
    /* Clamped: with the sidebar collapsed the raw calc is -12px, which puts
       half the button off the left edge and leaves it half-clickable. */
    left: max(.25rem, calc(var(--admin-sidebar-width) - .75rem));
    transition: left .15s ease;
    z-index: 1040;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

#sidebar-collapse-toggle .ti {
    transition: transform .15s ease;
}

body.sidebar-collapsed #sidebar-collapse-toggle .ti {
    transform: rotate(180deg);
}

/* Only on desktop: the sidebar is already an off-canvas drawer on mobile,
   and collapsing a drawer that is not on screen does nothing useful. */
@media (min-width: 992px) {
    body.sidebar-collapsed .navbar-vertical.navbar-expand-lg {
        width: 0;
        overflow: hidden;
    }

    body.sidebar-collapsed .navbar-vertical.navbar-expand-lg .navbar-brand,
    body.sidebar-collapsed .navbar-vertical.navbar-expand-lg #sidebar-menu {
        opacity: 0;
        pointer-events: none;
    }

    /* [2026-09-28 FIX] The content area did not expand when the sidebar
       collapsed. Tabler pins it with
       `.navbar-expand-lg.navbar-vertical ~ .page-wrapper { margin-left: 15rem }`
       (specificity 0,3,0), which beat the old `body.sidebar-collapsed
       .page-wrapper` (0,2,1) — the sidebar vanished and a 15rem blank strip
       stayed where it had been. This selector matches Tabler's and adds the
       body class, so it wins on specificity without !important. */
    body.sidebar-collapsed .navbar-expand-lg.navbar-vertical ~ .page-wrapper,
    body.sidebar-collapsed .navbar-expand-lg.navbar-vertical ~ .navbar {
        margin-left: 0;
    }

    body.sidebar-collapsed .navbar-expand-lg.navbar-vertical.navbar-right ~ .page-wrapper,
    body.sidebar-collapsed .navbar-expand-lg.navbar-vertical.navbar-right ~ .navbar {
        margin-right: 0;
    }

    [dir="rtl"] body.sidebar-collapsed .navbar-expand-lg.navbar-vertical ~ .page-wrapper {
        margin-right: 0;
    }

    .navbar-expand-lg.navbar-vertical,
    .navbar-expand-lg.navbar-vertical ~ .page-wrapper {
        transition: width .15s ease, margin .15s ease;
    }

    body.sidebar-collapsed .page-wrapper {
        margin-inline-start: 0;
    }
}

/* [2026-09-28] Task-grouped sidebar: pin buttons and the Pinned block. */
.amz-nav-row { display: flex; align-items: center; }
.amz-nav-row .dropdown-item { flex: 1 1 auto; min-width: 0; }
.amz-nav-pin {
    flex: 0 0 auto; border: 0; background: transparent; color: inherit; opacity: 0;
    padding: .25rem .5rem; line-height: 1; cursor: pointer; transition: opacity .15s;
}
.amz-nav-row:hover .amz-nav-pin, .amz-nav-pin:focus-visible, .amz-nav-pin.is-pinned { opacity: .8; }
.amz-nav-pin.is-pinned { color: #facc15; }
.amz-nav-pin:focus-visible { outline: 2px solid #818cf8; outline-offset: -2px; opacity: 1; }
@media (hover: none) { .amz-nav-pin { opacity: .55; } }
.amz-nav-pinned { padding: .25rem .75rem .5rem; border-bottom: 1px solid rgba(255, 255, 255, .08); margin-bottom: .25rem; }
.amz-nav-pinned-title { display: block; font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .6; padding: .25rem 0; }
.amz-nav-pinned-link { display: block; padding: .3rem .5rem; border-radius: 6px; color: inherit; text-decoration: none; font-size: .875rem; }
.amz-nav-pinned-link:hover, .amz-nav-pinned-link.active { background: rgba(255, 255, 255, .08); color: #fff; }
body.sidebar-collapsed .amz-nav-pinned { display: none; }
.amz-page-tabs .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.amz-page-tabs .nav-link { white-space: nowrap; }