/*
 * The "Ad accounts" sidebar group, drawn as a peer of the flat items.
 *
 * Registered through FilamentAsset (AppServiceProvider::boot) and published by
 * `php artisan filament:assets`, exactly like skeleton.css.
 *
 * Both panels build their menu with a NavigationBuilder so the group sits
 * inline (see App\Providers\Filament\Concerns\BuildsNavigation): a label-less
 * group of items, the "Ad accounts" group, then the rest. Filament gives the
 * group everything an item has except its skin — the header is a real button
 * with the same 0.5rem padding, the same 0.75rem icon gap, the same
 * `text-sm`/medium label, an icon slot and a chevron that flips on collapse.
 * What is left is small and lives here:
 *
 *   1. Groups sit 1.75rem apart (`.fi-sidebar-nav-groups` row-gap 7), which cut
 *      the menu into blocks: the owner saw "Ad accounts" floating with roughly
 *      double the normal gap above and below it (2026-09-09). One item rhythm
 *      (0.25rem, the row-gap `.fi-sidebar-group` and `.fi-sidebar-group-items`
 *      already use) puts every row back on the same spacing.
 *   2. The header takes the item button's rounded corners and hover wash, so
 *      pointing at it feels the same as pointing at Deposits or Ledger.
 *   3. The label takes the item label's ink (gray-500 is Filament's quieter
 *      section-heading gray; items are gray-700) and its truncation.
 *
 * Row HEIGHT needs nothing: both buttons are `display:flex` with 0.5rem padding
 * around a 1.5rem large icon, and the chevron is an `fi-size-md` icon button
 * (2.25rem box, -0.5rem margin = 1.25rem of line), so header and item both
 * measure 2.5rem. The margin/padding resets below only pin that, so a future
 * Filament release cannot quietly reintroduce the gap.
 *
 * Everything is keyed on Filament's own documented `fi-*` classes and its own
 * neutral custom properties, scoped to the main sidebar so page sub-navigation
 * (which reuses the same group component) keeps its heading look. Brand tokens
 * deliberately stay out: this is panel chrome, not brand surface.
 */

/* 1. One rhythm for the whole menu, so the group reads as another line in it. */
.fi-main-sidebar .fi-sidebar-nav-groups {
    row-gap: calc(var(--spacing) * 1);
}

.fi-main-sidebar .fi-sidebar-nav-groups > .fi-sidebar-group {
    margin: 0;
    padding: 0;
    row-gap: calc(var(--spacing) * 1);
}

.fi-main-sidebar .fi-sidebar-group > .fi-sidebar-group-items {
    margin: 0;
    padding: 0;
    row-gap: calc(var(--spacing) * 1);
}

/* The header row measures what an item row measures, expanded or collapsed. */
.fi-main-sidebar .fi-sidebar-group > .fi-sidebar-group-btn {
    margin: 0;
    min-height: calc(var(--spacing) * 10);
    padding: calc(var(--spacing) * 2);
}

/* 2. The header wears the item button's shape and hover. */
.fi-main-sidebar .fi-sidebar-group-btn {
    border-radius: var(--radius-lg);
}

.fi-main-sidebar .fi-sidebar-group.fi-collapsible > .fi-sidebar-group-btn:hover,
.fi-main-sidebar .fi-sidebar-group.fi-collapsible > .fi-sidebar-group-btn:focus-within {
    background-color: var(--gray-100);
}

.fi-main-sidebar .fi-sidebar-group.fi-collapsible > .fi-sidebar-group-btn:where(.dark, .dark *):hover,
.fi-main-sidebar .fi-sidebar-group.fi-collapsible > .fi-sidebar-group-btn:where(.dark, .dark *):focus-within {
    background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
}

/* 3. The label wears the item label's ink and truncation. */
.fi-main-sidebar .fi-sidebar-group-label {
    color: var(--gray-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-main-sidebar .fi-sidebar-group-label:where(.dark, .dark *) {
    color: var(--gray-200);
}