/*
 * The appearance of every statistics subsystem in the panel — «مانیتورینگ آماری
 * اخبار», «مانیتورینگ آماری ورود اطلاعات رقابت‌ها» and «مانیتورینگ آماری کاربران
 * سایت» (تسک ۱۴۰۵/۰۶/۱۳/۰۱).
 *
 * One stylesheet for all of them on purpose. The three subsystems are asked to
 * look like one another, and three files would be three places for the columns,
 * the pie and the header bar to drift apart. A fourth subsystem tomorrow adds no
 * CSS at all — it declares a colour and takes the rest of this.
 *
 * ## One stylesheet, and no build step
 *
 * `public/build` is not committed and the deploy does not rebuild it, so a new
 * Tailwind utility whose first use is a new Blade view ships as no styling at
 * all. Everything here is therefore ordinary CSS served straight from `public/`,
 * versioned by a digest of its own bytes — the same path «مستندات فنی» and the
 * filter standard already take.
 *
 * ## The identity colour is a variable, never a rule
 *
 * بند ۱۸ gives each management its own colour. Twenty-five stylesheets would be
 * twenty-five places for the columns, the pie and the header bar to disagree, so
 * every rule below paints with `--ns-color`, and a page sets that one variable
 * from its own indicator. Adding an indicator adds no CSS at all (بند ۴۰).
 *
 * The dark value is a second variable rather than a filter over the first: the
 * panel is read dark, and a mid-tone chosen to read on white disappears against
 * near-black. Filament v3's own palette is deliberately not used — its variables
 * hold channel triplets rather than colours, so `var(--primary-600)` in a
 * `background` is silently nothing.
 */

.ns-page {
    --ns-ink: #111827;
    --ns-muted: #6b7280;
    --ns-line: #e5e7eb;
    --ns-surface: #ffffff;
    --ns-surface-soft: #f9fafb;
    --ns-paint: var(--ns-color);

    display: flex;
    flex-direction: column;
    gap: 1rem;
    direction: rtl;
}

.dark .ns-page {
    --ns-ink: #e5e7eb;
    --ns-muted: #9ca3af;
    --ns-line: #374151;
    --ns-surface: #1f2937;
    --ns-surface-soft: #111827;
    --ns-paint: var(--ns-color-dark);
}

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

/* ── The header ────────────────────────────────────────────────────────── */

.ns-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ns-head-bar {
    flex: 0 0 auto;
    width: 0.3rem;
    align-self: stretch;
    min-height: 2.5rem;
    border-radius: 9999px;
    background-color: var(--ns-paint);
}

.ns-head-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ns-ink);
}

.ns-head-explanation {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    line-height: 1.9;
    color: var(--ns-muted);
    max-width: 60rem;
}

.ns-head-basis {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: var(--ns-paint);
    font-weight: 600;
}

/* ── The filters ───────────────────────────────────────────────────────── */

.ns-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--ns-line);
    border-radius: 0.65rem;
    background-color: var(--ns-surface);
}

.ns-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 9rem;
}

.ns-field-label,
.ns-picker-trigger-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ns-muted);
}

.ns-field select,
.ns-picker-trigger,
.ns-picker-search,
.ns-reset {
    font: inherit;
    font-size: 0.82rem;
    color: var(--ns-ink);
    background-color: var(--ns-surface);
    border: 1px solid var(--ns-line);
    border-radius: 0.5rem;
    padding: 0.4rem 0.6rem;
    min-height: 2.2rem;
}

.ns-field select:focus-visible,
.ns-picker-trigger:focus-visible,
.ns-reset:focus-visible {
    outline: 2px solid var(--ns-paint);
    outline-offset: 1px;
}

.ns-reset {
    cursor: pointer;
    font-weight: 600;
    color: var(--ns-paint);
    border-color: var(--ns-paint);
    background-color: transparent;
}

/* ── The picker window ─────────────────────────────────────────────────── */

.ns-picker { position: relative; }

.ns-picker-trigger {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    cursor: pointer;
    min-width: 11rem;
    text-align: right;
}

.ns-picker-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ns-ink);
}

.ns-picker-window {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.35rem);
    inset-inline-start: 0;
    width: 20rem;
    max-width: 90vw;
    padding: 0.6rem;
    border: 1px solid var(--ns-line);
    border-radius: 0.65rem;
    background-color: var(--ns-surface);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ns-picker-search { width: 100%; }

.ns-picker-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.ns-picker-action {
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ns-paint);
    background: none;
    border: none;
    padding: 0.15rem 0.25rem;
    cursor: pointer;
}

.ns-picker-chosen {
    margin-inline-start: auto;
    font-size: 0.72rem;
    color: var(--ns-muted);
}

.ns-picker-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 15rem;
    overflow-y: auto;
    border-block: 1px solid var(--ns-line);
}

.ns-picker-row.is-chosen { background-color: var(--ns-surface-soft); }

.ns-picker-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.25rem;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--ns-ink);
}

.ns-picker-face {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ns-surface-soft);
    border: 1px solid var(--ns-line);
    color: var(--ns-muted);
}

.ns-picker-face img { width: 100%; height: 100%; object-fit: cover; }
.ns-picker-face svg { width: 1rem; height: 1rem; }
.ns-picker-fallback { display: inline-flex; }
.ns-picker-name { flex: 1 1 auto; }

.ns-picker-none {
    padding: 0.6rem 0.25rem;
    font-size: 0.78rem;
    color: var(--ns-muted);
}

.ns-picker-confirm {
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffffff;
    background-color: var(--ns-paint);
    border: none;
    border-radius: 0.5rem;
    padding: 0.45rem;
    cursor: pointer;
}

/* ── The summary figures ───────────────────────────────────────────────── */

.ns-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.6rem;
}

.ns-tile {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--ns-line);
    border-radius: 0.6rem;
    background-color: var(--ns-surface);
    border-inline-start: 3px solid var(--ns-paint);
}

.ns-tile-label { font-size: 0.72rem; color: var(--ns-muted); }
.ns-tile-value { font-size: 0.95rem; font-weight: 700; color: var(--ns-ink); }

/* ── The panels ────────────────────────────────────────────────────────── */

.ns-panel {
    padding: 0.85rem;
    border: 1px solid var(--ns-line);
    border-radius: 0.7rem;
    background-color: var(--ns-surface);
}

.ns-panel-title {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ns-ink);
}

.ns-note,
.ns-empty {
    margin: 0.75rem 0 0;
    font-size: 0.78rem;
    line-height: 1.9;
    color: var(--ns-muted);
}

.ns-empty {
    margin: 0;
    padding: 2.5rem 0;
    text-align: center;
    font-weight: 600;
    color: var(--ns-ink);
}

/* ── The bar chart ─────────────────────────────────────────────────────── */

/*
 * بند ۳۴: the scroll belongs to the plot and never to the page. `overflow-x`
 * here and nowhere above it is what keeps the panel itself the width of the
 * screen however many columns there are.
 */
.ns-plot {
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 0.35rem;
}

.ns-bars {
    display: flex;
    align-items: flex-end;
    /*
     * Centred, so six columns do not sit bunched against one edge of a wide
     * panel. `safe center` is the second declaration on purpose: when the
     * columns are wider than the plot, centring would otherwise push the first
     * of them out of reach of the scroll, and a browser that does not know the
     * keyword simply keeps the plain centring above.
     */
    justify-content: center;
    justify-content: safe center;
    gap: 0.65rem;
    /* بند ۳۴: a column never gets so narrow that the picture under it collides
       with its neighbour. Below that width the plot scrolls instead. */
    min-width: min(100%, calc(var(--ns-count) * 3.25rem));
    height: 18rem;
}

.ns-bar {
    flex: 1 0 2.6rem;
    max-width: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    height: 100%;
}

.ns-bar-value {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ns-ink);
    white-space: nowrap;
}

.ns-bar-column {
    position: relative;
    display: block;
    width: 100%;
    height: var(--ns-height);
    min-height: 0.25rem;
    border-radius: 0.3rem 0.3rem 0 0;
    background-color: var(--ns-paint);
    transition: filter 120ms ease-in-out;
}

.ns-bar-column:hover,
.ns-bar-column:focus-visible { filter: brightness(1.15); outline: none; }

/* ── The picture under a column ────────────────────────────────────────── */

/*
 * بند ۳۵: the picture is inside the column's own element, so scrolling the plot
 * moves the two together by construction — there is no arrangement of this in
 * which an avatar can drift away from its column.
 */
.ns-face {
    position: relative;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ns-surface-soft);
    border: 1px solid var(--ns-line);
    color: var(--ns-muted);
}

.ns-face-img {
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    object-fit: cover;
}

.ns-face-icon svg { width: 1.15rem; height: 1.15rem; }

/*
 * The month, status or way-in under its icon (بند ۱۲ و ۱۳).
 *
 * An employee's column carries their avatar instead of their name and a
 * source's its logo, which is what the task asks for; a month has no picture to
 * put there, so those axes keep a short caption and the full name stays in the
 * tooltip.
 */
.ns-bar-caption {
    max-width: 4.5rem;
    font-size: 0.65rem;
    line-height: 1.5;
    color: var(--ns-muted);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── The tooltips ──────────────────────────────────────────────────────── */

/*
 * Written here rather than taken from a library: بند ۱۳ و ۱۴ ask for a name on
 * the picture and four lines on the column, and a plain `title` attribute can
 * carry neither reliably. Shown on hover and on keyboard focus, so the chart is
 * readable without a mouse.
 */
.ns-tip {
    position: absolute;
    z-index: 20;
    bottom: calc(100% + 0.4rem);
    inset-inline-start: 50%;
    transform: translateX(50%);
    display: none;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 8rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.45rem;
    background-color: #111827;
    color: #f9fafb;
    font-size: 0.72rem;
    line-height: 1.7;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.28);
}

.dark .ns-tip { background-color: #f9fafb; color: #111827; }

.ns-face:hover .ns-tip,
.ns-face:focus-visible .ns-tip,
.ns-bar-column:hover .ns-tip,
.ns-bar-column:focus-visible .ns-tip { display: flex; }

.ns-tip-title { font-weight: 700; }
.ns-tip-value { font-weight: 700; color: #93c5fd; }
.dark .ns-tip-value { color: #1d4ed8; }
.ns-tip-line { opacity: 0.85; }

/* ── The pie ───────────────────────────────────────────────────────────── */

.ns-pie-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.ns-pie {
    flex: 0 0 auto;
    width: 11rem;
    height: 11rem;
}

.ns-slice { stroke: var(--ns-surface); stroke-width: 1; }

/*
 * The pie's wedges are the management's own colour, walked from full strength to
 * a wash, so the chart still reads as that management rather than as a rainbow
 * borrowed from somewhere else (بند ۱۸).
 */
.ns-slice-0 { fill: var(--ns-paint); }
.ns-slice-1 { fill: var(--ns-paint); opacity: 0.9; }
.ns-slice-2 { fill: var(--ns-paint); opacity: 0.8; }
.ns-slice-3 { fill: var(--ns-paint); opacity: 0.7; }
.ns-slice-4 { fill: var(--ns-paint); opacity: 0.6; }
.ns-slice-5 { fill: var(--ns-paint); opacity: 0.5; }
.ns-slice-6 { fill: var(--ns-paint); opacity: 0.42; }
.ns-slice-7 { fill: var(--ns-paint); opacity: 0.34; }
.ns-slice-8 { fill: var(--ns-paint); opacity: 0.27; }
.ns-slice-9 { fill: var(--ns-paint); opacity: 0.2; }
.ns-slice-10 { fill: var(--ns-muted); opacity: 0.55; }

.ns-legend {
    flex: 1 1 16rem;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ns-legend-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--ns-ink);
}

.ns-legend-swatch {
    flex: 0 0 auto;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.2rem;
    background-color: var(--ns-paint);
}

.ns-legend-swatch.ns-slice-1 { opacity: 0.9; }
.ns-legend-swatch.ns-slice-2 { opacity: 0.8; }
.ns-legend-swatch.ns-slice-3 { opacity: 0.7; }
.ns-legend-swatch.ns-slice-4 { opacity: 0.6; }
.ns-legend-swatch.ns-slice-5 { opacity: 0.5; }
.ns-legend-swatch.ns-slice-6 { opacity: 0.42; }
.ns-legend-swatch.ns-slice-7 { opacity: 0.34; }
.ns-legend-swatch.ns-slice-8 { opacity: 0.27; }
.ns-legend-swatch.ns-slice-9 { opacity: 0.2; }
.ns-legend-swatch.ns-slice-10 { background-color: var(--ns-muted); opacity: 0.55; }

.ns-legend-label { flex: 1 1 auto; }
.ns-legend-value { font-weight: 700; white-space: nowrap; }
.ns-legend-share { font-weight: 500; color: var(--ns-muted); }

@media (max-width: 640px) {
    .ns-bars { height: 14rem; }
    .ns-pie { width: 9rem; height: 9rem; }
}

/*
 * «این شاخص از تاریخ … ثبت می‌شود» — the line a management prints when its own
 * record begins later than the data it is about.
 *
 * It is deliberately a notice rather than a footnote: a chart that starts in the
 * middle of a year looks like a collapse in activity, and a reader who is not
 * told why will read it as one.
 */
.ns-history {
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    border-radius: 0.6rem;
    border: 1px solid color-mix(in srgb, var(--ns-color) 35%, transparent);
    background-color: color-mix(in srgb, var(--ns-color) 8%, transparent);
    color: var(--ns-ink);
    font-size: 0.8125rem;
    line-height: 1.9;
}

.dark .ns-history {
    border-color: color-mix(in srgb, var(--ns-color-dark) 40%, transparent);
    background-color: color-mix(in srgb, var(--ns-color-dark) 12%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
 * «مانیتورینگ آماری اخبار» — the redesign of تسک ۱۴۰۵/۰۷/۲۱/۰۱.
 *
 * Everything below is written against `.ns-news`, the class the news
 * statistics' own two views carry, and `.ns-std`, the class of a subsystem
 * drawn to the shared monitoring standard (تسک ۱۴۰۵/۰۷/۲۱ — کاربران سایت). A
 * subsystem carrying neither is drawn exactly as it was.
 * ══════════════════════════════════════════════════════════════════════════ */

:is(.ns-news, .ns-std) { gap: 0.75rem; min-width: 0; }

.ns-compare {
    --ns-color: #2563eb;
    --ns-color-dark: #60a5fa;
}

/* ── The tabs (بند ۱) ──────────────────────────────────────────────────── */

.ns-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

/*
 * A row scrolls inside itself when the screen is narrower than its tabs. The
 * page never grows a sideways scrollbar for them (بند ۶).
 */
.ns-tabs-row {
    display: flex;
    gap: 0.35rem;
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: thin;
    border: 1px solid var(--ns-line);
    border-radius: 0.65rem;
    background-color: var(--ns-surface);
}

.ns-tabs-row > li { flex: 0 0 auto; }

.ns-tab,
.ns-subtab {
    display: block;
    padding: 0.4rem 0.8rem;
    border-radius: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.7;
    white-space: nowrap;
    color: var(--ns-muted);
    text-decoration: none;
    transition: background-color 120ms ease-in-out, color 120ms ease-in-out;
}

.ns-tab:hover,
.ns-subtab:hover { color: var(--ns-ink); background-color: var(--ns-surface-soft); }

.ns-tab:focus-visible,
.ns-subtab:focus-visible { outline: 2px solid var(--ns-paint); outline-offset: 1px; }

/* The panel's own tab standard: the open tab is the amber one. */
.ns-tab.is-active {
    color: #b45309;
    background-color: rgba(245, 158, 11, 0.14);
}

.dark .ns-tab.is-active { color: #fbbf24; background-color: rgba(251, 191, 36, 0.12); }

.ns-tabs-sub { border-style: dashed; background-color: transparent; }

.ns-subtab { padding: 0.3rem 0.65rem; font-size: 0.75rem; }

.ns-subtab.is-active {
    color: var(--ns-ink);
    background-color: var(--ns-surface);
    box-shadow: inset 0 -2px 0 var(--ns-paint);
}

/* ── The header and the filters: low and tidy (بند ۴) ──────────────────── */

:is(.ns-news, .ns-std) .ns-head { gap: 0.6rem; }
:is(.ns-news, .ns-std) .ns-head-title { font-size: 0.95rem; }
:is(.ns-news, .ns-std) .ns-head-explanation { margin-top: 0.15rem; font-size: 0.78rem; line-height: 1.8; }
:is(.ns-news, .ns-std) .ns-head-basis { margin-top: 0.1rem; font-size: 0.72rem; }

:is(.ns-news, .ns-std) .ns-filters { gap: 0.5rem 0.6rem; padding: 0.6rem; justify-content: flex-start; }
:is(.ns-news, .ns-std) .ns-field { min-width: 7.5rem; }
:is(.ns-news, .ns-std) .ns-picker-label { gap: 0.5rem; }

.ns-loading {
    margin: 0;
    padding: 0.35rem 0.7rem;
    border-radius: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ns-ink);
    background-color: var(--ns-surface-soft);
    border: 1px dashed var(--ns-line);
}

/* ── The summary figures (بند ۴) ───────────────────────────────────────── */

/*
 * One height and one gap for every card, however long its label. And the
 * indicator's colour is on the figure alone: a card painted whole in its colour
 * makes the label and the number compete, and the number is what is read.
 */
:is(.ns-news, .ns-std) .ns-tiles {
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    grid-auto-rows: 1fr;
    gap: 0.6rem;
}

:is(.ns-news, .ns-std) .ns-tile {
    justify-content: space-between;
    min-height: 3.6rem;
    border-inline-start: 1px solid var(--ns-line);
}

:is(.ns-news, .ns-std) .ns-tile-label { color: var(--ns-muted); }

:is(.ns-news, .ns-std) .ns-tile-value {
    font-size: 1rem;
    color: var(--ns-paint);
    overflow-wrap: anywhere;
}

/* ── A panel's heading row ─────────────────────────────────────────────── */

.ns-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 0.75rem;
    margin-bottom: 0.75rem;
}

.ns-panel-head .ns-panel-title { margin: 0; overflow-wrap: anywhere; }

:is(.ns-news, .ns-std) .ns-panel { min-width: 0; }

/* ── «خروجی تصویر» (بند ۴) ─────────────────────────────────────────────── */

.ns-export {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 0.5rem;
    border: 1px solid var(--ns-paint);
    background-color: transparent;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ns-paint);
    cursor: pointer;
}

.ns-export svg { width: 0.95rem; height: 0.95rem; }
.ns-export:hover { background-color: var(--ns-surface-soft); }
.ns-export:focus-visible { outline: 2px solid var(--ns-paint); outline-offset: 1px; }
.ns-export[disabled] { opacity: 0.6; cursor: progress; }

/* ── The bar chart: a name under every column (بند ۴) ──────────────────── */

:is(.ns-news, .ns-std) .ns-bars {
    gap: 0.5rem;
    min-width: min(100%, calc(var(--ns-count) * 4rem));
    /* Room under the plot for a two-line name. */
    height: 19rem;
}

:is(.ns-news, .ns-std) .ns-bar { flex: 1 0 3.4rem; max-width: 5.5rem; }

:is(.ns-news, .ns-std) .ns-bar-caption {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-width: 100%;
    min-height: 2.1rem;
    font-size: 0.68rem;
    line-height: 1.55;
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--ns-ink);
}

/*
 * «بدون داده» and «قابل محاسبه نیست»: the column keeps its place and is drawn
 * as an outline, so it can never be read as a small counted value (بند ۳ و ۵).
 */
:is(.ns-news, .ns-std) .ns-bar.is-unmeasured .ns-bar-column {
    height: 1.1rem;
    background-color: transparent;
    border: 1px dashed var(--ns-muted);
    border-bottom: 0;
}

:is(.ns-news, .ns-std) .ns-bar.is-unmeasured .ns-bar-value {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--ns-muted);
    white-space: normal;
    text-align: center;
    line-height: 1.4;
}

.ns-error { color: #b91c1c; }
.dark .ns-error { color: #fca5a5; }

/* ── The pie's legend: name, count, share (بند ۴) ──────────────────────── */

:is(.ns-news, .ns-std) .ns-legend { min-width: min(100%, 16rem); }
:is(.ns-news, .ns-std) .ns-legend-label { overflow-wrap: anywhere; }

/* ── «مقایسه آمارها» (بند ۳) ───────────────────────────────────────────── */

.ns-compare-summary {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ns-muted);
}

.ns-compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    gap: 0.75rem;
    min-width: 0;
}

.ns-compare-card { padding: 0.65rem 0.7rem 0.5rem; }
.ns-compare-card .ns-panel-head { margin-bottom: 0.4rem; }
.ns-compare-card .ns-panel-title { font-size: 0.8rem; }

.ns-compare-link {
    color: var(--ns-paint);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.25rem;
}

.ns-compare-link:hover { text-decoration-style: solid; }

.ns-compare-window { font-size: 0.68rem; color: var(--ns-muted); white-space: nowrap; }

:is(.ns-news, .ns-std) .ns-chart-compact .ns-bars {
    height: 11.5rem;
    gap: 0.3rem;
    min-width: min(100%, calc(var(--ns-count) * 3.1rem));
}

:is(.ns-news, .ns-std) .ns-chart-compact .ns-bar { flex: 1 0 2.7rem; max-width: 4.2rem; gap: 0.2rem; }
:is(.ns-news, .ns-std) .ns-chart-compact .ns-bar-value { font-size: 0.62rem; }
:is(.ns-news, .ns-std) .ns-chart-compact .ns-bar-caption { font-size: 0.6rem; min-height: 1.9rem; }
:is(.ns-news, .ns-std) .ns-chart-compact .ns-empty { padding: 1.5rem 0; font-size: 0.78rem; }

/* ── Narrow screens (بند ۶) ────────────────────────────────────────────── */

@media (max-width: 640px) {
    :is(.ns-news, .ns-std) .ns-bars { height: 15rem; }
    :is(.ns-news, .ns-std) .ns-chart-compact .ns-bars { height: 10.5rem; }
    :is(.ns-news, .ns-std) .ns-filters { gap: 0.45rem; }
    :is(.ns-news, .ns-std) .ns-field,
    :is(.ns-news, .ns-std) .ns-picker { flex: 1 1 calc(50% - 0.45rem); min-width: 0; }
    :is(.ns-news, .ns-std) .ns-field select,
    :is(.ns-news, .ns-std) .ns-picker-trigger { width: 100%; }
    :is(.ns-news, .ns-std) .ns-reset { flex: 1 1 100%; }
    :is(.ns-news, .ns-std) .ns-picker-window { inset-inline: 0; width: auto; max-width: calc(100vw - 2rem); }
    :is(.ns-news, .ns-std) .ns-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :is(.ns-news, .ns-std) .ns-export { flex: 1 1 100%; justify-content: center; }
    /* A tooltip wider than a phone would be cut by the plot's own scroll. */
    :is(.ns-news, .ns-std) .ns-tip { white-space: normal; min-width: 9rem; max-width: 12rem; }
}

/*
 * Each card paints in its own indicator's colour. `--ns-paint` is resolved on
 * the page, where the comparison has no single colour, so a card resolves it
 * again from the two values it sets for itself.
 */
.ns-compare-card { --ns-paint: var(--ns-color); }
.dark .ns-compare-card { --ns-paint: var(--ns-color-dark); }


/* ══════════════════════════════════════════════════════════════════════════
 * The shared monitoring standard — `.ns-std`
 * (تسک ۱۴۰۵/۰۷/۲۱ — توسعه و یکپارچه‌سازی مانیتورینگ آماری کاربران سایت).
 *
 * What the rules above do not already give a standard page: the heading of a
 * chart's box with its overall figure, the states of a window with no record,
 * the pie that lights up with its legend, «مبنای آمار», and «مقایسه آمارها».
 * No colour of an indicator is written here — every rule paints from
 * `--ns-paint`, which a page or a box sets from its own indicator.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── The header: the panel's own heading carries the title ─────────────── */

.ns-std .ns-head-explanation { margin-top: 0; }
.ns-std .ns-head-bar { min-height: 2rem; }
.ns-std .ns-history { margin: 0; padding: 0.5rem 0.8rem; font-size: 0.78rem; line-height: 1.85; }

/* ── The filters: one low row, the label a little heavier than the value ── */

.ns-std .ns-field-label { font-size: 0.74rem; font-weight: 700; color: var(--ns-ink); }
.ns-std .ns-field select { cursor: pointer; }
.ns-std .ns-field select:hover { border-color: var(--ns-paint); }

/* Every other row of an open list is tinted, so a long list of months is read
   along its rows. A phone draws its own list and ignores this, harmlessly. */
.ns-std .ns-field select option { background-color: var(--ns-surface); color: var(--ns-ink); }
.ns-std .ns-field select option:nth-child(even) { background-color: var(--ns-surface-soft); }
.ns-std .ns-field select option:checked { font-weight: 700; }

/* A filter that means nothing for the moment stays where it is, with its value. */
.ns-std .ns-field.is-frozen { opacity: 0.55; }
.ns-std .ns-field.is-frozen select { cursor: not-allowed; }

/* ── The cards: a window with no record says so ────────────────────────── */

.ns-std .ns-tile.is-missing .ns-tile-value { font-size: 0.85rem; color: var(--ns-muted); }

/* ── The heading of a chart's box ──────────────────────────────────────── */

.ns-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    min-width: 0;
}

.ns-card-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.6rem;
    margin: 0;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--ns-ink);
}

.ns-card-name { overflow-wrap: anywhere; }

.ns-card-rule {
    flex: 0 0 auto;
    width: 1px;
    height: 1.05rem;
    background-color: var(--ns-line);
}

.ns-card-window { font-weight: 500; color: var(--ns-muted); }

/* The overall figure and its unit, in the indicator's own colour. */
.ns-card-figure { color: var(--ns-paint); white-space: nowrap; }
.ns-card-figure.is-missing { color: var(--ns-muted); font-weight: 500; }

.ns-info {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 1px solid var(--ns-line);
    border-radius: 9999px;
    background-color: transparent;
    color: var(--ns-paint);
    cursor: pointer;
}

.ns-info svg { width: 1.15rem; height: 1.15rem; }
.ns-info:hover { background-color: var(--ns-surface-soft); border-color: var(--ns-paint); }
.ns-info:focus-visible { outline: 2px solid var(--ns-paint); outline-offset: 1px; }

/* ── The states of an empty chart ──────────────────────────────────────── */

.ns-std .ns-empty { padding: 2rem 0.5rem; font-size: 0.82rem; line-height: 1.9; }
.ns-std .ns-empty-muted { color: var(--ns-muted); font-weight: 500; }
.ns-std .ns-chart-compact .ns-empty { padding: 1.25rem 0.5rem; font-size: 0.78rem; }

/* ── The bar chart ─────────────────────────────────────────────────────── */

/* A tall column's tooltip would be cut by the plot's own scroll if it opened
   above the column, so it opens inside the top of it instead. */
.ns-std .ns-bar.is-tall .ns-tip { bottom: auto; top: 0.35rem; }

/* As wide as its longest line up to a readable measure, then it wraps: a long
   name is whole in the tooltip rather than cut at the tooltip's own edge. */
.ns-std .ns-tip { width: max-content; max-width: 15rem; white-space: normal; }

.ns-std .ns-plot { scrollbar-width: thin; }
.ns-std .ns-plot:focus-visible { outline: 2px solid var(--ns-paint); outline-offset: 2px; }

/* ── The pie and its legend ────────────────────────────────────────────── */

.ns-std .ns-pie-wrap { align-items: flex-start; gap: 1rem 1.5rem; }
.ns-std .ns-pie-box { flex: 0 0 auto; }
.ns-std .ns-pie { width: 12.5rem; height: 12.5rem; display: block; }

.ns-std .ns-slice {
    cursor: pointer;
    outline: none;
    transition: opacity 120ms ease-in-out, transform 120ms ease-in-out;
    transform-origin: 60px 60px;
}

.ns-std .ns-legend-box { flex: 0 1 36rem; min-width: 0; }

/* Many entities: the legend scrolls inside itself and the pie stays put. */
.ns-std .ns-legend {
    max-height: 22rem;
    overflow-y: auto;
    scrollbar-width: thin;
    padding-inline-end: 0.25rem;
}

.ns-std .ns-legend-row {
    padding: 0.25rem 0.4rem;
    border-radius: 0.4rem;
    cursor: pointer;
    outline: none;
    transition: background-color 120ms ease-in-out;
}

.ns-std .ns-legend-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ns-legend-note { margin: 0.5rem 0 0; font-size: 0.72rem; line-height: 1.8; color: var(--ns-muted); }

/*
 * Pointed at, tapped or focused: the slice and its row are lit together and
 * the others stand back. Leaving puts everything as it was.
 */
.ns-std [data-stat-pie].is-pointing .ns-slice:not(.is-active) { opacity: 0.18; }
.ns-std [data-stat-pie].is-pointing .ns-slice.is-active { opacity: 1; transform: scale(1.04); }
.ns-std [data-stat-pie] .ns-legend-row.is-active,
.ns-std [data-stat-pie] .ns-legend-row:focus-visible {
    background-color: var(--ns-surface-soft);
    box-shadow: inset 0 0 0 1px var(--ns-paint);
}

.ns-std .ns-pie-compact .ns-pie { width: 9rem; height: 9rem; }
.ns-std .ns-pie-compact .ns-legend { max-height: 9.5rem; }
.ns-std .ns-pie-compact .ns-legend-row { font-size: 0.72rem; padding: 0.15rem 0.35rem; }

/* ── «مبنای آمار» ──────────────────────────────────────────────────────── */

.ns-basis { direction: rtl; max-height: 60vh; overflow-y: auto; padding-inline-end: 0.35rem; }
.ns-basis-list { display: flex; flex-direction: column; gap: 0.85rem; margin: 0; }
.ns-basis-row { padding-bottom: 0.85rem; border-bottom: 1px solid rgba(156, 163, 175, 0.3); }
.ns-basis-row:last-child { padding-bottom: 0; border-bottom: 0; }
.ns-basis-term { margin: 0 0 0.25rem; font-size: 0.88rem; font-weight: 700; }
.ns-basis-text { margin: 0; font-size: 0.82rem; line-height: 2; text-align: justify; }

/* ── «مقایسه آمارها» ───────────────────────────────────────────────────── */

.ns-compare-stack { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }

.ns-std .ns-compare-card { padding: 0.75rem 0.85rem 0.6rem; min-width: 0; }
.ns-std .ns-compare-card .ns-card-head { margin-bottom: 0.5rem; }
.ns-std .ns-compare-card .ns-card-title { font-size: 0.85rem; }

.ns-compare-body { min-width: 0; }

.ns-compare-body.has-pie {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 0.75rem 1.25rem;
    align-items: center;
}

.ns-compare-body > .ns-chart { min-width: 0; }

@media (max-width: 900px) {
    .ns-compare-body.has-pie { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .ns-std .ns-pie { width: 10rem; height: 10rem; }
    .ns-std .ns-pie-wrap { justify-content: center; }
    .ns-std .ns-legend-box { flex: 1 1 100%; }
    .ns-card-title { font-size: 0.82rem; gap: 0.2rem 0.45rem; }
}

/*
 * The page's own row of buttons — «مستندات فنی», «تاریخچه تغییرات اطلاعات»,
 * the two exports, «مقایسه آمارها» and «مبنای آمار» — is longer than a narrow
 * screen. The panel draws that row without wrapping, which would put the last
 * buttons off the edge where no finger can reach them; on a standard page it
 * wraps instead, under the title.
 */
.fi-page:has(.ns-std) .fi-header { flex-wrap: wrap; row-gap: 0.75rem; }

.fi-page:has(.ns-std) .fi-header > div:last-child,
.fi-page:has(.ns-std) .fi-header .fi-ac {
    flex-wrap: wrap;
    flex-shrink: 1;
    min-width: 0;
    row-gap: 0.5rem;
}


/* ══════════════════════════════════════════════════════════════════════════
 * «مانیتورینگ آماری کاربران سایت» — the corrections of تسک ۱۴۰۵/۰۷/۲۱/۰۳.
 *
 * Everything is scoped to `.ns-std`, or to a page that holds one, so the news
 * and competition statistics keep their own look.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── More contrast for the quieter text (بند ۴.۳) ──────────────────────── */

.ns-std { --ns-muted: #4b5563; }
.dark .ns-std { --ns-muted: #cbd5e1; }

/* ── The page's own title: two thirds of the panel's size (بند ۳) ──────── */

.fi-page:has(.ns-std) .fi-header-heading { font-size: 1rem; line-height: 1.6; }

@media (min-width: 640px) {
    .fi-page:has(.ns-std) .fi-header-heading { font-size: 1.25rem; line-height: 1.6; }
}

/* ── Filter titles and card titles, a quarter larger (بند ۴.۱ و ۴.۲) ───── */

.ns-std .ns-field-label { font-size: 0.925rem; line-height: 1.6; }
.ns-std .ns-picker-trigger-label { font-size: 0.9rem; }
.ns-std .ns-tile-label { font-size: 0.9rem; line-height: 1.6; color: var(--ns-muted); }
.ns-std .ns-tile { gap: 0.3rem; }

/* ── «<موجودیت> برتر»: last in its row, only its value in yellow (بند ۱۱) ── */

.ns-std .ns-tile.is-top .ns-tile-value { color: #b45309; font-weight: 800; }
.dark .ns-std .ns-tile.is-top .ns-tile-value { color: #fbbf24; }

/* ── The two export buttons wear the page's own colour (بند ۵.۱) ───────── */

.fi-page:has(.ns-std) .fi-btn[data-stat-export] {
    background-color: var(--ns-btn) !important;
    border-color: transparent !important;
    --tw-ring-color: transparent !important;
}

.dark .fi-page:has(.ns-std) .fi-btn[data-stat-export] { background-color: var(--ns-btn-dark) !important; }

.fi-page:has(.ns-std) .fi-btn[data-stat-export] .fi-btn-label,
.fi-page:has(.ns-std) .fi-btn[data-stat-export] .fi-btn-icon { color: #ffffff !important; }

.dark .fi-page:has(.ns-std) .fi-btn[data-stat-export] .fi-btn-label,
.dark .fi-page:has(.ns-std) .fi-btn[data-stat-export] .fi-btn-icon { color: #0b1220 !important; }

.fi-page:has(.ns-std) .fi-btn[data-stat-export]:hover { filter: brightness(1.08); }

/* ── The heading of a chart's box: a thin rule under it (بند ۷) ────────── */

.ns-std .ns-card-head {
    flex-wrap: wrap;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ns-paint) 40%, var(--ns-line));
}

.ns-card-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-inline-start: auto;
}

/* The order of one chart (بند ۸.۱): small, in the heading, after the figures. */
.ns-sort select {
    padding: 0.2rem 1.9rem 0.2rem 0.55rem;
    border: 1px solid var(--ns-line);
    border-radius: 0.45rem;
    background-color: var(--ns-surface);
    color: var(--ns-ink);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
    background-position: left 0.4rem center;
}

.ns-sort select:hover,
.ns-sort select:focus { border-color: var(--ns-paint); outline: none; }

.ns-card-export {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 0;
    border-radius: 0.45rem;
    background-color: var(--ns-paint);
    color: var(--ns-surface);
    cursor: pointer;
}

.ns-card-export svg { width: 1.05rem; height: 1.05rem; }
.ns-card-export:hover { filter: brightness(1.08); }
.ns-card-export:focus-visible { outline: 2px solid var(--ns-paint); outline-offset: 2px; }

/* ── The rank of a column (بند ۸.۴ و ۱۰) ───────────────────────────────── */

.ns-std .ns-bar-rank {
    position: absolute;
    top: 0.3rem;
    inset-inline: 0;
    margin-inline: auto;
    width: max-content;
    min-width: 1.35rem;
    padding: 0 0.3rem;
    border-radius: 9999px;
    background-color: rgba(0, 0, 0, 0.35);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.35rem;
    text-align: center;
    pointer-events: none;
}

/* A column too short to hold it: the rank stands above the figure, in a ring
   of the column's colour, and never over the next column. */
.ns-std .ns-bar-rank.ns-bar-rank-out {
    position: static;
    margin: 0 auto;
    background-color: transparent;
    border: 1px solid var(--ns-paint);
    color: var(--ns-ink);
    line-height: 1.2rem;
}

.ns-std .ns-chart-compact .ns-bar-rank { font-size: 0.62rem; min-width: 1.1rem; line-height: 1.1rem; }

.ns-std .ns-bar-value { color: var(--ns-ink); }

/* A team's or a club's own logo, under its column (بند ۱۰). */
.ns-std .ns-bar-logo {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
    flex: 0 0 auto;
}

.ns-std .ns-chart-compact .ns-bar-logo { width: 1.15rem; height: 1.15rem; }

/* ── The pie: ten clearly different colours (بند ۹.۱) ──────────────────── */

.ns-std .ns-slice-0 { fill: #3b82f6; }
.ns-std .ns-slice-1 { fill: #f59e0b; }
.ns-std .ns-slice-2 { fill: #10b981; }
.ns-std .ns-slice-3 { fill: #ef4444; }
.ns-std .ns-slice-4 { fill: #a855f7; }
.ns-std .ns-slice-5 { fill: #06b6d4; }
.ns-std .ns-slice-6 { fill: #ec4899; }
.ns-std .ns-slice-7 { fill: #84cc16; }
.ns-std .ns-slice-8 { fill: #f97316; }
.ns-std .ns-slice-9 { fill: #c4a484; }
.ns-std .ns-slice-10 { fill: #6b7280; }

.ns-std :is(.ns-slice-0, .ns-slice-1, .ns-slice-2, .ns-slice-3, .ns-slice-4, .ns-slice-5, .ns-slice-6, .ns-slice-7, .ns-slice-8, .ns-slice-9, .ns-slice-10) { opacity: 1; }

.ns-std .ns-legend-swatch.ns-slice-0 { background-color: #3b82f6; }
.ns-std .ns-legend-swatch.ns-slice-1 { background-color: #f59e0b; }
.ns-std .ns-legend-swatch.ns-slice-2 { background-color: #10b981; }
.ns-std .ns-legend-swatch.ns-slice-3 { background-color: #ef4444; }
.ns-std .ns-legend-swatch.ns-slice-4 { background-color: #a855f7; }
.ns-std .ns-legend-swatch.ns-slice-5 { background-color: #06b6d4; }
.ns-std .ns-legend-swatch.ns-slice-6 { background-color: #ec4899; }
.ns-std .ns-legend-swatch.ns-slice-7 { background-color: #84cc16; }
.ns-std .ns-legend-swatch.ns-slice-8 { background-color: #f97316; }
.ns-std .ns-legend-swatch.ns-slice-9 { background-color: #c4a484; }
.ns-std .ns-legend-swatch.ns-slice-10 { background-color: #6b7280; }

.ns-std .ns-slice { stroke: var(--ns-surface); stroke-width: 0.6; }

/* ── The legend: rank, colour, name, count and share side by side (بند ۹.۲) ── */

.ns-std .ns-legend-box { flex: 0 1 30rem; }

.ns-std .ns-legend-row {
    display: grid;
    grid-template-columns: [swatch] 0.75rem [label] minmax(0, 15rem) [value] max-content;
    column-gap: 0.55rem;
    align-items: center;
    justify-content: start;
    font-size: 0.82rem;
}

.ns-std .ns-legend:has(.ns-legend-rank) .ns-legend-row {
    grid-template-columns: [rank] 1.5rem [swatch] 0.75rem [label] minmax(0, 15rem) [value] max-content;
}

.ns-std .ns-legend-rank { grid-column: rank; font-weight: 800; text-align: center; color: var(--ns-ink); }
.ns-std .ns-legend-swatch { grid-column: swatch; }
.ns-std .ns-legend-label { grid-column: label; }
.ns-std .ns-legend-value { grid-column: value; }
.ns-std .ns-legend-share { color: var(--ns-muted); }

/* ── «مبنای آمار و محاسبات» (بند ۶.۳) ─────────────────────────────────── */

.ns-basis-term { color: #0369a1; font-size: 0.9rem; }
.dark .ns-basis-term { color: #7dd3fc; }
.ns-basis-text { font-size: 0.85rem; }
.ns-basis-row { border-bottom-color: rgba(125, 211, 252, 0.22); }

@media (max-width: 640px) {
    .ns-card-tools { margin-inline-start: 0; }
    .ns-basis { max-height: 70vh; }
}