/*
 * Custom sidebar enhancements for the Unfold admin (django-unfold 0.81.0).
 *
 * Adds:
 *   - larger navigation icons (both expanded and collapsed);
 *   - category (group) icons — rendered from the `icon` key set per group in
 *     ff_crm/config/unfold.py;
 *   - an icons-only "rail" collapse mode.
 *
 * Loaded via UNFOLD["STYLES"] as plain CSS so it does NOT depend on a Tailwind
 * rebuild. State is driven by two independent flags:
 *   - `.sidebar-rail` class .... icons-only rail (Alpine `sidebarRail`, persisted;
 *                                toggled by the chevron in the sidebar header).
 *   - `sidebarDesktopOpen` ...... Unfold's own full hide/show (header button).
 *
 * The `.sidebar-rail` class and the `.nav-sidebar-wrapper`, `.nav-header__brand`,
 * `.nav-group__icon`, `.nav-item__icon` hooks live in the project template
 * overrides under ff_crm/templates/{admin,unfold}/.
 */

:root {
    --sidebar-rail-width: 76px;
    --sidebar-icon-size: 22px; /* larger icons in expanded mode */
    --sidebar-icon-size-rail: 26px; /* even larger, centered, in rail mode */
}

/* Animate the width both ways (expand <-> rail). */
.nav-sidebar-wrapper,
#nav-sidebar {
    transition: width 0.2s ease;
}

/* ---------------------------------------------------------------------------
   Larger icons (both modes)
   --------------------------------------------------------------------------- */
#nav-sidebar .nav-item__icon {
    font-size: var(--sidebar-icon-size);
    width: var(--sidebar-icon-size);
    margin-right: 14px;
    flex-shrink: 0;
    transition: font-size 0.15s ease;
}

#nav-sidebar .nav-group__icon {
    font-size: 20px;
    width: 20px;
    margin-right: 10px;
    flex-shrink: 0;
    color: var(--color-primary-600);
}

/* A touch more room so the bigger icons breathe. */
#nav-sidebar #nav-sidebar-apps ol a {
    min-height: 40px;
}

/* Slightly smaller labels for nav items and category headers (default is 14px). */
#nav-sidebar .nav-item__label,
#nav-sidebar .nav-group__label {
    font-size: 0.8125rem; /* 13px */
    line-height: 1.2;
}

/* ---------------------------------------------------------------------------
   Rail toggle button (sits in the sidebar header)
   --------------------------------------------------------------------------- */
.sidebar-rail-toggle {
    display: none; /* shown only on xl (desktop) — see media query below */
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 32px;
    border-radius: var(--border-radius, 0.375rem);
    cursor: pointer;
    color: var(--color-font-subtle-light, #64748b);
    transition: background-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.sidebar-rail-toggle:hover {
    background-color: var(--color-base-100, #f1f5f9);
    color: var(--color-primary-600);
}

/* No stray focus ring after a mouse click; keep a clean ring for keyboard users. */
.sidebar-rail-toggle:focus {
    outline: none;
}

.sidebar-rail-toggle:focus-visible {
    outline: 2px solid var(--color-primary-600);
    outline-offset: 2px;
}

.sidebar-rail-toggle .material-symbols-outlined {
    transition: transform 0.2s ease;
}

.sidebar-rail-toggle .material-symbols-outlined.is-collapsed {
    transform: rotate(180deg);
}

.dark .sidebar-rail-toggle:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

@media (min-width: 1280px) {
    .sidebar-rail-toggle {
        display: inline-flex;
    }

    /* When collapsed, the brand text is gone — center the toggle in the rail. */
    .sidebar-rail .sidebar-rail-toggle {
        margin: 0 auto;
    }
}

/* ===========================================================================
   Rail (icons-only) mode — desktop only (xl and up).
   On smaller screens the sidebar is a full-width overlay, so rail never applies.
   =========================================================================== */
@media (min-width: 1280px) {
    .sidebar-rail .nav-sidebar-wrapper,
    .sidebar-rail #nav-sidebar {
        width: var(--sidebar-rail-width) !important;
    }

    .sidebar-rail #nav-sidebar-inner {
        overflow: hidden;
    }

    .sidebar-rail #nav-sidebar-apps {
        overflow-x: hidden;
    }

    /* Hide the brand text and the search box. */
    .sidebar-rail .nav-header__brand {
        display: none !important;
    }

    /* The search box wrapper is the only direct child of the nav carrying `mx-3`. */
    .sidebar-rail #nav-sidebar-inner > .mx-3 {
        display: none !important;
    }

    /* --- Category (group) headers: show only the icon, centered --- */
    .sidebar-rail #nav-sidebar-apps h2 {
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .sidebar-rail #nav-sidebar-apps h2 > *:not(.nav-group__icon) {
        display: none !important;
    }

    .sidebar-rail #nav-sidebar-apps .nav-group__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 0;
        font-size: 22px;
    }

    .sidebar-rail #nav-sidebar-apps hr {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    /* --- Items: always visible (defeat group collapse), icon-only, centered --- */
    .sidebar-rail #nav-sidebar-apps ol {
        display: flex !important;
        padding-left: 0;
        padding-right: 0;
    }

    .sidebar-rail #nav-sidebar-apps ol a {
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .sidebar-rail #nav-sidebar-apps ol a > *:not(.nav-item__icon) {
        display: none !important;
    }

    .sidebar-rail #nav-sidebar-apps .nav-item__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 0;
        font-size: var(--sidebar-icon-size-rail);
    }

    /* --- User block at the bottom: avatar only --- */
    .sidebar-rail #nav-sidebar-inner > div:last-child {
        padding-left: 0;
        padding-right: 0;
    }

    .sidebar-rail #nav-sidebar-inner > div:last-child > div {
        justify-content: center;
    }

    .sidebar-rail #nav-sidebar-inner > div:last-child .flex.flex-col,
    .sidebar-rail #nav-sidebar-inner > div:last-child > div > span.material-symbols-outlined {
        display: none !important;
    }
}