/*
 * erp-sidebar.css — Upwork-style collapsed rail for keyed nav groups.
 *
 * EVERY rule is scoped under .fi-sidebar-group[data-erp-nav-icons] (rail, Phase 1)
 * or [data-erp-nav-key] (limit + lock, Phase 2), which the server renders only when
 * the sidebar_icons / sidebar_limit_lock gate is on for the request
 * (App\Support\Navigation\ErpNavGroup). With both gates off this file matches
 * nothing. Plain CSS on Filament's own fi-* classes: the panel theme ships no
 * arbitrary Tailwind utilities.
 *
 * docs/sidebar-navigation/SCOPE.md §3.12-3.13, 07-prebuild-amendments.md, 09-phase2-build-plan.md
 */

/* ── Rail flyout panel ──────────────────────────────────────────────────── */

/* Vendor caps dropdown panels at 14rem (!important) and sets no max-height, so
   long groups ran off the bottom of the viewport. */
.fi-main-sidebar .fi-sidebar-group[data-erp-nav-icons] > .fi-dropdown > .fi-dropdown-panel {
    width: max-content;
    min-width: 14rem;
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* The 14rem cap is `!important` INSIDE one of Filament's cascade layers. For
   !important declarations layer order is reversed and unlayered author styles rank
   LAST, so an unlayered !important here loses however specific it is (measured:
   computed max-width stayed 224px). Declaring just this one rule in the existing
   `base` layer — earlier than components/utilities — is what wins. Everything else
   in this file stays unlayered, where normal declarations beat the vendor's. */
@layer base {
    .fi-main-sidebar .fi-sidebar-group[data-erp-nav-icons] > .fi-dropdown > .fi-dropdown-panel {
        max-width: 20rem !important;
    }
}

/* Upwork's flyout rows carry no icons; the group header stays. */
.fi-main-sidebar .fi-sidebar-group[data-erp-nav-icons] > .fi-dropdown .fi-dropdown-list-item > .fi-icon {
    display: none;
}

/* Open trigger keeps a neutral wash while its flyout is showing (Upwork greys the
   open row). */
.fi-main-sidebar .fi-sidebar-group[data-erp-nav-icons] .fi-sidebar-group-dropdown-trigger-btn[aria-expanded="true"] {
    background-color: var(--gray-100);
}
.dark .fi-main-sidebar .fi-sidebar-group[data-erp-nav-icons] .fi-sidebar-group-dropdown-trigger-btn[aria-expanded="true"] {
    background-color: rgb(255 255 255 / 0.05);
}

/* While a flyout is open, lift the sidebar above the topbar (z-30): the sidebar
   is its own z-20 stacking context, so the panel cannot escape it by z-index. The
   :has() subject is the sidebar, never body, so unrelated dropdowns do not
   invalidate page-wide style. */
@media (min-width: 1024px) {
    .fi-main-sidebar:has(.fi-sidebar-group[data-erp-nav-icons] .fi-sidebar-group-dropdown-trigger-btn[aria-expanded="true"]) {
        z-index: 35;
    }
}

/* Group spacing. Filament separates every nav group by `gap-y-7` (~1.4rem at normal
   density). With most groups collapsed — the normal state under the max-3 rule — that
   reads as a column of widely spaced single rows, in the icon rail and in the drawer
   alike. So: a tight base gap for every group, and the breathing room given back as
   margin BELOW groups that are actually OPEN (their items need separating from the next
   group). The space ABOVE a group header is the container gap alone, so it is identical
   whether that group is collapsed or expanded — only the gap after an open group's items
   grows. Scoped by :has() so it only applies where the sidebar has keyed groups. */
.fi-main-sidebar:has(.fi-sidebar-group[data-erp-nav-icons]) .fi-sidebar-nav-groups {
    row-gap: calc(var(--spacing) * 2);
}

.fi-main-sidebar.fi-sidebar-open .fi-sidebar-group[data-erp-nav-icons]:not(.fi-collapsed) {
    margin-block-end: calc(var(--spacing) * 3);
}

/* ── ERP theme parity (mirrors AppServiceProvider's nav tint) ───────────────
   Today the active page's rail icon gets the theme-tint background. With group
   icons the rail shows group triggers instead, so carry the same tint onto the
   trigger of the group holding the active page, and onto the active flyout row. */
html[data-erp-theme]:not(.dark) .fi-main-sidebar .fi-sidebar-group.fi-active[data-erp-nav-icons] .fi-sidebar-group-dropdown-trigger-btn {
    background-color: hsla(from var(--primary-500) h s calc(l + 8) / 20%);
}
html[data-erp-theme]:not(.dark) .fi-main-sidebar .fi-sidebar-group.fi-active[data-erp-nav-icons] .fi-sidebar-group-dropdown-trigger-btn .fi-icon {
    color: hsl(from var(--primary-500) h calc(s - 20) 20) !important;
}
html[data-erp-theme].dark .fi-main-sidebar .fi-sidebar-group.fi-active[data-erp-nav-icons] .fi-sidebar-group-dropdown-trigger-btn {
    background-color: hsla(from var(--primary-500) h s calc(l - 8) / 14%);
}
html[data-erp-theme].dark .fi-main-sidebar .fi-sidebar-group.fi-active[data-erp-nav-icons] .fi-sidebar-group-dropdown-trigger-btn .fi-icon {
    color: hsl(from var(--primary-500) h s 88) !important;
}
/* Hover de-themes, as for items; the open state wins over the active tint. */
html[data-erp-theme]:not(.dark) .fi-main-sidebar .fi-sidebar-group[data-erp-nav-icons] .fi-sidebar-group-dropdown-trigger-btn:hover,
html[data-erp-theme]:not(.dark) .fi-main-sidebar .fi-sidebar-group[data-erp-nav-icons] .fi-sidebar-group-dropdown-trigger-btn[aria-expanded="true"] {
    background-color: rgba(5, 5, 6, 0.06);
}
html[data-erp-theme].dark .fi-main-sidebar .fi-sidebar-group[data-erp-nav-icons] .fi-sidebar-group-dropdown-trigger-btn:hover,
html[data-erp-theme].dark .fi-main-sidebar .fi-sidebar-group[data-erp-nav-icons] .fi-sidebar-group-dropdown-trigger-btn[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, 0.08);
}
html[data-erp-theme]:not(.dark) .fi-main-sidebar .fi-sidebar-group[data-erp-nav-icons] > .fi-dropdown .fi-dropdown-list-item[aria-current="page"] {
    background-color: hsla(from var(--primary-500) h s calc(l + 8) / 20%);
}
html[data-erp-theme]:not(.dark) .fi-main-sidebar .fi-sidebar-group[data-erp-nav-icons] > .fi-dropdown .fi-dropdown-list-item[aria-current="page"] .fi-dropdown-list-item-label {
    color: hsl(from var(--primary-500) h calc(s - 20) 20) !important;
}
html[data-erp-theme].dark .fi-main-sidebar .fi-sidebar-group[data-erp-nav-icons] > .fi-dropdown .fi-dropdown-list-item[aria-current="page"] {
    background-color: hsla(from var(--primary-500) h s calc(l - 8) / 14%);
}
html[data-erp-theme].dark .fi-main-sidebar .fi-sidebar-group[data-erp-nav-icons] > .fi-dropdown .fi-dropdown-list-item[aria-current="page"] .fi-dropdown-list-item-label {
    color: hsl(from var(--primary-500) h s 88) !important;
}

/* ── Transitions ────────────────────────────────────────────────────────────
   With a group icon, the inline item list is x-show'n off whenever the sidebar is
   not open. Collapsing to the rail would otherwise run a 200ms x-collapse on every
   open group, leaving a shrinking column of tree-line dots under each trigger. */
.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group[data-erp-nav-icons] > .fi-sidebar-group-items {
    transition: none !important;
}

/* Phones (off-canvas drawer): every drawer open/close now toggles each open
   group's list. Alpine transitions that the iOS standalone webview throttles can
   wedge mid-way, so drop them for keyed groups; erp-sidebar.js repairs any that
   still stick. */
@media (max-width: 1023.98px) {
    .fi-main-sidebar .fi-sidebar-group[data-erp-nav-icons] > .fi-sidebar-group-items {
        transition: none !important;
    }
    .fi-main-sidebar .fi-sidebar-group[data-erp-nav-icons] > .fi-sidebar-group-btn {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ══ Phase 2: expanded-sidebar group limit + lock ═══════════════════════════
   The lock button, data-erp-nav-locked and data-erp-nav-silent exist
   only in "managed" documents (sidebar_limit_lock gate on + more than MAX keyed
   groups); erp-sidebar.js mounts and removes them. 09-phase2-build-plan.md. */

/* Lock beside the group name: muted until the header is hovered or focused. */
.fi-main-sidebar .fi-sidebar-group[data-erp-nav-key] .erp-nav-lock-btn {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.125rem;
    border: 0;
    border-radius: 0.375rem;
    background: none;
    color: var(--gray-500);
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 75ms, color 75ms;
}
.dark .fi-main-sidebar .fi-sidebar-group[data-erp-nav-key] .erp-nav-lock-btn {
    color: var(--gray-400);
}
/* Larger hit area without changing layout (touch). */
.fi-main-sidebar .fi-sidebar-group[data-erp-nav-key] .erp-nav-lock-btn::before {
    content: "";
    position: absolute;
    inset: -0.5rem -0.25rem;
}
.fi-main-sidebar .fi-sidebar-group[data-erp-nav-key] .erp-nav-lock-glyph {
    display: inline-flex;
}
.fi-main-sidebar .fi-sidebar-group[data-erp-nav-key] .erp-nav-lock-glyph[hidden] {
    display: none;
}
.fi-main-sidebar .fi-sidebar-group[data-erp-nav-key] > .fi-sidebar-group-btn:hover .erp-nav-lock-btn,
.fi-main-sidebar .fi-sidebar-group[data-erp-nav-key] > .fi-sidebar-group-btn:focus-within .erp-nav-lock-btn {
    opacity: 1;
}
.fi-main-sidebar .fi-sidebar-group[data-erp-nav-key] .erp-nav-lock-btn:focus-visible {
    opacity: 1;
    outline: 2px solid var(--primary-500);
    outline-offset: 1px;
}
@media (hover: none) {
    .fi-main-sidebar .fi-sidebar-group[data-erp-nav-key] .erp-nav-lock-btn {
        opacity: 0.7;
    }
}

/* Locked: full contrast, theme colour; the header is no longer a toggle. */
.fi-main-sidebar .fi-sidebar-group[data-erp-nav-locked] .erp-nav-lock-btn {
    opacity: 1;
    color: var(--primary-600);
}
.dark .fi-main-sidebar .fi-sidebar-group[data-erp-nav-locked] .erp-nav-lock-btn {
    color: var(--primary-400);
}
.fi-main-sidebar .fi-sidebar-group[data-erp-nav-locked] > .fi-sidebar-group-btn {
    cursor: default;
}
.fi-main-sidebar .fi-sidebar-group[data-erp-nav-locked] > .fi-sidebar-group-btn .fi-sidebar-group-collapse-btn {
    opacity: 0.4;
    cursor: default;
}

/* Layout while a lock is mounted: the lock follows the name, the chevron stays at
   the far end, and a long name wraps to two lines rather than being cut off. */
.fi-main-sidebar .fi-sidebar-group[data-erp-nav-key] > .fi-sidebar-group-btn:has(> .erp-nav-lock-btn) > .fi-sidebar-group-label {
    flex: 0 1 auto;
    min-width: 0;
}
.fi-main-sidebar .fi-sidebar-group[data-erp-nav-key] > .fi-sidebar-group-btn:has(> .erp-nav-lock-btn) > .fi-sidebar-group-collapse-btn {
    margin-inline-start: auto;
}

/* Re-projection after another tab changed the state: no animation. */
.fi-main-sidebar[data-erp-nav-silent] .fi-sidebar-group[data-erp-nav-key] > .fi-sidebar-group-items {
    transition: none !important;
}

/* ERP theme parity for the active-but-collapsed group header (mirrors
   AppServiceProvider's .fi-active.fi-collapsed tint, which recolours only the
   label and chevron): also the group icon and the lock. */
html[data-erp-theme]:not(.dark) .fi-main-sidebar .fi-sidebar-group[data-erp-nav-key].fi-active.fi-collapsed > .fi-sidebar-group-btn > .fi-icon,
html[data-erp-theme]:not(.dark) .fi-main-sidebar .fi-sidebar-group[data-erp-nav-key].fi-active.fi-collapsed > .fi-sidebar-group-btn .erp-nav-lock-btn {
    color: hsl(from var(--primary-500) h calc(s - 20) 20) !important;
}
html[data-erp-theme].dark .fi-main-sidebar .fi-sidebar-group[data-erp-nav-key].fi-active.fi-collapsed > .fi-sidebar-group-btn > .fi-icon,
html[data-erp-theme].dark .fi-main-sidebar .fi-sidebar-group[data-erp-nav-key].fi-active.fi-collapsed > .fi-sidebar-group-btn .erp-nav-lock-btn {
    color: hsl(from var(--primary-500) h s 88) !important;
}