/* «انتشار گزارش‌های تصویری» (until تسک ۴۹ «لیست گزارش تصویری‌ها») and its
   news form — تسک ۴۸ و ۴۹.

   Unscoped like the panel's other sheets and just as inert elsewhere: every rule
   is written against a `fi-prn-*` class only these pages put on their own
   elements. The date boxes, their yellow and the red «پایان …» headings are the
   news form's own classes (`news-form.css`), so the two forms cannot drift. */

/* ── the list ─────────────────────────────────────────────────────────────── */

/* بند ۵.۲، ۵.۴ — one line per cell; a column is as wide as what it holds, and a
   narrow screen scrolls the table sideways (Filament's own overflow box). */
.fi-prn-nowrap,
.fi-prn-nowrap .fi-ta-text,
.fi-prn-nowrap .fi-ta-text-item,
.fi-prn-nowrap .fi-ta-text-item-label {
    white-space: nowrap !important;
    max-width: none !important;
}

/* بند ۵.۵ — «تاریخ انتشار در خبرها» keeps the yellow it was given (تسک ۴۹، بند
   ۶.۲). The words live one element below the cell, where the colour has to go. */
.fi-prn-yellow .fi-ta-text-item-label,
.fi-prn-yellow span.fi-ta-text-item-label,
.fi-prn-yellow a {
    color: var(--panel-header-date, #facc15) !important;
}

/* تسک ۴۹، بند ۸ — the report's title in the panel's approved yellow (#ca8a04 on
   the light page, #facc15 on the dark: the pair «منو»، «پیام‌رسانی» and the
   match lists use), no longer the amber, which read as orange. */
.fi-prn-title .fi-ta-text-item-label,
.fi-prn-title a {
    color: #ca8a04 !important;
}
:is(.dark) .fi-prn-title .fi-ta-text-item-label,
:is(.dark) .fi-prn-title a {
    color: #facc15 !important;
}
.fi-prn-title .fi-ta-text-item-label { font-weight: 600; }

/* تسک ۴۹، بند ۶.۱ و ۶.۲ — «۲۲ مهر ۱۴۰۵ | ۱۸:۳۰». The parts are isolates
   (`<bdi>`, see PhotoReportNewsSlots::momentCell()), so the order holds in a
   right-to-left cell; only the day of «تاریخ انتشار گزارش» is green. */
.fi-prn-moment { white-space: nowrap; unicode-bidi: isolate; }
.fi-prn-moment-sep { opacity: .55; padding-inline: .125rem; }
.fi-prn-moment-time { unicode-bidi: isolate; }
.fi-prn-green { color: rgb(var(--success-600)); font-weight: 600; }
:is(.dark) .fi-prn-green { color: rgb(var(--success-400)); }

/* تسک ۴۹، بند ۵ — why this page had a second vertical scrollbar.

   Filament's pagination prints its «در هر صفحه» label as `.sr-only` — a
   1px `position: absolute` box. Nothing between it and the page is positioned,
   so it is placed against the page itself, at the foot of the table's own
   scrolling box, and `.fi-main`'s clipping (which a management list needs, see
   the ADMIN-TABLE-SCROLL notes in theme.css) does not reach an absolutely
   positioned box whose containing block lies outside it. On a phone, where that
   label is shown, the page grew by as much as the table overflowed its box: the
   window scrolled as well as the box (a second bar on the left, in RTL), and
   scrolling it lifted the box off the top of the page and left an empty dark
   strip under it. Positioning the label's own row keeps it inside the box.
   The search label is given the same anchor. The same markup is on every list
   of the panel; this rule is kept to this management (بند ۵). */
.fi-resource-photo-report-news .fi-ta-ctn .fi-pagination,
.fi-resource-photo-report-news .fi-ta-ctn .fi-ta-search-field {
    position: relative;
}

/* تسک ۴۹، بند ۷ — the digits typed or stored in a box drawn Persian. The value
   is not touched — what is saved, searched and compared is exactly what is in
   the box — only its drawing: Vazirmatn's stylistic set 1 draws 0–9 and ٠–٩ as
   ۰–۹, and does nothing else (its one lookup covers those twenty glyphs). */
.fi-resource-photo-report-news :is(input, textarea),
.fi-prn-confirm :is(input, textarea) {
    font-feature-settings: "ss01" 1;
}

.fi-prn-muted { opacity: .6; }

/* بند ۵.۳ — a few words in the row; the whole text on hover, focus or a tap.
   تسک ۴۹، بند ۶.۳: at the size of every other cell (`text-sm`) — a view
   column is not given Filament's text size of its own. */
.fi-prn-desc {
    cursor: help;
    border-bottom: 1px dotted currentColor;
    white-space: nowrap;
    font-size: .875rem;
    line-height: 1.25rem;
}
.fi-prn-desc:focus-visible { outline: 2px solid rgb(var(--primary-500)); outline-offset: 2px; }

/* «اندازه فونت تولتیپ برابر متن عنوان‌های گزارش در جدول باشد» — the table's text
   is `text-sm`; long text breaks over lines and stays right to left.
   تسک ۴۹، بند ۶.۳: the tooltip has a theme of its own (`fi-prn`), so its size
   and its opaque box no longer depend on what the panel's tooltip theme says;
   it is put on the page's body above every layer, the pinned titles included. */
.tippy-box[data-theme~='fi-prn'] {
    font-size: .875rem !important;
    line-height: 1.5rem;
    background-color: #fff;
    color: rgb(var(--gray-950));
    border: 1px solid rgb(var(--gray-200));
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / .25);
    border-radius: .5rem;
}
.tippy-box[data-theme~='fi-prn'] > .tippy-content { padding: .5rem .75rem; }
.tippy-box[data-theme~='fi-prn'] > .tippy-arrow { color: #fff; }
:is(.dark) .tippy-box[data-theme~='fi-prn'] {
    background-color: rgb(var(--gray-800));
    color: #fff;
    border-color: rgb(255 255 255 / .12);
}
:is(.dark) .tippy-box[data-theme~='fi-prn'] > .tippy-arrow { color: rgb(var(--gray-800)); }
.tippy-box[data-theme~='fi-prn'][data-placement^='top'] > .tippy-arrow::before { border-top-color: currentColor; }
.tippy-box[data-theme~='fi-prn'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: currentColor; }
.fi-prn-tip {
    font-size: .875rem !important;
    line-height: 1.5rem;
    white-space: normal;
    overflow-wrap: anywhere;
    direction: rtl;
    text-align: right;
}

/* بند ۵.۴ و ۵.۶ — portraits, with the panel's drawn disc for a missing one. */
.fi-prn-avatars {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: .25rem;
}
.fi-prn-avatar-wrap { display: inline-flex; border-radius: 9999px; }
.fi-prn-avatar-wrap:focus-visible { outline: 2px solid rgb(var(--primary-500)); outline-offset: 2px; }
.fi-prn-avatar {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 9999px;
    object-fit: cover;
    display: inline-block;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}
.fi-prn-avatar-empty {
    background:
        radial-gradient(circle at 50% 36%, rgb(var(--gray-400)) 0 22%, transparent 23%),
        radial-gradient(ellipse at 50% 105%, rgb(var(--gray-400)) 0 38%, transparent 39%),
        rgb(var(--gray-200));
}
:where(.dark) .fi-prn-avatar-empty {
    background:
        radial-gradient(circle at 50% 36%, rgb(var(--gray-500)) 0 22%, transparent 23%),
        radial-gradient(ellipse at 50% 105%, rgb(var(--gray-500)) 0 38%, transparent 39%),
        rgb(var(--gray-700));
}

/* ── the form ─────────────────────────────────────────────────────────────── */

/* بند ۶.۱ — two thirds of the heading, the words white and the gallery's title
   green. تسک ۴۹، بند ۴.۲: «انتشار خبری گزارش تصویری:», and a long title breaks
   over lines on a phone instead of being cut off or running under the buttons. */
.fi-prn-heading { font-size: .6667em; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.fi-prn-heading-title { unicode-bidi: isolate; }
.fi-header-heading:has(.fi-prn-heading) { min-width: 0; max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; }
.fi-header:has(.fi-prn-heading) > div:first-child { min-width: 0; }
.fi-prn-heading-verb { color: #fff; }
html:not(.dark) .fi-prn-heading-verb { color: rgb(var(--gray-950)); }
.fi-prn-heading-title { color: rgb(var(--success-400)); }
html:not(.dark) .fi-prn-heading-title { color: rgb(var(--success-600)); }

/* تسک ۵۰، بند ۴ — «… [عنوان سبز] | ۳ آبان ۱۴۰۵»: a white bar, then the day of the
   form's own stored «تاریخ انتشار» in white, no hour (or «منتشر نشده»). The date
   is an isolate that never breaks inside itself; on a phone it moves to the next
   line whole rather than running into the title. */
.fi-prn-heading-when { display: inline-block; white-space: nowrap; }
.fi-prn-heading-sep { color: #fff; padding-inline: .5rem; font-weight: 400; }
.fi-prn-heading-date { color: #fff; unicode-bidi: isolate; white-space: nowrap; }
html:not(.dark) .fi-prn-heading-sep,
html:not(.dark) .fi-prn-heading-date { color: rgb(var(--gray-950)); }

/* بند ۶.۵ — «تاریخ انتشار» and the two switches on one row on a desktop, each as
   wide as it is (the news form's own rule); on a phone the row wraps. */
.fi-prn-row > .fi-fo-component-ctn {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: 1.5rem;
    row-gap: .75rem;
}
.fi-prn-row > .fi-fo-component-ctn > * {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
}
.fi-prn-row-toggle { padding-bottom: .55rem; }

/* تسک ۵۰، بند ۵.۲ و ۵.۳ — the «پایان …» heading is the end date's own label: the
   history icon before it on its line, red as the heading was, and no line of its
   own any more (the old heading row and the empty label rows under it are gone). */
.fi-prn-end { margin-top: .5rem; }
.fi-prn-end .fi-prn-end-date .fi-fo-field-wrp-label span { color: rgb(185 28 28); font-weight: 600; }
:is(.dark) .fi-prn-end .fi-prn-end-date .fi-fo-field-wrp-label span { color: rgb(248 113 113); }
.fi-prn-end .fi-prn-row > .fi-fo-component-ctn { row-gap: .5rem; }
.fi-prn-end .fi-prn-end-enabled { padding-bottom: .55rem; }
.fi-prn-end .fi-prn-end-enabled .fi-fo-field-wrp-label span { white-space: nowrap; }

/* تسک ۵۰، بند ۶ — «اعمال زمان پایان» ticked: the tick and the end boxes in one
   clearly red-bordered box. A highlight, not an error: no error ring on a field,
   no message; a real validation error still prints its own words under its field.
   Never wider than its column, so nothing is cut or sticks out on a phone. */
.fi-prn-end-boxed {
    border: 2px solid rgb(220 38 38);
    border-radius: .75rem;
    padding: .625rem .75rem .25rem;
    background-color: rgb(220 38 38 / .04);
    box-sizing: border-box;
    max-width: 100%;
}
:is(.dark) .fi-prn-end-boxed { border-color: rgb(248 113 113); background-color: rgb(248 113 113 / .06); }
@media (max-width: 640px) {
    .fi-prn-end-boxed { padding: .5rem .5rem .125rem; }
}

/* تسک ۵۰، بند ۵ — the chosen day, month and year: yellow in «تاریخ انتشار», red in
   both «پایان …» rows. The value of the box only — the caption above it, the hour
   and the minute, the list a box unfolds and a closed (disabled) box keep theirs. */
.fi-jalali-select.fi-prn-value-yellow select:not(:disabled) { color: #ca8a04; -webkit-text-fill-color: #ca8a04; }
:is(.dark) .fi-jalali-select.fi-prn-value-yellow select:not(:disabled) { color: #facc15; -webkit-text-fill-color: #facc15; }
.fi-jalali-select.fi-prn-value-red select:not(:disabled) { color: rgb(185 28 28); -webkit-text-fill-color: rgb(185 28 28); }
:is(.dark) .fi-jalali-select.fi-prn-value-red select:not(:disabled) { color: rgb(248 113 113); -webkit-text-fill-color: rgb(248 113 113); }

/* تسک ۵۰، بند ۷ — «در حال اعمال…» in the heading of the box whose request is out,
   shown and hidden by Livewire itself (`wire:loading`, targeted). While it is out,
   only what that answer will redraw is closed to clicks (`fi-prn-pending`). */
.fi-prn-busy {
    display: none;
    align-items: center;
    gap: .375rem;
    margin-inline-start: .75rem;
    padding: .125rem .5rem;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: rgb(var(--gray-700)) !important;
    background-color: rgb(var(--gray-100));
    vertical-align: middle;
}
:is(.dark) .fi-prn-busy { color: rgb(var(--gray-200)) !important; background-color: rgb(255 255 255 / .08); }
.fi-prn-busy-spin { width: .875rem; height: .875rem; animation: fi-prn-spin .8s linear infinite; }
@keyframes fi-prn-spin { to { transform: rotate(360deg); } }
.fi-prn-busy[data-slow] { color: rgb(var(--warning-700)) !important; }
:is(.dark) .fi-prn-busy[data-slow] { color: rgb(var(--warning-400)) !important; }
.fi-prn-pending { opacity: .55; pointer-events: none; transition: opacity .15s; }

/* …and when it failed: what was not applied, in words, with «تلاش مجدد». */
.fi-prn-failed {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .375rem;
    margin-inline-start: .75rem;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: rgb(185 28 28) !important;
    vertical-align: middle;
}
.fi-prn-failed[hidden] { display: none; }
:is(.dark) .fi-prn-failed { color: rgb(248 113 113) !important; }
.fi-prn-failed button {
    padding: .0625rem .5rem;
    border-radius: .375rem;
    border: 1px solid currentColor;
    font-weight: 600;
    cursor: pointer;
}

.fi-prn-history { overflow-x: auto; }

/* تسک ۴۹، بند ۸ — the four boxes' headings and their icons in the panel's
   approved yellow; the history box still opens and closes as before (the colour
   is on the words and the icon, not on the button that toggles it). */
.fi-prn-section .fi-section-header-heading,
.fi-prn-section .fi-section-header-icon {
    color: #ca8a04 !important;
}
:is(.dark) .fi-prn-section .fi-section-header-heading,
:is(.dark) .fi-prn-section .fi-section-header-icon {
    color: #facc15 !important;
}
.fi-prn-section .fi-section-header { align-items: center; }

/* بند ۸ — the question, centred under the report's title. */
.fi-prn-confirm .fi-modal-heading { text-align: center; font-size: 1.05rem; }
.fi-prn-confirm .fi-modal-description { text-align: center; font-size: 1rem; }