/* The panel's own colour, and the neutrals the menus are drawn with
   (تسک ۱۴۰۵/۰۶/۰۲/۰۳، بند ۷ تا ۱۰).

   Two separate things live here, and both exist because the menus were ported
   from the photo agency panel, which is Filament v5 while this one is v3.

   1. **Filament v3 publishes its palette as channels, not as colours.**
      `--gray-900` is the string «17, 24, 39», so `background-color:
      var(--gray-900)` is not a colour at all: the browser throws the whole
      declaration away. Every colour the ported stylesheets took from a token
      was therefore silently absent here — the menu had no background, no
      border, no hover and no active marker, and its text landed on top of the
      page behind it. That is the overlapping this task is about. The tokens
      below wrap the channels back into `rgb()`, with the stock value as a
      fallback so the menu still has a colour if a token ever disappears.

   2. **The reference panel's yellow is the agency's identity, not ours.**
      Baligpa's is `#1f7957` (بند ۷). Everywhere the agency marks with yellow
      purely as a brand — the management being stood in, the line beside its
      menu, the edge of the window of managements — this panel marks with that
      green instead. Colours that *mean* something (red for an error, amber for
      a warning, the per-menu colours of the dashboard's sections) are not
      touched: بند ۱۰ asks for the brand yellow, not for the palette. */

:root {
    /* بند ۷ — the identity itself, unchanged between the light page and the
       dark one so the menus and the dashboard carry the one colour (بند ۱۳ و
       ۱۵), plus the step darker a filled row takes under the pointer.

       `#1f7957` against the dark page is 3.3:1, which is what a 3px line and an
       icon need; white on `#1f7957` is 5.4:1, which is what بند ۹ asks for
       where the green is a fill rather than a line. */
    --panel-accent: #1f7957;
    --panel-accent-hover: #196146;
    --panel-on-accent: #ffffff;

    /* The same green, washed out, for a management under the pointer
       (بالیگپا-منو-۰۱). It has to be unmistakable and it has to be nothing like
       the filled green of the management being stood in, so it is the identity
       at 12% over the page rather than a lighter green of its own: the filled
       row stays the strongest mark on the menu, and the row under the pointer
       is plainly a wash of the same colour rather than a second state competing
       with it. The text over it is the page's own, not white — this is a tint,
       not a fill. */
    --panel-accent-wash: color-mix(in srgb, var(--panel-accent) 12%, transparent);

    /* The same green, lifted, for the one case the identity itself cannot
       serve: a *word* written in it on the dark page. 3.3:1 is what a line and
       an icon need and not what a run of text needs, so text takes this
       (7.4:1) and everything else takes the identity (بند ۹). */
    --panel-accent-text: var(--panel-accent);

    /* The colour every word in the topbar is written in (بند ۴، ۵ و ۶).

       بند ۴ and بند ۵ ask for the date and the rules between the runs to be
       white, and بند ۶ then asks for exactly one thing in the bar that is not —
       the number of sign-ins. A single token rather than a colour repeated in
       each half of the header, so «the header's own colour» is one decision.

       On the light page the bar is white itself, so white would be nothing at
       all; there it is the panel's ordinary strong text. The dark page — the one
       the task's own screenshots are taken on — takes the white below. */
    --panel-header-text: #374151;

    /* …and the one run in the bar that is *not* that colour besides the tally:
       «دوشنبه : ۲ شهریور ۱۴۰۵» — the day, the colon and the date together, in
       the panel's own yellow (بالیگپا-هدر-۰۱، بند ۱۸).

       The yellow is not invented here either: `Color::Amber` is this panel's
       primary, so the date takes the palette's own shade. Filament v3 publishes
       that palette as *channels* — `--primary-400` is the string «251, 191,
       36» — so it has to be wrapped back into `rgb()` or the browser throws the
       whole declaration away and the date silently stays white. On the light
       page the bar is white itself, so there it takes the darker shade of the
       same amber; the dark page — the one the panel is read on — takes the
       lighter one below. */
    --panel-header-date: rgb(var(--primary-600, 217 119 6));

    /* The title over a dashboard card (بند ۷). White on the dark page the panel
       is read on; on the light page the card is white itself, so there it is the
       page's strongest text instead. */
    --panel-card-title: #111827;

    /* The neutrals, read back out of Filament's own channels so the menu still
       follows the theme rather than pinning a grey of its own. */
    --panel-surface: #ffffff;
    --panel-surface-border: rgb(var(--gray-200, 229 231 235));
    --panel-field-border: rgb(var(--gray-300, 209 213 219));
    --panel-hover: rgb(var(--gray-100, 243 244 246));

    /* The second of the two colours a column's rows alternate between
       (تسک ۱۴۰۵/۰۶/۰۶/۰۴، بند ۳). One step of lightness off the surface the
       menu is drawn on and nothing more — the menu's own hover grey, thinned
       right down — so it is the panel's own palette rather than a colour
       invented for a stripe, and it follows «حالت شب» because `--panel-hover`
       does. It is deliberately far weaker than `--panel-accent-wash`: the
       stripe must never be mistaken for the row under the pointer (بند ۵ و ۶). */
    --panel-zebra: color-mix(in srgb, var(--panel-hover) 45%, transparent);
}

.dark {
    --panel-accent-text: #34bd81;

    /* بند ۴ و ۵ — white, on the dark bar the panel is read on. */
    --panel-header-text: #ffffff;

    /* …and there the date takes the lighter amber, which against the dark bar
       is 9.7:1 (بند ۱۸). */
    --panel-header-date: rgb(var(--primary-400, 251 191 36));

    /* بند ۷ — and the title over a card, on the same dark page. */
    --panel-card-title: #ffffff;

    /* On the dark page a 12% tint of a dark green is invisible, so the wash is
       taken from the lifted shade and given a little more of it. Still a wash:
       measured against the filled row it is far weaker, which is what
       بالیگپا-منو-۰۱ asks for. */
    --panel-accent-wash: color-mix(in srgb, var(--panel-accent-text) 18%, transparent);

    --panel-surface: rgb(var(--gray-900, 17 24 39));
    --panel-surface-border: rgb(var(--gray-700, 55 65 81));
    --panel-field-border: rgb(var(--gray-600, 75 85 99));
    --panel-hover: rgb(var(--gray-800, 31 41 55));
}

/* The column's own list, when Filament draws it rather than the flyout: the
   phone's menu, which this task leaves exactly as it was apart from the colour
   it marks the open management with (بند ۸ — «مدیریت فعال»). It is the same
   filled row the desktop's window draws, so the two readings of the menu agree,
   and the text over it is white rather than green — green on green is 3.3:1,
   which is enough for a line and not for a word (بند ۹).

   Scoped to the sidebar: no button anywhere else in the panel changes colour. */
.fi-sidebar-item-active > .fi-sidebar-item-button,
.dark .fi-sidebar-item-active > .fi-sidebar-item-button {
    background-color: var(--panel-accent);
}

.fi-sidebar-item-active > .fi-sidebar-item-button,
.fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-label,
.fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-icon,
.dark .fi-sidebar-item-active > .fi-sidebar-item-button,
.dark .fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-label,
.dark .fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-icon {
    color: var(--panel-on-accent);
}

/* 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 green
   in the header's quick menu, in the column and in the windows its menus open.

   Scoped to the sidebar's own items: no button anywhere else in the panel
   changes colour under the pointer. The management being stood in is excluded —
   it is filled with the identity itself and must not be washed out by hovering
   it. */
.fi-sidebar-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button:hover,
.dark .fi-sidebar-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button:hover {
    background-color: var(--panel-accent-wash);
}

/* …and the same for the group headings above them, which open and close the
   menu they belong to. */
.fi-sidebar-group-button:hover,
.dark .fi-sidebar-group-button:hover {
    background-color: var(--panel-accent-wash);
}