/* SteamShop panel chrome copied from BMS (E:\Project Management System
esources\cssms.css):
   the shared variables and the sidebar rail with its Collapse / Expand button at the foot.
   Class names keep their bms- prefix so later fixes in BMS can be copied straight across. */

:root {
    --bms-line: rgba(0, 0, 0, 0.08);
    --bms-hover: rgba(0, 0, 0, 0.03);
    --bms-muted: var(--gray-500);
    --bms-surface: #fff;
}

.dark {
    --bms-line: rgba(255, 255, 255, 0.1);
    --bms-hover: rgba(255, 255, 255, 0.04);
    --bms-muted: var(--gray-400);
    --bms-surface: var(--gray-900);
}

/* ---- Sidebar rail (owner, 2026-10-16) --------------------------------
   Folded on a wide screen, the sidebar is a rail as in ClickUp: each item's
   icon with its name under it, the spaces tree swapped for one "Spaces"
   button (sidebar-rail.blade.php), and the fold button at the foot
   (sidebar-toggle.blade.php) in place of the topbar's arrows. It slides
   between the two widths. */
.bms-rail-spaces {
    order: 1;
    display: grid;
    gap: 0.25rem;
}

.dark .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav > .fi-sidebar-nav-groups > .fi-sidebar-group:nth-child(2),
.dark .fi-sidebar:not(.fi-sidebar-open) .bms-rail-spaces,
.dark .bms-rail-foot {
    border-color: rgba(255, 255, 255, 0.08);
}

.bms-rail-mark {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
}

.bms-rail-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.5rem;
    border-radius: 0.5rem;
    color: var(--gray-700);
    font-size: 0.875rem;
    font-weight: 500;
}

.dark .bms-rail-item {
    color: var(--gray-200);
}

.bms-rail-item:hover {
    background: var(--bms-hover);
}

.bms-rail-item .fi-sidebar-item-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--gray-400);
    transition: rotate var(--bms-dur-2, 180ms);
}

.bms-rail-foot {
    padding: 0.5rem 1rem 0.75rem;
    border-top: 1px solid rgba(17, 24, 39, 0.08);
}

/* Collapse / Expand (owner, 2026-10-23: the bare chevron looked unfinished): a
   small chevron in a bordered square, a quieter label, blue on hover. */
.bms-rail-toggle {
    gap: 0.625rem;
    color: var(--gray-500);
    font-size: 0.8125rem;
}

.bms-rail-toggle:hover {
    background: none;
    color: var(--gray-800);
}

.bms-rail-item.bms-rail-toggle .fi-sidebar-item-icon {
    box-sizing: content-box;
    width: 1rem;
    height: 1rem;
    padding: 0.375rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    background: #fff;
    color: var(--gray-500);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
    /* The arrow flips at once: a turning square looked like a glitch. */
    transition: color 120ms, border-color 120ms, background 120ms;
}

.bms-rail-item.bms-rail-toggle:hover .fi-sidebar-item-icon {
    border-color: var(--primary-400);
    color: var(--primary-600);
    background: var(--primary-50);
}

.bms-rail-toggle:focus-visible {
    outline: none;
}

.bms-rail-toggle:focus-visible .fi-sidebar-item-icon {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

.dark .bms-rail-toggle {
    color: var(--gray-400);
}

.dark .bms-rail-toggle:hover {
    color: var(--gray-100);
}

.dark .bms-rail-item.bms-rail-toggle .fi-sidebar-item-icon {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--gray-400);
    box-shadow: none;
}

.dark .bms-rail-item.bms-rail-toggle:hover .fi-sidebar-item-icon {
    border-color: var(--primary-500);
    color: var(--primary-400);
    background: rgba(174, 232, 2, 0.1); /* SteamShop lime, was BMS blue */
}

@media (min-width: 1024px) {
    .fi-sidebar {
        transition: width 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
        overflow-x: hidden;
    }

    /* The topbar's arrows: the foot's button does it on a wide screen. */
    .fi-topbar-collapse-sidebar-btn-ctn,
    .fi-topbar-open-sidebar-btn,
    .fi-topbar-close-sidebar-btn,
    .fi-sidebar-open-collapse-sidebar-btn,
    .fi-sidebar-close-collapse-sidebar-btn {
        display: none !important;
    }

    .fi-sidebar:not(.fi-sidebar-open) .bms-rail-toggle .fi-sidebar-item-icon {
        rotate: 180deg;
    }

    /* The rail: icon over its name, centred, one line each. */
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        padding-inline: 0.375rem;
    }

    .fi-sidebar:not(.fi-sidebar-open) .bms-tree {
        display: none;
    }

    /* One rhythm: 4 px between items, every section (the menu, the spaces,
       Reports, Administration) 8 px apart with a thin line between. */
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        row-gap: 0;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav > .fi-sidebar-nav-groups > .fi-sidebar-group,
    .fi-sidebar:not(.fi-sidebar-open) .bms-rail-spaces {
        padding-block: 0.5rem;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav > .fi-sidebar-nav-groups > .fi-sidebar-group:nth-child(2),
    .fi-sidebar:not(.fi-sidebar-open) .bms-rail-spaces {
        border-top: 1px solid rgba(17, 24, 39, 0.08);
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-items {
        gap: 0.25rem;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn,
    .fi-sidebar:not(.fi-sidebar-open) .bms-rail-item {
        flex-direction: column;
        justify-content: center;
        gap: 0.2rem;
        padding: 0.45rem 0.125rem;
    }

    /* Names wrap onto a second line, never cut or touching the edges. */
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-label,
    .fi-sidebar:not(.fi-sidebar-open) .bms-rail-item > span:not(.bms-tree-mark) {
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        /* Narrower than the rail, so a long name breaks into two even lines
           instead of running to the edges (owner, 2026-10-23: "Task time logs"
           sat 4 px from them). Words are never split: "Management" just fits. */
        max-width: 4.5rem;
        padding-inline: 0.125rem;
        overflow: hidden;
        overflow-wrap: normal;
        text-wrap: balance;
        white-space: normal;
        text-align: center;
        font-size: 0.6875rem;
        line-height: 1.2;
        font-weight: 500;
    }

    .fi-sidebar:not(.fi-sidebar-open) .bms-rail-foot {
        padding-inline: 0.375rem;
    }
}

@media (max-width: 1023px) {
    /* A phone: the topbar's menu button opens and closes it. */
    .bms-rail-foot {
        display: none;
    }
}


/* SteamShop: one rhythm in the rail, whatever the menu's groups. Filament 5 spaces nav groups
   1.75rem apart; BMS's menu is mostly ungrouped so its rail never met that gap, but ours is in
   groups (Customers, Pricing), which left big uneven holes between them (owner, 2026-10-27).
   As BMS intends: 4 px between items, each section 8 px apart with a thin line between. */
@media (min-width: 1024px) {
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups {
        row-gap: 0;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav > .fi-sidebar-nav-groups > .fi-sidebar-group + .fi-sidebar-group {
        border-top: 1px solid rgba(17, 24, 39, 0.08);
    }

    .dark .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav > .fi-sidebar-nav-groups > .fi-sidebar-group + .fi-sidebar-group {
        border-top-color: rgba(255, 255, 255, 0.08);
    }
}

/* Every table: its buttons and its toolbar (search, filters, columns) share one row
   when there is room, instead of a row for the buttons over a row holding only a
   filter icon (owner, 2026-10-23: use the space, keep things easy to find). Tables
   with a heading or description keep Filament's layout; narrow screens wrap.
   (:has() cannot nest, so each test sits on the container itself.) */
.fi-ta-header-ctn:has(> .fi-ta-header):not(:has(.fi-ta-header-heading, .fi-ta-header-description)) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--gray-200);
}

.dark .fi-ta-header-ctn:has(> .fi-ta-header):not(:has(.fi-ta-header-heading, .fi-ta-header-description)) {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.fi-ta-header-ctn:has(> .fi-ta-header):not(:has(.fi-ta-header-heading, .fi-ta-header-description)) > * {
    flex: 1 1 100%;
    order: 3;
}

.fi-ta-header-ctn:has(> .fi-ta-header):not(:has(.fi-ta-header-heading, .fi-ta-header-description)) > .fi-ta-header-toolbar {
    flex: 0 1 auto;
    order: 2;
    margin-inline-start: 0;
    padding-inline-start: 0.75rem;
    border-bottom-width: 0;
}

.fi-ta-header-ctn:has(> .fi-ta-header):not(:has(.fi-ta-header-heading, .fi-ta-header-description)) > .fi-ta-header {
    flex: 0 0 auto;
    order: 1;
    margin-inline-start: auto;
    padding-inline-end: 0;
    border-bottom-width: 0;
}

/* In that shared row the toolbar sits after the buttons (owner: the filter on the
   right of "New payroll run"). Its first part holds the bulk buttons, hidden until
   rows are ticked: no height until then, and after the search, so it never leaves
   an empty line on a phone. */
.fi-ta-header-ctn:has(> .fi-ta-header):not(:has(.fi-ta-header-heading, .fi-ta-header-description)) > .fi-ta-header-toolbar {
    row-gap: 0.5rem;
}

.fi-ta-header-ctn:has(> .fi-ta-header):not(:has(.fi-ta-header-heading, .fi-ta-header-description)) > .fi-ta-header-toolbar > .fi-ta-actions:first-child {
    order: 2;
    min-height: 0;
}

/* SteamShop: the rail's items centred with equal room on both sides (owner, 2026-10-27: they stuck
   to the left border). Filament 5.11 pulls the menu 0.5rem left (a negative margin meant for the
   open sidebar) and, folded, shrinks it to max-content, so every item hugged the left edge. BMS on
   Filament 5.10 doesn't get the max-content rule. Folded, the menu now spans the rail's width. */
@media (min-width: 1024px) {
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups {
        margin-inline: 0;
        width: auto;
    }
}

/* ...and no scrollbar gutter in the rail: Filament keeps one (scrollbar-gutter: stable) for the
   open sidebar's long menu, which left 14 px on the right against 6 px on the left. */
@media (min-width: 1024px) {
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        scrollbar-gutter: auto;
    }
}

/* The rail keeps each item's count (held orders, pending upgrade requests) as a bubble on its icon, as in
   BMS (bms.css, owner 2026-10-16). SteamShop: the brand lime with near-black text, the brief's pairing. */
@media (min-width: 1024px) {
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn {
        position: relative;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-badge-ctn {
        display: block !important;
        position: absolute;
        top: 0.2rem;
        left: calc(50% + 0.35rem);
        pointer-events: none;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-badge-ctn .fi-badge {
        min-width: 1.1rem;
        padding: 0 0.3rem;
        font-size: 0.625rem;
        line-height: 1.1rem;
        border-radius: 999px;
        background: #aee802;
        color: #171717;
        --tw-ring-shadow: 0 0 0 2px #fbfbfc;
        box-shadow: var(--tw-ring-shadow);
    }

    .dark .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-badge-ctn .fi-badge {
        --tw-ring-shadow: 0 0 0 2px var(--gray-950);
    }
}