/* Brand logo at the top of the sidebar (injected by nova-sidebar.js); the
   topbar brand slot is emptied by nova-brand.js. Sticky so it stays put while
   a long menu scrolls underneath it. */
.app-sidebar-logo {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.75rem;
    margin-bottom: 0.75rem;
    background-color: inherit;
}

.app-sidebar-logo img {
    max-height: 110px;
    max-width: 100%;
    object-fit: contain;
}

/* Section accents sampled from the logo: its navy ring and teal droplet,
   alternated so neighbouring sections stay distinguishable. */
.sidebar-menu {
    --sidebar-icon-1: #123a5c;
    --sidebar-icon-2: #2e8080;
    --sidebar-icon-3: #1f5070;
    --sidebar-icon-4: #3fa0a0;
    --sidebar-icon-5: #0f2f4e;
    --sidebar-icon-6: #24707f;
}

/* Lightened for the dark sidebar, where the logo navies read as near-black. */
.dark .sidebar-menu {
    --sidebar-icon-1: #7fb0d6;
    --sidebar-icon-2: #64c8c8;
    --sidebar-icon-3: #93c2e0;
    --sidebar-icon-4: #7fdcdc;
    --sidebar-icon-5: #6fa2cc;
    --sidebar-icon-6: #6ec0cc;
}

.sidebar-menu>*:nth-child(6n + 1) [data-active-link]>span:first-child,
.sidebar-menu>*:nth-child(6n + 1) [data-active-link]>span:first-child svg {
    color: var(--sidebar-icon-1);
}

.sidebar-menu>*:nth-child(6n + 2) [data-active-link]>span:first-child,
.sidebar-menu>*:nth-child(6n + 2) [data-active-link]>span:first-child svg {
    color: var(--sidebar-icon-2);
}

.sidebar-menu>*:nth-child(6n + 3) [data-active-link]>span:first-child,
.sidebar-menu>*:nth-child(6n + 3) [data-active-link]>span:first-child svg {
    color: var(--sidebar-icon-3);
}

.sidebar-menu>*:nth-child(6n + 4) [data-active-link]>span:first-child,
.sidebar-menu>*:nth-child(6n + 4) [data-active-link]>span:first-child svg {
    color: var(--sidebar-icon-4);
}

.sidebar-menu>*:nth-child(6n + 5) [data-active-link]>span:first-child,
.sidebar-menu>*:nth-child(6n + 5) [data-active-link]>span:first-child svg {
    color: var(--sidebar-icon-5);
}

.sidebar-menu>*:nth-child(6n + 6) [data-active-link]>span:first-child,
.sidebar-menu>*:nth-child(6n + 6) [data-active-link]>span:first-child svg {
    color: var(--sidebar-icon-6);
}

.sidebar-menu [data-active-link='true']>span:first-child,
.sidebar-menu [data-active-link='true']>span:first-child svg {
    filter: saturate(1.15) brightness(0.95);
}

.dark .sidebar-menu [data-active-link='true']>span:first-child,
.dark .sidebar-menu [data-active-link='true']>span:first-child svg {
    filter: saturate(1.1) brightness(1.1);
}

/* ─────────────────────────────────────────────────────────────
   Sidebar UI polish
   ───────────────────────────────────────────────────────────── */

/* Sidebar column background (class added by nova-sidebar.js). */
.app-sidebar {
    background-color: #ffffff;
    box-shadow: 2px 0 8px -2px rgb(15 47 78 / 0.12);
}

/* The emptied brand slot would otherwise reserve a blank 15rem column to the
   left of the search bar. */
#nova header > div.hidden.lg\:w-60.shrink-0 {
    display: none !important;
}

/* Fix the top header above the content; offset the content area (2nd child
   of #nova) so nothing hides behind it. */
#nova > div:first-child {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 45;
}

/* Pin the sidebar full-height from the very top — its logo occupies the
   header row — and let it scroll internally when the menu is taller than the
   viewport. The header then starts where the sidebar ends (w-60 = 15rem). */
@media (min-width: 1024px) {
    .app-sidebar {
        position: fixed !important;
        top: 0;
        bottom: 0;
        left: 0;
        padding-top: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        z-index: 46;
    }

    #nova > div:first-child {
        left: 15rem;
    }
}

#nova > div:nth-child(2) {
    padding-top: 56px;
}

.dark .app-sidebar {
    background-color: #1f2937;
    box-shadow: 2px 0 10px -2px rgb(0 0 0 / 0.45);
}

/* Per-section accent colour (matches the icon palette above) so the
   active-item bar picks up its section's colour. */
.sidebar-menu>*:nth-child(6n + 1) { --sidebar-accent: var(--sidebar-icon-1); }
.sidebar-menu>*:nth-child(6n + 2) { --sidebar-accent: var(--sidebar-icon-2); }
.sidebar-menu>*:nth-child(6n + 3) { --sidebar-accent: var(--sidebar-icon-3); }
.sidebar-menu>*:nth-child(6n + 4) { --sidebar-accent: var(--sidebar-icon-4); }
.sidebar-menu>*:nth-child(6n + 5) { --sidebar-accent: var(--sidebar-icon-5); }
.sidebar-menu>*:nth-child(6n + 6) { --sidebar-accent: var(--sidebar-icon-6); }

/* Smooth hover / active transitions on every row. */
.sidebar-menu a {
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Group headers read as quieter, spaced labels. */
.sidebar-menu h3 > span:nth-child(2) {
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    font-weight: 700;
    opacity: 0.65;
}

/* Active row: tinted with its section's accent colour. */
.sidebar-menu a[data-active-link='true'] {
    font-weight: 600;
    background: color-mix(in srgb, var(--sidebar-accent, #123a5c) 12%, transparent);
    box-shadow: inset 3px 0 0 var(--sidebar-accent, #123a5c);
}

.dark .sidebar-menu a[data-active-link='true'] {
    background: color-mix(in srgb, var(--sidebar-accent, #7fb0d6) 26%, transparent);
}

/* The section holding the active row keeps a quiet highlight while open. */
.sidebar-menu div.relative:has(a[data-active-link='true']) > button {
    background: color-mix(in srgb, var(--sidebar-accent, #123a5c) 7%, transparent);
    font-weight: 600;
}

.dark .sidebar-menu div.relative:has(a[data-active-link='true']) > button {
    background: color-mix(in srgb, var(--sidebar-accent, #7fb0d6) 16%, transparent);
}

/* Collapsable section headers behave like buttons. */
.sidebar-menu div.relative > button {
    transition: background-color 0.15s ease;
}


/* Count badges (injected by nova-sidebar.js) on state links. */
.sidebar-count-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.15rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    color: var(--sidebar-accent, #123a5c);
    background: color-mix(in srgb, var(--sidebar-accent, #123a5c) 14%, transparent);
}

.dark .sidebar-count-badge {
    color: #fff;
    background: color-mix(in srgb, var(--sidebar-accent, #7fb0d6) 32%, transparent);
}

/* Zero counts fade into the background so active queues stand out. */
.sidebar-count-badge.is-zero {
    color: rgb(156 163 175);
    background: transparent;
    font-weight: 600;
}

.dark .sidebar-count-badge.is-zero {
    color: rgb(107 114 128);
}