/*
 * «فراداده عکس‌ها» — the appearance rules of تسک ۱۴۰۵/۰۶/۰۸/۰۵ و ۰۶.
 *
 * A stylesheet of its own, beside `agency-watermarks.css` rather than inside
 * it: this management borrows that one's markup — the `fi-watermark-regen-*`
 * frame, its cells and its tab strip — and بند ۷۹ asks the whole of this task to
 * stay inside the panel's existing visual language. What is here is the
 * *difference* the task asks for, scoped to this management so no other screen
 * moves.
 *
 * Everything takes a `--std-color-*` token with the panel's own fallback, so a
 * colour changed in «استانداردسازی نمای پنل» reaches this file too.
 *
 * Nothing here declares a size or a weight for a selector the standards survey
 * owns: every rule is under `.fi-photo-metadata-page` or a `fi-metadata-*`
 * class of this management's own.
 */

/* ─────────────────────────────────────────────────────────────────────────
   بند ۴ — the main tab strip wraps instead of scrolling sideways.

   Filament draws the strip as a single flex row with `overflow-x: auto`, so on
   a narrow window four of the nine tabs were simply off-screen behind a
   scrollbar. Wrapping is the whole fix: everything is visible at every width,
   the second line is centred, and a narrower window makes a third rather than
   hiding anything.
   ───────────────────────────────────────────────────────────────────────── */

.fi-photo-metadata-page .fi-tabs {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    row-gap: 0.35rem;
}

/* The scroll container Filament wraps the strip in, when it draws one. */
.fi-photo-metadata-page .fi-tabs-ctn,
.fi-photo-metadata-page .fi-tabs-container {
    overflow-x: visible;
}

.fi-photo-metadata-page .fi-tabs-item {
    flex: 0 0 auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   بند ۵ — the agency's own mark while anything is loading.

   A slow breath rather than a spin: «حرکت بارگذاری نرم و واضح باشد». The mark
   is the panel's gold logo, so the loading state cannot drift away from the
   panel's identity.
   ───────────────────────────────────────────────────────────────────────── */

.fi-metadata-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2.25rem 1rem;
    color: var(--std-color-gray-500, #6b7280);
    font-size: 0.85rem;
}

.fi-metadata-tab-loading {
    display: none;
    padding: 0.75rem 1rem;
}

.fi-metadata-loading-mark {
    display: block;
    border-radius: 50%;
    animation: fi-metadata-breathe 1.6s ease-in-out infinite;
}

@keyframes fi-metadata-breathe {
    0%,
    100% {
        opacity: 0.45;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}

/* A manager who has asked for reduced motion gets the mark without the
   breathing; the text beside it still says what is happening. */
@media (prefers-reduced-motion: reduce) {
    .fi-metadata-loading-mark {
        animation: none;
        opacity: 0.85;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   بند ۶ و ۲۱ و ۳۶ و ۵۳ — the general appearance of every table in this
   management.

   Taller rows, a distinctly taller heading row, centred column headings,
   right-aligned data, alternating row backgrounds in keeping with the dark
   theme, and the search / filter / column tools on the heading line instead of
   a row of their own.
   ───────────────────────────────────────────────────────────────────────── */

.fi-photo-metadata-page .fi-ta-row .fi-ta-cell {
    /* «ارتفاع ردیف داده‌ها حدود یک‌ونیم برابر وضعیت فعلی» — Filament's own row
       padding is 0.5rem, so 0.75rem is that half again. */
    padding-block: 0.75rem;
}

.fi-photo-metadata-page .fi-ta-header-cell {
    /* «حدود دو برابر تا دوونیم برابر» over the same 0.5rem. */
    padding-block: 1.15rem;
    /* «عنوان ستون‌ها وسط‌چین باشند» */
    text-align: center;
}

.fi-photo-metadata-page .fi-ta-header-cell-label,
.fi-photo-metadata-page .fi-ta-header-cell button {
    justify-content: center;
    width: 100%;
}

/* «اطلاعات داخل ردیف‌ها راست‌چین باشند» — everything except a cell that says
   outright that it is centred, which is what an image or an icon column does.
   The two `alignCenter()` columns of this management set that class
   themselves, so this rule cannot reach them. */
.fi-photo-metadata-page .fi-ta-row .fi-ta-cell:not(.fi-align-center):not(.fi-align-start) .fi-ta-text,
.fi-photo-metadata-page .fi-ta-row .fi-ta-cell:not(.fi-align-center):not(.fi-align-start) .fi-ta-col-wrp {
    text-align: right;
    justify-content: flex-end;
}

/* «ردیف‌ها یکی‌درمیان اختلاف رنگ زمینه ملایم داشته باشند», and gentle enough to
   sit under the panel's dark theme rather than striping it. */
.fi-photo-metadata-page .fi-ta-row:nth-child(even) {
    background-color: var(--std-color-gray-50, #f9fafb);
}

:where(.dark) .fi-photo-metadata-page .fi-ta-row:nth-child(even) {
    background-color: rgb(255 255 255 / 3.5%);
}

/* «آیکون جستجو، فیلتر و تنظیم ستون‌ها … در همان خط عنوان جدول قرار گیرند تا
   ارتفاع اضافی صفحه حذف شود» — the tools row is lifted onto the heading line
   rather than hidden, so nothing is lost and one row of height goes. */
.fi-photo-metadata-page .fi-ta-header-ctn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.fi-photo-metadata-page .fi-ta-header {
    flex: 1 1 16rem;
    padding-block-end: 0;
    border-block-end: 0;
}

.fi-photo-metadata-page .fi-ta-header-toolbar {
    flex: 0 1 auto;
    margin-inline-start: auto;
    padding-block: 0.5rem;
    border-block-start: 0;
}

/* «عرض ستون‌ها متناسب با محتوای واقعی تنظیم شود و فضای خالی بیهوده کاهش پیدا
   کند» — a table that sizes itself to what is in it rather than dividing the
   width evenly between columns that hold four characters and columns that hold
   sixty. */
.fi-photo-metadata-page .fi-ta-table {
    width: 100%;
    table-layout: auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   بند ۹ … ۱۱ — «الگوهای فراداده»: two source cards to a row, shorter cards,
   and a position number beside the drag handle.
   ───────────────────────────────────────────────────────────────────────── */

.fi-photo-metadata-page .fi-fo-repeater-item {
    /* «ارتفاع کارت‌ها و فضای خالی داخل آنها کاهش پیدا کند» — the toggle, the
       select and the handle all stay their own size; only the air around them
       goes. */
    --fi-repeater-item-padding: 0.6rem;
}

.fi-photo-metadata-page .fi-fo-repeater-item-header {
    padding-block: 0.35rem;
    padding-inline: 0.6rem;
}

.fi-photo-metadata-page .fi-fo-repeater-item > .fi-sc,
.fi-photo-metadata-page .fi-fo-repeater-item-content {
    padding: 0.6rem;
    gap: 0.5rem;
}

/* بند ۱۱ — the number reads as a position, not as a heading of its own. */
.fi-photo-metadata-page .fi-fo-repeater-item-header-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--std-color-gray-500, #6b7280);
}

:where(.dark) .fi-photo-metadata-page .fi-fo-repeater-item-header-label {
    color: var(--std-color-gray-400, #9ca3af);
}

/* ─────────────────────────────────────────────────────────────────────────
   بند ۱۴ — «۴ از ۱۵۹» made legible: the outstanding figure red, «از» plain,
   the total green, and the category's name above them larger and brighter.
   ───────────────────────────────────────────────────────────────────────── */

.fi-metadata-summary-label {
    /* «عنوان دسته‌ها کمی بزرگ‌تر، روشن‌تر و خواناتر شوند» — over the 0.7rem the
       borrowed cell gives it. */
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--std-color-gray-700, #374151);
    margin-block-end: 0.15rem;
}

:where(.dark) .fi-metadata-summary-label {
    color: var(--std-color-gray-200, #e5e7eb);
}

.fi-metadata-summary-value {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
}

.fi-metadata-summary-missing.is-alert {
    color: var(--std-color-danger-600, #dc2626);
    font-weight: 700;
}

:where(.dark) .fi-metadata-summary-missing.is-alert {
    color: var(--std-color-danger-400, #f87171);
}

.fi-metadata-summary-missing.is-well {
    color: var(--std-color-success-600, #16a34a);
    font-weight: 700;
}

:where(.dark) .fi-metadata-summary-missing.is-well {
    color: var(--std-color-success-400, #4ade80);
}

/* «عبارت «از»: سفید» — the panel's plain reading colour, which in this dark
   theme is white and in a light one is the ordinary text colour. */
.fi-metadata-summary-of {
    color: var(--std-color-gray-700, #374151);
    font-weight: 400;
}

:where(.dark) .fi-metadata-summary-of {
    color: var(--std-color-white, #fff);
}

.fi-metadata-summary-total {
    color: var(--std-color-success-600, #16a34a);
    font-weight: 700;
}

:where(.dark) .fi-metadata-summary-total {
    color: var(--std-color-success-400, #4ade80);
}

/* ─────────────────────────────────────────────────────────────────────────
   بند ۲۰ — each translation sub-tab says which of two states it is in.
   ───────────────────────────────────────────────────────────────────────── */

.fi-metadata-translation-tabs .fi-watermark-regen-queue-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.fi-metadata-tab-mark {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.fi-metadata-tab-mark.is-well {
    color: var(--std-color-success-600, #16a34a);
}

:where(.dark) .fi-metadata-tab-mark.is-well {
    color: var(--std-color-success-400, #4ade80);
}

.fi-metadata-tab-mark.is-alert {
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-metadata-tab-mark.is-alert {
    color: var(--std-color-danger-400, #f87171);
}

/* ─────────────────────────────────────────────────────────────────────────
   بند ۲۳ — «فراداده ناقص»'s summary card: the same box, read more easily.
   A divider between *every* group, including the one that was missing between
   «عکاس» and «تیم دوم».
   ───────────────────────────────────────────────────────────────────────── */

.fi-metadata-issue-cards .fi-watermark-regen-bar-label {
    /* «عنوان‌ها حدود یک‌ونیم تا دو برابر واضح‌تر و روشن‌تر» over the 0.7rem the
       borrowed cell gives it. */
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--std-color-gray-700, #374151);
}

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

.fi-metadata-issue-cards .fi-watermark-regen-bar-value {
    /* «اعداد حدود یک‌ونیم برابر بزرگ‌تر شوند» */
    font-size: 1.35rem;
    font-weight: 700;
}

/* The divider was written as `border-inline-start`, dropped on `:last-child` —
   so a card that *wrapped* onto a second line lost it as well, which is the
   missing line between «عکاس» and «تیم دوم». Drawn on the end edge instead and
   dropped only on the true last card, every group is separated at every width. */
.fi-metadata-issue-cards .fi-watermark-regen-bar-cell {
    border-inline-start: 0;
    border-inline-end: 1px solid var(--std-color-gray-200, #e5e7eb);
}

:where(.dark) .fi-metadata-issue-cards .fi-watermark-regen-bar-cell {
    border-inline-end-color: rgb(255 255 255 / 12%);
}

.fi-metadata-issue-cards .fi-watermark-regen-bar-cell:last-child {
    border-inline-end: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   بند ۲۶ — the gallery's title in the panel's own yellow, and the way in.
   ───────────────────────────────────────────────────────────────────────── */

.fi-metadata-gallery-title .fi-ta-text-item-label,
.fi-metadata-gallery-title a {
    color: var(--std-color-primary-600, #d97706);
    font-weight: 600;
}

:where(.dark) .fi-metadata-gallery-title .fi-ta-text-item-label,
:where(.dark) .fi-metadata-gallery-title a {
    color: var(--std-color-primary-400, #fbbf24);
}

/* ─────────────────────────────────────────────────────────────────────────
   بند ۳۰ — «نواقص»: the mark in the cell, and the window behind it.
   ───────────────────────────────────────────────────────────────────────── */

.fi-metadata-issue-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    /* The cell is a flex row, so a box left to its own width hugs the column's
       edge and `alignCenter()` reads as `start`. */
    width: 100%;
}

.fi-metadata-issue-mark-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    background-color: var(--std-color-mix-danger-400-10, rgb(248 113 113 / 10%));
    color: var(--std-color-danger-600, #dc2626);
    cursor: help;
}

:where(.dark) .fi-metadata-issue-mark-icon {
    color: var(--std-color-danger-400, #f87171);
}

.fi-metadata-issue-mark-icon.is-well {
    background-color: var(--std-color-mix-success-400-10, rgb(74 222 128 / 10%));
    color: var(--std-color-success-600, #16a34a);
}

:where(.dark) .fi-metadata-issue-mark-icon.is-well {
    color: var(--std-color-success-400, #4ade80);
}

.fi-metadata-issue-mark-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.fi-metadata-issue-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fi-metadata-issue-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
    border-radius: 0.5rem;
    background-color: var(--std-color-mix-danger-400-10, rgb(248 113 113 / 10%));
}

:where(.dark) .fi-metadata-issue-row {
    border-color: rgb(255 255 255 / 10%);
}

.fi-metadata-issue-row.is-well {
    background-color: var(--std-color-mix-success-400-10, rgb(74 222 128 / 10%));
}

.fi-metadata-issue-row-sentence {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.fi-metadata-issue-row-icon {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-metadata-issue-row-icon {
    color: var(--std-color-danger-400, #f87171);
}

.fi-metadata-issue-row.is-well .fi-metadata-issue-row-icon {
    color: var(--std-color-success-600, #16a34a);
}

.fi-metadata-issue-row-count {
    flex: 0 0 auto;
    color: var(--std-color-gray-500, #6b7280);
    font-size: 0.8rem;
}

.fi-metadata-issue-note {
    margin-block: 0.75rem 0;
    color: var(--std-color-gray-500, #6b7280);
    font-size: 0.8rem;
}

.fi-metadata-issue-window-actions {
    display: flex;
    justify-content: flex-start;
    margin-block-start: 0.9rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   بند ۳۱ و ۶۱ — «فراداده» from a gallery: the picker, then the window.
   ───────────────────────────────────────────────────────────────────────── */

.fi-metadata-photo-picker-lede,
.fi-metadata-photo-picker-more,
.fi-metadata-photo-picker-empty {
    color: var(--std-color-gray-500, #6b7280);
    font-size: 0.82rem;
}

.fi-metadata-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.6rem;
    margin-block: 0.75rem;
}

.fi-metadata-photo-tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.35rem;
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
    border-radius: 0.6rem;
    background-color: transparent;
    cursor: pointer;
}

:where(.dark) .fi-metadata-photo-tile {
    border-color: rgb(255 255 255 / 12%);
}

.fi-metadata-photo-tile:hover {
    border-color: var(--std-color-primary-500, #f59e0b);
}

.fi-metadata-photo-tile-image {
    display: block;
    width: 100%;
    height: 5.5rem;
    border-radius: 0.4rem;
    object-fit: cover;
    background-color: var(--std-color-gray-100, #f3f4f6);
}

.fi-metadata-photo-tile-id {
    font-size: 0.75rem;
    color: var(--std-color-gray-500, #6b7280);
}

.fi-metadata-photo-tile-state {
    font-size: 0.72rem;
    font-weight: 600;
}

.fi-metadata-photo-tile-state.is-complete {
    color: var(--std-color-success-600, #16a34a);
}

:where(.dark) .fi-metadata-photo-tile-state.is-complete {
    color: var(--std-color-success-400, #4ade80);
}

.fi-metadata-photo-tile-state.is-incomplete {
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-metadata-photo-tile-state.is-incomplete {
    color: var(--std-color-danger-400, #f87171);
}

.fi-metadata-photo-tile-state.is-pending {
    color: var(--std-color-warning-600, #d97706);
}

:where(.dark) .fi-metadata-photo-tile-state.is-pending {
    color: var(--std-color-warning-400, #fbbf24);
}

.fi-metadata-photo-back {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-block-end: 0.75rem;
    color: var(--std-color-primary-600, #d97706);
    font-size: 0.85rem;
    cursor: pointer;
}

:where(.dark) .fi-metadata-photo-back {
    color: var(--std-color-primary-400, #fbbf24);
}

.fi-metadata-photo-back svg {
    width: 1rem;
    height: 1rem;
}

.fi-metadata-detail-preview {
    display: flex;
    justify-content: center;
    margin-block-end: 0.9rem;
}

.fi-metadata-detail-preview img {
    max-width: 100%;
    max-height: 16rem;
    border-radius: 0.6rem;
}

/* بند ۶۰ — a required field left empty is red; an optional one is not. */
.fi-metadata-detail .fi-metadata-missing {
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-metadata-detail .fi-metadata-missing {
    color: var(--std-color-danger-400, #f87171);
}

.fi-metadata-detail .fi-metadata-optional {
    color: var(--std-color-gray-400, #9ca3af);
}

/* ─────────────────────────────────────────────────────────────────────────
   بخش دوم — «مغایرت تاریخی»، «مانیتور پردازش» و کارت‌های داشبورد
   (تسک ۱۴۰۵/۰۶/۰۸/۰۶).
   ───────────────────────────────────────────────────────────────────────── */

/*
 * بند ۳۷ و ۳۸ — one idea said twice.
 *
 * The camera's date is the red family and the gallery's is the green family,
 * and inside each family the two readings are **not** the same shade: a manager
 * scanning the row has to be able to tell the Gregorian from the Jalali at a
 * glance without mistaking either for the other pair. So each pair is one hue
 * at two strengths rather than two hues.
 */

.fi-metadata-file-date-gregorian .fi-ta-text-item-label,
.fi-metadata-file-date-gregorian {
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-metadata-file-date-gregorian .fi-ta-text-item-label,
:where(.dark) .fi-metadata-file-date-gregorian {
    color: var(--std-color-danger-500, #ef4444);
}

.fi-metadata-file-date-jalali .fi-ta-text-item-label,
.fi-metadata-file-date-jalali {
    color: var(--std-color-danger-400, #f87171);
}

:where(.dark) .fi-metadata-file-date-jalali .fi-ta-text-item-label,
:where(.dark) .fi-metadata-file-date-jalali {
    color: var(--std-color-danger-300, #fca5a5);
}

.fi-metadata-gallery-date-gregorian .fi-ta-text-item-label,
.fi-metadata-gallery-date-gregorian {
    color: var(--std-color-success-600, #16a34a);
}

:where(.dark) .fi-metadata-gallery-date-gregorian .fi-ta-text-item-label,
:where(.dark) .fi-metadata-gallery-date-gregorian {
    color: var(--std-color-success-500, #22c55e);
}

.fi-metadata-gallery-date-jalali .fi-ta-text-item-label,
.fi-metadata-gallery-date-jalali {
    color: var(--std-color-success-400, #4ade80);
}

:where(.dark) .fi-metadata-gallery-date-jalali .fi-ta-text-item-label,
:where(.dark) .fi-metadata-gallery-date-jalali {
    color: var(--std-color-success-300, #86efac);
}

/*
 * بند ۴۹ و ۵۰ — «وضعیت» and «علت توقف» at the head of the processing monitor.
 *
 * A scheduled pause and a stopped worker are not the same thing and must never
 * be drawn the same way (فرا-۶۵), so the paused state wears the panel's warning
 * colour and only the stalled one is red — and only the red one beats.
 */

.fi-metadata-stop h3 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.fi-metadata-stop-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: var(--std-color-warning-500, #f59e0b);
}

.fi-metadata-stop.is-stalled {
    border-color: var(--std-color-danger-400, #f87171);
    background-color: var(--std-color-mix-danger-400-10, rgb(248 113 113 / 10%));
}

.fi-metadata-stop.is-stalled h3 {
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-metadata-stop.is-stalled h3 {
    color: var(--std-color-danger-400, #f87171);
}

.fi-metadata-stop.is-stalled .fi-metadata-stop-dot {
    background-color: var(--std-color-danger-500, #ef4444);
    /* «حرکت آرام روشن/خاموش … حرکت نباید سریع یا آزاردهنده باشد» — the same
       two-and-a-half-second breath as the watermark monitor's own mark. */
    animation: fi-metadata-slow-beat 2.4s ease-in-out infinite;
}

.fi-metadata-stop.is-paused {
    border-color: var(--std-color-warning-300, #fcd34d);
    background-color: var(--std-color-mix-warning-400-10, rgb(251 191 36 / 10%));
}

@keyframes fi-metadata-slow-beat {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

/* The same slow beat on a dashboard card's red dot (بند ۵۱ و ۵۵ و ۶۶). */
.fi-metadata-dot-slow {
    animation: fi-metadata-slow-beat 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .fi-metadata-stop.is-stalled .fi-metadata-stop-dot,
    .fi-metadata-dot-slow {
        animation: none;
    }
}

/* بند ۴۶ — the error state, with a way to ask again. */
.fi-metadata-load-error {
    border-color: var(--std-color-danger-400, #f87171);
    background-color: var(--std-color-mix-danger-400-10, rgb(248 113 113 / 10%));
}

.fi-metadata-load-error h3 {
    color: var(--std-color-danger-600, #dc2626);
}

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

.fi-metadata-retry {
    margin-block-start: 0.6rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--std-color-danger-400, #f87171);
    border-radius: 0.5rem;
    color: var(--std-color-danger-600, #dc2626);
    font-size: 0.85rem;
    cursor: pointer;
}

:where(.dark) .fi-metadata-retry {
    color: var(--std-color-danger-300, #fca5a5);
}

/*
 * بند ۵۱ — the small information mark beside «پردازشگر متوقف است» on the
 * dashboard card, and the reason it opens.
 *
 * The card is one big `<a>`, so this mark stops the click itself; without that
 * the browser would follow the link the instant the reason was asked for.
 */

.fi-metadata-why {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-inline-start: 0.25rem;
    color: var(--std-color-gray-400, #9ca3af);
    cursor: help;
}

.fi-metadata-why svg {
    width: 0.95rem;
    height: 0.95rem;
}

.fi-metadata-why-bubble {
    position: absolute;
    inset-block-end: calc(100% + 0.4rem);
    inset-inline-end: 0;
    z-index: 20;
    width: 17rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
    border-radius: 0.5rem;
    background-color: var(--std-color-white, #fff);
    box-shadow: 0 6px 20px rgb(0 0 0 / 25%);
    color: var(--std-color-gray-700, #374151);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.7;
    text-align: right;
    white-space: normal;
}

:where(.dark) .fi-metadata-why-bubble {
    border-color: rgb(255 255 255 / 12%);
    background-color: var(--std-color-gray-900, #111827);
    color: var(--std-color-gray-100, #f3f4f6);
}

/* بند ۴۴ — the window of one mismatch's photographs. */
.fi-metadata-mismatch-lede {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    color: var(--std-color-gray-500, #6b7280);
    font-size: 0.82rem;
}

.fi-metadata-photo-tile-image.is-blank {
    display: block;
}

/* ─────────────────────────────────────────────────────────────────────────
   بندهای ۱۲ تا ۱۵ بخش ترجمه — every main tab is a button of its own.

   Filament draws the strip as plain text with an underline on the open one, so
   nine tabs on two lines read as one long sentence and nothing said where one
   tab ended and the next began. Each is given a box, a thin hairline of its own
   and real space around it; the open one keeps the panel's own active colour and
   gains a border strong enough to be seen at a glance. The panel's background is
   untouched — بند ۱۳ asks for the tabs, not the page.
   ───────────────────────────────────────────────────────────────────────── */

.fi-photo-metadata-page .fi-tabs {
    column-gap: 0.5rem;
    row-gap: 0.55rem;
    padding: 0.15rem;
}

.fi-photo-metadata-page .fi-tabs-item {
    border: 1px solid var(--std-color-gray-300, #d1d5db);
    border-radius: 0.6rem;
    padding-block: 0.45rem;
    padding-inline: 0.85rem;
}

/* «دور آن خط سفید نازک و ظریف قرار گیرد» — white, and faint enough that nine of
   them do not turn the strip into a grid. */
:where(.dark) .fi-photo-metadata-page .fi-tabs-item {
    border-color: color-mix(in srgb, var(--std-color-white, #fff) 34%, transparent);
}

/* بند ۱۴ — the open tab keeps the colour the panel already gives it; what is
   added is the edge, so «selected» is a state of the same button rather than a
   different kind of thing. */
.fi-photo-metadata-page .fi-tabs-item.fi-active {
    border-color: var(--std-color-primary-500, #eab308);
}

/* ─────────────────────────────────────────────────────────────────────────
   بندهای ۱۶ تا ۲۱ — the «نیاز به ترجمه» table, read more easily.

   One block for every sub-tab: تیم اول, تیم دوم, رقابت, فصل, کشور, استان, شهر,
   ورزشگاه and عکاس are the same table with a different filter, and بند ۲۱ asks
   for exactly one standard across all of them.
   ───────────────────────────────────────────────────────────────────────── */

/* بند ۱۷ — «ارتفاع ردیف عنوان ستون‌ها … ۲٫۵ برابر», and the titles centred
   vertically inside it. */
.fi-metadata-translation-table thead th {
    padding-block: 0.95rem;
    padding-inline: 0.75rem;
    vertical-align: middle;
    text-align: center;
}

/* بند ۱۶ — «ارتفاع هر ردیف داده تقریباً دو برابر وضعیت فعلی». */
.fi-metadata-translation-table tbody td {
    padding-block: 0.75rem;
    padding-inline: 0.75rem;
    vertical-align: middle;
    text-align: center;
}

/* بند ۱۸ — the only column whose data stays right-aligned. */
.fi-metadata-translation-table tbody td.is-name-fa {
    text-align: right;
}

/* بند ۲۰ — «ردیف‌های یکی‌درمیان دو پس‌زمینه بسیار نزدیک ولی قابل تشخیص». The
   difference is a few percent of the panel's own white over the panel's own
   background, so it reads as one table in two shades rather than as stripes. */
.fi-metadata-translation-table tbody tr:nth-child(even) {
    background-color: var(--std-color-gray-50, #f9fafb);
}

:where(.dark) .fi-metadata-translation-table tbody tr:nth-child(even) {
    background-color: color-mix(in srgb, var(--std-color-white, #fff) 5%, transparent);
}

/* بند ۱۹ — «نیازمند ترجمه» is the row that needs a person, so it is the
   panel's own red rather than the neutral the badge would otherwise take. The
   selector is deliberately more specific than the standards block's, which
   paints every badge in this panel near-black. */
.fi-metadata-translation-table tbody td.is-status .fi-badge.fi-metadata-status-alert,
.fi-metadata-translation-table tbody td.is-status .fi-badge.fi-metadata-status-alert * {
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-metadata-translation-table tbody td.is-status .fi-badge.fi-metadata-status-alert,
:where(.dark) .fi-metadata-translation-table tbody td.is-status .fi-badge.fi-metadata-status-alert * {
    color: var(--std-color-danger-400, #f87171);
}

/* ─────────────────────────────────────────────────────────────────────────
   بند ۳ — «در حال آماده‌سازی خروجی…», beside the button that started it.
   ───────────────────────────────────────────────────────────────────────── */

.fi-metadata-export-progress {
    display: none;
    align-items: center;
    gap: 0.4rem;
    color: var(--std-color-gray-500, #6b7280);
}

:where(.dark) .fi-metadata-export-progress {
    color: var(--std-color-gray-300, #d1d5db);
}

.fi-metadata-export-progress .fi-metadata-loading-mark {
    width: 1.35rem;
    height: 1.35rem;
}

.fi-metadata-export-progress .fi-metadata-loading-text {
    font-size: 0.85rem;
}

/* ═════════════════════════════════════════════════════════════════════════
   بخش ششم تسک ۱۴۰۵/۰۶/۰۸/۱۰ — «بازطراحی پنجره جزئیات فراداده عکس»
   ═════════════════════════════════════════════════════════════════════════ */

/*
 * بند ۳۸ و ۳۹ — the window was «بسیار بلند», used a quarter of the page's width
 * and made a manager scroll the whole browser to reach the end of one
 * photograph's readings. It is a fixed frame now: an identification band that
 * does not move, and the readings scrolling inside their own box, so the heading
 * and «بستن» are always where they were left.
 *
 * «ارتفاع آن از ارتفاع قابل مشاهده مرورگر بیشتر نشود»: the body is capped
 * against the viewport rather than against a number of rows, so a photograph
 * with a long description and one with none open to the same size of window.
 */
.fi-metadata-detail {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    /* بند ۸ of تسک ۱۴۰۵/۰۶/۰۸/۱۳ — «اندازه کلی پنجره در صورت نیاز کمی افزایش
       پیدا کند، ولی از صفحه خارج نشود»: four vertical hundredths of the
       viewport, still a fraction of it rather than the whole. */
    max-height: 82vh;
}

.fi-metadata-detail-body {
    overflow-y: auto;
    padding-inline-end: 0.35rem;
}

/* بند ۴۷ و ۴۸ — the frame and what identifies it, in one low band.
   The picture is a thumbnail beside the facts rather than a tall block above
   them: «تصویر نباید آن‌قدر بزرگ باشد که اطلاعات اصلی را به پایین هل دهد». */
.fi-metadata-detail-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    background-color: var(--std-color-gray-100, #f3f4f6);
}

:where(.dark) .fi-metadata-detail-identity {
    background-color: color-mix(in oklab, var(--std-color-gray-800, #1f2937) 60%, transparent);
}

.fi-metadata-detail-identity-image img {
    width: 7rem;
    height: 5rem;
    object-fit: cover;
    border-radius: 0.5rem;
}

.fi-metadata-detail-identity-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.2rem 1rem;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.fi-metadata-detail-identity-facts dt {
    font-size: 0.72rem;
    color: var(--std-color-gray-500, #6b7280);
}

.fi-metadata-detail-identity-facts dd {
    margin: 0;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

/* The whole window's answer, read before a single group is opened. */
.fi-metadata-detail-verdict {
    flex: 0 0 auto;
    padding: 0.35rem 0.7rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.fi-metadata-detail-verdict.is-complete {
    background-color: color-mix(in oklab, var(--std-color-success-500, #22c55e) 18%, transparent);
    color: var(--std-color-success-700, #15803d);
}

:where(.dark) .fi-metadata-detail-verdict.is-complete {
    color: var(--std-color-success-400, #4ade80);
}

.fi-metadata-detail-verdict.is-short {
    background-color: color-mix(in oklab, var(--std-color-danger-500, #ef4444) 18%, transparent);
    color: var(--std-color-danger-700, #b91c1c);
}

:where(.dark) .fi-metadata-detail-verdict.is-short {
    color: var(--std-color-danger-400, #f87171);
}

/* بند ۳۹ و ۴۱ — the groups use the width instead of the height: two or three of
   them across a desktop, one under the other on a narrow screen, and no
   «فهرست عمودی بی‌انتها» (بند ۴۰). */
.fi-metadata-detail-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap: 0.9rem;
    align-items: start;
}

.fi-metadata-detail-group {
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
    border-radius: 0.75rem;
    padding: 0.7rem 0.8rem;
}

/* ── عکس-۰۷ تا عکس-۱۱ — the five sections as five tabs ──────────────────── */
/*
 * «درست زیر کادر بالای صفحه … یک نوار تب اضافه شود»: the strip sits under the
 * band that carries the picture and the frame's facts, and it is the panel's
 * own tab strip — the one «صف واترمارک» already draws — rather than a control
 * of this window's own.
 */
.fi-metadata-detail-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-block-end: 0.75rem;
    border-block-end: 1px solid var(--std-color-gray-200, #e5e7eb);
    padding-block-end: 0.4rem;
}

:where(.dark) .fi-metadata-detail-tablist {
    border-color: color-mix(in oklab, var(--std-color-gray-600, #4b5563) 55%, transparent);
}

.fi-metadata-detail-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-metadata-detail-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-metadata-detail-tab.fi-active {
    color: var(--std-color-warning-400, #fbbf24);
}

/*
 * عکس-۱۱ — «جدول … به‌صورت مرتب در وسط فضای تب قرار گیرد».
 *
 * The five cards used to share the window's width three at a time, which is why
 * each table was pressed into a third of it and sat against one edge. A tab has
 * the whole width to itself now, and the card is centred in it and given a
 * width it can fill rather than one it has to stretch across.
 */
.fi-metadata-detail-panel {
    display: flex;
    justify-content: center;
}

.fi-metadata-detail-panel .fi-metadata-detail-group {
    width: 100%;
    max-width: 60rem;
}

:where(.dark) .fi-metadata-detail-group {
    border-color: color-mix(in oklab, var(--std-color-gray-600, #4b5563) 55%, transparent);
}

.fi-metadata-detail-group h3 {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
}

/* بند ۴۳ — «فیلد | مقدار استاندارد جاری | مقدار واقعی داخل فایل | وضعیت», so a
   value and what it should be are read side by side rather than hunted for. */
.fi-metadata-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.fi-metadata-detail-table th {
    text-align: start;
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--std-color-gray-500, #6b7280);
    padding-block: 0.3rem;
    border-block-end: 1px solid var(--std-color-gray-200, #e5e7eb);
}

/* بند ۱۵ of تسک ۱۴۰۵/۰۶/۰۸/۱۴ — «فاصله بالا و پایین متن نسبت به خط جداکننده
   حدود سه برابر وضعیت فعلی شود».

   `0.35rem` → `1.05rem`, three times exactly, on the block axis only: the rule
   between two rows is where it was, and only the words move away from it. The
   cards grow taller and بند ۱۵ says so in as many words — «ارتفاع کارت‌ها
   می‌تواند کمی بیشتر شود؛ این افزایش ارتفاع اشکالی ندارد». */
.fi-metadata-detail-table td {
    padding-block: 1.6rem;
    padding-inline-end: 0.5rem;
    border-block-end: 1px solid color-mix(in oklab, var(--std-color-gray-300, #d1d5db) 45%, transparent);
    overflow-wrap: anywhere;
    vertical-align: top;
}

/* بند ۱۶ و ۱۷ of تسک ۱۴۰۵/۰۶/۰۸/۱۶ — «عنوان ردیف‌ها با زرد استاندارد فعلی
   آژانس نمایش داده شود» و «کنار عنوان فیلد یک آیکون مرتبط قرار داده شود».

   The colour is on the cell rather than on the words inside it, so the mark
   beside them takes it too — «رنگ آیکون با رنگ عنوان همان ردیف هماهنگ باشد» —
   and the value in the next cell keeps whatever colour its own state gave it. */
.fi-metadata-detail-field {
    font-weight: 600;
    white-space: nowrap;
    color: var(--std-color-warning-600, #d97706);
}

:where(.dark) .fi-metadata-detail-field {
    color: var(--std-color-warning-400, #fbbf24);
}

.fi-metadata-detail-field-name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.fi-metadata-detail-field .fi-icon,
.fi-metadata-detail-field svg {
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
}

/* بند ۴۴ — a real shortcoming, and only a real one, is red. These are exactly
   the rows the list's «فراداده» cell counted. */
.fi-metadata-detail .fi-metadata-row-short td,
.fi-metadata-detail .fi-metadata-row-short .fi-metadata-detail-field {
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-metadata-detail .fi-metadata-row-short td,
:where(.dark) .fi-metadata-detail .fi-metadata-row-short .fi-metadata-detail-field {
    color: var(--std-color-danger-400, #f87171);
}

/* بند ۴۵ — a sound field is a quiet green tick, never a field of colour:
   «رنگ سبز نباید صفحه را شلوغ کند». */
.fi-metadata-detail-status {
    white-space: nowrap;
    font-size: 0.75rem;
}

/* بند ۱۴ — «به‌جای متن طولانی، یک تیک سبز واضح نمایش داده شود». The tick is
   the whole cell now, so it is drawn large enough to be one: a mark a manager
   scans a column for rather than a character they have to look at. */
.fi-metadata-detail-status.is-fine {
    color: var(--std-color-success-600, #16a34a);
    font-weight: 700;
}

:where(.dark) .fi-metadata-detail-status.is-fine {
    color: var(--std-color-success-400, #4ade80);
}

.fi-metadata-detail-status.is-neutral {
    color: var(--std-color-gray-400, #9ca3af);
}

/* بند ۱۲ — «روی فایل نوشته نشده» keeps the yellow it has always worn: the value
   is in the panel and the file has not caught up, which is work outstanding
   rather than a disagreement. */
.fi-metadata-detail-status.is-pending {
    color: var(--std-color-warning-600, #d97706);
}

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

/* بند ۱۳ — «متفاوت با فایل» is red, everywhere it appears. It shared the yellow
   above until now, and the two say opposite things: this one is the panel and
   the file disagreeing about a value that is already written, which is the one
   thing on this window a manager has to act on. */
.fi-metadata-detail-status.is-differs {
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-metadata-detail-status.is-differs {
    color: var(--std-color-danger-400, #f87171);
}

/* عکس-فراداده-۰۱ — «مقدار واقعی داخل فایل: سفید شود».

   Only in «اطلاعات فنی دوربین», and only that one column: the date the camera
   stamped, its maker, its model, the lens, the focal length, the aperture and
   everything else read out of the file itself.

   It was yellow, which is بند ۱۶ of تسک ۱۴۰۵/۰۶/۰۸/۱۶ — the value had to be
   told from the standard's beside it, and yellow was how. But the *name* of the
   row is yellow too (`fi-metadata-detail-field`), and a name and a value in one
   colour read as one thing: «هدف این است که عنوان فیلد و مقدار واقعی از نظر
   بصری کاملاً از یکدیگر تفکیک شوند». So the name keeps the yellow and the value
   takes the panel's plain reading colour — white on the dark panel, and the
   ordinary near-black on the light one, which is the same pair the شناسه above
   it is drawn in. The وضعیت column is untouched: each state keeps the colour it
   already had. */
.fi-metadata-detail-group-technical .fi-metadata-detail-actual {
    color: var(--std-color-gray-900, #111827);
}

:where(.dark) .fi-metadata-detail-group-technical .fi-metadata-detail-actual {
    color: var(--std-color-white, #ffffff);
}

.fi-metadata-detail-status.is-short {
    color: var(--std-color-danger-600, #dc2626);
    font-weight: 700;
}

:where(.dark) .fi-metadata-detail-status.is-short {
    color: var(--std-color-danger-400, #f87171);
}

.fi-metadata-detail .fi-metadata-issues ul {
    margin: 0;
    padding-inline-start: 1.1rem;
    font-size: 0.8rem;
}

/* ═════════════════════════════════════════════════════════════════════════
   تسک ۱۴۰۵/۰۶/۰۸/۱۳ — «تکمیل پنجره جزئیات فراداده عکس»
   ═════════════════════════════════════════════════════════════════════════ */

/* ── بند ۱۵ — the heading, a rule, and what the status means ──────────────── */

.fi-modal-heading .fi-metadata-detail-heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.fi-metadata-detail-heading-rule {
    display: inline-block;
    width: 1px;
    align-self: stretch;
    min-height: 1.2em;
    background-color: var(--std-color-gray-400, #9ca3af);
}

/* «یک توضیح کوتاه زردرنگ» — a note, not a second heading, so it is lighter and
   smaller than the words it follows. */
.fi-metadata-detail-heading-note {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--std-color-warning-600, #d97706);
}

:where(.dark) .fi-metadata-detail-heading-note {
    color: var(--std-color-warning-400, #fbbf24);
}

/* ── بند ۹ تا ۱۴ — the top of the window ──────────────────────────────────── */

/*
 * Right to left: the photographer's portrait, what names the frame, what is
 * wrong with it, and the picture (بند ۱۰). The three text columns take what
 * they need and the picture keeps its own size, so the band stays one line deep
 * on a desktop and folds on a narrow screen.
 */
.fi-metadata-detail-identity {
    flex-wrap: wrap;
    align-items: stretch;
}

/* بند ۱۱ — the photographer is a face and nothing else; the name is the
   tooltip. */
.fi-metadata-detail-identity-photographer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.fi-metadata-detail-identity-photographer img {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    object-fit: cover;
    cursor: help;
}

/* بند ۷ of تسک ۱۴۰۵/۰۶/۰۸/۱۴ — four boxes, each only as wide as what it holds.

   `inline-flex` on every box and `align-items: flex-start` on the row: a `dl`
   is a block, so the four used to take the whole width of the band whatever
   they held, and «فضای بزرگ و بی‌استفاده» is exactly what that produced. They
   wrap onto a second line rather than squeezing, and the gallery — the one that
   can be a whole sentence long — is allowed to take a line of its own. */
.fi-metadata-detail-identity-facts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    grid-template-columns: none;
}

/* …and the three short ones on one line under it, so نام نمایشی and the
   archive's file name stand side by side (بند ۱۰). */
.fi-metadata-detail-names {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.4rem;
    max-width: 100%;
}

.fi-metadata-detail-fact {
    margin: 0;
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    max-width: 100%;
    padding: 0.3rem 0.55rem;
    border-radius: 0.5rem;
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
}

:where(.dark) .fi-metadata-detail-fact {
    border-color: color-mix(in oklab, var(--std-color-gray-600, #4b5563) 55%, transparent);
}

.fi-metadata-detail-fact dt {
    font-size: 0.72rem;
    color: var(--std-color-gray-500, #6b7280);
}

.fi-metadata-detail-fact dd {
    margin: 0;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

/* بند ۹: «خود مقدار نام نمایشی به رنگ سبز نمایش داده شود». It was grey, which
   is the colour this window gives a value nobody has to act on. */
.fi-metadata-detail-fact-display dd {
    font-weight: 400;
    color: var(--std-color-success-600, #16a34a);
}

:where(.dark) .fi-metadata-detail-fact-display dd {
    color: var(--std-color-success-400, #4ade80);
}

/* بند ۱۰: the archive's own file name, unchanged, beside the display name so
   the two can be compared without moving the eye. */
.fi-metadata-detail-fact-filename dd {
    font-weight: 600;
}

/* بند ۱۱: «رنگ مقدار آن سفید باشد» — the شناسه, in Persian digits. */
.fi-metadata-detail-fact-identifier dd {
    color: var(--std-color-gray-900, #111827);
}

:where(.dark) .fi-metadata-detail-fact-identifier dd {
    color: var(--std-color-white, #ffffff);
}

/* بند ۸: «اما خط زیر متن لینک حذف شود. وجود آیکون لینک در کنار نام برای
   مشخص‌کردن قابلیت کلیک کافی است» — so the underline goes and the arrow beside
   the name is what says it can be clicked. It comes back under the pointer,
   because a link that answers to nothing at all is not obviously one. */
.fi-metadata-detail-gallery-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--std-color-success-600, #16a34a);
    text-decoration: none;
    text-underline-offset: 0.2em;
}

.fi-metadata-detail-gallery-link:hover {
    text-decoration: underline;
}

:where(.dark) .fi-metadata-detail-gallery-link {
    color: var(--std-color-success-400, #4ade80);
}

.fi-metadata-detail-gallery-link .fi-icon,
.fi-metadata-detail-gallery-link svg {
    width: 0.85rem;
    height: 0.85rem;
}

/* عکس-۰۵ و عکس-۰۶ — «نام گالری | کد گالری | آیکون لینک».

   A hairline rather than a printed «|», so the separator is the same weight
   whatever the line's font does with a bar, and the panel's own yellow on both
   it and the code («خط عمودی جداکننده نیز زرد باشد»). The name keeps the green
   it has always had and the mark keeps its place at the end of the line. */
.fi-metadata-detail-gallery-rule {
    display: inline-block;
    align-self: stretch;
    width: 1px;
    min-height: 0.9em;
    margin-inline: 0.15rem;
    background-color: var(--std-color-warning-600, #d97706);
}

:where(.dark) .fi-metadata-detail-gallery-rule {
    background-color: var(--std-color-warning-400, #fbbf24);
}

.fi-metadata-detail-gallery-code {
    color: var(--std-color-warning-600, #d97706);
    font-weight: 600;
}

:where(.dark) .fi-metadata-detail-gallery-code {
    color: var(--std-color-warning-400, #fbbf24);
}

/* The gallery's box is a link and the code sits inside it, so its own colour
   has to outrank the link's green rather than be inherited from it. */
.fi-metadata-detail-gallery-link .fi-metadata-detail-gallery-code {
    color: var(--std-color-warning-600, #d97706);
}

:where(.dark) .fi-metadata-detail-gallery-link .fi-metadata-detail-gallery-code {
    color: var(--std-color-warning-400, #fbbf24);
}

/* بند ۹ — «نقص‌ها و هشدارها» at the top, and red: the heading, the count and
   every line of it. */
.fi-metadata-detail-flaws {
    flex: 1 1 16rem;
    min-width: 0;
    padding: 0.45rem 0.65rem;
    border-radius: 0.6rem;
    /* بند ۱۴ of تسک ۱۴۰۵/۰۶/۰۸/۱۶ — «دور کادر یک حاشیه ظریف و مشخص متناسب با
       وضعیت خطا قرار گیرد» و «زمینه کادر به شکلی باشد که متن قرمز واضح خوانده
       شود»: the frame is the state's own red at a weight that reads as a line
       rather than a block, and the wash under it is light enough that red text
       on it keeps its contrast on both the light and the dark page. */
    border: 1px solid color-mix(in oklab, var(--std-color-danger-500, #ef4444) 55%, transparent);
    background-color: color-mix(in oklab, var(--std-color-danger-500, #ef4444) 8%, transparent);
}

.fi-metadata-detail-flaws-heading {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-metadata-detail-flaws-heading {
    color: var(--std-color-danger-400, #f87171);
}

.fi-metadata-detail-flaws-heading .fi-icon,
.fi-metadata-detail-flaws-heading svg {
    width: 1.1rem;
    height: 1.1rem;
}

/* «هر مورد در یک ردیف مجزا نمایش داده شود» — and بند ۱۴ of تسک ۱۴۰۵/۰۶/۰۸/۱۶
   asks for those rows to stop crowding each other: «آیتم‌های داخل کادر
   جمع‌وجورتر و فونت آنها کمی کوچک‌تر شود تا موارد متعدد روی هم فشرده نشوند».
   A smaller word with more room around it fits more shortcomings in the same
   box and reads as a list rather than a paragraph. */
.fi-metadata-detail-flaws ul {
    margin: 0;
    padding-inline-start: 1.1rem;
    font-size: 0.72rem;
    line-height: 1.7;
    list-style: disc;
}

.fi-metadata-detail-flaws li,
.fi-metadata-detail-flaws li a {
    display: list-item;
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-metadata-detail-flaws li,
:where(.dark) .fi-metadata-detail-flaws li a {
    color: var(--std-color-danger-400, #f87171);
}

.fi-metadata-detail-flaws li a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ── بند ۱۵ of تسک ۱۴۰۵/۰۶/۰۸/۱۶ — «مغایرت تاریخی» ───────────────────────── */

/*
 * «ارتفاع آن با کادر نقص‌ها و هشدارها هماهنگ باشد، اما عرض آن فقط متناسب با
 * محتوای خودش باشد و فضای اضافی اشغال نکند».
 *
 * `flex: 0 0 auto` is the width half — the box takes what its own two words
 * need and no share of the line — and the band is already `align-items:
 * stretch`, which is the height half: it stands exactly as tall as the box of
 * shortcomings beside it whatever either of them holds.
 */
.fi-metadata-detail-mismatch {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border-radius: 0.6rem;
    border: 1px solid transparent;
}

.fi-metadata-detail-mismatch-heading {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.fi-metadata-detail-mismatch-state {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.fi-metadata-detail-mismatch .fi-icon,
.fi-metadata-detail-mismatch svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

/* «اگر عکس مغایرت تاریخی ندارد: وضعیت سبز، تیک سبز». */
.fi-metadata-detail-mismatch.is-sound {
    border-color: color-mix(in oklab, var(--std-color-success-500, #22c55e) 55%, transparent);
    background-color: color-mix(in oklab, var(--std-color-success-500, #22c55e) 8%, transparent);
    color: var(--std-color-success-600, #16a34a);
}

:where(.dark) .fi-metadata-detail-mismatch.is-sound {
    color: var(--std-color-success-400, #4ade80);
}

/* «اگر عکس مغایرت تاریخی دارد: وضعیت قرمز، نشان قرمز». */
.fi-metadata-detail-mismatch.is-mismatched {
    border-color: color-mix(in oklab, var(--std-color-danger-500, #ef4444) 55%, transparent);
    background-color: color-mix(in oklab, var(--std-color-danger-500, #ef4444) 8%, transparent);
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-metadata-detail-mismatch.is-mismatched {
    color: var(--std-color-danger-400, #f87171);
}

/* ── بند ۱۳ of تسک ۱۴۰۵/۰۶/۰۸/۱۶ — the شناسه opens the photograph's page ──── */

/*
 * «مقدار آن سفید نمایش داده شود. قابل کلیک باشد» — so the number keeps the
 * white the box already gave it and the little arrow beside it is what says it
 * can be opened, exactly as the gallery's name above it does (بند ۱۰). No
 * underline, and one under the pointer.
 */
.fi-metadata-detail-identifier-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    text-underline-offset: 0.2em;
}

.fi-metadata-detail-identifier-link:hover {
    text-decoration: underline;
}

/* عکس-فراداده-۰۴ — «آیکون لینک کنار شناسه: سبز».

   The number stays white (بند ۱۳ above), so the mark beside it is the only part
   that is coloured — and the green it takes is the one every other link in this
   window already wears: the gallery's name above it, and the headings of the
   cards below it. Nothing new is invented for it, and the icon is the panel's
   own set. */
.fi-metadata-detail-identifier-link .fi-icon,
.fi-metadata-detail-identifier-link svg {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--std-color-success-600, #16a34a);
}

:where(.dark) .fi-metadata-detail-identifier-link .fi-icon,
:where(.dark) .fi-metadata-detail-identifier-link svg {
    color: var(--std-color-success-400, #4ade80);
}

/* ── بند ۱۶ — a card's heading is an icon and a green word ────────────────── */

/*
 * «عنوان و آیکون این بخش‌ها با رنگ سبز هماهنگ با رابط فعلی آژانس نمایش داده
 * شوند … خود داده‌های داخل کارت‌ها الزاماً سبز نشوند» — so the colour is on the
 * heading only, and every reading under it keeps the colour its own state gave
 * it.
 */
.fi-metadata-detail-group-heading {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--std-color-success-600, #16a34a);
}

:where(.dark) .fi-metadata-detail-group-heading {
    color: var(--std-color-success-400, #4ade80);
}

.fi-metadata-detail-group-heading .fi-icon,
.fi-metadata-detail-group-heading svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
}

/* «نقص‌ها و هشدارها» keeps its own red when it appears as a group of its own. */
.fi-metadata-issues .fi-metadata-detail-group-heading {
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-metadata-issues .fi-metadata-detail-group-heading {
    color: var(--std-color-danger-400, #f87171);
}

/* ── بند ۷ و ۸ — «اطلاعات فنی دوربین» ─────────────────────────────────────── */

/*
 * بند ۸: «از فضای خالی موجود در عرض پنجره استفاده شود. بخش اطلاعات فنی دوربین
 * پهن‌تر شود … بخش وضعیت پردازش کمی جابه‌جا شود تا فضای لازم ایجاد شود».
 *
 * The groups are an auto-fit grid, so widening one is a span rather than a
 * width: the technical block takes two of the tracks and «وضعیت پردازش», which
 * followed it, moves onto the next line under the others.
 */
@media (min-width: 1280px) {
    .fi-metadata-detail-group-technical {
        grid-column: span 2;
    }

    .fi-metadata-detail-group-technical .fi-metadata-detail-table {
        font-size: 0.85rem;
    }

}

/* بند ۷: why a block is empty, and never a value that was guessed to fill it. */
.fi-metadata-detail-group-note {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: var(--std-color-gray-500, #6b7280);
}

:where(.dark) .fi-metadata-detail-group-note {
    color: var(--std-color-gray-400, #9ca3af);
}

/* A reading that was never taken is not a value that is missing: the file could
   not be opened, and the window says so rather than blaming the file. */
.fi-metadata-detail-status.is-unknown {
    color: var(--std-color-gray-500, #6b7280);
}

:where(.dark) .fi-metadata-detail-status.is-unknown {
    color: var(--std-color-gray-400, #9ca3af);
}


/* ── بند ۲۳ of تسک ۱۴۰۵/۰۶/۰۸/۱۶ — both ways out of the window are red ────── */

/*
 * «هر دو کنترل بستن «جزئیات فراداده عکس» قرمز شوند: ضربدر بالای سمت چپ پنجره،
 * دکمه «بستن» پایین پنجره. عملکرد فعلی بستن تغییر نکند؛ فقط ظاهر آنها مطابق این
 * الزام اصلاح شود».
 *
 * Only the appearance, and only in this window: the two controls belong to
 * Filament's modal, which every other management in the panel also uses, so
 * both rules are scoped by `:has()` to a window that actually holds
 * «جزئیات فراداده عکس». The cross keeps being the cross and «بستن» keeps being
 * the cancel action — nothing is re-bound, nothing is re-labelled.
 *
 * «بستن» is a Filament button with no colour of its own (`fi-btn` alone draws
 * the panel's grey), so this is its colour rather than an override of one.
 */
.fi-modal-window:has(.fi-metadata-detail) .fi-modal-close-btn {
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-modal-window:has(.fi-metadata-detail) .fi-modal-close-btn {
    color: var(--std-color-danger-400, #f87171);
}

.fi-modal-window:has(.fi-metadata-detail) .fi-modal-close-btn:hover {
    color: var(--std-color-danger-500, #ef4444);
}

.fi-modal-window:has(.fi-metadata-detail) .fi-modal-footer-actions .fi-btn {
    background-color: var(--std-color-danger-600, #dc2626);
    color: var(--std-color-white, #ffffff);
}

.fi-modal-window:has(.fi-metadata-detail) .fi-modal-footer-actions .fi-btn:hover {
    background-color: var(--std-color-danger-500, #ef4444);
}

.fi-modal-window:has(.fi-metadata-detail) .fi-modal-footer-actions .fi-btn .fi-btn-label {
    color: var(--std-color-white, #ffffff);
}