/*
 * «مانیتور فعالیت کارمندان» — the dashboard section, the monitor list and one
 * employee's own page (تسک ۱۴۰۵/۰۶/۰۳ بخش ۶ تا ۱۰).
 *
 * ## The four colours are declared once, here, and nowhere else
 *
 * بند ۶-۰۶ fixes what each one means and بند ۷-۴۹ forbids a screen inventing a
 * different shade for a state it shares. So every colour in this file is read
 * from one of four custom properties, and a card, a table cell and a tally in a
 * header are painted from the same four values by construction rather than by
 * three people remembering to agree.
 *
 * Three of them are the panel's own standard colours, reached through their
 * `--std-color-*` tokens so that «رنگ‌های استاندارد» can still repaint them.
 * «نارنجی» has no token of its own — the panel's palette runs green, amber, red
 * — so it is written out once, here, rather than repeated across three screens.
 */
:root {
    --emp-green: var(--std-color-success-600, #16a34a);
    --emp-yellow: var(--std-color-warning-500, #f59e0b);
    --emp-orange: #ea580c;
    --emp-red: var(--std-color-danger-600, #dc2626);
    --emp-gray: var(--std-color-gray-500, #6b7280);
}

.dark {
    --emp-green: var(--std-color-success-400, #4ade80);
    --emp-yellow: var(--std-color-warning-400, #fbbf24);
    --emp-orange: #fb923c;
    --emp-red: var(--std-color-danger-400, #f87171);
    --emp-gray: var(--std-color-gray-400, #9ca3af);
}

.fi-emp-color-green { --emp-color: var(--emp-green); }
.fi-emp-color-yellow { --emp-color: var(--emp-yellow); }
.fi-emp-color-orange { --emp-color: var(--emp-orange); }
.fi-emp-color-red { --emp-color: var(--emp-red); }
.fi-emp-color-gray { --emp-color: var(--emp-gray); }

/* ── The section's header ──────────────────────────────────────────────── */

.fi-emp-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.625rem;
}

.fi-emp-head-bar {
    width: 0.25rem;
    height: 1rem;
    border-radius: 9999px;
    background-color: var(--std-color-warning-500, #f59e0b);
    flex: 0 0 auto;
}

/*
 * The title, and the size everything else in the header is measured against
 * (الزام ۶-۳۲).
 */
.fi-emp-head-label {
    font-size: 1rem;
    font-weight: 700;
}

/*
 * تسک ۱۴۰۵/۰۶/۱۶/۰۶، کارت-ظاهر-۰۰۲، ۰۰۳ و ۰۰۴: the tallies read at the size of
 * the panel's own header readings.
 *
 * بند ۶-۳۲ of the task that first drew them asked for «half the heading», which
 * is `calc(1rem / 2)` — eight pixels. Measured in a browser that is half the
 * size of «تعداد ورود شما به پنل» and «زمان ورود» in the bar above, and at eight
 * pixels the figure beside «فعال» is not a figure anybody reads. So the ratio
 * goes and the header's own size takes its place.
 *
 * Not a pixel value copied out of the browser, which کارت-ظاهر-۰۰۴ forbids
 * outright: `--std-topbar-text-size` is the variable «استانداردسازی نمای پنل»
 * already paints `.fi-agency-header` and «نام کارمند» with, so the two are one
 * value and repointing that standard moves both together. The fallback is the
 * value that standard currently carries, for a panel whose standards have not
 * been synced yet.
 *
 * Only the size changes here. The colours, the labels, the order, the counting
 * and the white rules between them are all untouched (کارت-ظاهر-۰۰۵).
 */
.fi-emp-tallies {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--std-topbar-text-size, 0.8125rem);
    line-height: 1.6;
}

.fi-emp-tally {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.5rem;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--emp-color, inherit);
    font-weight: 700;
    font-size: inherit;
    /*
     * بند ۶-۳۳: a thin white rule between one tally and the next, the height of
     * the text and no taller. Drawn as a leading border on every tally *after*
     * the first, which is why there is never a stray one past the last
     * («بین آخرین مورد و انتهای هدر خط اضافه قرار نگیرد»).
     */
    border-inline-start: 1px solid var(--std-color-color-white, #ffffff);
}

.fi-emp-tally:first-child {
    border-inline-start: 0;
    padding-inline-start: 0;
}

.fi-emp-tally-count {
    font-variant-numeric: tabular-nums;
}

.fi-emp-head-link {
    margin-inline-start: auto;
    font-size: calc(1rem / 2);
    font-weight: 700;
    color: var(--std-color-warning-600, #d97706);
}

/*
 * بند ۶-۵۵: on a narrow screen the tallies wrap instead of scrolling sideways,
 * and they keep their order, their colours and their smaller size while they do
 * it. The rule that draws the separators is on `:first-child`, which is right
 * for one line and wrong for two, so on a wrapped header the rules are dropped
 * altogether rather than left in the wrong places.
 */
@media (max-width: 640px) {
    .fi-emp-tallies {
        gap: 0.125rem 0;
    }

    .fi-emp-tally {
        border-inline-start: 0;
        padding-inline-start: 0;
        padding-inline-end: 0.75rem;
    }
}

/* ── The cards ─────────────────────────────────────────────────────────── */

/*
 * تسک ۱۴۰۵/۰۶/۱۶/۰۶، کارت-ظاهر-۰۰۷، ۰۰۸ و ۰۱۹: the cards stand on the
 * dashboard's own card grid, at the width of one of its standard cards.
 *
 * ## Which grid, and how it was found
 *
 * «واترمارک لانچ بالیگپا» — the card کارت-ظاهر-۰۰۱ names as the reference — is a
 * tile of «مانیتورینگ», and that section is a Filament grid whose column count
 * is `DenseStatCards::getCardsPerRow()` doubled: 4 columns, then 6, 8, 10, 12,
 * 14 and 16 as its own box widens, with `0.75rem` between them. The reference
 * card asks for **three** of those columns (`AgencyStatsWidget::
 * WATERMARK_CARD_SPAN`), which is what makes it one and a half tiles wide.
 *
 * So «the standard card's width» is not a number: it is three columns of that
 * grid. A row of the section's own box therefore holds `⌊columns ÷ 3⌋` of them,
 * and that — not a `14rem` minimum invented here, which is exactly the
 * hard-coded width کارت-ظاهر-۰۰۸ forbids — is what decides how many employees
 * stand side by side:
 *
 *     dashboard columns │  4   6   8  10  12  14  16
 *     employee cards    │  1   2   2   3   4   4   5
 *
 * The tracks are `1fr`, so the leftover columns of a row are shared out among
 * the cards on it rather than left as a hole at the row's end: an employee card
 * is never *narrower* than the reference card, which is the whole of
 * کارت-ظاهر-۰۰۷, and every row is full, which is کارت-ظاهر-۰۱۵. بند ۰۱۹ ranks
 * those two the same way — «اولویت: خوانایی کارت بر نمایش تعداد بیشتر».
 *
 * ## Why the breakpoints are container queries
 *
 * Because the section's are. Filament measures that grid against the box it is
 * drawn in and not against the window — with the menu open the two differ by
 * the width of the menu — so the same breakpoints are asked of the same kind of
 * box here. `.fi-emp-section` is declared the container so that the question is
 * asked of a box this file owns; measured in a browser it is the same width as
 * the section's own container at every one of the four widths the task names
 * (۱۲۱۶ / ۹۶۰ / ۷۲۰ / ۳۵۸ پیکسل), so the two grids change tier together.
 *
 * «آمار کل کارمندان» draws the same grid on a page of its own, so its wrapper is
 * declared the same way — the two screens ask the same question of the same kind
 * of box rather than one of them falling back to whatever container happens to
 * be above it.
 */
.fi-emp-section,
.fi-emp-overview {
    container-type: inline-size;
}

.fi-emp-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.75rem;
    /* کارت-کارمند-۰۱۶: every card on a row is as tall as the tallest of them,
       so a row reads as a row rather than as a broken line of boxes. */
    align-items: stretch;
}

/* @sm — the dashboard's row holds 6 columns here, so two standard cards. */
@container (min-width: 24rem) {
    .fi-emp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* @lg — 8 columns, still two. */
@container (min-width: 32rem) {
    .fi-emp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* @xl — 10 columns, three. */
@container (min-width: 36rem) {
    .fi-emp-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* @3xl — 12 columns, four, and the one tier where the two cards are the same
   width to the pixel rather than the employee's being the wider. */
@container (min-width: 48rem) {
    .fi-emp-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* @5xl — 14 columns, four. */
@container (min-width: 64rem) {
    .fi-emp-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* @7xl — 16 columns, five. */
@container (min-width: 80rem) {
    .fi-emp-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/*
 * بند ۶-۳۷: a panel with sixty employees must not make a dashboard nobody
 * reaches the bottom of — but no employee may be dropped either. So the grid
 * keeps every card and stops growing, scrolling inside itself instead.
 *
 * Three rows of the new card rather than three rows of the old one
 * (تسک ۱۴۰۵/۰۶/۱۶/۰۶): the card grew when it gained the standard tile's own
 * padding, and at the old ceiling the third row was cut through the middle.
 */
.fi-emp-grid-compact {
    max-height: 27rem;
    overflow-y: auto;
    padding-inline-end: 0.25rem;
}

/*
 * تسک ۱۴۰۵/۰۶/۱۵/۰۸، کارت-کارمند-۰۰۳: one employee, one tidy card — the picture
 * and who they are on top, what they have been doing underneath.
 *
 * A column rather than a row. The card used to be a single row of
 * picture-then-everything-else, which left the four lines of figures sharing
 * whatever width the portrait had not taken; giving them the card's full width
 * is what بند ۱۷ و ۱۸ ask for, and it is why nothing has to be squeezed.
 */
.fi-emp-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    /*
     * تسک ۱۴۰۵/۰۶/۱۶/۰۶، کارت-ظاهر-۰۰۶، ۰۰۷ و ۰۱۳: the padding, the corner and
     * the frame of «واترمارک لانچ بالیگپا» — read off that card in a browser,
     * `0.875rem 1rem` and `0.75rem`, which is what
     * `.fi-wi-stats-overview-stat` in `agency-dashboard.css` gives every tile
     * of «مانیتورینگ». The card used to be `0.625rem 0.75rem`, which is a third
     * less air than the card it stands beside.
     */
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    min-width: 0;
    text-align: start;
    /* کارت-کارمند-۰۱۶: a floor rather than a fixed height, because الزام ۶-۲۵
       can add a «حساب غیرفعال» mark to a card and a fixed height would push it
       out. It is the reference tile's own floor; the card is taller than that
       in practice, because it carries four lines. */
    min-height: 6.5rem;
    /* بند ۶-۰۷ و کارت-ظاهر-۰۱۴: the state is a stripe down the card's own edge
       — impossible to miss and impossible to mistake for the card's content.
       The reference card carries the very same 3px edge, in «مانیتورینگ»'s
       green; here it is the employee's own colour, which is the one thing about
       this card that may not become the reference's. */
    border-inline-start: 3px solid var(--emp-color, var(--emp-gray));
    /*
     * کارت-ظاهر-۰۰۵، ۰۰۶ و ۰۱۳: a background of its own, and a frame all the
     * way round.
     *
     * This is the whole of what the task calls «بلوک متن با خط کناری». The card
     * carried `bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900
     * dark:ring-white/10` in its markup — Tailwind utilities, in a panel that
     * compiles no Tailwind theme of its own. Not one of those five classes
     * exists in any stylesheet the browser is served, so the card was drawn
     * transparent, unframed and unshadowed: measured on the dashboard, its
     * `background-color` was `rgba(0, 0, 0, 0)` and its `box-shadow` was
     * `none`. What a reader saw was the page's own background with a coloured
     * stripe beside it — exactly the screenshot attached to this task.
     *
     * Written out as real declarations instead, in what the reference tile
     * actually computes to: white on the light page, `gray-900` on the dark
     * one, a hairline ring at a twentieth of `gray-950` and a tenth of white,
     * and the same small shadow beneath. Read from the panel's own
     * `--std-color-*` tokens, so «رنگ‌های استاندارد» still repaints them.
     */
    background-color: var(--std-color-color-white, #ffffff);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--std-color-gray-950, #030712) 5%, transparent),
        0 1px 3px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.dark .fi-emp-card {
    background-color: var(--std-color-gray-900, #111827);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--std-color-color-white, #ffffff) 10%, transparent),
        0 1px 3px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

/*
 * The card is an `<a>` when the reader may open the monitor, and this rule used
 * to make that anchor `display: block` — which, being written after
 * `.fi-emp-card` at the same weight, threw the card's own `display: flex` away.
 * The picture is an inline `<span>`, so it collapsed to nothing and the state's
 * mark was left floating in the corner of the card with no avatar under it;
 * that is exactly what the screenshot attached to تسک ۱۴۰۵/۰۶/۱۵/۰۸ shows.
 * The card keeps its own display now.
 */
.fi-emp-card-link {
    min-width: 0;
}

/*
 * کارت-کارمند-۰۰۴ و ۰۰۷: the picture at the leading edge — the right, in this
 * panel — with the name and the state beside it.
 */
.fi-emp-identity {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.fi-emp-ident {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1 1 auto;
}

.fi-emp-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
}

/*
 * بند ۶-۱۲: the same size on every card, and never stretched or badly cropped.
 * `object-fit: cover` on a square box is what keeps a portrait a portrait.
 */
.fi-emp-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    object-fit: cover;
}

/* بند ۶-۱۳: an employee with no picture gets the panel's own initials, so the
   card keeps its shape rather than collapsing around a hole. */
.fi-emp-initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    background-color: var(--std-color-gray-200, #e5e7eb);
    color: var(--std-color-gray-700, #374151);
}

.dark .fi-emp-initials {
    background-color: var(--std-color-gray-700, #374151);
    color: var(--std-color-gray-200, #e5e7eb);
}

/*
 * کارت-کارمند-۰۰۵ و ۰۳۰: the mark belongs to the picture, not to the card.
 *
 * It is positioned against the avatar's own box and pulled *inwards* rather
 * than outwards, so its centre lands on the circle's edge at the lower corner
 * facing the name — part of the avatar to look at, inside the avatar's bounds
 * to measure, and therefore impossible for the edge of the card to clip or for
 * a narrower screen to separate from the picture.
 */
.fi-emp-dot {
    position: absolute;
    inset-inline-end: 0.0625rem;
    bottom: 0.0625rem;
    width: 0.6875rem;
    height: 0.6875rem;
    border-radius: 9999px;
    background-color: var(--emp-color, var(--emp-gray));
    outline: 2px solid var(--std-color-color-white, #ffffff);
}

.dark .fi-emp-dot {
    outline-color: var(--std-color-gray-900, #111827);
}

/*
 * Everything read underneath the name: the figures, and the two flags that ride
 * beside the colour. It has the card's whole width now (کارت-کارمند-۰۰۹).
 */
.fi-emp-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1 1 auto;
}

/*
 * بند ۶-۱۴: the name outranks the figures beside it. بند ۶-۵۶: and a long one
 * is cut with an ellipsis rather than allowed to push the statistics out of the
 * card.
 */
.fi-emp-name {
    font-size: 0.8rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-emp-state {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--emp-color, var(--emp-gray));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-emp-meta {
    display: flex;
    flex-direction: column;
    font-size: 0.625rem;
    line-height: 1.5;
    min-width: 0;
    color: var(--std-color-gray-500, #6b7280);
}

.dark .fi-emp-meta {
    color: var(--std-color-gray-400, #9ca3af);
}

.fi-emp-meta > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* بند ۶-۵۷: a five-figure sign-in count must not break the row it sits on. */
.fi-emp-meta-number {
    font-variant-numeric: tabular-nums;
}

/*
 * بند ۶-۲۵ و ۶-۲۶: a switched-off account is marked on the card, beside the
 * colour and never instead of it — the employee keeps whatever colour their
 * history earned them.
 */
.fi-emp-flag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0 0.3rem;
    border-radius: 0.25rem;
    font-size: 0.575rem;
    font-weight: 700;
}

.fi-emp-flag-off {
    background-color: var(--std-color-gray-200, #e5e7eb);
    color: var(--std-color-gray-700, #374151);
}

.dark .fi-emp-flag-off {
    background-color: var(--std-color-gray-700, #374151);
    color: var(--std-color-gray-100, #f3f4f6);
}

.fi-emp-flag-dormant {
    background-color: var(--std-color-danger-100, #fee2e2);
    color: var(--std-color-danger-700, #b91c1c);
}

.dark .fi-emp-flag-dormant {
    background-color: var(--std-color-danger-700, #b91c1c);
    color: var(--std-color-danger-100, #fee2e2);
}

.fi-emp-empty {
    font-size: 0.75rem;
    text-align: center;
    padding: 1rem;
    color: var(--std-color-gray-500, #6b7280);
}

/* ── The monitor list ──────────────────────────────────────────────────── */

.fi-emp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.fi-emp-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 9rem;
}

.fi-emp-field-label {
    font-size: 0.7rem;
    font-weight: 700;
}

.fi-emp-field input,
.fi-emp-field select {
    border-radius: 0.5rem;
    border: 1px solid var(--std-color-gray-300, #d1d5db);
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
    background-color: var(--std-color-color-white, #ffffff);
    color: var(--std-color-gray-900, #111827);
}

.dark .fi-emp-field input,
.dark .fi-emp-field select {
    border-color: var(--std-color-gray-700, #374151);
    background-color: var(--std-color-gray-900, #111827);
    color: var(--std-color-gray-100, #f3f4f6);
}

.fi-emp-count {
    font-size: 0.7rem;
    margin-inline-start: auto;
    color: var(--std-color-gray-500, #6b7280);
}

.fi-emp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

/* بند ۷-۴۳: headings centred, like every other table in the panel, and short
   numeric cells with them. */
.fi-emp-table th {
    text-align: center;
    font-weight: 700;
    padding: 0.4rem 0.5rem;
    white-space: nowrap;
    border-bottom: 1px solid var(--std-color-gray-200, #e5e7eb);
}

.dark .fi-emp-table th {
    border-bottom-color: var(--std-color-gray-700, #374151);
}

.fi-emp-table td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--std-color-gray-100, #f3f4f6);
    vertical-align: middle;
}

.dark .fi-emp-table td {
    border-bottom-color: var(--std-color-gray-800, #1f2937);
}

.fi-emp-table td.fi-emp-center {
    text-align: center;
}

.fi-emp-sort {
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.fi-emp-employee {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.fi-emp-employee .fi-emp-avatar {
    width: 1.75rem;
    height: 1.75rem;
}

.fi-emp-employee .fi-emp-initials {
    font-size: 0.625rem;
}

.fi-emp-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 700;
    color: var(--emp-color, var(--emp-gray));
}

.fi-emp-badge::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: var(--emp-color, var(--emp-gray));
    flex: 0 0 auto;
}

.fi-emp-none {
    color: var(--std-color-gray-400, #9ca3af);
}

.fi-emp-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
}

.fi-emp-pager button[disabled] {
    opacity: 0.4;
    cursor: default;
}

/*
 * بند ۷-۷۳: on a telephone the table becomes a stack of labelled lines rather
 * than something to drag sideways, and nothing is dropped — the name, the state,
 * the last activity, the account and the way in are all still there.
 */
@media (max-width: 768px) {
    .fi-emp-table thead {
        display: none;
    }

    .fi-emp-table,
    .fi-emp-table tbody,
    .fi-emp-table tr,
    .fi-emp-table td {
        display: block;
        width: 100%;
    }

    .fi-emp-table tr {
        border: 1px solid var(--std-color-gray-200, #e5e7eb);
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
        padding: 0.25rem 0.5rem;
    }

    .dark .fi-emp-table tr {
        border-color: var(--std-color-gray-700, #374151);
    }

    .fi-emp-table td {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        border-bottom: 0;
        text-align: start;
    }

    .fi-emp-table td.fi-emp-center {
        text-align: start;
    }

    .fi-emp-table td::before {
        content: attr(data-label);
        font-weight: 700;
        flex: 0 0 auto;
    }
}

/* ── One employee's page ───────────────────────────────────────────────── */

.fi-emp-detail-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.fi-emp-detail-head .fi-emp-avatar {
    width: 3.5rem;
    height: 3.5rem;
}

.fi-emp-detail-head .fi-emp-initials {
    font-size: 1.1rem;
}

.fi-emp-detail-name {
    font-size: 1.1rem;
    font-weight: 700;
}

.fi-emp-tabs {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--std-color-gray-200, #e5e7eb);
    margin-bottom: 0.75rem;
}

.dark .fi-emp-tabs {
    border-bottom-color: var(--std-color-gray-700, #374151);
}

.fi-emp-tab {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--std-color-gray-500, #6b7280);
}

.fi-emp-tab-active {
    color: var(--std-color-warning-600, #d97706);
    border-bottom-color: var(--std-color-warning-500, #f59e0b);
}

.fi-emp-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    padding: 0 0.25rem;
    margin-inline-start: 0.25rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    background-color: var(--std-color-gray-200, #e5e7eb);
    color: var(--std-color-gray-700, #374151);
}

.dark .fi-emp-tab-count {
    background-color: var(--std-color-gray-700, #374151);
    color: var(--std-color-gray-100, #f3f4f6);
}

.fi-emp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.5rem;
}

.fi-emp-stat {
    border-radius: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
}

.dark .fi-emp-stat {
    border-color: var(--std-color-gray-700, #374151);
}

.fi-emp-stat-label {
    font-size: 0.65rem;
    color: var(--std-color-gray-500, #6b7280);
}

.fi-emp-stat-value {
    font-size: 0.85rem;
    font-weight: 700;
}

.fi-emp-stat-note {
    font-size: 0.6rem;
    color: var(--std-color-gray-500, #6b7280);
}

.fi-emp-notice {
    font-size: 0.7rem;
    margin-bottom: 0.5rem;
    color: var(--std-color-gray-500, #6b7280);
}

/*
 * بند ۱۰-۳۹: the marks beside an activity are deliberately **not** the four
 * status colours. «ایجاد» is not «سبز», and reusing the palette would make one
 * employee's edit look like another employee's presence.
 */
.fi-emp-type {
    display: inline-flex;
    align-items: center;
    padding: 0 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    background-color: var(--std-color-gray-100, #f3f4f6);
    color: var(--std-color-gray-700, #374151);
}

.dark .fi-emp-type {
    background-color: var(--std-color-gray-800, #1f2937);
    color: var(--std-color-gray-100, #f3f4f6);
}
}

/* ------------------------------------------------------------------ *
 * «گزارش فعالیت کارمندان» (تسک ۱۴۰۵/۰۶/۰۳ بخش ۱۱)
 *
 * The report reuses the monitor's table, toolbar and pager wholesale — بند
 * ۱۲-۸۶ asks for one pattern across the panels, and a second table of its own
 * would have been a second set of answers to the same questions. What is added
 * here is only what the report has that the monitor does not: the six window
 * buttons, the totals strip, the warning line and the three data states.
 *
 * Every colour is a `--std-color-*` token with a fallback, like the rest of
 * this file, so «رنگ‌های استاندارد» can repaint the report along with
 * everything else.
 * ------------------------------------------------------------------ */

.fi-emp-report .fi-emp-tab-on {
    background-color: var(--std-color-gray-200, #e5e7eb);
    border-color: var(--std-color-gray-400, #9ca3af);
    font-weight: 700;
}

.dark .fi-emp-report .fi-emp-tab-on {
    background-color: var(--std-color-gray-700, #374151);
    border-color: var(--std-color-gray-500, #6b7280);
}

/* بند ۱۱-۵۸ و ۱۱-۴۳: a warning that has to be read before the numbers under it
   are believed, so it is not a quiet grey note. */
.fi-emp-warning {
    margin: 0.5rem 0;
    padding: 0.55rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid var(--std-color-warning-500, #f59e0b);
    background-color: var(--std-color-warning-50, #fffbeb);
    color: var(--std-color-warning-700, #b45309);
    font-size: 0.8125rem;
    line-height: 1.9;
}

.dark .fi-emp-warning {
    background-color: var(--std-color-gray-800, #1f2937);
    color: var(--std-color-warning-400, #fbbf24);
}

/* بند ۱۱-۶۲: the totals of the whole filtered set, above the page they are not
   the total of. */
.fi-emp-report-totals {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1.25rem;
    margin: 0.75rem 0 0.5rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    background-color: var(--std-color-gray-100, #f3f4f6);
    font-size: 0.8125rem;
}

.dark .fi-emp-report-totals {
    background-color: var(--std-color-gray-800, #1f2937);
}

.fi-emp-report-totals b {
    font-weight: 700;
}

/* بند ۱۱-۳۹: the three states, told apart at a glance as well as in words. */
.fi-emp-quality-complete {
    background-color: var(--std-color-success-50, #f0fdf4);
    color: var(--std-color-success-700, #15803d);
}

.fi-emp-quality-incomplete,
.fi-emp-flag-partial {
    background-color: var(--std-color-warning-50, #fffbeb);
    color: var(--std-color-warning-700, #b45309);
}

.fi-emp-quality-no_activity {
    background-color: var(--std-color-gray-100, #f3f4f6);
    color: var(--std-color-gray-600, #4b5563);
}

.dark .fi-emp-quality-complete {
    background-color: var(--std-color-gray-800, #1f2937);
    color: var(--std-color-success-400, #4ade80);
}

.dark .fi-emp-quality-incomplete,
.dark .fi-emp-flag-partial {
    background-color: var(--std-color-gray-800, #1f2937);
    color: var(--std-color-warning-400, #fbbf24);
}

.dark .fi-emp-quality-no_activity {
    background-color: var(--std-color-gray-800, #1f2937);
    color: var(--std-color-gray-300, #d1d5db);
}

/* بند ۱۱-۹۰ … ۱۱-۹۲: on a telephone the filters stack and the table becomes
   labelled lines — nothing is dropped, which the monitor's own rules already
   arrange for `.fi-emp-table`. */
@media (max-width: 640px) {
    .fi-emp-report-totals {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }

    .fi-emp-report .fi-emp-field,
    .fi-emp-report .fi-emp-field input,
    .fi-emp-report .fi-emp-field select {
        width: 100%;
    }
}

/* ── «آمار کل کارمندان» ────────────────────────────────────────────────── */

/*
 * The fixed card at the end of the dashboard's grid
 * (تسک ۱۴۰۵/۰۶/۱۵/۰۹، کارمندان-آمار-۰۰۷).
 *
 * Deliberately almost empty. The card already carries `.fi-emp-card`, so its
 * width, its height floor, its padding, its corner radius, its box and its
 * place in the grid are the employee card's — کارمندان-آمار-۰۰۷ asks for
 * exactly that and forbids a card of a size of its own. Nothing below sets any
 * of those; this only lays out what is inside.
 */
.fi-emp-card-overview {
    /* The state stripe belongs to a state, and this card is not an employee, so
       it takes the same standard colour the section's own heading bar does. */
    border-inline-start-color: var(--std-color-warning-500, #f59e0b);
}

.fi-emp-card-overview .fi-emp-name {
    font-weight: 700;
}

/*
 * The five figures, in the same colours the tallies use, wrapped so that a
 * narrow card stacks them rather than pushing them out of its edge
 * (کارمندان-آمار-۰۲۸).
 */
.fi-emp-overview-tallies {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    line-height: 1.6;
}

.fi-emp-overview-tally {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--emp-color, inherit);
    font-weight: 700;
    min-width: 0;
}

/*
 * The page «آمار کل کارمندان» — the toolbar, the grid and the pager are the
 * monitor's own, so there is nothing here but the space between them.
 */
.fi-emp-overview .fi-emp-grid {
    margin-top: 0.75rem;
}

.fi-emp-overview .fi-emp-pager {
    margin-top: 1rem;
}