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

   «باز و بسته کردن ستون مدیریت‌ها» — the triangle beside the panel's name, and
   the layout it decides. Its colours come from `panel-identity.css`.

   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-panel-sidebar-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.fi-panel-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-panel-sidebar-toggle:hover {
    background-color: var(--panel-hover);
}

/* 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-panel-sidebar-toggle-icon {
    width: 0.85rem;
    height: 0.85rem;
    transition: none;
    /* The crawler's own blue rather than the grey of the text around it
       (بند ۱۵): the one control that decides the whole edge 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 pages — `panel-identity.css` says why
       that is the right one of the two blues. The opening and closing itself is
       untouched. */
    color: var(--panel-accent);
}

.fi-panel-sidebar-toggle-open .fi-panel-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-panel-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-panel-sidebar-open) .fi-main-sidebar {
        display: none;
    }

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

/* «پیش‌فرض من» — the tick that saves whichever state the column is in as this
   employee'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. */
.fi-panel-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(--panel-accent-text);
}

.fi-panel-sidebar-default-input {
    width: 0.8rem;
    height: 0.8rem;
    accent-color: var(--panel-accent);
    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-panel-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-panel-sidebar-default-label {
        display: none;
    }
}