/*
 * «تخفیف‌ها» — the list, the two form pages, and the dashboard's own card.
 *
 * Everything here belongs to one management and is written once for the three
 * places it is read in, because the task asks the three to agree: a start in
 * green, an end in red, and the hour of each in a near shade of its own colour
 * so the day and the hour of one end are told apart without being read as two
 * separate facts (الزام تخفیف-۰۶، ۱۵ و ۲۵).
 *
 * A stylesheet rather than a compiled Filament theme, which this app does not
 * have; it is linked from AdminPanelProvider beside the other seven.
 */

/* ── The two ends of a window, wherever they are printed ───────────────────── */

/*
 * Four colours and not two. Both greens are readable on the panel's dark
 * background and both reds are, which is the one thing الزام تخفیف-۰۶ asks for
 * beyond the difference itself: the date carries the stronger tone because it is
 * the fact read first, and the hour the lighter one beside it.
 *
 * Light mode gets the darker end of each ramp for the same reason — the tone
 * that reads against white is the opposite of the tone that reads against black.
 */
.fi-discount-start-date {
    color: #15803d; /* success-700 */
    font-weight: 600;
}

.fi-discount-start-time {
    color: #16a34a; /* success-600 — the same green, a step away */
}

.fi-discount-end-date {
    color: #b91c1c; /* danger-700 */
    font-weight: 600;
}

.fi-discount-end-time {
    color: #dc2626; /* danger-600 */
}

.fi-discount-start-label,
.fi-discount-start-sep {
    color: #15803d;
}

.fi-discount-end-label,
.fi-discount-end-sep {
    color: #b91c1c;
}

:where(.dark) .fi-discount-start-date {
    color: #4ade80; /* success-400 */
}

:where(.dark) .fi-discount-start-time {
    color: #86efac; /* success-300 */
}

:where(.dark) .fi-discount-end-date {
    color: #f87171; /* danger-400 */
}

:where(.dark) .fi-discount-end-time {
    color: #fca5a5; /* danger-300 */
}

:where(.dark) .fi-discount-start-label,
:where(.dark) .fi-discount-start-sep {
    color: #4ade80;
}

:where(.dark) .fi-discount-end-label,
:where(.dark) .fi-discount-end-sep {
    color: #f87171;
}

/* The day over the hour inside one cell — two lines, one column
   (الزام تخفیف-۰۵). */
.fi-discount-window-stacked {
    /* Inline, so the box is exactly as wide as the date it holds — which is what
       lets the hour be centred on that date rather than on the whole cell
       (الزام تخفیف-اصلاح-۰۲). Before this it was a block-level flex box filling
       the cell, and the hour sat under the *start* of the date instead of under
       its middle. */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.45;
    white-space: nowrap;
}

/* ── The list page ─────────────────────────────────────────────────────────── */

/*
 * الزام تخفیف-۰۳ و ۰۴: «ایجاد تخفیف» opposite the heading rather than halfway
 * down the description, and the description across the whole width so it is one
 * line on an ordinary desktop.
 *
 * The header is Filament's flex row of two children — the block holding the
 * heading and the description, and the actions — which is what stops the
 * description at the button and wraps it. It is made a grid instead, and the
 * first child passes its own children straight through, so breadcrumbs, title
 * and button and then description each take their own row.
 */
@media (min-width: 768px) {
    .fi-discount-list-page .fi-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        row-gap: 0;
    }

    .fi-discount-list-page .fi-header > div:first-child {
        display: contents;
    }

    .fi-discount-list-page .fi-header .fi-breadcrumbs {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-block-end: 1rem;
    }

    .fi-discount-list-page .fi-header-heading {
        grid-column: 1;
        grid-row: 2;
    }

    /* The panel's own 28px offset is meant for the stacked header and would push
       the button off the title's line here. */
    .fi-discount-list-page .fi-header-actions-ctn {
        grid-column: 2;
        grid-row: 2;
        margin-block-start: 0;
    }

    .fi-discount-list-page .fi-header-subheading {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-block-start: 0.5rem;
        /* The panel caps a description at 42rem, which turns this one sentence
           into three lines on a wide page (الزام تخفیف-۰۴). Nothing is removed
           and nothing is shrunk; it is simply given the width it needs. */
        max-width: none;
    }
}

/* الزام تخفیف-۲۹: many columns scroll rather than crushing into one another.
   The table already scrolls; this only keeps a window cell and a percentage
   from being the thing that gets squeezed. */
.fi-discount-list-page .fi-ta-content {
    overflow-x: auto;
}

/* ── How wide the columns of the list are (الزام تخفیف-جدول-۰۱) ─────────────
 *
 * A Filament table already lays itself out from its own content, so left alone
 * every column here comes out as wide as the longer of its heading and its
 * values and no wider — which is exactly the rule this task asks for. The floors
 * below therefore exist only where the browser's own answer is wrong, and each
 * one is a floor rather than a fixed size, so a column is never padded out to a
 * width nothing in it needs.
 *
 * What was here before was the opposite: a 17rem floor on each of the three
 * percentage columns, which drew a «۵۰٪» badge in the middle of 272px of empty
 * table, and a 17.25rem floor on «عنوان». The table came out 2187px wide inside
 * a 1216px page — nearly a thousand pixels of horizontal scroll for a row whose
 * content measures 1546px. Measured in a browser at 1600px, the three columns
 * ask for 136px, 118px and 105px of their own, which is their heading's width;
 * that is what they are given back.
 *
 * «عنوان» is the one column a browser gets wrong, because `wrap()` lets it be
 * squeezed to the width of its longest single word: at its natural 92px a
 * four-word campaign name became four lines and made every row 153px tall. Its
 * floor is kept, at a little over half what it was — enough for such a name on
 * two lines.
 *
 * The horizontal scroll stays, as the task allows: the columns still add up to
 * more than a laptop's width. It is now only as long as the content really is.
 */
@media (min-width: 1024px) {
    /* Nothing in the table is squeezed to nothing: a floor under every column,
       small enough that only the narrowest badge columns ever reach it
       (الزام تخفیف-جدول-۰۱). It is written before «عنوان»'s own floor because
       the two selectors weigh the same, and the later of two equals wins. */
    .fi-discount-list-page .fi-ta-header-cell,
    .fi-discount-list-page .fi-ta-cell {
        min-width: 4.5rem;
    }

    .fi-discount-list-page .fi-discount-title-cell {
        min-width: 12rem;
    }
}

/* ── The percentage of each size, half again as large (الزام تخفیف-جدول-۰۳) ──
 *
 * The badge, its colour and its shape are the ones the panel already draws; only
 * the number inside it grows, from the 12px every badge in the panel is written
 * at to 18px. The padding grows with it — by the same half again — so the box
 * still fits its number rather than gripping it.
 */
.fi-discount-list-page .fi-discount-percent-cell .fi-badge {
    font-size: 1.125rem;
    line-height: 1.75rem;
    padding-inline: 0.5625rem;
    padding-block: 0.1875rem;
}

/* ── «شروع» و «پایان», heading and content on one centre line ────────────────
 *
 * الزام تخفیف-جدول-۰۲: the day, the hour and the word above them share a middle.
 * `alignCenter()` on the column centres the cell and the heading; this only
 * stops the heading's own sort button from being stretched across the cell,
 * which would put the word back against the column's edge. Colours are
 * untouched — they are the greens and reds set at the top of this file.
 */
.fi-discount-list-page th.fi-discount-window-cell .fi-ta-header-cell-label,
.fi-discount-list-page th.fi-discount-window-cell button {
    justify-content: center;
}

/* ── The campaign's own name, in the panel's yellow (الزام تخفیف-اصلاح-۰۴) ────
 *
 * «استانداردسازی نمای پنل» owns the colour of every table cell in the panel and
 * prints its rule after this stylesheet, so a column's own `->color('warning')`
 * is otherwise overwritten with the standard near-black — measured, in a
 * browser, as `oklch(0.141 …)`. The exception is written on the very element
 * that carries the colour, and on this one column alone, so nothing else in the
 * panel is repainted.
 *
 * The yellow is the panel's own — the same token the header's date, the card's
 * icon and every other yellow in the agency are written in — rather than the
 * shade Filament derives for a warning cell, which came out two steps darker
 * than the agency's yellow and read as brown on the dark panel.
 *
 * The heading above it is untouched: a heading belongs to the table.
 */
.fi-ta-text-item.fi-color.fi-discount-title-text {
    color: var(--warning-600, #d97706);
    font-weight: 600;
}

:where(.dark) .fi-ta-text-item.fi-color.fi-discount-title-text {
    color: var(--warning-400, #fbbf24);
}

/* ── «تاریخچه تغییرات» (الزام تخفیف-اصلاح-۰۵ … ۰۸) ──────────────────────────── */

/* The date of the change in the standard red, by the same exception and for the
   same reason — the value only, never the heading (الزام تخفیف-اصلاح-۰۸). The
   two shades are the panel's own danger tokens, and they are the shades «پایان»
   is already written in, so the red of this management is one red. */
.fi-ta-text-item.fi-color.fi-discount-history-date {
    color: var(--danger-600, #dc2626);
    font-weight: 600;
}

:where(.dark) .fi-ta-text-item.fi-color.fi-discount-history-date {
    color: var(--danger-400, #f87171);
}

/* The campaign's name in the history, given the room the list gives it — a
   name broken over six lines made every row of this table six lines tall. Its
   own floor and not the list's: this table already carries three percentage
   columns, and the list's 17rem would push half of it off the screen
   (الزام تخفیف-اصلاح-۰۶). */
@media (min-width: 1024px) {
    .fi-discount-history-title-cell {
        min-width: 14rem;
    }
}

/* The portrait of whoever made the change, in the middle of its column
   (الزام تخفیف-اصلاح-۰۵). A `.fi-ta-col` is a flex row, so the picture would
   otherwise sit against the column's edge however the column is aligned. */
.fi-discount-history-author .fi-ta-image {
    justify-content: center;
    width: 100%;
}

/* ── The percentage boxes on «اطلاعات تخفیف» (الزام تخفیف-اصلاح-۰۹) ──────────
 *
 * The number itself, and nothing else: the box, the «٪» beside it and the value
 * that is saved are untouched. */
.fi-discount-percent-input {
    color: var(--warning-600, #d97706);
    font-weight: 700;
}

:where(.dark) .fi-discount-percent-input {
    color: var(--warning-400, #fbbf24);
}

/* ── The date boxes on «ایجاد تخفیف» and «ویرایش تخفیف» ────────────────────── */

/* الزام تخفیف-۱۲: the box is visible before anything is picked, outlined in red
   while it is empty, and back to the panel's ordinary outline the instant a real
   day is chosen. */
.fi-discount-date-field .fi-jdp-field .fi-input {
    box-shadow: none;
}

.fi-discount-date-field .fi-jdp-field.fi-jdp-empty .fi-input {
    --tw-ring-color: #ef4444; /* danger-500 */
    box-shadow: inset 0 0 0 1px #ef4444;
}

/* …and the hint inside it is readable rather than a whisper: the panel's own
   muted text, not the two steps fainter a placeholder is drawn at. */
.fi-discount-date-field .fi-jdp-cover-hint {
    color: #6b7280; /* gray-500 */
}

:where(.dark) .fi-discount-date-field .fi-jdp-cover-hint {
    color: #9ca3af; /* gray-400 */
}

/*
 * الزام تخفیف-۱۳: «۲۳ مهر ۱۴۰۵» in the box, over the ۱۴۰۵/۰۷/۲۳ the calendar
 * itself has to be able to parse.
 *
 * The input keeps its value and keeps sending it; what is covered is only what
 * is *read*. The cover cannot take pointer events, or the box would stop
 * opening its own calendar.
 */
.fi-jdp-readout {
    position: relative;
}

.fi-jdp-readout .fi-jdp-input {
    color: transparent;
    caret-color: transparent;
}

.fi-jdp-readout .fi-jdp-cover {
    position: absolute;
    inset-block: 0;
    inset-inline: 0.75rem;
    display: flex;
    align-items: center;
    pointer-events: none;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: #111827; /* gray-900 */
}

:where(.dark) .fi-jdp-readout .fi-jdp-cover {
    color: #fff;
}

/* ── «ساعت شروع» و «ساعت پایان» ────────────────────────────────────────────── */

/* الزام تخفیف-۱۴: two boxes, twenty-four hours, no seconds and no keyboard. */
.fi-clock-picker {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    direction: ltr;
}

.fi-clock-picker-part {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

.fi-clock-picker-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
    width: 100%;
    border-radius: 0.5rem;
    border: none;
    box-shadow: inset 0 0 0 1px rgb(17 24 39 / 0.1);
    background-color: transparent;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: #111827;
    text-align: center;
    cursor: pointer;
}

:where(.dark) .fi-clock-picker-box {
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
    background-color: rgb(255 255 255 / 0.05);
    color: #fff;
}

.fi-clock-picker-box:disabled {
    opacity: 0.6;
    cursor: default;
}

.fi-clock-picker-value {
    flex: 1 1 auto;
    min-width: 0;
}

/* The same small triangle a Filament select carries, drawn rather than
   inherited from a native control we no longer use. */
.fi-clock-picker-caret {
    flex: none;
    width: 0;
    height: 0;
    border-inline: 0.25rem solid transparent;
    border-block-start: 0.3125rem solid currentColor;
    opacity: 0.6;
}

.fi-clock-picker-sep {
    flex: none;
    font-weight: 700;
    color: #6b7280;
}

/*
 * The list itself (الزام تخفیف-زمان-۰۳).
 *
 * The complaint this replaces was not a contrast that could be nudged: the
 * options of a native `<select>` are drawn by the browser, and on this dark skin
 * it drew white numerals onto its own white popup — nothing readable until the
 * pointer happened to land on a row. This list is the panel's own surface, with
 * the panel's own hairline, and every number on it is readable the moment it
 * opens.
 *
 * It is capped in height and scrolls, because sixty minutes is a long list, and
 * it opens above whatever is under it.
 */
.fi-clock-picker-list {
    position: absolute;
    z-index: 30;
    inset-inline-start: 0;
    min-width: 100%;
    margin-block-start: 0.25rem;
    max-height: 14rem;
    overflow-y: auto;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2), inset 0 0 0 1px rgb(17 24 39 / 0.1);
    padding: 0.25rem;
}

:where(.dark) .fi-clock-picker-list {
    background-color: #27272a;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5), inset 0 0 0 1px rgb(255 255 255 / 0.15);
}

/* عادی — readable without the pointer anywhere near it. */
.fi-clock-picker-option {
    display: block;
    width: 100%;
    border: none;
    border-radius: 0.375rem;
    background-color: transparent;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: #111827;
    text-align: center;
    cursor: pointer;
}

:where(.dark) .fi-clock-picker-option {
    color: #e5e7eb;
}

/* زیر موس — that one option, while the pointer is on it, and nothing else
   (الزام تخفیف-زمان-۰۴). */
.fi-clock-picker-option:hover,
.fi-clock-picker-option:focus-visible {
    background-color: rgb(17 24 39 / 0.07);
    color: #111827;
    outline: none;
}

:where(.dark) .fi-clock-picker-option:hover,
:where(.dark) .fi-clock-picker-option:focus-visible {
    background-color: rgb(255 255 255 / 0.12);
    color: #fff;
}

/* انتخاب‌شده — the panel's own yellow, and it stays after the pointer leaves
   (الزام تخفیف-زمان-۰۵). Deliberately not the same as the state above: one is a
   wash of the surface, this one is a colour of its own. */
.fi-clock-picker-option-selected,
.fi-clock-picker-option-selected:hover {
    background-color: var(--warning-500, #f59e0b);
    color: #111827;
    font-weight: 700;
}

:where(.dark) .fi-clock-picker-option-selected,
:where(.dark) .fi-clock-picker-option-selected:hover {
    background-color: var(--warning-400, #fbbf24);
    color: #111827;
}

/* An open list must not be cut off by the box that holds the form
   (الزام تخفیف-زمان-۰۳). */
.fi-discount-form-page .fi-sc-section,
.fi-discount-form-page .fi-sc-section-content-ctn,
.fi-discount-form-page .fi-fo-field-wrp {
    overflow: visible;
}

/* ── The three tabs of «ایجاد تخفیف» and «ویرایش تخفیف» ────────────────────── */

/* الزام تخفیف-۱۰: the two behind «اطلاعات تخفیف» are visible from the first
   moment and plainly not ready yet. */
.fi-discount-tab-pending {
    opacity: 0.55;
}

/* ── The header of «ویرایش تخفیف» (الزام تخفیف-۱۵ و اصلاح۲-۰۴ … ۰۷) ────────── */

.fi-discount-heading {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    max-width: 100%;
}

/*
 * «ویرایش تخفیف | تخفیف قبل از رونمایی از سایت | تست مدیریت».
 *
 * The page's own name stays the heading — white, at the heading's own size, and
 * uncoloured by anything here. Beside it stand the campaign's two names, in the
 * panel's yellow and at three quarters of that size, so they are read as what
 * the page is *about* rather than as a second title
 * (الزام تخفیف-اصلاح۲-۰۴، ۰۵ و ۰۶).
 *
 * `em` and not a figure of its own: the heading's size is the management's to
 * set, and these two keep step with it whatever it becomes.
 */
.fi-discount-heading-title,
.fi-discount-heading-occasion {
    font-size: 0.75em;
    color: var(--std-color-warning-500, #f59e0b);
    /* الزام تخفیف-اصلاح۲-۰۷: a long name wraps onto its own line rather than
       pushing the separator over the title beside it, and it is never shrunk to
       fit. `min-width: 0` is what lets a very long one break at all inside the
       flex row above. */
    min-width: 0;
}

:where(.dark) .fi-discount-heading-title,
:where(.dark) .fi-discount-heading-occasion {
    color: var(--std-color-warning-400, #fbbf24);
}

/* On an ordinary desktop the three parts stay on one line; the separator is
   never left at the end of a line on its own. */
.fi-discount-heading-main,
.fi-discount-heading .fi-list-count-heading-sep {
    white-space: nowrap;
}

/* ── The picked day and the picked hour in «زمان‌بندی» (اصلاح۲-۰۱ و ۰۲) ────────
 *
 * Only the values. «تاریخ شروع», «ساعت شروع» and the two beside them are the
 * field labels the panel draws for every form, and they keep the colour every
 * other label in the panel has — the task says so twice.
 *
 * The greens and the reds are the four already named at the top of this file,
 * so a start reads the same here as it does in the list and on the dashboard.
 */
.fi-discount-field-start .fi-jdp-cover,
.fi-discount-field-start .fi-clock-picker-value {
    color: #15803d; /* success-700 */
    font-weight: 600;
}

.fi-discount-field-end .fi-jdp-cover,
.fi-discount-field-end .fi-clock-picker-value {
    color: #b91c1c; /* danger-700 */
    font-weight: 600;
}

:where(.dark) .fi-discount-field-start .fi-jdp-cover,
:where(.dark) .fi-discount-field-start .fi-clock-picker-value {
    color: #4ade80; /* success-400 */
}

:where(.dark) .fi-discount-field-end .fi-jdp-cover,
:where(.dark) .fi-discount-field-end .fi-clock-picker-value {
    color: #f87171; /* danger-400 */
}

/* A box with nothing picked in it yet still whispers today's date; that hint is
   not a value and is not coloured as one. */
.fi-discount-field-start .fi-jdp-cover-hint,
.fi-discount-field-end .fi-jdp-cover-hint {
    color: #6b7280; /* gray-500 */
    font-weight: 400;
}

:where(.dark) .fi-discount-field-start .fi-jdp-cover-hint,
:where(.dark) .fi-discount-field-end .fi-jdp-cover-hint {
    color: #9ca3af; /* gray-400 */
}

/* ── The dashboard card (الزام تخفیف-۱۸ … ۲۹) ─────────────────────────────── */

/*
 * A tile among tiles: the same corners, the same padding and the same border as
 * the figures beside it. Only two things are its own — it is let out of the
 * square, because it holds a list rather than a figure, and it grows downwards
 * with what it holds instead of hiding any of it (الزام تخفیف-۲۹).
 */
.fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-active-discount {
    /* Out of the square, and up to the height of the row — which the squares
       beside it set, and which grows when this card holds more than they do.
       The shared minimum height stays the shared one: nothing here redefines
       what a tile is, only what this tile's shape is allowed to be. */
    aspect-ratio: auto;
    height: 100%;
    justify-content: flex-start;
    /* الزام تخفیف-اصلاح-۱۰: the yellow belongs to the card, exactly as it does
       on «آخرین تغییرات فنی سایت» beside it — the same border colour, the same
       inner hairline, and the corners, padding and height the tile already
       shares with every other tile in the row. The frame that used to be drawn
       around the campaign inside it is gone (see `-item-scheduled` below). */
    border-color: rgb(245 158 11 / 0.55);
    box-shadow: inset 0 0 0 1px rgb(245 158 11 / 0.35);
    /* …every side but the leading one. الزام ۸ of تسک ۱۴۰۵/۰۶/۰۲/۱۳ gives every
       card on the dashboard a 3px line down that edge, and the rule that does
       it lives in `agency-dashboard.css` — which this stylesheet is loaded
       after, so `border-color` above would take the line back to this card's
       own translucent amber and leave it the one card in the row drawn
       differently. Restated here rather than moved, because the frame around
       this tile is this file's to own.

       Green rather than yellow since بند ۴ of تسک ۱۴۰۵/۰۶/۰۶/۱۱: this card is
       one of «مانیتورینگ»'s, and every card of that section takes the green.
       Only the colour changed — the width, the style and the corner are what
       they were. */
    border-inline-start: 3px solid var(--success-400, #4ade80);
}

:where(.dark) .fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-active-discount {
    border-color: rgb(251 191 36 / 0.5);
    box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.3);
    border-inline-start: 3px solid var(--success-400, #4ade80);
}

.fi-stat-active-discount .fi-discount-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fi-stat-active-discount .fi-discount-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
}

:where(.dark) .fi-stat-active-discount .fi-discount-card-title {
    color: #9ca3af;
}

/* الزام تخفیف-۲۰، ۲۲ و ۲۴: the state of the whole management, in one dot. */
.fi-discount-card-dot {
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
}

.fi-discount-card-dot-active {
    background-color: #22c55e; /* success-500 */
}

.fi-discount-card-dot-scheduled {
    background-color: #f59e0b; /* warning-500 */
}

.fi-discount-card-dot-none {
    background-color: #ef4444; /* danger-500 */
}

/* A slow pulse and not a blink: الزام تخفیف-۲۰ asks for the difference in so
   many words. Anyone who has asked their system to stop animating gets a steady
   dot instead. */
@keyframes fi-live-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgb(34 197 94 / 0.7);
    }

    50% {
        opacity: 0.45;
        transform: scale(1.25);
        box-shadow: 0 0 0 0.5rem rgb(34 197 94 / 0);
    }
}

/*
 * الزام تخفیف-اصلاح-۱۳: it really beats now. The old step — a tenth of the
 * brightness and a ring that faded over three-eighths of a rem — was there in
 * the markup and invisible on the screen, which is exactly what the task
 * reports. The dot now dims to under half, grows by a quarter and pushes a ring
 * twice as far, still over two full seconds so it breathes rather than blinks.
 */
/*
 * بند ۲۴: «کد انیمیشن جداگانه و متفاوت ایجاد نشود اگر قابلیت مشترک قابل استفاده
 * است». So the beat is one class, carried by whatever is beating — the mark on
 * «تخفیف فعال» and the dot beside an employee who is in the panel now. Not two
 * animations that happen to have been written the same, which is a pair that
 * drifts the first time one of them is tuned.
 */
.fi-discount-card-dot-beating,
.fi-live-dot-beating {
    animation: fi-live-pulse 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .fi-discount-card-dot-beating,
    .fi-live-dot-beating {
        animation: none;
    }
}

.fi-discount-card-empty {
    margin-block-start: 0.5rem;
    font-size: 0.875rem;
    color: #9ca3af;
}

/* Side by side while the width allows and onto the next line when it does not,
   with nothing overlapping and nothing outside the card (الزام تخفیف-۲۱ و ۲۹). */
.fi-discount-card-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
}

/*
 * بند ۲۵: no frame around a campaign any more, and no surface of its own — the
 * icon, the name, the start and the end sit directly on the card. What used to
 * be said by a box is said by spacing, typography and colour instead: the name
 * is bold and the panel's darkest text, the two ends of the window are lighter
 * and smaller, and a campaign is set apart from the next one by the air between
 * them. The only yellow frame on this tile is the tile's own.
 */
.fi-discount-card-item {
    display: flex;
    flex-direction: column;
    /*
     * الزام تخفیف-اصلاح-۱۱, and again الزام «داشبورد-۱۰»: half again as much air
     * between the campaign's name, its start and its end — twice over, because
     * the second task was written while looking at what the first one produced
     * and asked for another fifty per cent of it. At 13px these three lines
     * stood 8.5px apart to begin with, then 12.75px, and now stand 19.375px:
     * 11.375px of leading (line-height 1.875) plus an 8px gap. Nothing else
     * about the card moves — الزام «داشبورد-۱۰» is explicit that the campaigns,
     * their windows, the state and every figure stay exactly as they are. The
     * card grows with them, which it was already allowed to do.
     */
    gap: 0.5rem;
    flex: 1 1 12rem;
    min-width: 0;
    /* Only the inline padding is gone: a campaign still starts where the card's
       own text starts. The block padding stays as the air between one campaign
       and the next, which is now the whole of what separates them. */
    padding-block: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.875;
}

.fi-discount-card-item-title {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 700;
    color: #111827;
    overflow-wrap: anywhere;
}

:where(.dark) .fi-discount-card-item-title {
    color: #fff;
}

.fi-discount-card-item-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

/*
 * الزام تخفیف-اصلاح-۱۲: the mark before a campaign's name — the panel's own
 * icon, in the agency's yellow, at the size of the words beside it. Its height
 * is the line's own, so the line it sits on is not made any taller by it.
 */
.fi-discount-card-item-icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--warning-500, #f59e0b);
}

:where(.dark) .fi-discount-card-item-icon {
    color: var(--warning-400, #fbbf24);
}

/*
 * «زمان‌بندی‌شده», in words rather than as a frame (الزام تخفیف-۲۳ و اصلاح-۱۰).
 * A campaign that has not started yet still has to be told from one that is
 * running, and the yellow that used to say so around this item now belongs to
 * the card itself.
 */
.fi-discount-card-item-flag {
    flex: none;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    color: #b45309; /* warning-700 */
}

:where(.dark) .fi-discount-card-item-flag {
    color: #fbbf24; /* warning-400 */
}

/* الزام تخفیف-اصلاح-۱۰ و بند ۲۵: no frame of its own, and now no surface
   either. A campaign that has not started is told from one that is running by
   the word «زمان‌بندی‌شده» beside its name, in `-item-flag` above
   (الزام تخفیف-۲۳). */

/* بند ۲۵: the two ends of the window are the quiet half of the card — smaller
   and lighter than the campaign's own name, which is what tells them apart now
   that no box does. */
.fi-discount-card-item-window {
    font-size: 0.75rem;
    color: #6b7280;
}

:where(.dark) .fi-discount-card-item-window {
    color: #9ca3af;
}