/*
 * Staff panel theme: NHIMA green navigation.
 *
 * Colours come from the brand tokens in resources/css/app.css (green-strong #237a2e, lime #7dc242).
 * Contrast (WCAG 2.2 AA): item text #ffffff on #134a1d = 10.4:1, on #1d6b2a = 6.9:1; section labels
 * #cfeed3 on #1d6b2a = 5.1:1; badge #0e3a15 on #7dc242 = 7.1:1. The active page is shown by a lime
 * bar, a lighter background and a heavier weight, never by colour alone.
 */

:root {
    --nhima-nav-top: #1d6b2a;
    --nhima-nav-bottom: #134a1d;
    --nhima-nav-text: #ffffff;
    --nhima-nav-muted: #cfeed3;
    --nhima-nav-icon: #b9e3bf;
    --nhima-nav-hover: rgba(255, 255, 255, 0.08);
    --nhima-nav-active: rgba(255, 255, 255, 0.16);
    --nhima-accent: #7dc242;
    --nhima-accent-ink: #0e3a15;
    --nhima-page: #f3f5f7;
}

.dark {
    --nhima-nav-top: #134a1d;
    --nhima-nav-bottom: #0a2c11;
    --nhima-nav-hover: rgba(255, 255, 255, 0.06);
    --nhima-nav-active: rgba(255, 255, 255, 0.12);
}

/* Page and top bar: neutral, so the green navigation carries the brand. */
html:not(.dark) .fi-body {
    background: var(--nhima-page);
}
html:not(.dark) .fi-topbar,
html:not(.dark) .fi-topbar > nav {
    background: #ffffff;
    box-shadow: 0 1px 0 #e5e9ee, 0 1px 3px rgba(15, 23, 42, 0.04);
}

/* Sidebar surface */
.fi-body .fi-sidebar,
.fi-body .fi-sidebar-nav,
.fi-body .fi-sidebar-footer {
    background: transparent;
}
.fi-body .fi-sidebar {
    background: linear-gradient(180deg, var(--nhima-nav-top) 0%, var(--nhima-nav-bottom) 100%);
    border-inline-end: 0;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.12);
}
/* Mobile drawer header keeps a white strip so the logo stays legible. */
.fi-body .fi-sidebar-header {
    background: #ffffff;
    box-shadow: 0 1px 0 #e5e9ee;
}
.fi-body .fi-sidebar-nav {
    padding-block: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
/* The scrollbar appears only while the pointer is over the navigation. */
.fi-body .fi-sidebar-nav:hover,
.fi-body .fi-sidebar-nav:focus-within {
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

/* Section labels */
.fi-body .fi-sidebar-group-label {
    color: var(--nhima-nav-muted) !important;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.fi-body .fi-sidebar-group-btn .fi-icon,
.fi-body .fi-sidebar-group-collapse-btn,
.fi-body .fi-sidebar-group-collapse-btn .fi-icon {
    color: var(--nhima-nav-muted) !important;
}
/* Compact rhythm: 12px between sections, 2px between items, 36px rows (still a comfortable target). */
.fi-body .fi-sidebar-nav,
.fi-body .fi-sidebar-nav-groups {
    row-gap: 0.75rem !important;
}
.fi-body .fi-sidebar-group,
.fi-body .fi-sidebar-group-items {
    row-gap: 0.125rem !important;
}
.fi-body .fi-sidebar-group-btn {
    padding-block: 0.25rem !important;
}
.fi-body .fi-sidebar-item-btn {
    padding-block: 0.375rem !important;
}

/* Items */
.fi-body .fi-sidebar-item-btn {
    border-radius: 0.5rem;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}
.fi-body .fi-sidebar-item-label {
    color: var(--nhima-nav-text) !important;
    font-weight: 500;
}
.fi-body .fi-sidebar-item-icon {
    color: var(--nhima-nav-icon) !important;
}
.fi-body .fi-sidebar-item-btn:hover {
    background: var(--nhima-nav-hover) !important;
}
.fi-body .fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    color: var(--nhima-nav-text) !important;
}

/* Current page: lighter fill, lime bar, heavier label. */
.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-body .fi-sidebar-item-has-active-child-items > .fi-sidebar-item-btn {
    background: var(--nhima-nav-active) !important;
    box-shadow: inset 3px 0 0 var(--nhima-accent);
}
.fi-body .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    font-weight: 600;
}
.fi-body .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--nhima-accent) !important;
}
.fi-body .fi-sidebar-item-grouped-border-part {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* Keyboard focus: always visible, never colour-only. Replaces the panel's light focus fill,
   which would put white text on near-white. */
.fi-body .fi-sidebar-item-btn:focus,
.fi-body .fi-sidebar-item-btn:focus-visible {
    background: var(--nhima-nav-hover) !important;
}
.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn:focus,
.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn:focus-visible {
    background: var(--nhima-nav-active) !important;
}
.fi-body .fi-sidebar-item-btn:focus:not(:focus-visible) {
    outline: none;
}
.fi-body .fi-sidebar-item-btn:focus-visible,
.fi-body .fi-sidebar-group-btn:focus-visible,
.fi-body .fi-sidebar-group-collapse-btn:focus-visible {
    outline: 2px solid var(--nhima-accent);
    outline-offset: 2px;
}

/* Count badges (waiting tickets, partners, refunds) */
.fi-body .fi-sidebar-item-badge-ctn .fi-badge {
    background: var(--nhima-accent) !important;
    color: var(--nhima-accent-ink) !important;
    font-weight: 700;
    --tw-ring-color: transparent !important;
    box-shadow: none !important;
}

/* Dark mode: the logo has dark lettering, so it sits on a white card. */
.dark .fi-logo {
    background: #ffffff;
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    box-sizing: content-box;
}

@media (prefers-reduced-motion: reduce) {
    .fi-body .fi-sidebar-item-btn {
        transition: none;
    }
}