/* The panel's own colour (تسک ۱۴۰۵/۰۶/۰۲/۰۳، بند ۱۱ تا ۱۳ و ۱۶).

   The menus were ported from the photo agency panel and came over in that
   panel's yellow. The structure they came with is right and this task changes
   none of it (بند ۱۱ و ۱۶) — only the colour, and only to the crawler's own.

   **Which colour is not a choice made here.** بند ۱۱ و ۱۲ say to read it off the
   «پایش سامانه» card of this very dashboard rather than to invent something
   near it, and that card is built from one value: `#0ea5e9`. Its background is
   that colour at 12%, its border at 35%, the square behind its icon at 25%; the
   light page draws the same three as the 100/300 shades of the same family.
   So `#0ea5e9` is the crawler's identity, and the card it was read off is left
   exactly as it is.

   Filament v5 publishes its palette as colours, so the neutrals below are its
   own tokens used directly. (The same stylesheets in `baligpa-admin` cannot do
   that: Filament v3 publishes channels, and this file there wraps them back
   into `rgb()`. The two panels are otherwise identical, deliberately.) */

:root {
    /* The identity itself, and the step darker a filled row takes under the
       pointer — sky 600, the next shade down the card's own family. */
    --panel-accent: #0ea5e9;
    --panel-accent-hover: #0284c7;

    /* The name written on a filled row. The card's own text is sky 900, which
       against the accent itself is 3.4:1 — enough for a line, not for a word —
       so the row takes the next step down the same family, at 5.0:1. */
    --panel-on-accent: #082f49;

    /* …and the identity as *text* rather than as a fill: on the dark page the
       accent is already 5.5:1 against it, so there is nothing to lift. */
    --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 groups to be
       white, and بند ۱۴ then asks for exactly one thing in the bar that is not —
       the number of sign-ins, in the crawler's own blue. A single token rather
       than a colour repeated in each half of the header.

       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 screenshot is taken on — takes the white below. */
    --panel-header-text: #374151;

    /* …and the one word in the bar that is *not* that colour besides the tally:
       the day and the date, in the crawler's own blue (کراولر-هدر-۰۱، بند ۹).

       On the light page the bar is white, and `#0ea5e9` on white is 2.8:1 —
       enough for a line and not for a run of words — so there the same blue is
       taken two steps down its own family, at 5.7:1. The dark page, which the
       task's screenshot is taken on, takes the identity itself below: against
       that background it is already 5.5:1. One token either way, so «the colour
       of the date» is one decision rather than a colour repeated per theme. */
    --panel-header-date: #0369a1;

    /* The lighter and darker steps of the identity the dashboard's cards are
       drawn with (بند ۱۹): the line down a card's edge, the wash it takes under
       the pointer, and the bar over the group's own name. All three are the one
       blue at different strengths rather than three blues near each other. */
    --panel-accent-edge: color-mix(in srgb, var(--panel-accent) 65%, transparent);
    --panel-accent-tint: color-mix(in srgb, var(--panel-accent) 8%, transparent);

    /* The same blue, washed out, for a management under the pointer (بند ۱۴).
       It has to be unmistakable and it has to be nothing like the filled blue of
       the management being stood in, so it is the identity at 12% over the page
       rather than a lighter blue 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 the on-accent colour — this is a tint, not a
       fill. */
    --panel-accent-wash: color-mix(in srgb, var(--panel-accent) 12%, transparent);

    /* The neutrals, from the panel's own palette so the menu follows the theme
       rather than pinning a grey of its own. */
    --panel-surface: #ffffff;
    --panel-surface-border: var(--gray-200);
    --panel-field-border: var(--gray-300);
    --panel-hover: var(--gray-100);

    /* 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 {
    /* بند ۱۲ و ۱۳ — white, on the dark bar the panel is read on. */
    --panel-header-text: #ffffff;

    /* …and there the date takes the identity itself (بند ۹). */
    --panel-header-date: var(--panel-accent-text);

    /* …and a tint of a blue over a dark page needs a little more of it to be
       seen at all, exactly like the menu's wash below. */
    --panel-accent-tint: color-mix(in srgb, var(--panel-accent) 14%, transparent);

    /* On the dark page a 12% tint reads as almost nothing, so the wash is given
       a little more of the same blue. 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) 20%, transparent);

    --panel-surface: var(--gray-900);
    --panel-surface-border: var(--gray-700);
    --panel-field-border: var(--gray-600);
    --panel-hover: var(--gray-800);
}

/* 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.

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

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon,
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .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 blue 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, which is exactly the confusion بند ۱۴ warns against. */
.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: 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-btn:hover,
.dark .fi-sidebar-group-btn:hover {
    background-color: var(--panel-accent-wash);
}

/* «بخش پایین مربوط به خروج، به‌صورت کامل قرمز شود» (بند ۸).

   Filament draws a `danger` item in red words on the window's own background;
   the task asks for the whole strip. The account window is teleported to the end
   of the page when it opens, so this is written against the class the item
   itself carries rather than against anything containing `.fi-user-menu`.

   The three display modes above it are untouched — بند ۸ says their logic and
   their appearance stay as they are. */
.fi-user-menu-logout,
.fi-dropdown-list-item.fi-user-menu-logout {
    background-color: #dc2626;
    color: #ffffff;
}

.fi-user-menu-logout:hover,
.fi-dropdown-list-item.fi-user-menu-logout:hover {
    background-color: #b91c1c;
}

.fi-user-menu-logout .fi-dropdown-list-item-label,
.fi-user-menu-logout .fi-icon,
.fi-user-menu-logout svg {
    color: #ffffff;
}

/* The panel's own round mark, beside its name in the header
   (تسک ۱۴۰۵/۰۶/۰۲/۱۳، الزام ۱ و ۲).

   The task hands over three logo files and one placement: the crawler's header
   is the reference image and the other two panels copy it exactly, so this rule
   is identical in all three repositories and only the file it points at differs.

   **The numbers are read off the reference image, not chosen.** In it the mark
   is a 30px square inside a 57px bar and vertically centred in it; this panel's
   bar is 64px, so the mark is 34px — `2.125rem` — and the ratio, the centring
   and the two gaps carry over unchanged: 12px to the name, 6px to the quick
   menu's icon.

   Only one of those two is written here. Filament's own link around the panel's
   name already carries 12px of padding on the side the mark sits, and that is
   exactly the gap the reference image asks for — a margin here as well drew the
   mark twice as far from the name as the image has it. `margin-inline-start` is
   the 6px on the other side, which nothing else supplies.

   `flex: none` matters: `.fi-topbar-start` is a flex row, and without it a
   narrow bar would squash the mark into an ellipse rather than leaving it
   alone. It is the one element here that must never be resized to fit. */
.fi-panel-logo {
    flex: none;
    width: 2.125rem;
    height: 2.125rem;
    margin-inline-start: 0.375rem;
    object-fit: contain;
    /* The bar is a flex row and its items stretch by default, so the mark is
       centred against the name and the icon on either side of it rather than
       being pulled to the full height of the row. */
    align-self: center;
}