/*
 * Resize affordance for the Filament main sidebar.
 * Pairs with resources/js/filament/sidebar-resizer.js.
 *
 * Two parts, both pinned to the trailing (inline-end) edge of the sidebar:
 *  - a thin, full-height divider line that is purely visual (never interactive);
 *  - a small, always-visible grip — the ONLY place that resizes — centred
 *    vertically on the line.
 * Only shown on desktop, where the sidebar sits beside the content.
 */

/* Visual divider line — not interactive. */
.fi-sidebar-resize-line {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    /* Above the nav items (z-auto) but below the collapsed-group flyout
       dropdown (.fi-dropdown-panel, z-index: 20), so an open group dropdown
       is never crossed by the line. */
    z-index: 19;
    width: 1px;
    background-color: oklch(0.141 0.005 285.823 / 0.08);
    pointer-events: none;
}

.dark .fi-sidebar-resize-line {
    background-color: oklch(1 0 0 / 0.1);
}

/* The only draggable spot: an always-visible grip, vertically centred. */
.fi-sidebar-resize-handle {
    position: absolute;
    top: 50%;
    inset-inline-end: -6px;
    transform: translateY(-50%);
    /* Below the collapsed-group flyout dropdown (.fi-dropdown-panel, z-index: 20)
       so the grip never pokes through an open dropdown. */
    z-index: 19;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 2.5rem;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
}

.fi-sidebar-resize-handle::after {
    content: '';
    width: 4px;
    height: 100%;
    border-radius: 9999px;
    background-color: oklch(0.141 0.005 285.823 / 0.4);
    transition: background-color 150ms ease;
}

.dark .fi-sidebar-resize-handle::after {
    background-color: oklch(1 0 0 / 0.45);
}

.fi-sidebar-resize-handle:hover::after,
body.fi-sidebar-resizing .fi-sidebar-resize-handle::after {
    background-color: var(--primary-500);
}

/* The affordance only makes sense on desktop, where the sidebar sits beside content. */
@media (max-width: 1023.98px) {
    .fi-sidebar-resize-handle,
    .fi-sidebar-resize-line {
        display: none;
    }
}

/* Kill transitions while actively dragging so the sidebar tracks the pointer. */
body.fi-sidebar-resizing .fi-sidebar,
body.fi-sidebar-resizing .fi-main-ctn {
    transition: none !important;
}

/* Animate the double-click snap (fully collapse / fully expand). */
body.fi-sidebar-toggling .fi-sidebar {
    transition: width 200ms ease !important;
}

/*
 * Drag fully owns collapse/expand on desktop, so Filament's collapse/expand
 * toggle button is redundant — hide it (mobile drawer hamburger is untouched).
 */
@media (min-width: 1024px) {
    .fi-topbar-collapse-sidebar-btn-ctn,
    .fi-sidebar-open-collapse-sidebar-btn,
    .fi-sidebar-close-collapse-sidebar-btn {
        display: none !important;
    }
}

/*
 * Seamless collapse: pin the collapsed icon rail to the same width the resizer
 * collapses at, so there's no jump when crossing in or out of the rail.
 * Keep this in sync with COLLAPSE_AT in sidebar-resizer.js.
 */
@media (min-width: 1024px) {
    .fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) {
        width: 104px !important;
    }
}

/*
 * Width-driven label fade.
 *
 * As the sidebar narrows toward the collapse point the whole label fades out
 * (opacity), rather than fading only its trailing edge. The opacity is driven by
 * the JS via `--resizer-label-opacity` (1 when the text fits, → 0 at collapse).
 * `!important` overrides Filament's own enter/leave opacity transition so the
 * fade tracks the width instead of a fixed-duration animation. Scoped with
 * `.fi-sidebar` to outrank Filament's single-class rules.
 */
.fi-sidebar .fi-sidebar-item-label {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    opacity: var(--resizer-label-opacity, 1) !important;
}

/* Keep the icon full-size as the sidebar narrows — never let the label squish it. */
.fi-sidebar .fi-sidebar-item-icon {
    flex-shrink: 0;
}