/*
 * «مشتریان» — the list, a customer's four tabs, the window that changes a
 * balance and «تغییرات اعتبار مشتریان» (تسک ۱۴۰۵/۰۷/۲۰/۰۱).
 *
 * Every rule is scoped to one of those pages' own classes or to a class this
 * task's own markup carries, and no colour is written as a bare literal: the
 * panel's `--std-color-*` tokens decide them, with the literal only as the
 * fallback for a panel whose palette has not loaded. (The one exception is
 * five of the twelve month colours, which the palette has no token for — see
 * «ماه» below.) A table cell's own text
 * colour is not decided here at all — the yellow of a mobile number and the
 * green of a name are the column's own `color()`, and the size of a page's
 * heading is a row of «استانداردسازی نمای پنل» written by a migration.
 */

/* ——— Zebra rows and the column strip (بند ۴، ۱۶، ۱۷ و ۳۳) ——————————————————
 *
 * The pair «آمار فروش» already uses, by name, so the panel has one idea of a
 * striped table. The strip of column titles is a third, stronger wash: unlike
 * either row and unlike the black of the page above the card.
 */
.fi-customers-list-page,
.fi-customer-edit-page,
.fi-credit-changes-page {
    --agency-customers-strip: color-mix(in oklab, var(--gray-400, #9ca3af) 26%, transparent);
}

.fi-customers-list-page .fi-ta-row,
.fi-customer-edit-page .fi-ta-row,
.fi-credit-changes-page .fi-ta-row {
    background-color: var(--agency-zebra-odd);
}

.fi-customers-list-page .fi-ta-row.fi-striped,
.fi-customer-edit-page .fi-ta-row.fi-striped,
.fi-credit-changes-page .fi-ta-row.fi-striped {
    background-color: var(--agency-zebra-even);
}

.fi-customers-list-page .fi-ta-row:hover,
.fi-customer-edit-page .fi-ta-row:hover,
.fi-credit-changes-page .fi-ta-row:hover {
    background-color: var(--agency-zebra-hover);
}

.fi-customers-list-page .fi-ta-table > thead > tr,
.fi-customer-edit-page .fi-ta-table > thead > tr,
.fi-credit-changes-page .fi-ta-table > thead > tr {
    background-color: var(--agency-customers-strip);
}

/* ——— A moment: «۲۰ مهر ۱۴۰۵ | ۰۰:۲۷» (بند ۵، ۱۳ و ۱۸) ————————————————————— */
.agency-moment {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    white-space: nowrap;
}

.agency-moment-date {
    color: var(--std-color-warning-600, #d97706);
}

.dark .agency-moment-date {
    color: var(--std-color-warning-400, #fbbf24);
}

.agency-moment-rule {
    opacity: 0.45;
}

/* ——— A kind of credit and a direction (بند ۱۶، ۲۵، ۲۶ و ۳۱) ————————————————
 *
 * Both kinds are named in green; what tells them apart is the mark — notes in
 * green for cash, a parcel in violet for a gift. A direction is its colour and
 * its sign together: green with a plus, red with a minus.
 */
.agency-credit-type,
.agency-credit-change {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    font-weight: 600;
}

.agency-credit-mark {
    display: inline-flex;
}

.agency-credit-mark svg {
    width: 1.15rem;
    height: 1.15rem;
}

.agency-credit-type .agency-credit-label,
.agency-credit-type-credit .agency-credit-mark,
.agency-credit-change-increase {
    color: var(--std-color-success-600, #16a34a);
}

.dark .agency-credit-type .agency-credit-label,
.dark .agency-credit-type-credit .agency-credit-mark,
.dark .agency-credit-change-increase {
    color: var(--std-color-success-400, #4ade80);
}

.agency-credit-type-gift .agency-credit-mark {
    color: var(--std-color-chart-purple, #9333ea);
}

.dark .agency-credit-type-gift .agency-credit-mark {
    color: var(--std-color-chart-violet, #a78bfa);
}

.agency-credit-change-decrease {
    color: var(--std-color-danger-600, #dc2626);
}

.dark .agency-credit-change-decrease {
    color: var(--std-color-danger-400, #f87171);
}

/* تسک ۱۴۰۵/۰۷/۲۰/۰۲، بند ۳.۲: the amount of a movement — figure and «ریال»
   as one piece of text — in the colour of its direction. «مانده پس از تغییر»
   is not drawn with this class and keeps the table's own colour. */
.agency-credit-amount {
    white-space: nowrap;
    font-weight: 600;
}

.agency-credit-amount-increase {
    color: var(--std-color-success-600, #16a34a);
}

.dark .agency-credit-amount-increase {
    color: var(--std-color-success-400, #4ade80);
}

.agency-credit-amount-decrease {
    color: var(--std-color-danger-600, #dc2626);
}

.dark .agency-credit-amount-decrease {
    color: var(--std-color-danger-400, #f87171);
}

/* ——— «ماه» (تسک ۱۴۰۵/۰۷/۲۰/۰۲، بخش پنجم) ————————————————————————————————————
 *
 * Twelve months, twelve fixed colours: a month is the same colour for every
 * customer, on every page and in every year, because the class is its number.
 * Seven are the panel's own tokens; the palette has no indigo, no light
 * purple, no coral, no ice blue and no pink, so those five are written here,
 * once. Each is picked to read on the dark panel, where it is used as it is;
 * on a light panel the same colour is deepened so it still reads on white.
 */
.agency-month {
    font-weight: 600;
    white-space: nowrap;
    color: color-mix(in oklab, var(--agency-month-colour, currentColor) 62%, #000);
}

.dark .agency-month {
    color: var(--agency-month-colour, currentColor);
}

.agency-month-1 { --agency-month-colour: var(--std-color-success-400, #4ade80); }   /* فروردین — سبز روشن */
.agency-month-2 { --agency-month-colour: var(--std-color-chart-teal, #14b8a6); }    /* اردیبهشت — سبزآبی */
.agency-month-3 { --agency-month-colour: var(--std-color-chart-cyan, #06b6d4); }    /* خرداد — فیروزه‌ای */
.agency-month-4 { --agency-month-colour: var(--std-color-chart-sky, #38bdf8); }     /* تیر — آبی روشن */
.agency-month-5 { --agency-month-colour: #818cf8; }                                 /* مرداد — آبی متمایل به بنفش */
.agency-month-6 { --agency-month-colour: #c084fc; }                                 /* شهریور — بنفش روشن */
.agency-month-7 { --agency-month-colour: var(--std-color-chart-amber, #eab308); }   /* مهر — زرد طلایی */
.agency-month-8 { --agency-month-colour: var(--std-color-chart-orange, #f97316); }  /* آبان — نارنجی */
.agency-month-9 { --agency-month-colour: #ff7f6e; }                                 /* آذر — قرمز مرجانی */
.agency-month-10 { --agency-month-colour: #bae6fd; }                                /* دی — آبی یخی */
.agency-month-11 { --agency-month-colour: #f472b6; }                                /* بهمن — صورتی */
.agency-month-12 { --agency-month-colour: var(--std-color-chart-lime, #84cc16); }   /* اسفند — سبز لیمویی */

/* ——— «اعطای اشتراک» (تسک ۱۴۰۵/۰۷/۲۰/۰۲، بخش سوم) ——————————————————————————
 *
 * The title in the middle of the window, the close button where it was. What
 * the customer holds is a list of rows — a mark, a title, a value — at about
 * twice the height the old lines had; under a rule, the notes, each beside an
 * information mark.
 */
.agency-grant-window .fi-modal-header {
    justify-content: center;
}

.agency-grant-window .fi-modal-header > div:not(.fi-modal-close-btn-ctn),
.agency-grant-window .fi-modal-heading {
    flex: 1 1 auto;
    text-align: center;
}

.agency-sub-state-rows {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0;
}

.agency-sub-state-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    line-height: 1.6;
}

.agency-sub-state-row dt {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
    opacity: 0.85;
}

.agency-sub-state-row dd {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.4rem;
    min-width: 0;
    margin: 0;
}

.agency-sub-state-mark {
    display: inline-flex;
    flex: 0 0 auto;
}

.agency-sub-state-mark svg {
    width: 1.2rem;
    height: 1.2rem;
}

.agency-sub-state-rule,
.agency-sub-state-note {
    opacity: 0.55;
}

/* بند ۴.۵: the colour is the title's and its mark's; the value beside it keeps
   the window's own text colour. */
.agency-sub-state-row-start dt {
    color: var(--std-color-success-600, #16a34a);
    opacity: 1;
}

.dark .agency-sub-state-row-start dt {
    color: var(--std-color-success-400, #4ade80);
}

.agency-sub-state-row-end dt {
    color: var(--std-color-danger-600, #dc2626);
    opacity: 1;
}

.dark .agency-sub-state-row-end dt {
    color: var(--std-color-danger-400, #f87171);
}

.agency-sub-state-row-remaining dt {
    color: var(--std-color-warning-600, #d97706);
    opacity: 1;
}

.dark .agency-sub-state-row-remaining dt {
    color: var(--std-color-warning-400, #fbbf24);
}

.agency-sub-state-divider {
    margin: 1.1rem 0;
    border: 0;
    border-top: 1px solid color-mix(in oklab, var(--gray-400, #9ca3af) 35%, transparent);
}

.agency-sub-state-notes {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.agency-sub-state-info {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.9;
}

.agency-sub-state-info .agency-sub-state-mark {
    margin-top: 0.3rem;
    color: var(--std-color-chart-sky, #38bdf8);
}

.agency-sub-state-info-strong .agency-sub-state-mark {
    color: var(--std-color-danger-600, #dc2626);
}

.dark .agency-sub-state-info-strong .agency-sub-state-mark {
    color: var(--std-color-danger-400, #f87171);
}

/* ——— «تأیید تغییر اعتبار مشتری» (بند ۲۸) ———————————————————————————————————— */
.agency-credit-confirm {
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: start;
    border: 1px solid color-mix(in oklab, var(--gray-400, #9ca3af) 30%, transparent);
    border-radius: 0.75rem;
    overflow: hidden;
}

.agency-credit-confirm-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0.9rem;
}

.agency-credit-confirm-row:nth-child(even) {
    background-color: var(--agency-zebra-even);
}

.agency-credit-confirm-row dt {
    flex: 0 0 auto;
    opacity: 0.7;
}

.agency-credit-confirm-row dd {
    min-width: 0;
    font-weight: 600;
    text-align: end;
    overflow-wrap: anywhere;
}

/* ——— «ویرایش مشتری | نام | موبایل» (بند ۹) ————————————————————————————————— */
.agency-customer-heading {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    max-width: 100%;
}

.agency-customer-heading-rule {
    opacity: 0.45;
}

.agency-customer-heading-name,
.agency-customer-heading-phone {
    font-size: 0.82em;
    overflow-wrap: anywhere;
}

/* تسک ۱۴۰۵/۰۷/۲۰/۰۲، بخش اول: the mobile number in the panel's yellow — the
   colour it already has in the list this page was opened from. Only the
   number: the title, the rule and a name keep the heading's own colour. */
.agency-customer-heading-phone {
    color: var(--std-color-warning-600, #d97706);
}

.dark .agency-customer-heading-phone {
    color: var(--std-color-warning-400, #fbbf24);
}

/* ——— One row for a tab's title and its column switch (بند ۱۲) ———————————————
 *
 * Filament draws a table's heading and its toolbar as two rows. On a
 * customer's tabs they share one: the title at the start, «اعطای اشتراک» where
 * there is one, and the column switch at the end.
 */
.fi-customer-edit-page .fi-ta-header-ctn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.fi-customer-edit-page .fi-ta-header-ctn > .fi-ta-header {
    flex: 1 1 12rem;
    min-width: 0;
}

.fi-customer-edit-page .fi-ta-header-ctn > .fi-ta-header-toolbar {
    flex: 0 0 auto;
    border-width: 0;
}

/* ——— «خریدها» (بند ۱۹ تا ۲۳؛ تسک ۱۴۰۵/۰۷/۲۰/۰۲، بخش چهارم) ————————————————————
 *
 * One wide card to a row: the photograph at the start, the facts beside it in
 * two lines, the three downloads in a column at the end. The frame, a fact and
 * a mark are «مانیتور عکس‌های فروش رفته»'s own pieces and are styled by its
 * file; what is here is how a purchase arranges them. The same card is drawn
 * in the «جزئیات خرید» window, so everything below is scoped to the card and
 * not to the tab.
 */
.fi-ta-content-grid:has(.agency-purchase-card) {
    gap: 1rem;
    padding: 1rem;
}

.agency-purchase-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.agency-purchase-list > .agency-purchase-card {
    border: 1px solid color-mix(in oklab, var(--gray-400, #9ca3af) 25%, transparent);
    border-radius: 0.75rem;
}

.agency-purchase-card {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1rem 1.25rem;
    padding: 1rem;
    min-width: 0;
}

.agency-purchase-photo {
    flex: 0 0 15rem;
    max-width: 100%;
    align-self: center;
}

.agency-purchase-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.9rem;
    flex: 1 1 22rem;
    min-width: 0;
}

.agency-purchase-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    margin: 0;
    min-width: 0;
}

/* The second line is set off from the first by a rule, so «what it is» and
   «what was bought» are two things at a glance. */
.agency-purchase-line[data-purchase-line="second"] {
    padding-top: 0.9rem;
    border-top: 1px solid color-mix(in oklab, var(--gray-400, #9ca3af) 22%, transparent);
}

/* بند ۵.۳: the gallery's title is the card's main text, and has the line to
   itself above the three facts that follow it. */
.agency-purchase-title {
    flex: 1 1 100%;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.agency-purchase-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    margin: 0;
    min-width: 0;
}

.agency-purchase-line[data-purchase-line="first"] > .agency-purchase-facts {
    /* Grows from nothing rather than from its own width, so the marks stay
       on this line and it is the facts that fold when the card is narrow. */
    flex: 1 1 0;
    min-width: min(14rem, 100%);
}

/* A fact here may be as long as it is: the card is wide, and a competition's
   name cut to three dots is a name nobody can read. */
.agency-purchase-card .fi-sold-photo-fact {
    flex: 0 1 auto;
    max-width: 100%;
}

.agency-purchase-card .fi-sold-photo-fact dd {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    font-weight: 600;
}

.agency-purchase-status {
    margin-inline-start: 0.4rem;
    font-size: 0.85em;
    font-weight: 400;
    opacity: 0.75;
}

.agency-purchase-photographer {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* The mark that carries a face pushes itself to the far end of a row of marks
   in the monitor; beside a name it stays where it is. */
.agency-purchase-photographer .fi-sold-photo-mark-photographer {
    margin-inline-start: 0;
}

/* بند ۵.۳ و ۵.۶: the three marks close the first line — at its end, on the
   line itself, without the rule they had at the foot of the narrow card. */
.agency-purchase-links {
    flex: 0 0 auto;
    margin-inline-start: auto;
    padding-top: 0;
    border-top: 0;
}

/* بند ۵.۵: three buttons of one width, one under the other, each title on one
   line. The column is as wide as its longest title and no wider. */
.agency-purchase-downloads-ctn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 auto;
    max-width: 100%;
}

.agency-purchase-downloads {
    display: grid;
    grid-template-columns: max-content;
    gap: 0.5rem;
}

.agency-purchase-download {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid color-mix(in oklab, var(--std-color-warning-400, #fbbf24) 55%, transparent);
    border-radius: 0.5rem;
    background-color: color-mix(in oklab, var(--std-color-warning-400, #fbbf24) 12%, transparent);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.agency-purchase-download svg {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
}

a.agency-purchase-download:hover {
    background-color: color-mix(in oklab, var(--std-color-warning-400, #fbbf24) 26%, transparent);
}

.agency-purchase-download-off {
    border-color: color-mix(in oklab, var(--gray-400, #9ca3af) 40%, transparent);
    background-color: transparent;
    opacity: 0.5;
    cursor: not-allowed;
}

.agency-purchase-download-reason {
    max-width: 14rem;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    opacity: 0.75;
}

/* بند ۵.۸: on a phone the card folds — the photograph, then the facts, then
   the buttons at the full width of the card — and nothing is dropped. */
@media (max-width: 640px) {
    .agency-purchase-photo {
        flex: 1 1 100%;
    }

    .agency-purchase-downloads-ctn {
        flex: 1 1 100%;
    }

    .agency-purchase-downloads {
        grid-template-columns: 1fr;
    }

    .agency-purchase-download-reason {
        max-width: none;
    }

    .agency-purchase-links {
        margin-inline-start: 0;
    }
}

.agency-purchase-window-link {
    margin-top: 1rem;
}

.agency-purchase-window-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.agency-purchase-window-link svg {
    width: 1rem;
    height: 1rem;
}

.agency-purchase-empty {
    opacity: 0.75;
}

/* A phone: the two windows keep inside the screen, and a confirmation's rows
   fold rather than squeezing a long description into half a line. */
@media (max-width: 640px) {
    .agency-credit-confirm-row {
        flex-direction: column;
        gap: 0.15rem;
    }

    .agency-credit-confirm-row dd {
        text-align: start;
    }

    .fi-customer-edit-page .fi-ta-header-ctn > .fi-ta-header-toolbar {
        margin-inline-start: auto;
    }
}