/*
 * «مدیریت واترمارک» — the few pieces the redesign needs that the panel has no
 * component for: the queue's figures, the emphasised date fields, and the
 * placement box a manager drags an advertisement around on.
 *
 * Everything takes a `--std-color-*` token, so a colour changed in
 * «استانداردهای نمایش پنل» moves here with it and nothing has a raw colour of
 * its own.
 */

/* ── The nightly queue's figures ─────────────────────────────────────────── */

.fi-watermark-regen-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem;
    margin-block-end: 1rem;
}

.fi-watermark-regen-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
    border-radius: 0.75rem;
    background-color: var(--std-color-white, #fff);
}

.fi-watermark-regen-stat-label {
    font-size: 0.75rem;
    color: var(--std-color-gray-500, #6b7280);
}

.fi-watermark-regen-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--std-form-field-value-color, rgb(17 24 39));
}

/* «بازتولید در انتظار تکمیل واترمارک عمومی جدید است» — the standing notice
   above the figures, drawn in the warning wash so a queue that is deliberately
   still does not read as a queue that has stalled (مرحله دوم). */
.fi-watermark-regen-hold {
    margin-block-end: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--std-color-warning-300, #fcd34d);
    border-radius: 0.75rem;
    background-color: var(--std-color-mix-warning-400-10, rgb(251 191 36 / 10%));
    line-height: 2;
}

.fi-watermark-regen-hold h3 {
    font-weight: 700;
    color: var(--std-color-warning-700, #b45309);
    margin-block-end: 0.25rem;
}

.fi-watermark-regen-overall {
    margin-block-end: 1rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
    border-radius: 0.75rem;
    line-height: 2;
}

.fi-watermark-regen-times,
.fi-watermark-regen-reasons {
    margin-block-end: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
    border-radius: 0.75rem;
    line-height: 2;
}

.fi-watermark-regen-reasons h3 {
    font-weight: 700;
    margin-block-end: 0.25rem;
}

.fi-watermark-regen-reasons ul {
    list-style: disc;
    padding-inline-start: 1.25rem;
}

/* ── The date and time fields, which must not be lost in the form ────────── */
/* «عنوان فیلدهای تاریخ واضح و ضخیم باشد و کادرهای تاریخ رنگ تأکیدی داشته
    باشند» (الزام‌های «واترمارک-عمومی-۱۴» و «ظاهر-۰۲»). */

.fi-watermark-schedule .fi-fo-field-label .fi-fo-field-label-content {
    font-weight: 700;
    color: var(--std-color-warning-700, #b45309);
}

.fi-watermark-schedule input {
    border-color: var(--std-color-warning-300, #fcd34d);
    background-color: var(--std-color-mix-warning-400-10, rgba(251, 191, 36, 0.1));
    font-weight: 600;
}

/* ── The advertisement placement box ─────────────────────────────────────── */

.fi-ad-placement-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-block-end: 0.5rem;
}

.fi-ad-placement-shape {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--std-color-gray-300, #d1d5db);
    border-radius: 0.5rem;
    font-size: 0.75rem;
}

.fi-ad-placement-shape-active {
    border-color: var(--std-color-primary-500, #f59e0b);
    background-color: var(--std-color-mix-primary-400-10, rgba(245, 158, 11, 0.1));
    font-weight: 700;
}

.fi-ad-placement-stage {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--std-color-gray-300, #d1d5db);
    border-radius: 0.75rem;
    background-color: var(--std-color-gray-100, #f3f4f6);
    touch-action: none;
    user-select: none;
}

.fi-ad-placement-stage-landscape { aspect-ratio: 3 / 2; }
.fi-ad-placement-stage-portrait { aspect-ratio: 2 / 3; max-width: 22rem; }

.fi-ad-placement-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fi-ad-placement-backdrop-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: var(--std-color-gray-500, #6b7280);
}

.fi-ad-placement-neighbour {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--std-color-info-400, #60a5fa);
    background-color: var(--std-color-mix-info-400-10, rgba(96, 165, 250, 0.1));
    font-size: 0.625rem;
    color: var(--std-color-info-700, #1d4ed8);
}

.fi-ad-placement-box {
    position: absolute;
    cursor: move;
    border: 2px solid var(--std-color-primary-500, #f59e0b);
    background-color: var(--std-color-mix-primary-400-10, rgba(245, 158, 11, 0.1));
}

.fi-ad-placement-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.fi-ad-placement-box-collides {
    border-color: var(--std-color-danger-500, #ef4444);
}

.fi-ad-placement-handle {
    position: absolute;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid var(--std-color-primary-500, #f59e0b);
    border-radius: 9999px;
    background-color: var(--std-color-white, #fff);
}

.fi-ad-placement-handle-tl { inset-block-start: -0.375rem; inset-inline-start: -0.375rem; cursor: nwse-resize; }
.fi-ad-placement-handle-tr { inset-block-start: -0.375rem; inset-inline-end: -0.375rem; cursor: nesw-resize; }
.fi-ad-placement-handle-bl { inset-block-end: -0.375rem; inset-inline-start: -0.375rem; cursor: nesw-resize; }
.fi-ad-placement-handle-br { inset-block-end: -0.375rem; inset-inline-end: -0.375rem; cursor: nwse-resize; }

.fi-ad-placement-readout {
    margin-block-start: 0.5rem;
    font-size: 0.75rem;
    color: var(--std-color-gray-500, #6b7280);
}

.fi-ad-placement-warning {
    margin-block-start: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--std-color-danger-600, #dc2626);
}

/* ── The sample thumbnails in the lists ──────────────────────────────────── */

.fi-watermark-sample {
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
    background-color: var(--std-color-gray-100, #f3f4f6);
}

/* ── «واترمارک افقی» و «واترمارک عمودی» in the list ──────────────────────── */
/* الزام «واترمارک-۱۴»: the list shows the two files themselves rather than the
   result of a test. Almost every one of them is a transparent PNG of a pale
   logo, which on a near-black cell is invisible — so the frame is a light
   check, the way an image editor shows transparency, and the mark is legible
   whatever colour it is drawn in. */

.fi-watermark-file-cell {
    display: flex;
    width: 100%;
    justify-content: center;
}

.fi-watermark-file-image {
    height: 3rem;
    max-width: 8rem;
    object-fit: contain;
    border-radius: 0.375rem;
    padding: 0.125rem;
    border: 1px solid var(--gray-200);
    background-color: var(--gray-100);
    background-image:
        linear-gradient(45deg, var(--gray-200) 25%, transparent 25%),
        linear-gradient(-45deg, var(--gray-200) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--gray-200) 75%),
        linear-gradient(-45deg, transparent 75%, var(--gray-200) 75%);
    background-size: 0.75rem 0.75rem;
    background-position: 0 0, 0 0.375rem, 0.375rem -0.375rem, -0.375rem 0;
}

.dark .fi-watermark-file-image {
    border-color: var(--gray-700);
    background-color: var(--gray-800);
    background-image:
        linear-gradient(45deg, var(--gray-700) 25%, transparent 25%),
        linear-gradient(-45deg, var(--gray-700) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--gray-700) 75%),
        linear-gradient(-45deg, transparent 75%, var(--gray-700) 75%);
}

.fi-watermark-file-empty {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.dark .fi-watermark-file-empty {
    color: var(--gray-400);
}

/* ── «پیش‌نمایش» ─────────────────────────────────────────────────────────── */
/* الزام «واترمارک-۱۳»: the real 600px display copy, in a modal, on the same
   checked frame — a mark on a photograph is opaque, but the frame keeps the two
   previews reading as one thing. */

.fi-watermark-preview {
    display: flex;
    justify-content: center;
}

.fi-watermark-preview img {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 0.5rem;
    border: 1px solid var(--gray-200);
}

.dark .fi-watermark-preview img {
    border-color: var(--gray-700);
}

.fi-watermark-preview-empty {
    font-size: 0.875rem;
    line-height: 2;
    color: var(--danger-600);
}

.dark .fi-watermark-preview-empty {
    color: var(--danger-400);
}

/* ── The read-only history on a watermark's own page ─────────────────────── */

/* الزام «واترمارک-۱۵»: «سابقه نسخه‌ها» and «تاریخچه تغییرات» were written for
   the light panel and then read on the dark one — pale grey text on a white
   cell, and a striped table whose even rows were near-white behind near-white
   words. Nothing was removed to fix it and no historical value was rewritten;
   every surface, border and piece of text below simply has the night reading it
   never had. The `.dark` rules follow the light ones, exactly as the rest of the
   panel's stylesheets do. */

.fi-watermark-history-empty {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.dark .fi-watermark-history-empty {
    color: var(--gray-400);
}

.fi-watermark-history-row {
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    margin-block-end: 0.5rem;
    font-size: 0.8125rem;
    line-height: 2;
    color: var(--gray-700);
}

.dark .fi-watermark-history-row {
    border-color: var(--gray-700);
    background-color: var(--gray-900);
    color: var(--gray-200);
}

/* The labels inside a row — «محدوده این دوره», «شروع واقعی استفاده» — carry the
   panel's own yellow so a row reads as label/value rather than as one grey
   paragraph. */
.fi-watermark-history-row strong {
    color: var(--warning-600);
}

.dark .fi-watermark-history-row strong {
    color: var(--warning-400);
}

.fi-watermark-history-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 0.25rem;
}

.fi-watermark-history-head strong {
    color: var(--gray-900);
}

.dark .fi-watermark-history-head strong {
    color: var(--color-white, #fff);
}

.fi-watermark-history-samples {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 0.25rem;
}

/* The file chips were the worst of it: white-on-white in the dark panel, so the
   file names in them could not be read at all. */
.fi-watermark-history-sample {
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid var(--gray-200);
    background-color: var(--gray-100);
    color: var(--gray-700);
    font-size: 0.6875rem;
}

.dark .fi-watermark-history-sample {
    border-color: var(--gray-700);
    background-color: var(--gray-800);
    color: var(--gray-100);
}

.fi-watermark-changes {
    width: 100%;
    font-size: 0.8125rem;
    border-collapse: collapse;
    color: var(--gray-700);
}

.dark .fi-watermark-changes {
    color: var(--gray-200);
}

.fi-watermark-changes th,
.fi-watermark-changes td {
    padding: 0.375rem 0.5rem;
    border-block-end: 1px solid var(--gray-200);
    text-align: start;
}

.dark .fi-watermark-changes th,
.dark .fi-watermark-changes td {
    border-block-end-color: var(--gray-700);
}

.fi-watermark-changes thead th {
    font-weight: 700;
    color: var(--gray-500);
}

.dark .fi-watermark-changes thead th {
    color: var(--warning-400);
}

.fi-watermark-changes tbody tr:nth-child(even) {
    background-color: var(--gray-50);
}

.dark .fi-watermark-changes tbody tr:nth-child(even) {
    background-color: var(--gray-800);
}

/* The two boxes themselves: the section body is the panel's own surface in the
   light theme and has to be the dark one at night, or the readable text above
   sits on a white card again. */
.dark .fi-watermark-history-section .fi-sc-section-content-ctn,
.dark .fi-watermark-history-section .fi-section-content-ctn {
    background-color: var(--gray-900);
}

/* ── The top of «مدیریت واترمارک» ────────────────────────────────────────── */
/* «واترمارک-رابط-۰۱ و ۰۲»: «واترمارک جدید» stays on the far left of the page,
   only higher — on the title's own line — and the sentence under the title then
   has the whole width and reads as one line.

   Filament's header is a flex row of two children: the block holding the
   breadcrumbs, the title and the description, and the box holding the buttons.
   The description therefore stops where the button begins, which is what broke
   it over three lines and left the button halfway down them. Made a grid, with
   the first child letting its own children through (`display: contents`), the
   three parts can be placed: breadcrumbs across the top, title and button
   facing each other on the next line, and the description across both columns
   under them. Nothing is positioned by hand and no width is written down, so it
   holds at any size — and the button's own colour, size and look are untouched. */

.fi-watermark-list-page .fi-header-subheading {
    /* The panel caps a description at 42rem, which on this page is three lines
       of a sentence that fits in one. */
    max-width: none;
}

@media (min-width: 768px) {
    .fi-watermark-list-page .fi-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        row-gap: 0;
    }

    .fi-watermark-list-page .fi-header > div:first-child {
        display: contents;
    }

    .fi-watermark-list-page .fi-header .fi-breadcrumbs {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-block-end: 1rem;
    }

    .fi-watermark-list-page .fi-header-heading {
        grid-column: 1;
        grid-row: 2;
    }

    .fi-watermark-list-page .fi-header-actions-ctn {
        grid-column: 2;
        grid-row: 2;
        /* The space the panel leaves above the buttons is for the stacked
           header, where they sit under the title. Here they are beside it and
           that space would push them off its line. */
        margin-block-start: 0;
    }

    .fi-watermark-list-page .fi-header-subheading {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-block-start: 0.5rem;
    }
}

/* ------------------------------------------------------------------
   «وضعیت اجرای واترمارک» on the edit screen (الزام «واترمارک-۰۵»)
   ------------------------------------------------------------------ */

.fi-watermark-run-status {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.fi-watermark-run-facts,
.fi-watermark-run-numbers {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.fi-watermark-run-fact,
.fi-watermark-run-number {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgb(var(--gray-200));
    border-radius: 0.6rem;
    background: rgb(var(--gray-50));
}

.dark .fi-watermark-run-fact,
.dark .fi-watermark-run-number {
    border-color: rgb(var(--gray-700));
    background: rgb(var(--gray-900));
}

.fi-watermark-run-label {
    font-size: 0.75rem;
    color: rgb(var(--gray-500));
}

.dark .fi-watermark-run-label {
    color: rgb(var(--gray-400));
}

.fi-watermark-run-value {
    font-size: 0.85rem;
    font-weight: 600;
}

.fi-watermark-run-figure {
    font-size: 1.1rem;
    font-weight: 700;
}

/* The three figures keep the meaning their colours carry elsewhere in the
   management: done is green, waiting is the standard amber, an error is red. */
.fi-watermark-run-done .fi-watermark-run-figure,
.fi-watermark-run-yes {
    color: var(--success-600, #16a34a);
}

.dark .fi-watermark-run-done .fi-watermark-run-figure,
.dark .fi-watermark-run-yes {
    color: var(--success-400, #4ade80);
}

.fi-watermark-run-pending .fi-watermark-run-figure {
    color: var(--warning-600, #d97706);
}

.dark .fi-watermark-run-pending .fi-watermark-run-figure {
    color: var(--warning-400, #fbbf24);
}

.fi-watermark-run-failed .fi-watermark-run-figure,
.fi-watermark-run-no {
    color: var(--danger-600, #dc2626);
}

.dark .fi-watermark-run-failed .fi-watermark-run-figure,
.dark .fi-watermark-run-no {
    color: var(--danger-400, #f87171);
}

.fi-watermark-run-bar {
    height: 0.5rem;
    border-radius: 999px;
    overflow: hidden;
    background: rgb(var(--gray-200));
}

.dark .fi-watermark-run-bar {
    background: rgb(var(--gray-700));
}

.fi-watermark-run-bar > span {
    display: block;
    height: 100%;
    background: var(--success-500, #22c55e);
}

.fi-watermark-run-note {
    font-size: 0.78rem;
    line-height: 1.9;
    color: rgb(var(--gray-500));
}

.dark .fi-watermark-run-note {
    color: rgb(var(--gray-400));
}

.fi-watermark-run-link {
    align-self: flex-start;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--warning-600, #d97706);
}

.dark .fi-watermark-run-link {
    color: var(--warning-400, #fbbf24);
}

/* ------------------------------------------------------------------
   The three run figures in the list.

   «استانداردسازی نمای پنل» owns `.fi-ta-text-item` and its block is printed
   last, so a column's own `->color()` computes to the standard's near-black
   however correct the markup is. Each of these three is excepted by name, with
   the panel's own token rather than `var(--text)` — the derived value for
   `warning` is a brown two steps darker than the yellow the rest of the panel
   uses (الزام «واترمارک-۰۳»).
   ------------------------------------------------------------------ */

.fi-ta-cell-regenerated-photos .fi-ta-text-item.fi-color {
    color: var(--success-600, #16a34a);
}

.dark .fi-ta-cell-regenerated-photos .fi-ta-text-item.fi-color {
    color: var(--success-400, #4ade80);
}

.fi-ta-cell-pending-regeneration .fi-ta-text-item.fi-color-warning {
    color: var(--warning-600, #d97706);
}

.dark .fi-ta-cell-pending-regeneration .fi-ta-text-item.fi-color-warning {
    color: var(--warning-400, #fbbf24);
}

.fi-ta-cell-pending-regeneration .fi-ta-text-item.fi-color-success {
    color: var(--success-600, #16a34a);
}

.dark .fi-ta-cell-pending-regeneration .fi-ta-text-item.fi-color-success {
    color: var(--success-400, #4ade80);
}

.fi-ta-cell-failed-regeneration .fi-ta-text-item.fi-color {
    color: var(--danger-600, #dc2626);
}

.dark .fi-ta-cell-failed-regeneration .fi-ta-text-item.fi-color {
    color: var(--danger-400, #f87171);
}

/* ------------------------------------------------------------------
   The list carries three more columns than it did — «تاریخ شروع»,
   «زمان شروع» and «بازتولیدشده‌ها» — and at that width the row's own
   «ویرایش» was pushed off the right-hand edge of the card.

   Nothing is dropped and nothing is shrunk: the headings are simply
   allowed to take a second line, which is where the width was going.
   Only this management's list is affected.
   ------------------------------------------------------------------ */

.fi-watermark-list-page .fi-ta-header-cell,
.fi-watermark-list-page .fi-ta-header-cell button,
.fi-watermark-list-page .fi-ta-header-cell span {
    /* At the spaces only. `overflow-wrap: anywhere` fits more and breaks
       «وضعیت» in half to do it, which is not a heading any more. */
    white-space: normal;
    overflow-wrap: normal;
    word-break: keep-all;
}

.fi-watermark-list-page .fi-ta-header-cell {
    vertical-align: bottom;
}

/* ── «اعمال و بازتولید واترمارک»، به‌عنوان یک تب و یک داشبورد عملیاتی ──────── */
/*
 * تسک ۱۴۰۵/۰۶/۰۳/۰۸ — الزام‌های «واترمارک-۰۷» تا «واترمارک-۱۵».
 *
 * The page said everything and showed nothing: the whole state of the operation
 * was a paragraph, the ten figures were ten identical white boxes, and the
 * times and priorities were three tall boxes of prose. Here is the shape that
 * replaces it — a heading with its two buttons opposite, a strip of labelled
 * cells, figures coloured by what they mean, small fact cards, and one box with
 * two lists in it.
 *
 * Every colour is a `--std-color-*` token, as everything above is, so a colour
 * changed in «استانداردهای نمایش پنل» moves with it.
 */

/* الزام «واترمارک-۰۷»: the buttons on the heading's own line, opposite it. */
.fi-watermark-regen-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-end: 0.5rem;
}

.fi-watermark-regen-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--std-form-field-value-color, rgb(17 24 39));
}

:where(.dark) .fi-watermark-regen-title {
    color: var(--std-color-gray-100, #f3f4f6);
}

.fi-watermark-regen-head-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* …which is what buys the sentence the whole width, so it stays at about two
   lines instead of the four it used to take beside the buttons. */
.fi-watermark-regen-lede {
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--std-color-gray-500, #6b7280);
    margin-block-end: 1rem;
}

/* الزام «واترمارک-۰۸»: the overall state as a strip of cells, one concept each,
   each carrying the colour of what it means. */
.fi-watermark-regen-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.5rem;
    margin-block-end: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
    border-radius: 0.75rem;
}

.fi-watermark-regen-bar-cell {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-inline: 0.5rem;
    border-inline-start: 1px solid var(--std-color-gray-200, #e5e7eb);
}

.fi-watermark-regen-bar-cell:last-child {
    border-inline-start: 0;
}

.fi-watermark-regen-bar-label {
    font-size: 0.7rem;
    color: var(--std-color-gray-500, #6b7280);
}

.fi-watermark-regen-bar-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--std-form-field-value-color, rgb(17 24 39));
}

:where(.dark) .fi-watermark-regen-bar-value {
    color: var(--std-color-gray-100, #f3f4f6);
}

/* «وضعیت صحیح و فعال: سبز» */
.fi-watermark-regen-bar-value.is-well {
    color: var(--std-color-success-600, #16a34a);
}

:where(.dark) .fi-watermark-regen-bar-value.is-well {
    color: var(--std-color-success-400, #4ade80);
}

/* «هشدار یا توقف: قرمز» */
.fi-watermark-regen-bar-value.is-alert {
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-watermark-regen-bar-value.is-alert {
    color: var(--std-color-danger-400, #f87171);
}

/* «درصد پیشرفت: رنگ شاخص و واضح» — the panel's own information blue. */
.fi-watermark-regen-bar-value.is-progress {
    font-size: 1.1rem;
    color: var(--std-color-info-600, #2563eb);
}

:where(.dark) .fi-watermark-regen-bar-value.is-progress {
    color: var(--std-color-info-300, #93c5fd);
}

/* «واترمارک فعال: زرد/طلایی» — the agency's own identity yellow. */
.fi-watermark-regen-bar-value.is-mark {
    color: var(--std-color-warning-600, #d97706);
}

:where(.dark) .fi-watermark-regen-bar-value.is-mark {
    color: var(--std-color-warning-400, #fbbf24);
}

/* الزام «واترمارک-۰۹»: the figures, in the tone of what each one means. The
   card itself keeps the panel's card, and only the number is coloured — a wall
   of ten coloured boxes says less than ten numbers that mean something. */
.fi-watermark-regen-stat.is-success .fi-watermark-regen-stat-value {
    color: var(--std-color-success-600, #16a34a);
}

:where(.dark) .fi-watermark-regen-stat.is-success .fi-watermark-regen-stat-value {
    color: var(--std-color-success-400, #4ade80);
}

.fi-watermark-regen-stat.is-danger .fi-watermark-regen-stat-value {
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-watermark-regen-stat.is-danger .fi-watermark-regen-stat-value {
    color: var(--std-color-danger-400, #f87171);
}

.fi-watermark-regen-stat.is-info .fi-watermark-regen-stat-value {
    color: var(--std-color-info-600, #2563eb);
}

:where(.dark) .fi-watermark-regen-stat.is-info .fi-watermark-regen-stat-value {
    color: var(--std-color-info-300, #93c5fd);
}

:where(.dark) .fi-watermark-regen-stat {
    background-color: var(--std-color-mix-color-white-5, rgb(255 255 255 / 5%));
    border-color: var(--std-color-gray-700, #374151);
}

:where(.dark) .fi-watermark-regen-stat-value {
    color: var(--std-color-gray-100, #f3f4f6);
}

/* الزام «واترمارک-۱۰»: the priorities, the times and the reasons as small cards
   side by side, each with its value told apart from its label. */
.fi-watermark-regen-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.5rem;
    margin-block-end: 1rem;
}

.fi-watermark-regen-fact {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
    border-radius: 0.75rem;
    background-color: var(--std-color-white, #fff);
}

:where(.dark) .fi-watermark-regen-fact {
    background-color: var(--std-color-mix-color-white-5, rgb(255 255 255 / 5%));
    border-color: var(--std-color-gray-700, #374151);
}

.fi-watermark-regen-fact-label {
    font-size: 0.7rem;
    color: var(--std-color-gray-500, #6b7280);
}

.fi-watermark-regen-fact-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--std-form-field-value-color, rgb(17 24 39));
}

:where(.dark) .fi-watermark-regen-fact-value {
    color: var(--std-color-gray-100, #f3f4f6);
}

.fi-watermark-regen-fact-value.is-alert {
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-watermark-regen-fact-value.is-alert {
    color: var(--std-color-danger-400, #f87171);
}

.fi-watermark-regen-fact-value.is-well {
    color: var(--std-color-success-600, #16a34a);
}

:where(.dark) .fi-watermark-regen-fact-value.is-well {
    color: var(--std-color-success-400, #4ade80);
}

/* «تاریخ‌ها و زمان‌های مهم رنگی و برجسته باشند» */
.fi-watermark-regen-fact-value.is-moment {
    color: var(--std-color-warning-600, #d97706);
}

:where(.dark) .fi-watermark-regen-fact-value.is-moment {
    color: var(--std-color-warning-400, #fbbf24);
}

/* الزام «واترمارک-۱۲»: one box, two lists. */
.fi-watermark-regen-queue-tabs {
    display: flex;
    gap: 0.25rem;
    margin-block-end: 0.5rem;
}

.fi-watermark-regen-queue-tab {
    padding: 0.4rem 0.9rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--std-color-gray-500, #6b7280);
    background-color: transparent;
    cursor: pointer;
}

.fi-watermark-regen-queue-tab.fi-active {
    color: var(--std-color-warning-700, #b45309);
    background-color: var(--std-color-mix-warning-400-10, rgb(251 191 36 / 10%));
}

:where(.dark) .fi-watermark-regen-queue-tab.fi-active {
    color: var(--std-color-warning-400, #fbbf24);
}

/* ── The coloured figures inside the two tables ──────────────────────────── */
/*
 * «استانداردسازی نمای پنل» owns `.fi-ta-text-item` and prints its rule last, so
 * a column's own `->color()` computes to the standard's near-black however
 * right the markup looks. These are the exceptions, written on the very element
 * that carries `fi-ta-text-item fi-color` — where `->extraAttributes()` lands —
 * rather than as a bare rule, which would switch colour back on for every
 * column in the panel at once.
 */
.fi-ta-text-item.fi-color.fi-watermark-count-done {
    color: var(--success-600, #16a34a);
}

:where(.dark) .fi-ta-text-item.fi-color.fi-watermark-count-done {
    color: var(--success-400, #4ade80);
}

.fi-ta-text-item.fi-color.fi-watermark-count-left {
    color: var(--danger-600, #dc2626);
}

:where(.dark) .fi-ta-text-item.fi-color.fi-watermark-count-left {
    color: var(--danger-400, #f87171);
}

/* الزام «واترمارک-۰۳»: «تاریخ شروع: سبز — زمان شروع: سبز». */
.fi-ta-text-item.fi-color.fi-watermark-report-start {
    color: var(--success-600, #16a34a);
}

:where(.dark) .fi-ta-text-item.fi-color.fi-watermark-report-start {
    color: var(--success-400, #4ade80);
}

/* ── «در حال بارگذاری اطلاعات…» ───────────────────────────────────────────
   What stands in a heavy tab's place while its figures are being counted
   (الزام «واترمارک-۰۵»). Deliberately quiet and centred: it is a state, not a
   thing to read, and the tab it sits in is otherwise empty. */
.fi-watermark-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 12rem;
    padding: 2rem 1rem;
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
    border-radius: 0.75rem;
    background-color: var(--std-color-white, #fff);
}

:where(.dark) .fi-watermark-loading {
    border-color: var(--std-color-gray-700, #374151);
    background-color: var(--std-color-gray-900, #111827);
}

.fi-watermark-loading-spinner {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--std-color-primary-500, #f59e0b);
}

.fi-watermark-loading-text {
    color: var(--std-color-gray-500, #6b7280);
}

:where(.dark) .fi-watermark-loading-text {
    color: var(--std-color-gray-400, #9ca3af);
}

/* ── تسک ۱۴۰۵/۰۶/۰۳/۱۵ — شفاف‌سازی صفحه و اصلاح جدول‌های وضعیت ────────────── */

/*
 * الزام‌های «واترمارک-اصلاح-۰۱» تا «۰۴»: what the page is for, and one line per
 * button. The prose reads like the sentence already under the heading — same
 * size, same line height, same grey — so the page has one voice and not three.
 */
.fi-watermark-regen-purpose {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-block-end: 0.75rem;
}

.fi-watermark-regen-purpose p,
.fi-watermark-regen-button-text {
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--std-color-gray-500, #6b7280);
}

:where(.dark) .fi-watermark-regen-purpose p,
:where(.dark) .fi-watermark-regen-button-text {
    color: var(--std-color-gray-400, #9ca3af);
}

.fi-watermark-regen-buttons-note {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-block-end: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
    border-radius: 0.75rem;
}

:where(.dark) .fi-watermark-regen-buttons-note {
    border-color: var(--std-color-gray-700, #374151);
}

/* «عنوان دکمه در ابتدای خط با رنگ متمایز» — the agency's own identity yellow,
   which is what every heading-level highlight in this panel is drawn in. */
.fi-watermark-regen-button-name {
    font-weight: 700;
    color: var(--std-color-warning-600, #d97706);
}

:where(.dark) .fi-watermark-regen-button-name {
    color: var(--std-color-warning-400, #fbbf24);
}

/*
 * الزام‌های «واترمارک-اصلاح-۰۵» و «۰۶»: the three boxes at the foot of the page,
 * each with a heading, an explanation, its own figures — or the sentence that
 * says it has none.
 */
.fi-watermark-regen-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0.75rem;
}

.fi-watermark-regen-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
    border-radius: 0.75rem;
    background-color: var(--std-color-white, #fff);
}

:where(.dark) .fi-watermark-regen-section {
    border-color: var(--std-color-gray-700, #374151);
    background-color: var(--std-color-gray-900, #111827);
}

.fi-watermark-regen-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--std-form-field-value-color, rgb(17 24 39));
}

:where(.dark) .fi-watermark-regen-section-title {
    color: var(--std-color-gray-100, #f3f4f6);
}

.fi-watermark-regen-section-text,
.fi-watermark-regen-section-where,
.fi-watermark-regen-section-empty {
    font-size: 0.8rem;
    line-height: 1.9;
    color: var(--std-color-gray-500, #6b7280);
}

:where(.dark) .fi-watermark-regen-section-text,
:where(.dark) .fi-watermark-regen-section-where,
:where(.dark) .fi-watermark-regen-section-empty {
    color: var(--std-color-gray-400, #9ca3af);
}

/* «در حال حاضر موردی برای نمایش وجود ندارد.» — said, and visibly a state
   rather than a figure. */
.fi-watermark-regen-section-empty {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--std-color-gray-50, #f9fafb);
}

:where(.dark) .fi-watermark-regen-section-empty {
    background-color: var(--std-color-gray-800, #1f2937);
}

.fi-watermark-regen-section-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fi-watermark-regen-section-figure {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 7rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    background-color: var(--std-color-gray-50, #f9fafb);
}

:where(.dark) .fi-watermark-regen-section-figure {
    background-color: var(--std-color-gray-800, #1f2937);
}

.fi-watermark-regen-section-figure-label {
    font-size: 0.7rem;
    color: var(--std-color-gray-500, #6b7280);
}

.fi-watermark-regen-section-figure-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--std-form-field-value-color, rgb(17 24 39));
}

:where(.dark) .fi-watermark-regen-section-figure-value {
    color: var(--std-color-gray-100, #f3f4f6);
}

/* ── The loading states that are not a whole tab ─────────────────────────── */
/*
 * الزام‌های «واترمارک-اصلاح-۰۸» تا «۱۰». The full-height box above is right when
 * a tab has nothing in it yet; these two are for the waits that happen with the
 * page already on screen — switching a sub-tab, or switching a tab of the
 * management itself. They are a line rather than a box, so nothing jumps.
 */
.fi-watermark-regen-queue-switching {
    display: none;
    align-items: center;
    gap: 0.5rem;
    margin-inline-start: 0.5rem;
    font-size: 0.8rem;
    color: var(--std-color-gray-500, #6b7280);
}

:where(.dark) .fi-watermark-regen-queue-switching {
    color: var(--std-color-gray-400, #9ca3af);
}

.fi-watermark-tab-loading {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem;
    font-size: 0.8rem;
    color: var(--std-color-gray-500, #6b7280);
}

:where(.dark) .fi-watermark-tab-loading {
    color: var(--std-color-gray-400, #9ca3af);
}

/* ── The columns this task added or recoloured ───────────────────────────── */

/* الزام‌های «واترمارک-اصلاح-۱۳» و «۱۶»: «مقدار تاریخ گالری با رنگ زرد» — the
   value, never the heading. */
.fi-ta-text-item.fi-color.fi-watermark-gallery-date {
    color: var(--warning-600, #d97706);
}

:where(.dark) .fi-ta-text-item.fi-color.fi-watermark-gallery-date {
    color: var(--warning-400, #fbbf24);
}

/* الزام «واترمارک-اصلاح-۴۳»: one size, one colour, one spacing for «ویو گالری»
   and «ویو عکس», in every table of this management. */
.fi-ta-icon.fi-watermark-view-link {
    justify-content: center;
}

.fi-ta-icon.fi-watermark-view-link svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* الزام‌های «واترمارک-اصلاح-۱۹» تا «۲۱»: «خطا» — a green tick, or the shortfall
   in red. `.fi-ta-col` is a flex row, so the cell has to take the whole width
   or a centred mark hugs the edge of its column. */
.fi-watermark-error-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.fi-watermark-error-count {
    font-weight: 700;
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-watermark-error-count {
    color: var(--std-color-danger-400, #f87171);
}

.fi-watermark-error-none {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--std-color-success-600, #16a34a);
}

:where(.dark) .fi-watermark-error-none {
    color: var(--std-color-success-400, #4ade80);
}

/* ── تسک ۱۴۰۵/۰۶/۰۴/۰۶ — مسیر دسترسی و نمایش آمار در مدیریت واترمارک ─────── */

/*
 * الزام‌های «واترمارک-آمار-۰۳» تا «۱۳»: «کل», «بازتولیدشده» و «باقی‌مانده» over
 * «وضعیت گالری‌ها» و «وضعیت عکس‌ها».
 *
 * They stand on the list's own toolbar row — the line its search field and
 * column button already stand on — at its right end, which is where the
 * reference image of the task puts them; and they are the same three boxes on
 * all four sub-tabs, only the words and the numbers differing
 * (الزام‌های «واترمارک-آمار-۰۵» و «۱۰»).
 *
 * The frame and the words carry the meaning and nothing is filled in: yellow
 * for the whole, green for what is done, red for what is left, which is the
 * agreement الزام «واترمارک-آمار-۲۲» asks the whole management to keep. Because
 * the border takes `currentColor`, a box has one colour written once.
 */
.fi-watermark-status-totals {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    /* The toolbar sets a `column-gap` of its own on every child it holds, and
       a row of three boxes an inch apart is not the row in the image. */
    column-gap: 0.75rem;
}

.fi-watermark-status-total {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid currentColor;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}

.fi-watermark-status-total.is-total {
    color: var(--std-color-warning-600, #d97706);
}

:where(.dark) .fi-watermark-status-total.is-total {
    color: var(--std-color-warning-400, #fbbf24);
}

.fi-watermark-status-total.is-done {
    color: var(--std-color-success-600, #16a34a);
}

:where(.dark) .fi-watermark-status-total.is-done {
    color: var(--std-color-success-400, #4ade80);
}

.fi-watermark-status-total.is-left {
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-watermark-status-total.is-left {
    color: var(--std-color-danger-400, #f87171);
}

/* On a telephone the three sit under one another rather than being squeezed
   into one line no thumb can read (الزام «واترمارک-آمار-۲۶»). */
@media (max-width: 40rem) {
    .fi-watermark-status-totals {
        flex: 1 1 100%;
    }

    .fi-watermark-status-total {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/*
 * الزام‌های «واترمارک-آمار-۱۴» تا «۱۶»: «مدیر وقتی به این صفحه نیاز دارد که…»
 * as a warning rather than as the fourth grey paragraph of four.
 *
 * Red, because what it describes is stepping outside the automatic cycle by
 * hand — the same red this management already means «باقی‌مانده / خطا» by. It
 * is a frame and a wash rather than red prose on the page's own surface, so it
 * is found at a glance and not read into (الزام «واترمارک-آمار-۱۷»).
 */
.fi-watermark-regen-manual-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-block-end: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--std-color-danger-500, #ef4444);
    border-radius: 0.75rem;
    background-color: var(--std-color-mix-danger-400-10, rgb(248 113 113 / 10%));
}

.fi-watermark-regen-manual-note-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-block-start: 0.2rem;
    border: 1px solid currentColor;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-watermark-regen-manual-note-mark {
    color: var(--std-color-danger-400, #f87171);
}

.fi-watermark-regen-manual-note-text {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.9;
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-watermark-regen-manual-note-text {
    color: var(--std-color-danger-400, #f87171);
}

/*
 * الزام‌های «واترمارک-آمار-۱۸» تا «۲۱»: the little boxes inside the three cards
 * at the foot of the page take the colour of what they hold — «در صف» yellow,
 * «انجام‌شده» green — on the frame alone. The card behind them stays as dark as
 * its neighbours and the number itself stays as it was.
 */
.fi-watermark-regen-section-figure.is-queue {
    border: 1px solid var(--std-color-warning-500, #f59e0b);
}

.fi-watermark-regen-section-figure.is-done {
    border: 1px solid var(--std-color-success-500, #22c55e);
}