/* Darvoxa's icon rail expands over the page, keeping the workspace in place. */
.sidebar {
    background: #0b131b;
    color: #e9eef4;
}
.sidebar .nav-item { color: #cbd2d9; }
.sidebar .nav-item:hover { background: #14222c; color: #fff; }
.sidebar .nav-item.is-active {
    background: #153c45;
    color: #fff;
    box-shadow: inset 3px 0 0 #19c0c7;
}
.sidebar .nav-item:focus-visible {
    outline: 2px solid #53d5db;
    outline-offset: -2px;
}
.sidebar .nav-item :is(svg, i) {
    width: 24px;
    height: 24px;
    color: #e9eef4;
    filter: none;
}
.sidebar .nav-badge[hidden] { display: none; }

@media (min-width: 821px) {
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 60;
        width: 88px;
        height: 100dvh;
        padding: 24px 16px 16px;
        gap: 16px;
        border: 0;
        border-radius: 0;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #425a66 transparent;
        transition: width 180ms ease, box-shadow 180ms ease;
    }
    .sidebar .primary-nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        gap: 8px;
        justify-items: stretch;
    }
    .sidebar .nav-item {
        justify-content: flex-start;
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding: 12px 16px;
        gap: 16px;
        border-radius: 10px;
        flex-shrink: 0;
        white-space: nowrap;
    }
    .sidebar .nav-icon-wrap { width: 24px; height: 24px; }
    .sidebar .nav-label {
        display: block;
        flex: 0 0 auto;
        opacity: 0;
        visibility: hidden;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: 0.01em;
        text-align: left;
        transition: opacity 120ms ease, visibility 120ms ease;
    }
    .sidebar .nav-item.is-active .nav-label { font-weight: 650; }
    .sidebar .sidebar-logo-link { margin: auto 0 0; flex-shrink: 0; width: 56px; }
    .app-shell > .main-column { margin-left: 88px; }
    .sidebar:has(:focus-visible) { width: 264px; box-shadow: 12px 0 28px #09131d26; }
    .sidebar:has(:focus-visible) .nav-label { opacity: 1; visibility: visible; }
}

@media (min-width: 821px) and (hover: hover) {
    .sidebar:hover { width: 264px; box-shadow: 12px 0 28px #09131d26; }
    .sidebar:hover .nav-label { opacity: 1; visibility: visible; }
}

/* Touch tablets have no hover; keep their labels available. Phones use the bottom bar. */
@media (min-width: 821px) and (hover: none) {
    .sidebar { width: 264px; }
    .sidebar .nav-label { opacity: 1; visibility: visible; }
    .app-shell > .main-column { margin-left: 264px; }
}

@media (min-width: 821px) and (max-height: 850px) {
    .sidebar { padding-top: 12px; padding-bottom: 12px; gap: 12px; }
    .sidebar .primary-nav { gap: 4px; }
    .sidebar .nav-item { min-height: 42px; padding-top: 9px; padding-bottom: 9px; }
}
@media (min-width: 821px) and (max-height: 650px) {
    .sidebar { padding-top: 8px; padding-bottom: 8px; gap: 8px; }
    .sidebar .primary-nav { gap: 2px; }
    .sidebar .nav-item { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
}
@media (max-width: 820px) {
    .sidebar .nav-item { width: 76px; min-width: 76px; flex-basis: 76px; }
    .sidebar .nav-label { font-size: 10px; font-weight: 500; }
    .sidebar .nav-item.is-active { box-shadow: inset 0 -3px 0 #19c0c7; }
}
@media (prefers-reduced-motion: reduce) {
    .sidebar, .sidebar .nav-item, .sidebar .nav-label { transition: none; }
}