/* Custom sidebar theme for the Console panel: dark sidebar, teal (panel primary)
   active state, outline badges, icon-only collapse. Overrides Filament's default
   sidebar styles; the rest of the panel keeps its normal (light) theme. */

:root {
    --console-sidebar-bg: #121212;
    --console-sidebar-border: rgba(255, 255, 255, 0.08);
    --console-sidebar-text: #d4d4d8;
    --console-sidebar-text-muted: #8b8b93;
    --console-sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --console-sidebar-accent: var(--primary-500);
    --console-sidebar-accent-bg: rgba(20, 184, 166, 0.16);
}

@supports (color: color-mix(in oklab, red, red)) {
    :root {
        --console-sidebar-accent-bg: color-mix(in oklab, var(--primary-500) 16%, transparent);
    }
}

#fi-main-sidebar.fi-sidebar {
    background-color: var(--console-sidebar-bg);
}

#fi-main-sidebar .fi-sidebar-header {
    background-color: var(--console-sidebar-bg);
    border-bottom: 1px solid var(--console-sidebar-border);
    box-shadow: none;
}

#fi-main-sidebar .fi-logo {
    color: #fff;
}

#fi-main-sidebar .fi-sidebar-group-label {
    color: var(--console-sidebar-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.6875rem;
}

#fi-main-sidebar .fi-sidebar-group-collapse-btn .fi-icon,
#fi-main-sidebar .fi-sidebar-group-dropdown-trigger-btn .fi-icon {
    color: var(--console-sidebar-text-muted);
}

#fi-main-sidebar .fi-sidebar-item-btn {
    border-radius: 9999px;
}

#fi-main-sidebar .fi-sidebar-item-btn > .fi-icon {
    color: var(--console-sidebar-text-muted);
}

#fi-main-sidebar .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--console-sidebar-text);
}

#fi-main-sidebar .fi-sidebar-item-btn:hover {
    background-color: var(--console-sidebar-hover-bg);
}

#fi-main-sidebar .fi-active > .fi-sidebar-item-btn {
    background-color: var(--console-sidebar-accent-bg);
}

#fi-main-sidebar .fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: var(--console-sidebar-accent);
}

#fi-main-sidebar .fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--console-sidebar-accent);
    font-weight: 600;
}

/* Badge counts: outline pill instead of filled */
#fi-main-sidebar .fi-sidebar-item-badge-ctn .fi-badge {
    background-color: transparent;
    border: 1px solid var(--console-sidebar-text-muted);
    color: var(--console-sidebar-text);
}

#fi-main-sidebar .fi-active .fi-sidebar-item-badge-ctn .fi-badge {
    border-color: var(--console-sidebar-accent);
    color: var(--console-sidebar-accent);
}

/* Icon-only collapsed state: square accent behind the active icon + left bar */
#fi-main-sidebar:not(.fi-sidebar-open) .fi-active > .fi-sidebar-item-btn {
    position: relative;
    border-radius: 0.5rem;
}

#fi-main-sidebar:not(.fi-sidebar-open) .fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    inset-inline-start: -0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.5rem;
    background-color: var(--console-sidebar-accent);
    border-radius: 9999px;
}

#fi-main-sidebar:not(.fi-sidebar-open) .fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: #fff;
    background-color: var(--console-sidebar-accent);
    border-radius: 0.5rem;
    padding: 0.375rem;
    width: calc(1.5rem + 0.75rem);
    height: calc(1.5rem + 0.75rem);
}

/* Footer / user menu pinned at the bottom, styled as a plain row */
#fi-main-sidebar .fi-sidebar-footer {
    border-top: 1px solid var(--console-sidebar-border);
    padding-top: 0.75rem;
}

#fi-main-sidebar .fi-sidebar-footer .fi-user-menu-trigger {
    color: var(--console-sidebar-text-muted);
}

#fi-main-sidebar .fi-sidebar-footer .fi-user-menu-trigger:hover {
    background-color: var(--console-sidebar-hover-bg);
}

#fi-main-sidebar .fi-sidebar-footer .fi-user-menu-trigger-text {
    color: var(--console-sidebar-text);
}

/* Topbar collapse toggle stays on the light topbar, no change needed there. */