/* «باز و بسته کردن ستون مدیریت‌ها» — the triangle beside the panel's name, and
   the layout it decides (الزام ستون-۰۱ … ۰۸).

   Everything here hangs off one class on the page's root element. Without it
   the column is closed, which is the state the panel is entered in; with it the
   panel is exactly what it was before this existed. */

/* The triangle and the tick beside it are one control in the header, so they
   are spaced as one (بند ۱). */
.fi-agency-sidebar-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.fi-agency-sidebar-toggle {
    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-agency-sidebar-toggle:hover {
    background-color: var(--gray-100, #f3f4f6);
}

.dark .fi-agency-sidebar-toggle:hover {
    background-color: var(--gray-800, #1f2937);
}

/* The triangle points down while the column is closed and towards the column —
   the panel's right — while it is open. No transition on purpose: the drawing
   is meant to answer the click, not to catch up with it (الزام ستون-۰۳). */
.fi-agency-sidebar-toggle-icon {
    width: 0.85rem;
    height: 0.85rem;
    transition: none;
    /* The agency's own yellow rather than the grey of the text around it
       (بند ۱ و ۲۲): the one control that decides the whole side of the panel is
       drawn in the panel's colour. It is a shape and not a run of text, so it
       takes the identity itself on both the light page and the dark one. */
    color: var(--warning-400, #fbbf24);
}

.fi-agency-sidebar-toggle-open .fi-agency-sidebar-toggle-icon {
    rotate: -90deg;
}

/* Desktop only at this stage: below the width the column needs there is no
   button and no closed column, and the phone's menu is what it always was
   (الزام ستون-۰۸). */
@media (max-width: 1023px) {
    .fi-agency-sidebar-toggle {
        display: none;
    }
}

/* The column itself, and the space it took. Closed it is not drawn at all, so
   the page's own content has the width rather than an empty strip
   (الزام ستون-۰۵) — and the window its menus open in goes with it, since
   there is no longer a menu to open it from. */
@media (min-width: 1024px) {
    html:not(.fi-agency-sidebar-open) .fi-main-sidebar {
        display: none;
    }

    html:not(.fi-agency-sidebar-open) .fi-sidebar-flyout-layer {
        display: none !important;
    }
}

/* «پیش‌فرض من» — the tick that saves whichever state the column is standing in
   as this operator's own default (بند ۱).

   Beside the triangle rather than inside a settings window: the state it saves
   is the one on screen, so the two controls have to be read together. Small and
   quiet — it is a setting, not an action the header should shout about — and in
   the same yellow as the triangle it belongs to. */
.fi-agency-sidebar-default {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--warning-400, #fbbf24);
}

.fi-agency-sidebar-default-input {
    width: 0.8rem;
    height: 0.8rem;
    accent-color: var(--warning-500, #f59e0b);
    cursor: pointer;
}

/* Desktop only, like the triangle whose state it saves: on a phone there is no
   column to open or close and the menu is what it always was. */
@media (max-width: 1023px) {
    .fi-agency-sidebar-default {
        display: none;
    }
}

/* The bar is a tight space; below the width the words fit, the tick stays and
   its label goes. */
@media (max-width: 1279px) {
    .fi-agency-sidebar-default-label {
        display: none;
    }
}

/* The panel's own round mark, between the quick menu's icon and «آژانس عکس
   بالیگپا» (تسک ۱۴۰۵/۰۶/۰۲/۱۳، الزام ۷).

   The task hands over three logo files and one placement: the crawler's header
   is the reference image and this panel copies it exactly, so the rule below is
   that panel's and Baligpa's word for word and only the file it points at
   differs — gold here.

   **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 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. Filament's own link around the panel's name already carries the twelve,
   so the only margin written here is the six on the other side.

   `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 in the bar 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;
    align-self: center;
}