/*
 * The sidebar's active management.
 *
 * The menu is long — every management the panel has, in one column — and
 * Filament marks the one you are inside with a grey wash and amber text. On
 * that list, at a glance, it is not marking anything: the eye reads a
 * uniformly grey column and the operator loses track of where they are
 * (الزام م-۱).
 *
 * So the active entry gets the panel's own yellow as a solid box, with its
 * name and its icon in the near-black the panel uses for text, which is what
 * stays readable on top of it. The yellow is «زرد استاندارد» — the same token
 * «استانداردسازی نمای پنل» hands the rest of the panel, so repainting it there
 * repaints this too rather than leaving the menu behind.
 *
 * Nothing here touches which entry is active. That is Filament's own
 * `fi-active`, driven by the current route, and it is already right on a
 * management's list, create, edit and view screens alike — this file only
 * decides what «active» looks like (الزام م-۲ و م-۳).
 *
 * The selectors are one step longer than the rules they replace
 * (`.fi-sidebar-item.fi-active > …` against Filament's own, and against the
 * central standards block's bare `.fi-sidebar-item-label`), because both are
 * printed after this file. Specificity is what makes the yellow win, not order.
 */

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--std-color-warning-500, #f59e0b);
    box-shadow: inset 0 0 0 1px var(--std-color-warning-600, #d97706);
}

/*
 * Hover and keyboard focus are Filament's grey, at the same specificity as the
 * rule above. Without this the active entry loses its yellow the moment the
 * pointer crosses it — which is exactly when it is being looked at.
 */
.fi-sidebar-item.fi-active.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-sidebar-item.fi-active.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
    background-color: var(--std-color-warning-600, #d97706);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-icon {
    color: var(--std-color-gray-900, #111827);
}

/* The dot a grouped entry is drawn with sits on the yellow too. */
.fi-sidebar-item.fi-active
    > .fi-sidebar-item-btn
    > .fi-sidebar-item-grouped-border
    > .fi-sidebar-item-grouped-border-part {
    background-color: var(--std-color-gray-900, #111827);
}

/*
 * On a dark panel the same yellow is if anything louder, so it stays as it is;
 * only Filament's dark overrides — a white wash behind the box and a pale amber
 * on the text — have to be answered, or they would put pale amber on yellow.
 */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:where(.dark, .dark *) {
    background-color: var(--std-color-warning-500, #f59e0b);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label:where(.dark, .dark *),
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon:where(.dark, .dark *),
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-icon:where(.dark, .dark *) {
    color: var(--std-color-gray-900, #111827);
}

.fi-sidebar-item.fi-active
    > .fi-sidebar-item-btn
    > .fi-sidebar-item-grouped-border
    > .fi-sidebar-item-grouped-border-part:where(.dark, .dark *) {
    background-color: var(--std-color-gray-900, #111827);
}

/*
 * A management under the pointer, in the column Filament itself draws — the
 * phone's menu, and the desktop column when it is opened (بند ۲).
 *
 * The three readings of the menu are then one behaviour: the same washed yellow
 * in the header's quick menu, in the column, and in the windows its menus open.
 * A wash and not a fill, so it can never be mistaken for the management the
 * operator is actually standing in, which keeps the solid yellow above.
 *
 * Scoped to the sidebar's own items: nothing else in the panel changes colour
 * under the pointer. The active entry is excluded by the `:not()` — it is
 * filled with the identity itself, and hovering it must not wash it out. The
 * selectors are one step longer than Filament's own for the same reason the
 * rules above them are: both stylesheets are printed after this file, so
 * specificity is what decides, not order.
 */
.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover,
.dark .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover {
    background-color: color-mix(in oklab, var(--warning-400, #fbbf24) 14%, transparent);
}

.dark .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover {
    background-color: color-mix(in oklab, var(--warning-400, #fbbf24) 22%, transparent);
}

/* …and the same for the group headings above them, which open and close the
   menu they belong to. */
.fi-sidebar-group > .fi-sidebar-group-btn:hover,
.dark .fi-sidebar-group > .fi-sidebar-group-btn:hover {
    background-color: color-mix(in oklab, var(--warning-400, #fbbf24) 14%, transparent);
}

.dark .fi-sidebar-group > .fi-sidebar-group-btn:hover {
    background-color: color-mix(in oklab, var(--warning-400, #fbbf24) 22%, transparent);
}