/* ==========================================================================
   Django Admin Sidebar Fixes
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. SIDEBAR VISIBILITY - Force open by default on desktop
   -------------------------------------------------------------------------- */

/* Override Django's default hidden state - make sidebar visible without JS */
.main > #nav-sidebar {
    visibility: visible;
    margin-left: 0;
}

/* Ensure content adjusts when sidebar is visible */
.main > #nav-sidebar + .content {
    max-width: calc(100% - 299px);  /* 275px sidebar + 23px toggle + 1px border */
}

/* When explicitly closed via toggle, respect that */
.main:not(.shifted) > #nav-sidebar {
    /* Only hide if user explicitly closed it (JS removes .shifted) */
    /* We override this below to keep it open */
}

/* -----------------------------------------------------------------------------
   2. SIDEBAR DIMENSIONS & SCROLL
   -------------------------------------------------------------------------- */

#nav-sidebar {
    /* Vertical scroll for many modules */
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 80px);  /* Account for header */

    /* Smooth scroll behavior */
    scroll-behavior: smooth;

    /* Prevent content from being cut off horizontally */
    min-width: 275px;
    width: 275px;
}

/* Inner content scroll */
.nav-sidebar {
    overflow-y: auto;
}

/* -----------------------------------------------------------------------------
   3. TOGGLE BUTTON - Sticky at bottom for easy access
   -------------------------------------------------------------------------- */

#toggle-nav-sidebar {
    position: sticky;
    top: 0;
    z-index: 25;
}

/* Better visual feedback for toggle */
.toggle-nav-sidebar:hover {
    background-color: var(--primary, #417690);
    color: var(--header-link-color, #fff);
}

/* -----------------------------------------------------------------------------
   4. DARK THEME ENHANCEMENTS
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    #nav-sidebar {
        /* Subtle separator in dark mode */
        border-right-color: rgba(255, 255, 255, 0.1);
    }

    /* Better contrast for current model highlight */
    #nav-sidebar .current-model {
        background: rgba(255, 255, 255, 0.08);
    }

    /* Improve link visibility in dark mode */
    #nav-sidebar a:hover {
        background: rgba(255, 255, 255, 0.05);
    }
}

/* -----------------------------------------------------------------------------
   5. RESPONSIVE - Hide on mobile (Django default, keeping it)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    /* Django already hides sidebar on mobile - we respect that */
    .main > #nav-sidebar + .content {
        max-width: 100%;
    }
}

/* -----------------------------------------------------------------------------
   6. FILTER INPUT - Better UX for module search
   -------------------------------------------------------------------------- */

#nav-filter {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--body-bg);
    padding: 8px;
    margin: 0;
    border: none;
    border-bottom: 1px solid var(--hairline-color);
}

#nav-filter:focus {
    outline: 2px solid var(--primary, #417690);
    outline-offset: -2px;
}

/* -----------------------------------------------------------------------------
   7. MODULE LIST - Visual hierarchy improvements
   -------------------------------------------------------------------------- */

#nav-sidebar .module {
    margin-bottom: 0;
}

#nav-sidebar .module caption {
    font-weight: 600;
    padding: 12px 16px 8px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--body-quiet-color);
}

#nav-sidebar .module th {
    padding: 8px 16px;
}

#nav-sidebar .module th a {
    display: block;
    padding: 4px 0;
}

/* Hover state for navigation items */
#nav-sidebar .module th:hover {
    background: var(--darkened-bg);
}

/* Current app/model highlighting */
#nav-sidebar .current-app .section {
    border-left: 3px solid var(--primary, #417690);
    padding-left: 13px;
}

#nav-sidebar .current-model th {
    background: var(--selected-row);
    border-left: 3px solid var(--primary, #417690);
}