/* The collapsed sidebar: a narrow rail (logo, search, and per section its acronym over the icons of its items) instead of
   hiding the sidebar. Unfold ships its Tailwind build precompiled, so the classes below are ours. The shell gets `is-rail`
   from Alpine (`!sidebarDesktopOpen`); the rail only exists on wide screens, the mobile drawer is Unfold's own. */

.sidebar-shell { width: 288px; transition: width 0.25s ease; }
#nav-sidebar { transition: width 0.25s ease; }
.sidebar-full { transition: opacity 0.18s ease, visibility 0s linear 0s; }
.sidebar-rail-panel { display: none; opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0s linear 0.18s; }
#changelist-actions-wrapper { transition: margin-left 0.25s ease; }

@media (min-width: 1280px) {
    /* Both contents stay rendered and cross-fade while the width eases; the rail sits over the left 72 px of the sidebar and
       the full sidebar keeps its own 288 px (clipped), so nothing re-wraps halfway. */
    #nav-sidebar { overflow: hidden; }
    .sidebar-full { width: 288px; }
    .sidebar-rail-panel { display: flex; position: absolute; top: 0; left: 0; bottom: 0; width: 72px; }

    .sidebar-shell.is-rail,
    .sidebar-shell.is-rail #nav-sidebar { width: 72px; }
    .sidebar-shell.is-rail .sidebar-full { opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0s linear 0.18s; }
    .sidebar-shell.is-rail .sidebar-rail-panel { opacity: 1; visibility: visible; transition: opacity 0.18s ease 0.1s, visibility 0s linear 0s; }
    /* Unfold offsets the fixed action bar of a list by the open sidebar (`xl:ml-72`); with the rail it is the rail's width. */
    body.sidebar-rail #changelist-actions-wrapper { margin-left: 72px; }
    /* Unfold centers `.container` (max-width 1280 px and up, which leaves wide empty margins beside the content): with the rail the header and the content fill the space, keeping only the page's own 16 px gutter. */
    body.sidebar-rail #main .container { max-width: none; }
}

.sidebar-rail-panel {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}

.sidebar-rail-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
}

.sidebar-rail-logo img { max-width: 44px; max-height: 38px; object-fit: contain; }

.sidebar-rail-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--color-primary-600);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.sidebar-rail-search {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-base-200);
    border-radius: 8px;
    background: #fff;
    color: var(--color-base-500);
    cursor: pointer;
}

.sidebar-rail-search:hover { color: var(--color-base-700); }

.sidebar-rail-sections {
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
}

.sidebar-rail-sections::-webkit-scrollbar { display: none; }

.sidebar-rail-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    border-top: 1px solid var(--color-base-200);
}

.sidebar-rail-short {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--color-base-500);
    user-select: none;
}

.sidebar-rail-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 38px;
    border-radius: 8px;
    color: var(--color-base-600);
}

.sidebar-rail-item:hover { background: var(--color-base-100); color: var(--color-base-900); }

.sidebar-rail-item.is-active { background: var(--color-base-100); color: var(--color-primary-600); }

.dark .sidebar-rail-search { background: var(--color-base-900); border-color: var(--color-base-700); color: var(--color-base-400); }
.dark .sidebar-rail-search:hover { color: var(--color-base-200); }
.dark .sidebar-rail-section { border-top-color: var(--color-base-800); }
.dark .sidebar-rail-short { color: var(--color-base-400); }
.dark .sidebar-rail-item { color: var(--color-base-300); }
.dark .sidebar-rail-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--color-base-100); }
.dark .sidebar-rail-item.is-active { background: rgba(255, 255, 255, 0.06); color: var(--color-primary-500, var(--color-primary-600)); }

@media (prefers-reduced-motion: reduce) {
    .sidebar-shell, #nav-sidebar, .sidebar-full, .sidebar-rail-panel, #changelist-actions-wrapper { transition: none !important; }
}