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

   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;
    /* Baligpa's own green rather than the grey of the text around it
       (بالیگپا-منو-۰۲): the one control that decides the whole left 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 greens. */
    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-sidebar {
        display: none;
    }

    /* The column's own header goes with it on the desktop: the panel's name
       and the triangle are in the topbar now, and Filament's own collapse
       buttons would be a second, competing way to put the column away. The
       phone keeps its header exactly as it was. */
    .fi-sidebar-header {
        display: none;
    }

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

/* The panel's own round mark, between the quick menu's icon and the panel's name
   (تسک ۱۴۰۵/۰۶/۰۲/۱۳، الزام ۵).

   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
   the crawler's and the photo agency's rule word for word and only the file it
   points at differs — green 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 icon. الزام ۱
   asks for one pattern across the three panels, so those are the numbers here
   whatever each bar's own spacing happens to be.

   Which is why the one margin written is negative. This bar puts 12px between
   everything in it: 12px to the name is what it already gives, and the 6px to
   the quick menu's icon is that same 12px taken back by half. A positive margin
   here would have added to the bar's gap rather than replacing it, and the mark
   sat twice as far from the name as the reference image has it.

   `flex: none` matters: the bar is a flex row, and without it a narrow one would
   squash the mark into an ellipse rather than leaving it alone. It is the one
   element here 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;
}

/* Desktop only, exactly like the name it stands beside. Below this width
   Filament v3 draws the panel's name at the head of the column instead, and a
   mark alone in the bar would be a mark beside nothing — «فاصله آن از عنوان
   سامانه» has no meaning where there is no title to measure from. */
@media (max-width: 1023px) {
    .fi-panel-logo {
        display: none;
    }
}

/* The panel's name, between the two controls. Filament v3 draws it at the head
   of the column, which is now closed by default; this is the same name in the
   header, where the reference panel has it. */
.fi-panel-brand {
    font-size: 0.95rem;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

/* Desktop only, like the two controls it sits between: on a phone the column's
   own header is untouched and already carries the name. */
@media (max-width: 1023px) {
    .fi-panel-brand {
        display: none;
    }
}

/* «پیش‌فرض من» — 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;
    }
}