/* «منوی دسترسی سریع مدیریت‌ها» — the two-column way into every management,
   from the header (الزام منو-۰۱ … ۱۴).

   Colours are the panel's own tokens rather than values chosen here, so the
   menu follows the theme — including «حالت شب» — and the one management the
   operator is standing in is the same yellow the sidebar marks it with. */

/* Nothing of the menu is drawn before Alpine has taken it over: `x-cloak` is
   Filament's own rule, restated here so this block does not depend on which
   stylesheet happens to be loaded. */
.fi-quick-menu [x-cloak] {
    display: none !important;
}

.fi-quick-menu {
    position: relative;
    display: inline-flex;
    align-items: center;

    /* 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 panel's own grey, thinned right
       down — rather than a colour invented for a stripe. It is deliberately far
       weaker than the yellow wash a row takes under the pointer: the stripe
       must never be mistaken for that (بند ۵ و ۶). */
    --fi-quick-menu-zebra: color-mix(in oklab, var(--gray-100, #f3f4f6) 45%, transparent);
}

.dark .fi-quick-menu {
    --fi-quick-menu-zebra: color-mix(in oklab, var(--gray-800, #1f2937) 45%, transparent);
}

/* Desktop only at this stage (الزام منو-۰۲): below the width two columns need,
   the whole block is gone and the header behaves exactly as it did. */
@media (max-width: 1023px) {
    .fi-quick-menu {
        display: none;
    }
}

.fi-quick-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    cursor: pointer;
    color: inherit;
}

.fi-quick-menu-trigger:hover {
    background-color: var(--gray-100, #f3f4f6);
}

.dark .fi-quick-menu-trigger:hover {
    background-color: var(--gray-800, #1f2937);
}

.fi-quick-menu-icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* The menu runs from where it starts down to the foot of the browser window,
   so the menus below the fold are simply there rather than behind a short
   scroll (الزام منو-۰۲). The exact figure is measured in the browser — the bar
   above it is not a fixed height on every screen — and this is the fallback
   for before that measurement, and if it never happens. */
.fi-quick-menu-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    inset-inline-start: 0;
    z-index: 40;
    width: 44rem;
    max-width: 90vw;
    max-height: calc(100dvh - 5.5rem);
    display: flex;
    flex-direction: column;
    border-radius: 0.75rem;
    border: 1px solid var(--gray-200, #e5e7eb);
    background-color: #ffffff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.dark .fi-quick-menu-panel {
    border-color: var(--gray-700, #374151);
    background-color: var(--gray-900, #111827);
}

.fi-quick-menu-search {
    flex: 0 0 auto;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
}

.dark .fi-quick-menu-search {
    border-bottom-color: var(--gray-700, #374151);
}

.fi-quick-menu-search-input {
    width: 100%;
    padding: 0.4rem 0.7rem;
    border-radius: 0.5rem;
    border: 1px solid var(--gray-300, #d1d5db);
    background-color: transparent;
    color: inherit;
    font: inherit;
}

.dark .fi-quick-menu-search-input {
    border-color: var(--gray-600, #4b5563);
}

/* The two columns share whatever height the panel was given, and neither of
   them adds to it: opening a submenu can then not change the first column's
   height, move the page or make the menu jump (الزام منو-۰۳). */
.fi-quick-menu-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 1 1 auto;
    min-height: 16rem;
    overflow: hidden;
}

.fi-quick-menu-groups,
.fi-quick-menu-items-list {
    list-style: none;
    margin: 0;
    padding: 0.5rem;
}

/* The second column's well: the first column's height exactly, with the list
   itself moved down inside it to sit level with the menu the pointer is on
   (الزام منو-۰۱). Nothing of the list escapes the well, so nothing of it can
   escape the panel. */
.fi-quick-menu-items-well {
    order: 2;
    position: relative;
    overflow: hidden;
}

.fi-quick-menu-items {
    position: absolute;
    inset-inline: 0;
    top: 0;
    max-height: 100%;
    overflow-y: auto;
}

.fi-quick-menu-items-list {
    display: block;
}

/* The menus on the right of the pair, the managements of the open one on the
   left — which in a right-to-left panel is the source order reversed
   (الزام منو-۰۳).

   Its scroll is only ever a last resort: on a window too short to hold every
   menu the column scrolls rather than putting an entry out of reach
   (الزام منو-۰۲). */
.fi-quick-menu-groups {
    order: 1;
    max-height: 100%;
    overflow-y: auto;
    border-inline-start: 1px solid var(--gray-200, #e5e7eb);
}

.dark .fi-quick-menu-groups {
    border-inline-start-color: var(--gray-700, #374151);
}

.fi-quick-menu-group,
.fi-quick-menu-item,
.fi-quick-menu-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;

    /* The yellow band down the row's right-hand edge — the panel's own yellow,
       the same one the sidebar's opening window carries on the edge it shares
       with the column (الزام منو-بالا-۰۳ و ۰۵). It is an inset shadow rather
       than an element or a border, so it takes no width from the name, moves no
       word of it and cannot pull one row out of line with the next. The two
       corners it runs between are squared off — in this right-to-left panel
       those are the start corners — so the bands of a column's rows meet and
       read as the one line the sidebar draws, not as a row of ticks. */
    box-shadow: inset -3px 0 0 var(--warning-400, #fbbf24);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

/* ————— بند ۳ و ۴: یکی‌درمیان شدن ردیف‌های هر ستون —————

   A row and the row under it are one step of lightness apart, and that is the
   whole of it: the second colour is the menu's own hover grey thinned right
   down, not a colour invented for a stripe, so the pair belongs to the panel's
   palette on the light page and on the dark one alike (بند ۳). It is meant to
   let the eye follow one row across the column, not to draw a table.

   Each list counts for itself. The managements of a menu are their own `<ul>`,
   so the second column starts again at its own first row rather than carrying
   on the first column's count, and it does so for every menu the pointer opens
   (بند ۴).

   Written inside `:where()` so the stripe carries no weight of its own: the
   wash under the pointer and the fill of the management being stood in are
   plain one-class rules and must win over it — ردیف عادی < یکی‌درمیان <
   قرارگرفتن موس < گزینه فعال (بند ۶). */
:where(.fi-quick-menu-groups > li:nth-child(even)) > .fi-quick-menu-group,
:where(.fi-quick-menu-items-list > li:nth-child(even)) > .fi-quick-menu-item {
    background-color: var(--fi-quick-menu-zebra);
}

/* Icon, then name, one row and one link — the same size and the same distance
   from the name as the sidebar's window gives them, whatever the management
   drew for itself. The space is kept even for a row with no icon of its own, so
   every name in a column starts on the same line (الزام منو-بالا-۰۲). */
.fi-quick-menu-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
}

/* The icon takes the row's own colour rather than one of its own, so the
   pointer marks it with the name and it goes yellow with the management the
   operator is standing in (الزام منو-بالا-۰۴). */
.fi-quick-menu-row-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: inherit;
}

.fi-quick-menu-label {
    flex: 1;
}

/* Hovering a menu opens it, so it is drawn as opened rather than only hovered
   (الزام منو-۰۵). */
/* A management under the pointer takes a wash of the agency's own yellow — a
   tint of the same colour, far weaker than the filled yellow of the management
   being stood in, so the two states cannot be confused (بند ۲). It is the same
   wash in all three readings of the menu. On the dark page a tenth of a yellow
   disappears, so it is given rather more of it there. */
.fi-quick-menu-open,
.fi-quick-menu-group:hover {
    background-color: color-mix(in oklab, var(--warning-400, #fbbf24) 14%, transparent);
    box-shadow: inset -5px 0 0 var(--warning-400, #fbbf24);
}

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

/* Hovering a management only marks it out; it is entered by being clicked
   (بند ۷ و الزام منو-۰۶). */
.fi-quick-menu-item:hover,
.fi-quick-menu-result:hover {
    background-color: color-mix(in oklab, var(--warning-400, #fbbf24) 14%, transparent);
    box-shadow: inset -5px 0 0 var(--warning-400, #fbbf24);
    font-weight: 600;
}

.dark .fi-quick-menu-item:hover,
.dark .fi-quick-menu-result:hover {
    background-color: color-mix(in oklab, var(--warning-400, #fbbf24) 22%, transparent);
}

/* Where the operator is standing: the panel's own yellow, exactly as the
   sidebar marks it (الزام منو-۱۱). */
.fi-quick-menu-current {
    background-color: var(--warning-400, #fbbf24);
    color: var(--gray-950, #030712);
    font-weight: 700;
}

/* …and the menu it belongs to, more quietly — enough to find, not enough to
   compete with the management itself (بند ۱۵). */
.fi-quick-menu-parent {
    box-shadow:
        inset 3px 0 0 var(--warning-400, #fbbf24),
        inset -3px 0 0 var(--warning-400, #fbbf24);
    font-weight: 600;
}

.fi-quick-menu-parent.fi-quick-menu-open,
.fi-quick-menu-parent:hover {
    box-shadow:
        inset 3px 0 0 var(--warning-400, #fbbf24),
        inset -5px 0 0 var(--warning-400, #fbbf24);
}

.fi-quick-menu-chevron {
    opacity: 0.55;
}

.fi-quick-menu-results {
    padding: 0.5rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.fi-quick-menu-result-path {
    font-size: 0.8rem;
    opacity: 0.7;
}

.fi-quick-menu-empty {
    margin: 0;
    padding: 0.75rem;
    text-align: center;
    opacity: 0.7;
}

/* ————— بند ۷ … ۱۳: «باز کردن در تب جدید» —————

   The icon is part of the row and is deliberately not part of the row's link:
   an anchor cannot hold another anchor, so it is a second one laid over the end
   of the row. That is what makes a click on it never also a click on the
   management (بند ۹), and it leaves the row one background, one hover and one
   filled state across its whole width.

   Its slot is kept whether or not the row has one, so no name moves between two
   rows, nothing collides with a long name, and every icon of a column stands on
   the same line (بند ۱۱). */
.fi-quick-menu-row {
    position: relative;
}

.fi-quick-menu-item,
.fi-quick-menu-result,
.fi-quick-menu-group.fi-quick-menu-has-newtab {
    padding-inline-end: 2.15rem;
}

/* Small and quiet — less present than the management's own name until the
   pointer reaches it, and then plainly a control (بند ۱۰). */
.fi-quick-menu-newtab {
    position: absolute;
    inset-inline-end: 0.3rem;
    top: 50%;
    translate: 0 -50%;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 0.375rem;
    color: inherit;
    opacity: 0.42;
    text-decoration: none;
}

.fi-quick-menu-newtab svg {
    width: 1rem;
    height: 1rem;
}

.fi-quick-menu-newtab:hover,
.fi-quick-menu-newtab:focus-visible {
    opacity: 1;
    background-color: color-mix(in oklab, var(--warning-400, #fbbf24) 14%, transparent);
}

/* Over the filled row of the management being stood in, the icon takes the
   colour that fill is written in rather than the page's own. */
.fi-quick-menu-row-current > .fi-quick-menu-newtab {
    color: var(--gray-950, #030712);
    opacity: 0.7;
}

.fi-quick-menu-row-current > .fi-quick-menu-newtab:hover,
.fi-quick-menu-row-current > .fi-quick-menu-newtab:focus-visible {
    opacity: 1;
    background-color: transparent;
}

/* ── الزام گالری-۰۱۶، ۰۱۷ و ۰۱۸ و گالری-ظاهر-۰۰۱ و ۰۰۲: the count beside a
      management's name ────────────────────────────────────────────────────── */

/* Its box is `.fi-menu-count`, and it is not drawn here any more. تسک
   ۱۴۰۵/۰۶/۱۶/۰۱ made the counter a thing every menu of this panel draws rather
   than a thing this menu drew, so the one rule that says what it looks like
   moved to `agency-navigation.css` — one box, one rule, and an appearance
   changed once (شمارنده-سراسری-۰۰۹). Only what belongs to *this* menu stays
   here: how the box reads over a row the pointer has turned yellow. */
.fi-quick-menu-item:hover .fi-menu-count,
.fi-quick-menu-row-current .fi-menu-count,
.fi-quick-menu-current .fi-menu-count {
    border-color: var(--danger-600, #dc2626);
    background-color: var(--danger-600, #dc2626);
    color: #ffffff;
}