/*
 * «عکس‌های فروش رفته» — the management as a gallery of cards
 * (تسک ۱۴۰۵/۰۷/۱۳/۰۱).
 *
 * Every rule here is scoped to this management's own classes, which is why it
 * is a file of its own rather than lines in a shared one. No colour is written
 * as a literal: the panel's own tokens decide them, so the standards block
 * keeps the last word and dark mode follows for free.
 */

/* ——— The grid itself ——————————————————————————————————————————————————— */

/*
 * بند ۴ و ۳۱: four to a desktop row, fewer as the screen narrows, and never a
 * sideways scroll. Filament writes the column counts from `contentGrid()`;
 * what is left is the gap and the promise that a row of cards is a row of
 * equal boxes however tall their contents are.
 */
.fi-ta-content-grid:has(.fi-sold-photo-card) {
    gap: 1rem;
    padding: 1rem;
}

.fi-ta-record:has(.fi-sold-photo-card) {
    height: 100%;
}

.fi-ta-record:has(.fi-sold-photo-card) .fi-ta-record-content-ctn,
.fi-ta-record:has(.fi-sold-photo-card) .fi-ta-record-content {
    height: 100%;
}

/* ——— The card ———————————————————————————————————————————————————————————— */

.fi-sold-photo-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    padding: 0.75rem;
}

/* بند ۷: the gallery's name, once, above the picture. */
.fi-sold-photo-gallery {
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
}

/*
 * بند ۶: one container of one shape for every proportion. The box has a fixed
 * aspect ratio so a row of cards keeps its line, and the picture is fitted
 * inside it rather than cropped or stretched — a portrait stays portrait and
 * leaves a margin either side, which is the honest drawing of it.
 */
.fi-sold-photo-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    width: 100%;
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: var(--gray-100, #f3f4f6);
}

:where(.dark) .fi-sold-photo-frame {
    background-color: var(--gray-900, #111827);
}

.fi-sold-photo-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fi-sold-photo-missing {
    font-size: 0.75rem;
    color: var(--gray-500, #6b7280);
}

/* ——— The facts under the picture ———————————————————————————————————————— */

.fi-sold-photo-facts {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    flex: 1 1 auto;
}

.fi-sold-photo-fact {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.375rem;
}

.fi-sold-photo-fact dt {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
    color: var(--gray-500, #6b7280);
}

:where(.dark) .fi-sold-photo-fact dt {
    color: var(--gray-400, #9ca3af);
}

.fi-sold-photo-fact dd {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-sold-photo-calendar svg {
    width: 1rem;
    height: 1rem;
}

.fi-sold-photo-size {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.5rem;
    border-radius: 9999px;
    background-color: var(--primary-500, #f59e0b);
    color: var(--gray-950, #030712);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/*
 * بند ۴.۳ و ۵.۳ of تسک ۱۴۰۵/۰۷/۱۳/۰۲: one fixed colour per size, in the
 * card and on the toolbar alike — the class is `SoldPhotoSize::badgeClass()`
 * in both places. Three of the panel's own chart tokens, bright enough to
 * read on the dark card and far enough apart to be told apart at a glance;
 * the dark ink on each is the panel's own near-black.
 */
.fi-sold-size-marked {
    background-color: var(--std-color-chart-amber, #eab308);
    color: var(--std-color-hex-111827, #111827);
}

.fi-sold-size-plain {
    background-color: var(--std-color-chart-sky, #38bdf8);
    color: var(--std-color-hex-111827, #111827);
}

.fi-sold-size-original {
    background-color: var(--std-color-chart-violet, #a78bfa);
    color: var(--std-color-hex-111827, #111827);
}

/* بند ۵.۱: the gallery's title is a link to its view. */
.fi-sold-photo-gallery-link {
    color: inherit;
    text-decoration: none;
}

.fi-sold-photo-gallery-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* بند ۵.۲: the order, last, and a link to its own page. */
.fi-sold-photo-order-link {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.fi-sold-photo-amount {
    font-weight: 600;
}

.fi-sold-photo-buyer {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ——— بند ۱۹: the one row of marks at the foot of the card ————————————————— */

.fi-sold-photo-marks {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    padding-top: 0.5rem;
    border-top: 1px solid var(--gray-200, #e5e7eb);
}

:where(.dark) .fi-sold-photo-marks {
    border-top-color: var(--gray-700, #374151);
}

.fi-sold-photo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    border-radius: 9999px;
    color: var(--gray-500, #6b7280);
    cursor: pointer;
}

:where(.dark) .fi-sold-photo-mark {
    color: var(--gray-400, #9ca3af);
}

.fi-sold-photo-mark svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* بند ۱۶: «آیکون لینک سبز». */
.fi-sold-photo-mark-site {
    color: var(--success-500, #22c55e);
}

:where(.dark) .fi-sold-photo-mark-site {
    color: var(--success-400, #4ade80);
}

/* بند ۱۷: the photographer is a face, never a name in the body of the card. */
.fi-sold-photo-mark-photographer {
    margin-inline-start: auto;
}

.fi-sold-photo-mark-photographer {
    position: relative;
}

.fi-sold-photo-avatar-fallback {
    display: inline-flex;
}

.fi-sold-photo-avatar-fallback svg {
    width: 1.125rem;
    height: 1.125rem;
}

.fi-sold-photo-avatar {
    position: absolute;
    inset: 0;
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 9999px;
    object-fit: cover;
}

/* ——— بند ۲۲: the three figures on the toolbar line ——————————————————————— */

/*
 * `margin-inline-end: auto` is what puts this at the right-hand end of the
 * toolbar and the search box at the other — «در سمت مقابل بخش جستجو». It is
 * the same sentence «گالری‌ها» uses for its own row of figures, so the two
 * managements put a summary in the same place.
 */
.fi-sold-photo-stats {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    /* In the heading now (بند ۱۵ of تسک ۱۴۰۵/۰۷/۱۸/۰۳): the heading's bold and
       its line height are not the figures' — they keep what they had on the
       toolbar, the value alone in bold. */
    font-weight: 400;
    line-height: 1.375rem;
}

.fi-sold-photo-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.fi-sold-photo-stat-label {
    color: var(--gray-500, #6b7280);
}

:where(.dark) .fi-sold-photo-stat-label {
    color: var(--gray-400, #9ca3af);
}

.fi-sold-photo-stat-value {
    font-weight: 700;
}

/* بند ۴.۲ of تسک ۱۴۰۵/۰۷/۱۳/۰۲: «عدد کل فروش سبز نمایش داده شود». */
.fi-sold-photo-stat-total {
    color: var(--std-color-success-600, #16a34a);
}

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

/* بند ۴.۳: the sizes, side by side after their divider. */
.fi-sold-photo-size-stats {
    gap: 0.375rem;
    flex-wrap: wrap;
}

.fi-sold-photo-stat-divider {
    color: var(--gray-300, #d1d5db);
}

:where(.dark) .fi-sold-photo-stat-divider {
    color: var(--gray-600, #4b5563);
}

/* ——— تسک ۱۴۰۵/۰۷/۱۸/۰۳ ———————————————————————————————————————————————————— */

/*
 * بند ۱۷: the three size badges, taller, with room above and below their words
 * and a 6px corner rather than a pill. Their font size and colours are the
 * ones above, untouched. Only the toolbar's three: the size on each card keeps
 * its pill, so a card's lines stay the height they are.
 */
.fi-sold-photo-size-stats .fi-sold-photo-size {
    padding: 0.3125rem 0.625rem;
    border-radius: 6px;
    line-height: 1.25rem;
}

/* …and on the toolbar they stand at its left-hand end, beside the search box,
   with room between them and between them and the box. */
.fi-sold-photo-size-stats {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-inline-end: 0.75rem;
}

/* بند ۱۸.۱: the figure of «مبلغ» in the panel's green; the word «ریال» after it
   and the title before it stay as they were. */
.fi-sold-photo-amount-value {
    color: var(--std-color-success-600, #16a34a);
}

:where(.dark) .fi-sold-photo-amount-value {
    color: var(--std-color-success-400, #4ade80);
}

/* بند ۱۸.۲: the photographer's face one and a half times its old 1.75rem. The
   mark around it grows with it so the face stays round and inside the card,
   and the other marks keep their own size and place. */
.fi-sold-photo-mark.fi-sold-photo-mark-photographer {
    width: 2.625rem;
    height: 2.625rem;
}

.fi-sold-photo-mark-photographer .fi-sold-photo-avatar-fallback svg {
    width: 1.5rem;
    height: 1.5rem;
}

/*
 * بند ۱۶: the five best-selling photographers in the heading — a face each, the
 * number sold under it, a thin rule between every two. Sized to the heading's
 * own height so the header does not grow, and wrapping as a group onto the next
 * line on a narrow screen (بند ۱۶.۴).
 */
.fi-top-sellers {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.fi-top-seller {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1875rem;
    cursor: default;
}

.fi-top-seller-face {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    overflow: hidden;
    background-color: var(--std-color-mix-gray-400-10, rgba(156, 163, 175, 0.1));
    /* A ring, so a dark portrait still reads as a face on the dark header. */
    box-shadow: 0 0 0 1px var(--gray-300, #d1d5db);
    color: var(--gray-500, #6b7280);
}

:where(.dark) .fi-top-seller-face {
    box-shadow: 0 0 0 1px var(--gray-600, #4b5563);
}

.fi-top-seller-fallback svg {
    width: 1.125rem;
    height: 1.125rem;
}

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

.fi-top-sellers-sep {
    align-self: stretch;
    width: 1px;
    background-color: var(--gray-300, #d1d5db);
}

:where(.dark) .fi-top-sellers-sep {
    background-color: var(--gray-600, #4b5563);
}

/* ——— تسک ۱۴۰۵/۰۷/۲۰/۰۴ ———————————————————————————————————————————————————— */

/*
 * بند ۳.۱: «کل فروش | فروش امروز | فروش این ماه» a third larger — the labels
 * and the figures alike, 0.8125rem × 4/3. Their line grows with them, and so
 * does the room between the three, so a rule still stands clear of both its
 * neighbours. The colours, the rules and the order are the ones above.
 */
.fi-sold-photo-stats {
    gap: 0.6667rem;
    font-size: 1.0833rem;
    line-height: 1.8333rem;
}

.fi-sold-photo-stat {
    gap: 0.3333rem;
}

/*
 * بند ۳.۲: the five faces a third larger across — 1.75rem × 4/3 — and the
 * figure under each a third larger with them, 0.75rem × 4/3. The glyph behind
 * a missing portrait, the room under a face and the room between two faces
 * grow by the same third, so nothing that was apart now touches. The heading
 * is a wrapping row: on a narrow screen the five still fall to the next line
 * as one group rather than onto the figures before them.
 */
.fi-top-sellers {
    gap: 0.6667rem;
    font-size: 1rem;
}

.fi-top-seller {
    gap: 0.25rem;
}

.fi-top-seller-face {
    width: 2.3333rem;
    height: 2.3333rem;
}

.fi-top-seller-fallback svg {
    width: 1.5rem;
    height: 1.5rem;
}

/*
 * بند ۳.۳: the three size badges at the other end of the toolbar from the
 * search box — the right-hand end of a right-to-left row. They are drawn at
 * the start of the row now (`TOOLBAR_START`), and `margin-inline-end: auto`
 * is what gives the rest of the row's width to the space between them and the
 * box, the same sentence «جزئیات فروش اشتراک» uses for its three figures.
 * They stay on one line among themselves; on a screen too narrow for the
 * badges and the box side by side the box and its two buttons go to the next
 * line whole, never under or over a badge.
 */
.fi-sold-photo-size-stats {
    flex-wrap: nowrap;
    margin-inline-end: auto;
    padding-inline-end: 1.5rem;
}

@media (max-width: 639px) {
    .fi-sold-photos-monitor-page .fi-ta-header-toolbar {
        flex-wrap: wrap;
        row-gap: 0.75rem;
    }

    .fi-sold-photo-size-stats {
        flex-wrap: wrap;
        flex-shrink: 1;
        min-width: 0;
        padding-inline-end: 0;
    }
}

/*
 * الزام مشترک ۴: the heading folds instead of running off the screen.
 *
 * The title, the three figures and the five faces are one wrapping row, but
 * the block that holds them sat in the header's own row at its full unwrapped
 * width — a flex item is never narrower than its content unless it is told it
 * may be — so on a tablet the faces ran out past the edge of the screen, and
 * a third more of them would have. Allowed to shrink, the row wraps where it
 * was always written to: the faces go to the next line as one group.
 */
.fi-sold-photos-monitor-page .fi-header > div:first-child {
    min-width: 0;
}