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

   «منوی جمع‌شده مدیریت‌ها» — the sidebar drawn closed, each menu opening its
   managements in a window beside it.

   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 about *which* menus exist, what they are called, what order they come
   in, who may see them or where they lead is decided here; that is
   `QuickAccessMenu`, and this task changed none of it. */

/* Nothing 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 first. */
.fi-sidebar-flyout [x-cloak],
.fi-sidebar-flyout-layer[x-cloak] {
    display: none !important;
}

/* Desktop only. Below the width the window needs, this
   whole reading is gone and Filament's own open groups are back, so the phone's
   menu is exactly what it was. */
@media (max-width: 1023px) {
    .fi-sidebar-flyout,
    .fi-sidebar-flyout-layer {
        display: none !important;
    }
}

/* …and on the desktop the open, vertical lists give way to the closed column.
   The sidebar itself is untouched: same width, same order, same names — only
   the managements under each menu are no longer printed beneath it. */
@media (min-width: 1024px) {
    .fi-sidebar-nav > .fi-sidebar-nav-groups {
        display: none;
    }
}

.fi-sidebar-flyout-groups {
    list-style: none;
    margin: 0;
    /* The room a half-scrolled last menu needs to clear the column's footer
       rather than being cut against it (بند ۶ — «اسکرول منظم باشد»). */
    padding: 0 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.fi-sidebar-flyout-group,
.fi-sidebar-flyout-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1.5rem;
}

/* A long menu name wraps inside its own row and takes the row's height with it,
   rather than running out of the column and across whatever is beside it
   (بند ۴). Two lines is the cap; no management in the panel is named long
   enough to reach it, and past it the name is cut rather than allowed to push
   the window wider than the page. */
.fi-sidebar-flyout-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;
}

/* هر منو هم آیکون خودش را دارد، دقیقاً به همان اندازه و با همان فاصله‌ای که
   مدیریت‌های داخل پنجره کنارش دارند، تا ستون یک ردیف آیکون هم‌تراز باشد
   (تسک ۱۴۰۵/۰۶/۰۲/۱۱، الزام ۴). آیکون رنگ خودِ ردیف را می‌گیرد، پس با نام منو
   با هم روشن و با هم تیره می‌شوند. */
.fi-sidebar-flyout-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
}

.fi-sidebar-flyout-row-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: inherit;
}

.fi-sidebar-flyout-chevron {
    flex: 0 0 auto;
    opacity: 0.55;
    font-size: 1rem;
    line-height: 1;
}

/* Hovering a menu opens its window, so it is drawn as opened rather than only
   hovered. */
.fi-sidebar-flyout-open,
.fi-sidebar-flyout-entry:hover {
    background-color: var(--panel-accent-wash);
}

/* The menu holding the management the operator is standing in: marked, not
   filled — enough to say which way they came, not enough to compete with the
   management itself, which is the green one (بند ۸). */
.fi-sidebar-flyout-parent {
    box-shadow: inset 3px 0 0 var(--panel-accent);
    font-weight: 600;
}

/* The window itself, out at the page body so the sidebar cannot clip it. It is
   placed against the menu it belongs to by the browser, and kept inside the
   visible page; anything taller than that scrolls inside it.

   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 every management in this window
   was printed straight over the page behind it (بند ۲ و ۴). */
.fi-sidebar-flyout-layer {
    position: fixed;
    z-index: 45;
    min-width: 13rem;
    max-width: min(22rem, 60vw);
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
    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.25);

    /* The band down the window's edge against the column: Baligpa's own green,
       the whole height of the window, and the same width whichever menu is
       open, so it says which menu this window belongs to without moving a word
       of it. It is the border the window already had, widened and coloured on
       that one side — not an element of its own, which would have taken width
       from the text. */
    border-inline-start-width: 3px;
    border-inline-start-color: var(--panel-accent);
}

.fi-sidebar-flyout-panel {
    list-style: none;
    margin: 0;
    padding: 0.375rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

/* Icon, then name — one row, one link, one target to click. */
.fi-sidebar-flyout-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: inherit;
    font-size: 0.875rem;
    line-height: 1.5rem;
}

/* Every icon the same size and the same distance from its name, whatever the
   management drew for itself, and the row's own height around it. */
.fi-sidebar-flyout-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
}

/* A management's name is wrapped rather than pushed past the window's edge, on
   the same two-line cap as the column's own menus (بند ۴): the row grows to
   hold it and the rows below simply move down, which is what keeps one name off
   another however long the management is called. */
.fi-sidebar-flyout-item-label {
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: break-word;
}

/* The pointer marks the whole row, icon included: the icon takes the row's own
   colour rather than one of its own, so it follows the name into the green of
   the management the operator is standing in. */
.fi-sidebar-flyout-item-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: inherit;
}

/* Moving the pointer over a management only marks it out; it is entered by
   being clicked. */
.fi-sidebar-flyout-item:hover {
    background-color: var(--panel-accent-wash);
    font-weight: 600;
}

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

.fi-sidebar-flyout-item.fi-sidebar-flyout-current:hover {
    background-color: var(--panel-accent-hover);
    color: var(--panel-on-accent);
}