/*
 * SADS Custom Sidebar — GitHub / Linear / Shadcn Admin style
 * Drives the collapsible sidebar width transition on desktop.
 * Icon/label visibility is handled by Filament's built-in
 * $store.sidebar (via sidebarCollapsibleOnDesktop).
 */

/* ================================================================
   1. DESKTOP: Sidebar width + transition
================================================================ */
@media (min-width: 1024px) {

    /* Sidebar expanded width */
    .fi-sidebar.sads-sidebar {
        width: 16rem;
        transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* Sidebar collapsed (icon-only rail = 5rem / 80px) */
    .fi-sidebar.sads-sidebar:not(.fi-sidebar-open) {
        width: 5rem;
    }

    /* Main content area follows sidebar width smoothly */
    .fi-main-ctn {
        transition: margin-inline-start 280ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Hide Filament's default topbar collapse buttons — we use our own */
    .fi-topbar-close-collapse-sidebar-btn,
    .fi-topbar-open-collapse-sidebar-btn {
        display: none !important;
    }

    /* ── Collapsed: nav padding collapses to center the icons ── */
    .fi-sidebar.sads-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        padding-inline: 0.5rem !important;
        padding-block: 1rem !important;
    }

    .fi-sidebar.sads-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups {
        margin-inline: 0 !important;
    }

    /* ── Collapsed: each nav item link becomes a centered icon pill ── */
    .fi-sidebar.sads-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn {
        justify-content: center !important;
        padding: 0.625rem !important;
        width: 2.75rem !important;
        height: 2.75rem !important;
        margin-inline: auto !important;
        border-radius: 0.625rem !important;
        gap: 0 !important;
    }

    /* ── Collapsed: icon inside the button — larger, centered ── */
    .fi-sidebar.sads-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn > .fi-icon {
        width: 1.35rem !important;
        height: 1.35rem !important;
    }

    /* ── Collapsed: active item pill highlight ── */
    .fi-sidebar.sads-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
        background-color: #eff6ff !important;
    }

    :where(.dark) .fi-sidebar.sads-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
        background-color: rgba(255, 255, 255, 0.08) !important;
    }

    /* ── Collapsed: hover pill ── */
    .fi-sidebar.sads-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover {
        background-color: #f1f5f9 !important;
    }

    :where(.dark) .fi-sidebar.sads-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover {
        background-color: rgba(255, 255, 255, 0.07) !important;
    }

    /* ── Collapsed: group label hidden (dots between groups) ── */
    .fi-sidebar.sads-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-btn {
        display: none !important;
    }

    /* ── Collapsed: group dropdown trigger stays visible & centered ── */
    .fi-sidebar.sads-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-dropdown-trigger-btn {
        justify-content: center !important;
        padding: 0.625rem !important;
        width: 2.75rem !important;
        height: 2.75rem !important;
        margin-inline: auto !important;
        border-radius: 0.625rem !important;
    }

    /* ── Collapsed: separator dots between nav groups ── */
    .fi-sidebar.sads-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups {
        gap: 1rem !important;
    }

    /* ── Expanded: restore full nav padding ── */
    .fi-sidebar.sads-sidebar.fi-sidebar-open .fi-sidebar-nav {
        padding-inline: 1.5rem !important;
        padding-block: 2rem !important;
    }

    .fi-sidebar.sads-sidebar.fi-sidebar-open .fi-sidebar-nav-groups {
        margin-inline: -0.5rem !important;
    }

    /* ── Expanded: item buttons full width ── */
    .fi-sidebar.sads-sidebar.fi-sidebar-open .fi-sidebar-item-btn {
        width: auto !important;
        height: auto !important;
        margin-inline: 0 !important;
        justify-content: flex-start !important;
        padding: 0.5rem 0.5rem !important;
        gap: 0.75rem !important;
    }

    /* ── Expanded: icon size back to default ── */
    .fi-sidebar.sads-sidebar.fi-sidebar-open .fi-sidebar-item-btn > .fi-icon {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
}

/* ================================================================
   2. Sidebar base — all breakpoints
================================================================ */
.fi-sidebar.sads-sidebar {
    background-color: #ffffff;
    border-right: 1px solid #e2e8f0;
}

:where(.dark) .fi-sidebar.sads-sidebar {
    background-color: #0f172a;
    border-right-color: #1e293b;
}

/* ================================================================
   3. Sidebar header row (logo + top toggle button)
================================================================ */
.sads-sidebar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 1rem !important;
    height: 4rem !important;
    flex-shrink: 0;
    border-bottom: 1px solid #f1f5f9;
    gap: 0.5rem;
    /* Remove Filament's default ring/shadow on the header */
    box-shadow: none !important;
    ring: none !important;
}

:where(.dark) .sads-sidebar-header {
    border-bottom-color: #1e293b;
    background-color: #0f172a !important;
}

/* Logo wraps and fades when sidebar collapses */
.sads-logo-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    transition: opacity 200ms ease, max-width 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sads-logo-collapsed {
    opacity: 0;
    max-width: 0 !important;
    pointer-events: none;
}

.sads-logo-expanded {
    opacity: 1;
    max-width: 12rem;
}

/* ================================================================
   4. Toggle buttons — top header & bottom footer
================================================================ */
.sads-toggle-btn,
.sads-footer-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    border: 1.5px solid #e2e8f0;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.18s ease;
    outline: none;
}

:where(.dark) .sads-toggle-btn,
:where(.dark) .sads-footer-toggle {
    border-color: #1e293b;
    color: #475569;
}

.sads-toggle-btn:hover,
.sads-footer-toggle:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
}

:where(.dark) .sads-toggle-btn:hover,
:where(.dark) .sads-footer-toggle:hover {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

.sads-toggle-btn:focus-visible,
.sads-footer-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
    outline: none;
}

/* ================================================================
   5. Chevron icon — rotates smoothly on toggle
================================================================ */
.sads-chevron {
    width: 1rem;
    height: 1rem;
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

/* Collapsed state: chevron points RIGHT (→ = expand) */
.sads-chevron-collapsed { transform: rotate(180deg); }
/* Expanded state: chevron points LEFT (← = collapse) */
.sads-chevron-expanded  { transform: rotate(0deg); }

/* Footer chevron mirrors header */
.sads-footer-chevron-collapsed { transform: rotate(180deg); }
.sads-footer-chevron-expanded  { transform: rotate(0deg); }

/* ================================================================
   6. Nav — fills remaining height, scrollable
================================================================ */
.sads-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ================================================================
   7. Sidebar footer (sticky bottom collapse button)
================================================================ */
.sads-sidebar-footer {
    margin-top: auto;
    flex-shrink: 0;
    padding: 0.625rem 0.75rem;
}

.sads-footer-divider {
    height: 1px;
    background: #f1f5f9;
    margin-bottom: 0.625rem;
}

:where(.dark) .sads-footer-divider {
    background: #1e293b;
}

/* Footer toggle — stretches full width and shows label when expanded */
.sads-footer-toggle {
    width: 100%;
    height: 2.25rem;
    border-radius: 0.5rem;
    padding: 0 0.625rem;
    justify-content: flex-start;
    gap: 0.625rem;
}

.sads-footer-icon-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.sads-footer-label {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    color: #64748b;
}

:where(.dark) .sads-footer-label {
    color: #475569;
}

/* ================================================================
   8. Main content background
================================================================ */
.fi-main-ctn {
    background-color: #f8fafc !important;
}

:where(.dark) .fi-main-ctn {
    background-color: #030712 !important;
}

/* ================================================================
   9. Print Styles
   Ensures that when printing, the sidebar is hidden and the content
   takes up 100% of the page width, even if the sidebar is expanded.
   body.sads-printing mirrors these rules on screen so the browser
   snapshots the correct layout before @media print is applied.
================================================================ */
body.sads-printing .fi-sidebar,
body.sads-printing .fi-main-sidebar,
body.sads-printing .fi-sidebar-close-overlay,
body.sads-printing .fi-topbar,
body.sads-printing .no-print {
    display: none !important;
}

body.sads-printing .fi-layout {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
}

body.sads-printing .fi-main-ctn {
    display: block !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    flex: none !important;
}

@media print {
    /* Hide navigation chrome */
    .fi-sidebar,
    .fi-main-sidebar,
    .sads-sidebar,
    .fi-sidebar.sads-sidebar,
    .sads-sidebar-header,
    .sads-sidebar-footer,
    .fi-sidebar-close-overlay,
    .fi-topbar,
    .fi-breadcrumbs,
    .fi-header,
    .fi-footer,
    .no-print {
        display: none !important;
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }

    /* Break flex layout so content is not clipped beside the sidebar */
    .fi-body,
    .fi-layout {
        display: block !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        width: 100% !important;
    }

    /* Reset main content — overrides w-screen + opacity-0 transition */
    .fi-main-ctn,
    .fi-main-ctn.fi-main-ctn-sidebar-open {
        display: block !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        margin-inline-start: 0 !important;
        padding-inline-start: 0 !important;
        overflow: visible !important;
        flex: none !important;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
    }

    .fi-main,
    .fi-page,
    .fi-content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Disable transitions during print */
    *,
    .fi-sidebar.sads-sidebar,
    .fi-main-ctn,
    .sads-logo-wrap,
    .sads-chevron,
    .sads-footer-toggle {
        transition: none !important;
        animation: none !important;
    }
}