/* «استانداردسازی سراسری سربرگ‌ها و ابزارهای جدول» — تسک ۱۴۰۵/۰۷/۳۰.

   برای همهٔ جدول‌های پنل، بدون فهرست صفحه:

   ۱. نوار ابزار جدول، از چپ به راست: «جابه‌جایی ستون‌ها» از لبهٔ چپ همان جدول،
      انتخابگر فیلدهای جست‌وجو چسبیده (۰ پیکسل) به کادر جست‌وجو، و دکمهٔ فیلتر.
      همه ۳۶ پیکسل. ترتیب با `order` چیده می‌شود و نه با جابه‌جایی عناصر، پس هر
      کنترل همان کنترل خود فیلامنت است و به همان جدول وصل می‌ماند.
   ۲. پنجرهٔ ستون‌ها: «اعمال ستون‌ها» تمام‌عرض بالا و پایین و فهرست با اسکرول
      مستقل میانشان؛ پنجره هرگز از صفحه بیرون نمی‌زند.
   ۳. قیف زرد راهنما پیش از نام مدیریت و خط ۳ پیکسلی، ۷ پیکسل زیر خودِ نام.

   **بدون :has() و بدون انتخابگر وابسته به style:** تجربهٔ آژانس (تسک ۰۳ آنجا)
   نشان داد یک :has() روی ویژگی style با هر تعامل کل صفحه را دوباره محاسبه
   می‌کند. همهٔ قاعده‌ها اینجا روی کلاس‌های خود همین مؤلفه‌ها نوشته شده‌اند. */

:root {
    --pts-control-h: 36px;
    --pts-accent: #f59e0b;
    --pts-accent-strong: #d97706;
    --pts-line: var(--baligpa-table-header-bg);
}

[x-cloak] {
    display: none !important;
}

/* ── ۱. نوار ابزار ─────────────────────────────────────────────────────────── */

/* Filament's own column control is replaced by «جابه‌جایی ستون‌ها», drawn just
   before it. Adjacent-sibling only: nothing is asked of any other element. */
.pts-colman + .fi-ta-col-toggle {
    display: none;
}

/* RTL row: the first in order sits rightmost. Filter right of the search box, the
   picker left of it (it is inside the search field), the column button last —
   at the table's left edge — after any of the page's own buttons. */
.fi-ta-header-toolbar .fi-ta-filters-dropdown,
.fi-ta-header-toolbar .fi-ta-filters-modal {
    order: -1;
}

.fi-ta-header-toolbar .pts-colman {
    order: 99;
}

/* The search group: box and picker as one piece, two controls. */
.fi-ta-search-field.pts-search-group {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.pts-search-group .pts-search-input {
    min-width: 0;
    flex: 1 1 auto;
    height: var(--pts-control-h);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.pts-search-group .pts-search-input:focus-within {
    z-index: 1;
}

.pts-sfp {
    position: relative;
    display: flex;
    flex: 0 0 auto;
}

.pts-sfp-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: var(--pts-control-h);
    padding-inline: 0.5rem;
    /* Joined at 0px: the box's ring and this border share one pixel. */
    margin-inline-start: -1px;
    border: 1px solid rgba(var(--gray-950), 0.1);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: 0.5rem;
    border-end-end-radius: 0.5rem;
    background: #fff;
    color: rgb(var(--gray-500));
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

.dark .pts-sfp-trigger {
    background: rgb(255 255 255 / 0.05);
    border-color: rgb(255 255 255 / 0.2);
    color: rgb(var(--gray-400));
}

.pts-sfp-trigger:focus-visible {
    outline: 2px solid var(--pts-accent);
    outline-offset: 1px;
    position: relative;
    z-index: 2;
}

.pts-sfp-trigger[aria-expanded="true"] {
    border-color: var(--pts-accent);
}

.pts-sfp-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.pts-sfp-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline: 0.25rem;
    border-radius: 999px;
    background: var(--pts-accent);
    color: #1f2937;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.pts-sfp-panel {
    position: absolute;
    top: calc(100% + 0.375rem);
    inset-inline-end: 0;
    z-index: 40;
    width: max-content;
    min-width: 14rem;
    max-width: min(20rem, calc(100vw - 2rem));
    padding: 0.75rem;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 10px 25px rgb(0 0 0 / 0.15), 0 0 0 1px rgba(var(--gray-950), 0.05);
}

.dark .pts-sfp-panel {
    background: rgb(var(--gray-900));
    box-shadow: 0 10px 25px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.1);
}

.pts-sfp-title {
    margin-bottom: 0.5rem;
    color: var(--pts-accent-strong);
    font-size: 0.875rem;
    font-weight: 700;
}

.dark .pts-sfp-title {
    color: var(--pts-accent);
}

.pts-sfp-list {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    max-height: min(18rem, 50vh);
    overflow-y: auto;
}

.pts-sfp-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2rem;
    padding-inline: 0.25rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.pts-sfp-option:hover {
    background: rgb(var(--gray-50));
}

.dark .pts-sfp-option:hover {
    background: rgb(255 255 255 / 0.05);
}

.pts-sfp-hint,
.pts-sfp-warning {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: rgb(var(--gray-500));
}

.pts-sfp-warning {
    color: rgb(var(--danger-600));
    font-weight: 600;
}

.pts-check {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    border-radius: 0.25rem;
    accent-color: var(--pts-accent);
    /* The panel's form styles paint a ticked box in currentColor. */
    color: var(--pts-accent-strong);
    cursor: pointer;
}

.pts-check:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* The tick beside a searchable column's title, on the green header row. */
.pts-hc-check {
    margin-inline-end: 0.25rem;
}

/* «جابه‌جایی ستون‌ها» */
.pts-colman {
    position: relative;
    flex: 0 0 auto;
}

.pts-colman-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: var(--pts-control-h);
    padding-inline: 0.75rem;
    border: 1px solid rgba(var(--gray-950), 0.1);
    border-radius: 0.5rem;
    background: #fff;
    color: rgb(var(--gray-700));
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

.pts-colman-trigger:hover {
    background: rgb(var(--gray-50));
}

.dark .pts-colman-trigger {
    background: rgb(255 255 255 / 0.05);
    border-color: rgb(255 255 255 / 0.2);
    color: rgb(var(--gray-200));
}

.pts-colman-trigger:focus-visible {
    outline: 2px solid var(--pts-accent);
    outline-offset: 1px;
}

.pts-colman-icon {
    width: 1rem;
    height: 1rem;
    color: rgb(var(--gray-400));
}

.pts-colman-panel {
    position: absolute;
    top: calc(100% + 0.375rem);
    /* Opens toward the table, from the left edge it stands on. */
    left: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 18rem;
    max-width: calc(100vw - 1.5rem);
    max-height: min(32rem, calc(100dvh - 9rem));
    padding: 0.625rem;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 10px 25px rgb(0 0 0 / 0.15), 0 0 0 1px rgba(var(--gray-950), 0.05);
}

.dark .pts-colman-panel {
    background: rgb(var(--gray-900));
    box-shadow: 0 10px 25px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.1);
}

.pts-colman-apply {
    flex: 0 0 auto;
    width: 100%;
    height: var(--pts-control-h);
    border-radius: 0.5rem;
    background: var(--pts-accent-strong);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    text-align: center;
}

.pts-colman-apply:hover {
    background: #b45309;
}

.pts-colman-apply:disabled {
    opacity: 0.6;
    cursor: wait;
}

.pts-colman-apply:focus-visible {
    outline: 2px solid var(--pts-accent);
    outline-offset: 2px;
}

.pts-colman-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pts-colman-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding-inline: 0.375rem;
    border-radius: 0.375rem;
}

.pts-colman-item:hover {
    background: rgb(var(--gray-50));
}

.dark .pts-colman-item:hover {
    background: rgb(255 255 255 / 0.05);
}

.pts-colman-item.fi-sortable-ghost {
    opacity: 0.4;
}

.pts-colman-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.pts-colman-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: 0.375rem;
    color: rgb(var(--gray-400));
    cursor: grab;
    touch-action: none;
}

.pts-colman-handle svg {
    width: 1.25rem;
    height: 1.25rem;
}

.pts-colman-handle:focus-visible {
    outline: 2px solid var(--pts-accent);
}

.pts-colman-note,
.pts-colman-error {
    font-size: 0.75rem;
    color: rgb(var(--gray-500));
}

.pts-colman-error {
    color: rgb(var(--danger-600));
    font-weight: 600;
}

/* ── ۲. سربرگ: قیف زرد و خط زیر نام ───────────────────────────────────────── */

.pts-heading-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    min-width: 0;
}

.pts-guide {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.pts-guide-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    color: #eab308;
}

.pts-guide-trigger:hover {
    background: rgb(234 179 8 / 0.12);
}

.pts-guide-trigger:focus-visible {
    outline: 2px solid var(--pts-accent);
}

.pts-guide-trigger svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* The line under the name alone: a text decoration, so it is exactly as wide as
   the name, takes no room, and moves nothing beside it. */
.pts-heading .pts-heading-name,
.pts-heading [data-management-name] {
    text-decoration-line: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 7px;
    text-decoration-color: var(--pts-line);
    text-decoration-skip-ink: none;
}

/* The heading needs room for the line beneath it. */
.pts-heading {
    padding-bottom: 10px;
    margin-bottom: -10px;
}

/* ── ۳. پنجرهٔ راهنما ─────────────────────────────────────────────────────── */

.pts-guide-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(var(--gray-950), 0.5);
}

.pts-guide-window {
    display: flex;
    flex-direction: column;
    width: min(44rem, 100%);
    max-height: calc(100dvh - 2rem);
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 20px 40px rgb(0 0 0 / 0.25);
}

.dark .pts-guide-window {
    background: rgb(var(--gray-900));
}

.pts-guide-titlebar {
    position: relative;
    padding: 1rem 3rem;
    border-bottom: 1px solid rgb(var(--gray-200));
}

.dark .pts-guide-titlebar {
    border-color: rgb(255 255 255 / 0.1);
}

.pts-guide-title {
    margin: 0;
    color: var(--pts-accent-strong);
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.6;
    text-align: center;
}

.dark .pts-guide-title {
    color: #facc15;
}

/* Over the corner, out of the title's way: the title stays centred on the window. */
.pts-guide-close {
    position: absolute;
    top: 50%;
    inset-inline-end: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-top: -1rem;
    border-radius: 0.5rem;
    color: rgb(var(--gray-400));
}

.pts-guide-close:hover {
    background: rgb(var(--gray-100));
}

.dark .pts-guide-close:hover {
    background: rgb(255 255 255 / 0.05);
}

.pts-guide-close svg {
    width: 1.25rem;
    height: 1.25rem;
}

.pts-guide-body {
    overflow-y: auto;
    padding: 1rem 1.25rem 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.9;
}

.pts-guide-section + .pts-guide-section {
    margin-top: 1rem;
}

.pts-guide-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.375rem;
    font-size: 1rem;
    font-weight: 800;
}

.pts-guide-heading svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--pts-accent-strong);
}

.pts-guide-subheading {
    margin: 0.5rem 0 0.125rem;
    font-weight: 700;
    color: var(--pts-line);
}

.dark .pts-guide-subheading {
    color: #4ade80;
}

.pts-guide-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pts-guide-num {
    color: rgb(var(--gray-500));
    font-weight: 700;
}

.pts-guide-loading,
.pts-guide-error {
    color: rgb(var(--gray-500));
}

/* ── موبایل و تبلت ──────────────────────────────────────────────────────────
   The tools wrap as a group when room really runs out; box and picker never part,
   and nothing pushes the page sideways. */
@media (max-width: 767px) {
    .fi-ta-header-toolbar {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .fi-ta-header-toolbar > .ms-auto {
        flex-wrap: wrap;
        row-gap: 0.5rem;
        max-width: 100%;
    }

    .fi-ta-search-field.pts-search-group {
        flex: 1 1 12rem;
    }

    .pts-colman-trigger span {
        white-space: nowrap;
    }
}