/* Ported from the photo agency panel, which this task names as the reference
   for appearance and behaviour alike (تسک ۱۴۰۵/۰۶/۰۲).

   «منوی دسترسی سریع مدیریت‌ها» — the two-column way into every management,
   from the header.

   Colours come from `panel-identity.css`: the neutrals so the menu follows the
   theme, «حالت شب» included, and `--panel-accent` — Baligpa's own green — where
   the reference panel marks with its yellow (تسک ۱۴۰۵/۰۶/۰۲/۰۳، بند ۷ و ۸). */

/* 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;
}

/* 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(--panel-hover);
}

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

   Its background is opaque on both pages. It was not on the dark one — the
   colour it asked for was a Filament v3 channel triplet rather than a colour,
   so the browser dropped the declaration and the whole menu was printed
   straight over the dashboard behind it (بند ۲ و ۴). */
.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(--panel-surface-border);
    background-color: var(--panel-surface);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.fi-quick-menu-search {
    flex: 0 0 auto;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--panel-surface-border);
}

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

/* 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(--panel-surface-border);
}

.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 green band down the row's right-hand edge — Baligpa's own colour, 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(--panel-accent);
    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(--panel-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 green with the management the
   operator is standing in. */
.fi-quick-menu-row-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: inherit;
}

/* A long name wraps inside its own row and takes the row's height with it,
   rather than running under the neighbouring column (بند ۴). Two lines is the
   cap, and past that it is cut with an ellipsis. */
.fi-quick-menu-label {
    flex: 1;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: break-word;
}

/* Hovering a menu opens it, so it is drawn as opened rather than only hovered —
   in the washed green every management under the pointer now takes
   (بالیگپا-منو-۰۱). */
.fi-quick-menu-open,
.fi-quick-menu-group:hover {
    background-color: var(--panel-accent-wash);
    box-shadow: inset -5px 0 0 var(--panel-accent);
}

/* Hovering a management only marks it out; it is entered by being clicked. The
   wash is plainly the panel's own green and plainly not the filled green of the
   management being stood in, which keeps the stronger mark (بالیگپا-منو-۰۱). */
.fi-quick-menu-item:hover,
.fi-quick-menu-result:hover {
    background-color: var(--panel-accent-wash);
    box-shadow: inset -5px 0 0 var(--panel-accent);
    font-weight: 600;
}

/* Where the operator is standing: Baligpa's own green, exactly as the sidebar
   marks it, with a light text over it (بند ۸ و ۹). */
.fi-quick-menu-current {
    background-color: var(--panel-accent);
    color: var(--panel-on-accent);
    font-weight: 700;
}

.fi-quick-menu-item.fi-quick-menu-current:hover,
.fi-quick-menu-result.fi-quick-menu-current:hover {
    background-color: var(--panel-accent-hover);
    color: var(--panel-on-accent);
}

/* …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(--panel-accent),
        inset -3px 0 0 var(--panel-accent);
    font-weight: 600;
}

.fi-quick-menu-parent.fi-quick-menu-open,
.fi-quick-menu-parent:hover {
    box-shadow:
        inset 3px 0 0 var(--panel-accent),
        inset -5px 0 0 var(--panel-accent);
}

.fi-quick-menu-chevron {
    flex: 0 0 auto;
    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: var(--panel-accent-wash);
}

/* 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(--panel-on-accent);
    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;
}