/*
 * «نقش‌ها و سطح دسترسی» — تسک ۰۸ خزنده.
 *
 * Every rule is keyed off `cw-role-form` (the role form's tabs,
 * `RoleForm::CSS_CLASS`) or the employees-of-a-role page's own marks, never off
 * an address, so no other form of the panel is touched.
 *
 * Colours are the panel's own: Filament's warning (yellow) and success (green),
 * which are the two standard tones the task names; nothing new is introduced.
 */

/* The three tabs: one row, in the middle of the box (بند ۴). The active tab is
   the panel's primary amber already; it is only made bolder here. */
.cw-role-form > .fi-tabs {
    justify-content: center;
    margin-inline: auto;
}

.cw-role-form > .fi-tabs .fi-tabs-item.fi-active {
    font-weight: 700;
}

/* «دسترسی کامل» first, on a yellow wash, so it reads as the switch above the
   rest (بند ۵). */
.cw-role-full-access {
    border-inline-start: 4px solid var(--warning-500);
    background: color-mix(in srgb, var(--warning-500) 6%, transparent);
}

.cw-role-bulk .fi-ac {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cw-role-bulk-note {
    text-align: center;
    font-size: 0.8125rem;
    opacity: 0.75;
}

/* One menu to a row, full width, yellow and green in turn (بند ۸). The tone is
   set by position in `RoleForm::groupRow()`; here it only becomes a colour.

   تسک ۰۸_۰۲ بند ۱۶ تا ۲۳ — every rule below is keyed off `cw-role-group`, which
   every menu's box carries, so a management added to the panel tomorrow is drawn
   the same way without anything here naming it.

   The marker class lands on Filament's wrapper, which has square corners; the
   rounded box is the `.fi-section` inside it. So the stripe and the wash are
   drawn on that inner box: a border on a rounded box follows its corners, and
   `overflow: clip` keeps the header's wash inside them too (بند ۱۶). */
.cw-role-group {
    --cw-role-tone: var(--warning-500);
    margin-block: 0;
}

.cw-role-group--success {
    --cw-role-tone: var(--success-500);
}

.cw-role-group > .fi-section {
    border-inline-start: 4px solid var(--cw-role-tone);
    overflow: clip;
}

/* تسک ۰۸_۰۳ اصلاح پنجم — one neutral box for every menu, open or closed: the
   yellow and green washes are gone from the header and from the inside alike.
   The colour lives only in the stripe and, matching it, in the menu's title. */
.cw-role-group .fi-section-header {
    cursor: pointer;
    padding-block: 0.625rem;
    background: transparent;
}

.cw-role-group .fi-section-header-heading {
    font-weight: 700;
    color: var(--cw-role-tone);
}

/* «۲ از ۲ مدیریت · ۵ از ۵ مجوز» on the title's own line, to its left (بند ۱۸
   of ۰۸_۰۲). A long title on a phone wraps the figures to a line of their own
   instead of running into them. */
.cw-role-group .fi-section-header-text-ctn {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 2.4rem;
    row-gap: 0.125rem;
}

.cw-role-group [data-group-summary] {
    color: var(--cw-role-tone);
    font-weight: 600;
    white-space: nowrap;
}

/* تسک ۰۸_۰۳ اصلاح چهارم — the figures centred in a slot of their own, still on
   the left of the title and never in the middle of the whole box. The title's
   room is reserved to the same width in every menu, so the slots line up in one
   column down the tab; a title longer than that pushes its slot along rather
   than under it, and a figure longer than the slot widens it. */
@media (min-width: 640px) {
    .cw-role-group .fi-section-header-heading {
        min-width: 13rem;
    }

    .cw-role-group .fi-section-header-description {
        min-width: 15rem;
        text-align: center;
    }
}

/* The opened inside: the same neutral as the header, set apart from it by a
   thin rule only. */
.cw-role-group .fi-section-content-ctn {
    background: transparent;
    border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

/* تسک ۰۸_۰۳ اصلاح اول — one management to a line: its name on the right, its
   own levels beside it on the same line, a slot of one width per level so the
   «مشاهده» of every line is in one column. No nested boxes, the height the
   content needs, a faint rule between lines and none under the last, and two
   neutral shades in turn so the eye can follow a line across. */
.cw-role-group .fi-section-content {
    padding: 0;
    row-gap: 0;
}

.cw-role-group .fi-section-content > .fi-grid-col {
    padding: 0.4rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, currentColor 9%, transparent);
    background: rgb(0 0 0 / 0.015);
}

.cw-role-group .fi-section-content > .fi-grid-col:nth-child(even) {
    background: rgb(0 0 0 / 0.045);
}

.dark .cw-role-group .fi-section-content > .fi-grid-col {
    background: rgb(255 255 255 / 0.015);
}

.dark .cw-role-group .fi-section-content > .fi-grid-col:nth-child(even) {
    background: rgb(255 255 255 / 0.05);
}

.cw-role-group .fi-section-content > .fi-grid-col:last-child {
    border-bottom: 0;
}

.cw-role-row > .fi-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.25rem;
}

.cw-role-row > .fi-grid > .fi-grid-col {
    flex: 0 0 9.5rem;
    min-width: 0;
}

/* The name: the right of the line, a fixed width so the levels start at the
   same place on every line. */
.cw-role-row > .fi-grid > .fi-grid-col:first-child {
    flex: 0 0 15rem;
}

/* A line that says the management is open to everyone keeps its sentence on
   the line. */
.cw-role-row > .fi-grid > .fi-grid-col:first-child + .fi-grid-col:last-child:has(.fi-sc-text) {
    flex: 1 1 18rem;
    opacity: 0.8;
}

/* A phone: the name above, its levels together on the line beneath, so which
   levels belong to which management stays plain. */
@media (max-width: 767px) {
    .cw-role-row > .fi-grid > .fi-grid-col:first-child {
        flex-basis: 100%;
    }

    .cw-role-row > .fi-grid > .fi-grid-col {
        flex: 0 0 auto;
        margin-inline-end: 0.75rem;
    }
}

/* Each menu its own box, the same distance apart, with the page's own colour
   showing between them (بند ۱۷). */
.cw-role-groups {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 0.875rem;
    border-radius: 0.75rem;
    background: var(--gray-50);
}

.dark .cw-role-groups {
    background: var(--gray-950);
}

/* A box's tick and its title are one target, and the keyboard's place is
   plain to see (بند ۲۶). */
.cw-role-group .fi-fo-checkbox-input:focus-visible,
.cw-role-abilities .fi-fo-checkbox-input:focus-visible {
    outline: 2px solid var(--cw-role-tone, var(--primary-500));
    outline-offset: 2px;
}

.cw-role-group .fi-section-collapse-btn:focus-visible {
    outline: 2px solid var(--cw-role-tone);
    outline-offset: 2px;
}

/* «دسترسی‌های عمومی پنل»: two columns on a desktop, one on a phone (Grid does
   that), with the height each box had taken back (بند ۱۱). */
.cw-role-abilities .fi-fo-field {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, currentColor 3%, transparent);
}

/* تسک ۰۸_۰۳ اصلاح دوم — the colour goes by the *row* the box is on, never by
   the box: the first row's two titles in the page's own white with the
   ordinary outline, the second row's in the panel's green with a green outline,
   and so on in turn. The tone is set on the grid column so the box and its
   title read it from one place; the background, the sentence and the tick
   itself are untouched, so a ticked box still looks ticked — Filament's own
   amber — and never like the green of a row.

   A phone lays the boxes one to a row, so there the row is the box; from the
   `md` width up (Filament's two-column grid, 768px) a row is a pair. The two
   rules are written for exactly the widths each layout is drawn at, so a
   resize can never leave a box carrying the other layout's colour. A last box
   left alone on its row takes that row's colour like any other. */
.cw-role-abilities > .fi-grid > .fi-grid-col {
    --cw-row-title: var(--gray-950);
    --cw-row-stroke: color-mix(in srgb, currentColor 14%, transparent);
    --cw-row-green-title: var(--success-600);
    --cw-row-green-stroke: var(--success-600);
}

.dark .cw-role-abilities > .fi-grid > .fi-grid-col {
    --cw-row-title: #fff;
    --cw-row-green-title: var(--success-400);
    --cw-row-green-stroke: var(--success-500);
}

@media (max-width: 767px) {
    .cw-role-abilities > .fi-grid > .fi-grid-col:nth-child(even) .fi-fo-field {
        --cw-row-title: var(--cw-row-green-title);
        --cw-row-stroke: var(--cw-row-green-stroke);
    }
}

@media (min-width: 768px) {
    .cw-role-abilities > .fi-grid > .fi-grid-col:nth-child(4n + 3) .fi-fo-field,
    .cw-role-abilities > .fi-grid > .fi-grid-col:nth-child(4n + 4) .fi-fo-field {
        --cw-row-title: var(--cw-row-green-title);
        --cw-row-stroke: var(--cw-row-green-stroke);
    }
}

.cw-role-abilities .fi-fo-field {
    border: 1px solid var(--cw-row-stroke);
}

.cw-role-abilities .fi-fo-field-label-content {
    color: var(--cw-row-title);
    font-weight: 700;
}

.cw-role-counter {
    font-weight: 700;
    color: var(--success-600);
}

/* The figures that lead to «کارمندان نقش» are green, like the title they open. */
.cw-role-users-count,
[data-role-users-cell] a {
    color: var(--success-600);
    font-weight: 700;
}

.dark .cw-role-users-count,
.dark [data-role-users-cell] a,
.dark .cw-role-counter {
    color: var(--success-400);
}

a.cw-role-users-count:hover {
    text-decoration: underline;
}

.cw-role-users-title .cw-role-users-name {
    color: var(--success-600);
}

.dark .cw-role-users-title .cw-role-users-name {
    color: var(--success-400);
}

.cw-role-users-title .cw-role-users-count {
    font-size: 0.875em;
    margin-inline-start: 0.5rem;
}

/* «ویرایش: سردبیر | ۰ کارمند» (تسک ۰۸_۰۲ بند ۱۳): the verb in the page's text,
   the role's name and its count in the crawler's logo blue — the same token the
   bar's date is written in, so it keeps its contrast on the light page too. */
.cw-role-heading {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.cw-role-heading-name,
.cw-role-heading .cw-role-users-count,
.dark .cw-role-heading .cw-role-users-count {
    color: var(--panel-header-date);
    font-weight: 800;
}

.cw-role-heading .cw-role-users-count {
    font-size: 1em;
}

.cw-role-heading-sep {
    display: inline-block;
    width: 1px;
    height: 1.15rem;
    margin-inline: 0.35rem;
    background-color: rgb(107 114 128 / 0.55);
}

/* ── کارمندان (تسک ۰۸_۰۲ بخش اول و دوم) ─────────────────────────────────── */

/* The employee's name: the panel's yellow, and a link (بند ۶). */
[data-user-name],
[data-user-name] .fi-ta-text-item-label {
    color: var(--panel-stat-yellow);
}

[data-user-name] a:hover .fi-ta-text-item-label,
a[data-user-name]:hover .fi-ta-text-item-label {
    text-decoration: underline;
}

/* «نقش اصلی» — its title and the role chosen in it in the panel's yellow
   (بند ۱۱). Only the colour: what is chosen and saved is untouched. */
.cw-primary-role .fi-fo-field-label-content,
.cw-primary-role .fi-select-input-value-label,
.cw-primary-role .fi-select-input-btn {
    color: var(--panel-stat-yellow);
    font-weight: 700;
}

/* The two tabs of an employee's form, in the middle of the box like the
   role form's. */
.cw-user-form > .fi-tabs {
    justify-content: center;
    margin-inline: auto;
}

.cw-user-form > .fi-tabs .fi-tabs-item.fi-active {
    font-weight: 700;
}

.cw-user-scope-note {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* ── تسک ۰۸_۰۳ اصلاح سوم: the menu that was opened, lit ─────────────────────

   `public/js/panel-role-spotlight.js` marks the page while a menu of
   «دسترسی به مدیریت‌ها» is open and names that menu in a rule of its own; here
   the mark becomes a soft black layer over everything else, and the named menu
   is lifted above it. The layer is fixed, so it moves nothing and changes no
   height; it takes no clicks, so every other control of the page — another
   menu, «ذخیره», the tabs — still answers through it. No blur. */
body[data-cw-spotlight]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgb(0 0 0 / 0.45);
    pointer-events: none;
}

.cw-role-group[data-role-group] {
    position: relative;
}

/* ══ تسک ۱۵ کرالر اخبار — یادآوری عدم فعالیت ═══════════════════════════════
 *
 * The top row of «مشخصات نقش»: name, first reminder, repeat — one row on a
 * desktop. Every label is held to one line and the same height so the three
 * inputs sit level however long a help line under one of them runs (بند ۵).
 */
@media (min-width: 768px) {
    .cw-role-top-row > .fi-grid-col,
    .cw-role-top-row > * {
        align-self: start;
    }

    /* Room for a label of two lines on each, set on its bottom edge, so a
       label that wraps cannot push its own input below the others. */
    .cw-role-top-row .fi-fo-field-label-ctn {
        min-height: 3rem;
        display: flex;
        align-items: flex-end;
    }
}

.fi-fo-field:has(.cw-repeat-info),
.fi-fo-field-wrp:has(.cw-repeat-info) {
    position: relative;
}

.cw-repeat-info {
    display: inline-flex;
    vertical-align: middle;
    margin-inline-start: 0.25rem;
}

.cw-repeat-info-button {
    display: inline-flex;
    align-items: center;
    color: var(--warning-500);
    cursor: pointer;
}

.cw-repeat-info-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.cw-repeat-info-panel {
    position: absolute;
    top: 2rem;
    inset-inline-start: 0;
    z-index: 50;
    display: block;
    width: min(22rem, 100%);
    max-width: calc(100vw - 1.5rem);
    box-sizing: border-box;
    padding: 0.75rem;
    border-radius: 0.6rem;
    border: 1px solid color-mix(in srgb, var(--warning-500) 45%, transparent);
    background: #fff;
    color: rgb(31 41 55);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.8;
    white-space: normal;
    box-shadow: 0 10px 25px rgb(0 0 0 / 0.12);
}

.dark .cw-repeat-info-panel {
    background: rgb(31 41 55);
    color: rgb(243 244 246);
}

.cw-repeat-info-text {
    display: block;
}

.cw-repeat-info-close {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--warning-600);
}

/* تسک ۱۵_۰۲ — the same yellow help beside a section's title, «مقصد تلگرام
   یادآوری‌ها» on the employee form: the panel opens under the title, inside
   the card, instead of at the top of the page. */
.cw-telegram-destination .fi-section-header {
    position: relative;
}

.cw-telegram-destination .cw-repeat-info-panel {
    top: 2.5rem;
    font-size: 0.875rem;
}