/*
 * «پرفروش‌ترین عکس‌ها» (تسک ۱۴۰۵/۰۷/۲۰/۰۵).
 *
 * The cards are the cards of «مانیتور عکس‌های فروش‌رفته» and take their look
 * from `agency-sold-photos.css`; the filter band is the band of «مانیتورینگ
 * آماری عکاسان» and takes its look from `agency-photographer-stats.css`. What
 * is here is only what neither of those pages has: the six figures, the grid
 * (that page's grid is Filament's own table grid, which this page does not
 * draw), the rank on each picture, the search row and the pages.
 *
 * Every colour is one of the panel's own tokens.
 */

.fi-best-photos {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ——— بند ۷: the six figures ——————————————————————————————————————————————— */

.fi-best-photos-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.fi-best-photos-figure {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
    background-color: var(--std-color-color-white, #fff);
}

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

.fi-best-photos-figure dt {
    font-size: 0.825rem;
    color: var(--std-color-gray-500, #6b7280);
}

:where(.dark) .fi-best-photos-figure dt {
    color: var(--std-color-gray-400, #9ca3af);
}

.fi-best-photos-figure dd {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem;
    overflow-wrap: anywhere;
}

/* «مخفی» — a photograph or a gallery the site no longer shows keeps its card
   and its figures; the mark sits opposite the rank and says only that the
   site hides it (تسک ۱۴۰۵/۰۷/۲۰/۰۵_۰۲ بند ۳، تسک ۱۴۰۵/۰۷/۲۰/۰۶_۰۲ بند ۷). */
.fi-best-photo-hidden {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.75rem;
    padding-inline: 0.625rem;
    border-radius: 9999px;
    background-color: rgb(17 24 39 / 0.82);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.fi-best-photo-hidden svg {
    width: 0.9375rem;
    height: 0.9375rem;
}

.fi-best-photos-figure-units dd,
.fi-best-photo-units-value {
    color: var(--primary-600, #d97706);
}

:where(.dark) .fi-best-photos-figure-units dd,
:where(.dark) .fi-best-photo-units-value {
    color: var(--primary-400, #fbbf24);
}

.fi-best-photos-figure-rial dd,
.fi-best-photo-card .fi-sold-photo-amount {
    color: var(--success-600, #16a34a);
}

:where(.dark) .fi-best-photos-figure-rial dd,
:where(.dark) .fi-best-photo-card .fi-sold-photo-amount {
    color: var(--success-400, #4ade80);
}

.fi-best-photos-unit {
    font-size: 0.75rem;
    font-weight: 500;
}

/* ——— بند ۶: «پاک‌سازی فیلترها», at the end of the band ————————————————————— */

.fi-best-photos-filters .fi-pstat-options {
    max-height: 20rem;
    overflow-y: auto;
}

.fi-best-photos-clear {
    margin-inline-start: auto;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--std-color-gray-300, #d1d5db);
    font-size: 0.8125rem;
    color: var(--danger-600, #dc2626);
}

:where(.dark) .fi-best-photos-clear {
    border-color: var(--std-color-gray-600, #4b5563);
    color: var(--danger-400, #f87171);
}

.fi-best-photos-clear:disabled {
    opacity: 0.45;
    cursor: default;
}

/* ——— بند ۹: the search, the sort and the count ———————————————————————————— */

.fi-best-photos-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.fi-best-photos-search {
    flex: 1 1 18rem;
    min-width: 0;
}

.fi-best-photos-search-input {
    width: 100%;
    padding: 0.4375rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--std-color-gray-300, #d1d5db);
    background-color: var(--std-color-color-white, #fff);
    font-size: 0.875rem;
}

:where(.dark) .fi-best-photos-search-input {
    border-color: var(--std-color-gray-600, #4b5563);
    background-color: var(--std-color-gray-900, #111827);
    color: inherit;
}

.fi-best-photos-toolbar .fi-pstat-filter {
    min-width: 13rem;
}

.fi-best-photos-count {
    margin-inline-start: auto;
    padding-block: 0.4375rem;
    font-size: 0.875rem;
    color: var(--std-color-gray-500, #6b7280);
}

:where(.dark) .fi-best-photos-count {
    color: var(--std-color-gray-400, #9ca3af);
}

/* ——— بند ۴: four cards to a desktop row, fewer as the screen narrows ——————— */

.fi-best-photos-body {
    position: relative;
    min-height: 8rem;
}

.fi-best-photos-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.fi-best-photos-dim {
    opacity: 0.45;
}

.fi-best-photo-card {
    min-width: 0;
    border-radius: 0.75rem;
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
    background-color: var(--std-color-color-white, #fff);
}

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

:where(.dark) .fi-best-photo-card .fi-sold-photo-frame {
    background-color: var(--gray-950, #030712);
}

.fi-best-photo-open {
    position: absolute;
    inset: 0;
    display: block;
}

.fi-best-photo-rank {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding-inline: 0.5rem;
    border-radius: 9999px;
    background-color: var(--primary-500, #f59e0b);
    color: var(--gray-950, #030712);
    font-size: 0.9375rem;
    font-weight: 700;
    pointer-events: none;
}

.fi-best-photo-units-value {
    font-size: 1.125rem;
    font-weight: 700;
}

.fi-best-photo-sizes {
    align-items: flex-start;
}

.fi-best-photo-sizes dd {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.fi-best-photo-state {
    margin: 0;
    font-size: 0.75rem;
    color: var(--warning-600, #d97706);
}

:where(.dark) .fi-best-photo-state {
    color: var(--warning-400, #fbbf24);
}

.fi-best-photo-link-off {
    opacity: 0.45;
}

/* The owner: a name and a face, at the far end of the row of marks. */
.fi-best-photo-photographer {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    margin-inline-start: auto;
    font-size: 0.8125rem;
    color: inherit;
    text-decoration: none;
}

a.fi-best-photo-photographer:hover .fi-best-photo-photographer-name {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.fi-best-photo-photographer-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-best-photo-photographer-unknown {
    color: var(--std-color-gray-500, #6b7280);
}

.fi-best-photo-avatar-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 9999px;
    overflow: hidden;
    background-color: var(--std-color-gray-200, #e5e7eb);
}

:where(.dark) .fi-best-photo-avatar-box {
    background-color: var(--std-color-gray-700, #374151);
}

.fi-best-photo-avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ——— بند ۱۲: loading and empty ————————————————————————————————————————————— */

.fi-best-photos-loading {
    position: absolute;
    inset-block-start: 1.5rem;
    inset-inline: 0;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    pointer-events: none;
}

.fi-best-photos-spinner {
    width: 1.5rem;
    height: 1.5rem;
}

.fi-best-photos-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    border-radius: 0.75rem;
    border: 1px dashed var(--std-color-gray-300, #d1d5db);
    color: var(--std-color-gray-500, #6b7280);
}

:where(.dark) .fi-best-photos-empty {
    border-color: var(--std-color-gray-700, #374151);
    color: var(--std-color-gray-400, #9ca3af);
}

.fi-best-photos-empty svg {
    width: 2.5rem;
    height: 2.5rem;
}

.fi-best-photos-empty-title {
    margin: 0;
    font-size: 0.9375rem;
}

/* ——— بند ۱۱: the pages ———————————————————————————————————————————————————— */

.fi-best-photos-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.fi-best-photos-page {
    min-width: 2.25rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    border: 1px solid var(--std-color-gray-300, #d1d5db);
    font-size: 0.875rem;
}

:where(.dark) .fi-best-photos-page {
    border-color: var(--std-color-gray-600, #4b5563);
}

.fi-best-photos-page:disabled {
    opacity: 0.45;
    cursor: default;
}

.fi-best-photos-page-on {
    border-color: var(--primary-500, #f59e0b);
    background-color: var(--primary-500, #f59e0b);
    color: var(--gray-950, #030712);
    font-weight: 700;
}

/* ——— بند ۱۲: tablet and phone ————————————————————————————————————————————— */

@media (max-width: 1279px) {
    .fi-best-photos-summary,
    .fi-best-photos-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    .fi-best-photos-summary,
    .fi-best-photos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    .fi-best-photos-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fi-best-photos-filters .fi-pstat-filter,
    .fi-best-photos-toolbar .fi-pstat-filter {
        flex: 1 1 100%;
    }

    .fi-best-photos-clear,
    .fi-best-photos-count {
        margin-inline-start: 0;
    }
}

/* ——— «پرفروش‌ترین گالری‌ها» (تسک ۱۴۰۵/۰۷/۲۰/۰۶) ———————————————————————————
 *
 * The same page with another grouping, so everything above is its look too.
 * What follows is only what a gallery's card has and a photograph's has not:
 * a cover that fills its box, the stand-in for a gallery without one, and the
 * list of photographers with what each of them sold.
 */

/* A cover is cut to the box rather than letter-boxed in it: never stretched,
   and never a strip of a picture in a frame of another shape. */
.fi-best-gallery-cover {
    object-fit: cover;
}

.fi-best-gallery-no-cover {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.fi-best-gallery-no-cover svg {
    width: 2rem;
    height: 2rem;
}

.fi-best-gallery-card .fi-best-photo-open {
    z-index: 0;
}

.fi-best-gallery-photographers {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
    padding: 0.5rem 0 0;
    list-style: none;
    border-top: 1px solid var(--gray-200, #e5e7eb);
}

:where(.dark) .fi-best-gallery-photographers {
    border-top-color: var(--gray-700, #374151);
}

.fi-best-gallery-photographer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.25rem 0.375rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
}

.fi-best-gallery-photographer-top {
    background-color: color-mix(in srgb, var(--primary-500, #f59e0b) 12%, transparent);
}

.fi-best-gallery-photographer .fi-best-photo-avatar-box {
    width: 2.25rem;
    height: 2.25rem;
}

.fi-best-gallery-photographer-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.fi-best-gallery-photographer-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
}

a.fi-best-gallery-photographer-name:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.fi-best-gallery-top-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--primary-600, #d97706);
}

:where(.dark) .fi-best-gallery-top-badge {
    color: var(--primary-400, #fbbf24);
}

.fi-best-gallery-top-badge svg {
    width: 0.875rem;
    height: 0.875rem;
}

.fi-best-gallery-photographer-units {
    flex: 0 0 auto;
    font-weight: 700;
    white-space: nowrap;
}