/*
 * Garage sidebar: a deep panel in the garage's own colour, so navigation sits
 * apart from the work area. Built from the primary palette, which is the
 * garage's brand colour (or Sigvia teal when unbranded).
 */
.fi-main-sidebar {
    --gs-bg: color-mix(in oklch, var(--primary-950) 72%, #05070d);
    --gs-bg-raised: color-mix(in oklch, var(--primary-900) 55%, var(--gs-bg));
    --gs-text: oklch(0.93 0.01 250);
    --gs-muted: oklch(0.72 0.03 250);
    --gs-faint: oklch(1 0 0 / 0.08);
    --gs-icon: color-mix(in oklch, var(--primary-300) 80%, white);
    background: var(--gs-bg);
    color: var(--gs-text);
    box-shadow: inset -1px 0 0 oklch(1 0 0 / 0.06), 4px 0 24px -12px oklch(0 0 0 / 0.35);
}

@media (min-width: 64rem) {
    .fi-main-sidebar {
        background: var(--gs-bg);
    }
}

.fi-main-sidebar .fi-sidebar-header-ctn,
.fi-main-sidebar .fi-sidebar-header {
    background: transparent;
    box-shadow: none;
}

/* Scrolling area: thin, quiet scrollbar */
.fi-main-sidebar .fi-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: oklch(1 0 0 / 0.18) transparent;
    padding-top: 1.25rem;
}

/* Group headings: small caps style, clearly separating sections */
.fi-main-sidebar .fi-sidebar-group-label {
    color: var(--gs-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fi-main-sidebar .fi-sidebar-group + .fi-sidebar-group {
    border-top: 1px solid var(--gs-faint);
    padding-top: 1rem;
}

.fi-main-sidebar .fi-sidebar-group-collapse-btn,
.fi-main-sidebar .fi-sidebar-group-collapse-btn .fi-icon {
    color: var(--gs-muted);
}

/* Items */
.fi-main-sidebar .fi-sidebar-item-btn {
    border-radius: 0.625rem;
    transition: background-color 120ms ease;
}

.fi-main-sidebar .fi-sidebar-item-btn > .fi-icon {
    color: var(--gs-icon);
}

.fi-main-sidebar .fi-sidebar-item-label {
    color: var(--gs-text);
    font-weight: 500;
}

.fi-main-sidebar .fi-sidebar-item-btn:hover,
.fi-main-sidebar .fi-sidebar-item-btn:focus-visible {
    background-color: oklch(1 0 0 / 0.07);
}

.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--primary-600);
    box-shadow: 0 6px 16px -8px var(--primary-500);
}

.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
    color: #fff;
}

/* Count badges read on the dark panel */
.fi-main-sidebar .fi-badge {
    background-color: oklch(1 0 0 / 0.1);
    color: #fff;
    --tw-ring-color: transparent;
    box-shadow: none;
}

.fi-main-sidebar .fi-badge.fi-color-warning {
    background-color: var(--warning-400);
    color: var(--warning-950);
}

.fi-main-sidebar .fi-badge.fi-color-success {
    background-color: var(--success-500);
    color: #fff;
}

.fi-main-sidebar .fi-sidebar-item.fi-active .fi-badge {
    background-color: oklch(1 0 0 / 0.22);
    color: #fff;
}

/* Pinned footer: settings card and the Sigvia credit */
.gs-sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
    padding: 0.75rem 1rem 0.875rem;
    border-top: 1px solid var(--gs-faint);
    background: color-mix(in oklch, var(--gs-bg) 85%, black);
}

.gs-settings-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    background: var(--gs-bg-raised);
    box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.08);
    color: var(--gs-text);
    text-decoration: none;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

.gs-settings-link:hover {
    box-shadow: inset 0 0 0 1px var(--primary-400);
}

.gs-settings-link.gs-active {
    background: var(--primary-600);
    box-shadow: none;
}

.gs-settings-icon {
    width: 1.375rem;
    height: 1.375rem;
    flex: none;
    color: var(--gs-icon);
}

.gs-settings-link.gs-active .gs-settings-icon {
    color: #fff;
}

.gs-settings-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.gs-settings-label {
    font-size: 0.875rem;
    font-weight: 600;
}

.gs-settings-hint {
    font-size: 0.75rem;
    color: var(--gs-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-settings-link.gs-active .gs-settings-hint {
    color: oklch(1 0 0 / 0.8);
}

.gs-settings-flag {
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--warning-400);
    color: var(--warning-950);
    font-size: 0.75rem;
    font-weight: 700;
}

.gs-powered-by {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.25rem;
    color: var(--gs-muted);
    font-size: 0.75rem;
    text-decoration: none;
}

.gs-powered-by img {
    width: 1rem;
    height: 1rem;
}

.gs-powered-by strong {
    color: var(--gs-text);
    font-weight: 600;
}

.fi-main-sidebar .fi-sidebar-nav-groups {
    row-gap: 1rem;
}

.fi-main-sidebar .fi-sidebar-group + .fi-sidebar-group {
    padding-top: 0.875rem;
}