/* «سوابق بارگذاری عکس» — تسک ۱۴۰۵/۰۷/۱۳/۲۴.
 *
 * The two windows the list's green and red figures open، and the نوبت's own
 * page. Its own file because every rule in it is scoped to this one
 * management's classes.
 *
 * رنگ‌ها همان متغیرهای پنل‌اند و هیچ کد رنگی تازه‌ای اینجا نوشته نشده
 * (استاندارد-اصلاح-۰۱۲). */

/* ── فهرست فایل‌های یک نوبت ─────────────────────────────────────────────── */

/* بند ۱۰ و ۱۱ — «Thumbnail | نام فایل | وضعیت» و برای ناموفق‌ها «دلیل خطا» در
   فضای مقابل وضعیت. یک چیدمان برای هر دو، چون تفاوتشان فقط همان یک ستون است. */
.fi-upload-history-file-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 60vh;
    overflow-y: auto;
}

.fi-upload-history-file {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem;
    border-radius: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--gray-400, #9ca3af) 25%, transparent);
}

/* ۲۴_۰۴ بند ۲۰ و ۲۱ — each list striped on its own, one file told from the
   next; a failure's reason line is inside its row, so it never breaks the
   pattern. Both tones sit apart from the section's own heading, which has no
   background at all. */
.fi-upload-history-file:nth-child(odd) {
    background-color: var(--std-color-gray-50, #f9fafb);
}

.fi-upload-history-file:nth-child(even) {
    background-color: var(--std-color-gray-200, #e5e7eb);
}

:where(.dark) .fi-upload-history-file:nth-child(odd) {
    background-color: var(--std-color-gray-950, #030712);
}

:where(.dark) .fi-upload-history-file:nth-child(even) {
    background-color: var(--std-color-gray-800, #1f2937);
}

.fi-upload-history-file-thumb {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 0.4rem;
    object-fit: cover;
    background-color: color-mix(in srgb, var(--gray-400, #9ca3af) 20%, transparent);
}

/* بند ۱۳ — «اگر ماهیت خرابی فایل اجازه تولید Thumbnail نمی‌دهد: Placeholder
   استاندارد + نام فایل + علت خطا». قاب خالی، نه سلول خالی. */
.fi-upload-history-file-thumb-empty {
    display: inline-block;
    border: 1px dashed color-mix(in srgb, var(--gray-400, #9ca3af) 55%, transparent);
}

.fi-upload-history-file[data-status='failed'] .fi-upload-history-file-thumb {
    border: 1px solid color-mix(in srgb, var(--danger-500, #ef4444) 60%, transparent);
}

.fi-upload-history-file-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.15rem;
}

.fi-upload-history-file-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    /* ۲۴_۰۴ بند ۲۲ — read at a glance: «DSC_1234.JPG» a third larger and
       heavier than it was, and a very long name wraps rather than running
       under the status or off the row (its full text is on hover too). */
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.6;
    overflow-wrap: anywhere;
    text-align: start;
}

.fi-upload-history-file-meta {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fi-upload-history-file-status {
    font-weight: 700;
    font-size: 0.75rem;
}

.fi-upload-history-file-status[data-status='done'] {
    color: var(--success-400, #4ade80);
}

.fi-upload-history-file-status[data-status='failed'] {
    color: var(--danger-400, #f87171);
}

.fi-upload-history-file-status[data-status='uploaded'],
.fi-upload-history-file-status[data-status='processing'] {
    color: var(--primary-400, #facc15);
}

/* بند ۱۱ — علت خطا، خوانا، مقابل وضعیت. */
.fi-upload-history-file-reason {
    color: var(--danger-400, #f87171);
    font-size: 0.72rem;
    line-height: 1.8;
}

/* ── صفحهٔ یک نوبت ──────────────────────────────────────────────────────── */

.fi-upload-history-record {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.fi-upload-history-summary {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    flex-wrap: wrap;
    /* ۲۴_۰۵ بند ۱۳ — the cover and its facts as one block with a fine border
       in the panel's own grey, instead of loose at the top of the page. */
    padding: 1rem;
    border: 1px solid var(--std-color-gray-300, #d4d4d8);
    border-radius: 0.75rem;
}

:where(.dark) .fi-upload-history-summary {
    border-color: var(--std-color-gray-700, #3f3f46);
}

/* ۲۴_۰۴ بند ۱۷ — the cover at twice its old 10rem. It is the gallery's own
   cover file, not a thumbnail, so it has the pixels for it. */
.fi-upload-history-summary-cover {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 20rem;
    max-width: 100%;
}

.fi-upload-history-summary-cover img {
    width: 20rem;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 0.5rem;
    object-fit: cover;
}

/* ۲۴_۰۴ بند ۱۸ — beside the cover, one fact a line, top to bottom. */
.fi-upload-history-summary-facts {
    flex: 1 1 18rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
}

.fi-upload-history-summary-facts div {
    display: flex;
    gap: 0.4rem;
    align-items: baseline;
}

/* ۲۴_۰۵ بند ۱۵ و ۱۶ — every label bold and fully white, every value
   ordinary weight and a step softer, so the two never read as one; the
   gallery's title is the one yellow value. */
.fi-upload-history-summary-facts dt {
    flex: 0 0 9rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--std-color-gray-950, #09090b);
}

.fi-upload-history-summary-facts dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--std-color-gray-700, #3f3f46);
    overflow-wrap: anywhere;
}

:where(.dark) .fi-upload-history-summary-facts dt {
    color: var(--std-color-white, #fff);
}

:where(.dark) .fi-upload-history-summary-facts dd {
    color: var(--std-color-gray-300, #d4d4d8);
}

.fi-upload-history-summary-facts [data-fact='gallery'] dd {
    color: var(--std-color-warning-600, #d97706);
}

:where(.dark) .fi-upload-history-summary-facts [data-fact='gallery'] dd {
    color: var(--std-color-warning-400, #fbbf24);
}

/* بند ۲۱، ۲۲ و ۲۳ — همان چهار کادر پنجرهٔ پایان بارگذاری، با همان رنگ‌بندی،
   تا دو صفحه یک زبان داشته باشند. */
/* ۲۴_۰۴ بند ۱۹ — the four cards as one set in the middle of the page, the
   same width each and the same gap between each; two by two on a phone. */
.fi-upload-history-stats {
    display: grid;
    grid-template-columns: repeat(4, 9rem);
    justify-content: center;
    gap: 1rem;
    width: 100%;
}

@media (max-width: 40rem) {
    .fi-upload-history-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.fi-upload-history-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem 0.25rem;
    border-radius: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--gray-400, #9ca3af) 30%, transparent);
}

.fi-upload-history-stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
}

.fi-upload-history-stat-label {
    font-size: 0.7rem;
    opacity: 0.8;
}

.fi-upload-history-stat[data-kind='succeeded'] {
    border-color: var(--success-500, #10b981);
}

.fi-upload-history-stat[data-kind='succeeded'] .fi-upload-history-stat-value {
    color: var(--success-500, #10b981);
}

.fi-upload-history-stat[data-kind='processing'] {
    border-color: var(--primary-400, #facc15);
}

.fi-upload-history-stat[data-kind='processing'] .fi-upload-history-stat-value {
    color: var(--primary-400, #facc15);
}

.fi-upload-history-stat[data-kind='failed'] {
    border-color: var(--danger-500, #ef4444);
}

.fi-upload-history-stat[data-kind='failed'] .fi-upload-history-stat-value {
    color: var(--danger-500, #ef4444);
}

.fi-upload-history-section h3 {
    font-weight: 700;
    margin-block-end: 0.5rem;
}

.fi-upload-history-empty {
    opacity: 0.75;
}

/* ── تسک ۱۴۰۵/۰۷/۱۳/۲۴_۰۲ — the list itself ────────────────────────────── */

/* ۲۴_۰۵ بند ۳ — still mistaken for each other on production: Filament lays a
   5% white wash over the gray-900 header, which comes out at gray-800 — the
   very tone of the striped row. So the header is lifted to its own gray-700,
   clearly above both rows (gray-950 and gray-800), and the light page gets
   the same three steps. */
.fi-photo-upload-history-page .fi-ta-table > thead .fi-ta-header-cell {
    background-color: var(--std-color-gray-300, #d4d4d8);
}

:where(.dark) .fi-photo-upload-history-page .fi-ta-table > thead .fi-ta-header-cell {
    background-color: var(--std-color-gray-700, #3f3f46);
}

/* بند ۲ — one نوبت told from the next, and ۲۴_۰۴ بند ۴ — three surfaces
   that cannot be mistaken for each other. The pinned header is the panel's
   gray-900 (`agency-tables.css`), and the plain row used to be that same
   gray-900 showing through, so every other row read as a second header. Now
   the plain row sits a step *below* the header and the striped one a step
   above it: header gray-900, rows gray-950 and gray-800. The hover stays the
   blue wash and stronger than both. */
.fi-photo-upload-history-page .fi-ta-row {
    background-color: var(--std-color-gray-50, #f9fafb);
}

.fi-photo-upload-history-page .fi-ta-row.fi-striped {
    background-color: var(--std-color-gray-200, #e5e7eb);
}

:where(.dark) .fi-photo-upload-history-page .fi-ta-row {
    background-color: var(--std-color-gray-950, #030712);
}

:where(.dark) .fi-photo-upload-history-page .fi-ta-row.fi-striped {
    background-color: var(--std-color-gray-800, #1f2937);
}

.fi-photo-upload-history-page .fi-ta-row:hover,
:where(.dark) .fi-photo-upload-history-page .fi-ta-row:hover {
    background-color: var(--std-color-mix-info-400-10, rgba(96, 165, 250, 0.1));
}

/* ۲۴_۰۴ بند ۳ — a quarter taller again: 3.6rem → 4.5rem, every cell still
   centred on the row's middle, so the cover, the faces, the badges and the
   icons stay level with each other. */
.fi-photo-upload-history-page .fi-ta-row > .fi-ta-cell {
    height: 4.5rem;
    vertical-align: middle;
}

/* ۲۴_۰۴ بند ۱ و ۲ — «تاریخ بازی» yellow, «تاریخ بارگذاری» green, in the
   panel's own two inks for the light and the dark page. */
.fi-upload-history-date-cell,
.fi-upload-history-open {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.fi-upload-history-date {
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.fi-upload-history-date[data-tone='game'] {
    color: var(--std-color-warning-600, #d97706);
}

.fi-upload-history-date[data-tone='upload'] {
    color: var(--std-color-success-600, #16a34a);
}

:where(.dark) .fi-upload-history-date[data-tone='game'] {
    color: var(--std-color-warning-400, #fbbf24);
}

:where(.dark) .fi-upload-history-date[data-tone='upload'] {
    color: var(--std-color-success-400, #4ade80);
}

.fi-upload-history-date-none {
    opacity: 0.6;
}

/* ۲۴_۰۴ بند ۷ — the yellow eye of «مشاهده سابقه». */
.fi-upload-history-open-link {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--std-color-warning-500, #f59e0b);
}

:where(.dark) .fi-upload-history-open-link {
    color: var(--std-color-warning-400, #fbbf24);
}

.fi-upload-history-open-link svg {
    width: 100%;
    height: 100%;
}

.fi-upload-history-open-link:hover {
    opacity: 0.8;
}

/* بند ۸ — the cover is a link to the gallery's edit page. */
.fi-upload-history-cover-link {
    display: inline-flex;
    border-radius: 0.375rem;
}

.fi-upload-history-cover-link:hover {
    outline: 2px solid var(--std-color-primary-400, currentColor);
    outline-offset: 1px;
}

/* بند ۳ و ۴ — a face with the name on hover. */
.fi-upload-history-person,
.fi-upload-history-view {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.fi-upload-history-person-face {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background-color: var(--std-color-mix-gray-400-10, rgba(156, 163, 175, 0.1));
    cursor: default;
}

.fi-upload-history-person-avatar {
    position: absolute;
    inset: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    object-fit: cover;
}

/* بند ۷ — «View»: green and live, or grey with nowhere to go. */
.fi-upload-history-view-link {
    display: inline-flex;
    width: 1.35rem;
    height: 1.35rem;
}

.fi-upload-history-view-link svg {
    width: 100%;
    height: 100%;
}

.fi-upload-history-view-link[data-state='linked'] {
    color: var(--std-color-success-400, currentColor);
}

.fi-upload-history-view-link[data-state='off'] {
    color: var(--std-color-gray-500, currentColor);
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── ۲۴_۰۴ بند ۱۲ تا ۱۶ — the heading of one نوبت's page ──────────────────── */

.fi-upload-history-heading {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
}

.fi-upload-history-heading-bar {
    display: inline-block;
    width: 1px;
    height: 2.25rem;
    background-color: var(--std-color-gray-500, #6b7280);
}

.fi-upload-history-heading-person {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.fi-upload-history-heading-role {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    color: var(--std-color-gray-400, #9ca3af);
}

.fi-upload-history-heading-person[data-role='photographer'] .fi-upload-history-heading-role {
    color: var(--std-color-warning-400, #fbbf24);
}

.fi-upload-history-heading-person[data-role='uploader'] .fi-upload-history-heading-role {
    color: var(--std-color-success-400, #4ade80);
}

.fi-upload-history-heading-role svg {
    width: 100%;
    height: 100%;
}

.fi-upload-history-heading-kind,
.fi-upload-history-heading-excel {
    display: inline-flex;
    align-items: center;
}

/* ۲۴_۰۴ — three more columns («دسته بارگذاری», «تاریخ بازی», «مشاهده سابقه»)
   on a list that already filled a laptop screen. Let a two-word heading take
   two lines rather than push the last columns off the side: the cells under
   them are a date, a number or an icon, far narrower than their headings. */
.fi-photo-upload-history-page .fi-ta-header-cell,
.fi-photo-upload-history-page .fi-ta-header-cell .fi-ta-header-cell-sort-btn {
    white-space: normal;
}

.fi-photo-upload-history-page .fi-ta-header-cell {
    min-width: 3.5rem;
    max-width: 5rem;
    line-height: 1.5;
}

/* The panel draws every table at its natural width (`agency-tables.css`), so
   the gutters are what is left to give: half a rem a side on this list. */
.fi-photo-upload-history-page .fi-ta-header-cell,
.fi-photo-upload-history-page .fi-ta-cell {
    padding-inline: 0.5rem;
}

.fi-photo-upload-history-page .fi-ta-header-cell.fi-ta-header-cell-gallery\.title {
    max-width: none;
}

/* ── تسک ۱۴۰۵/۰۷/۱۴/۲۴_۰۵ ──────────────────────────────────────────────── */

/* بند ۸ — «سوابق بارگذاری عکس | ۲۳۴». */
.fi-upload-history-title {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.fi-upload-history-title-bar {
    display: inline-block;
    width: 1px;
    height: 1.75rem;
    background-color: var(--std-color-gray-500, #71717a);
}

.fi-upload-history-title-count {
    color: var(--std-color-warning-600, #d97706);
}

:where(.dark) .fi-upload-history-title-count {
    color: var(--std-color-warning-400, #fbbf24);
}

/* بند ۴ — «در حال انجام» breathes, slowly: three seconds a breath and never
   below half strength, so it is noticed without blinking. Only the active
   status has it. */
@keyframes fi-upload-history-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.fi-upload-history-status[data-status='active'] .fi-badge {
    animation: fi-upload-history-breathe 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .fi-upload-history-status[data-status='active'] .fi-badge {
        animation: none;
    }
}

/* بند ۱۱ — every figure that opens the نوبت's page says so under the pointer. */
.fi-photo-upload-history-page .fi-ta-cell a,
.fi-upload-history-cell-link {
    cursor: pointer;
}

.fi-upload-history-cell-link {
    text-decoration: none;
}

.fi-upload-history-cell-link:hover {
    text-decoration: underline;
}

/* بند ۹ — «امروز / دیروز / …»: green and yellow a day at a time; past a
   week the date in the list's ordinary ink. */
.fi-upload-history-relative {
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.fi-upload-history-relative[data-tone='green'] {
    color: var(--std-color-success-600, #16a34a);
}

.fi-upload-history-relative[data-tone='yellow'] {
    color: var(--std-color-warning-600, #d97706);
}

:where(.dark) .fi-upload-history-relative[data-tone='green'] {
    color: var(--std-color-success-400, #4ade80);
}

:where(.dark) .fi-upload-history-relative[data-tone='yellow'] {
    color: var(--std-color-warning-400, #fbbf24);
}