/* «منوی جمع‌شده مدیریت‌ها» — the sidebar drawn closed, each menu opening its
   managements in a window beside it (الزام منو-کنار-۰۱ … ۰۹).

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

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

.fi-sidebar-flyout-label {
    flex: 1;
}

/* هر منو هم آیکون خودش را دارد، دقیقاً به همان اندازه و با همان فاصله‌ای که
   مدیریت‌های داخل پنجره کنارش دارند، تا ستون یک ردیف آیکون هم‌تراز باشد و
   نه دو اندازه مختلف (تسک ۱۴۰۵/۰۶/۰۲/۱۱، الزام ۴). آیکون رنگ خودِ ردیف را
   می‌گیرد، پس با نام منو با هم روشن و با هم تیره می‌شوند. */
.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 {
    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 (الزام منو-کنار-۰۲). */
/* 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-sidebar-flyout-open,
.fi-sidebar-flyout-entry:hover {
    background-color: color-mix(in oklab, var(--warning-400, #fbbf24) 14%, transparent);
}

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

/* 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 yellow one (بند ۱۰). */
.fi-sidebar-flyout-parent {
    box-shadow: inset 3px 0 0 var(--warning-400, #fbbf24);
    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 (بند ۴). */
.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(--gray-200, #e5e7eb);
    background-color: #ffffff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.dark .fi-sidebar-flyout-layer {
    border-color: var(--gray-700, #374151);
    background-color: var(--gray-900, #111827);
}

/* The band down the window's edge against the column: the panel's own yellow,
   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. */
.fi-sidebar-flyout-layer {
    border-inline-start-width: 3px;
    border-inline-start-color: var(--warning-400, #fbbf24);
}

.dark .fi-sidebar-flyout-layer {
    border-inline-start-color: var(--warning-400, #fbbf24);
}

.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;
    white-space: nowrap;
}

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

/* 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 yellow 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: color-mix(in oklab, var(--warning-400, #fbbf24) 14%, transparent);
    font-weight: 600;
}

.dark .fi-sidebar-flyout-item: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 and the quick menu mark it (الزام منو-کنار-۰۵). */
.fi-sidebar-flyout-current {
    background-color: var(--warning-400, #fbbf24);
    color: var(--gray-950, #030712);
    font-weight: 700;
}

.fi-sidebar-flyout-item.fi-sidebar-flyout-current:hover,
.dark .fi-sidebar-flyout-item.fi-sidebar-flyout-current:hover {
    background-color: var(--warning-500, #f59e0b);
    color: var(--gray-950, #030712);
}

/* تسک ۱۴۰۵/۰۷/۰۲/۱۰-۰۲ — the line an operator sees in the rare case a window
   was resized across ۱۰۲۴px and the reading it now needs has to be fetched.

   Only ever inside the region being filled, so nothing else on the page is
   blocked or dimmed, and it borrows the colours around it rather than naming
   any (بند ۲۲ — «فقط محدوده مرتبط را درگیر کند»). */
.fi-panel-menu-lazy-note {
    padding: 0.75rem 0.5rem;
    color: inherit;
    opacity: 0.75;
}

.fi-panel-menu-lazy-error {
    opacity: 1;
}

.fi-panel-menu-lazy-error button {
    margin-inline-start: 0.375rem;
    text-decoration: underline;
    cursor: pointer;
    color: inherit;
    background: none;
    border: 0;
    font: inherit;
}