/*
 * «مانیتور فعالیت کارمندان» — 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.
 *
 * They are written out once, here, and every rule below reads a custom property
 * rather than a code — so the four are identical on the dashboard, in the list
 * and on an employee's own page by construction. Filament v3's own palette is
 * kept out of this deliberately: its variables hold channel triplets rather
 * than colours, so `var(--danger-600)` in a `color:` is silently nothing at all
 * (see `panel-identity.css`).
 *
 * Baligpa's own green is `--panel-accent` and is untouched: it marks the panel,
 * and these four mark a state.
 */
:root {
    --emp-green: #16a34a;
    --emp-yellow: #f59e0b;
    --emp-orange: #ea580c;
    --emp-red: #dc2626;
    --emp-gray: #6b7280;
}

.dark {
    --emp-green: #4ade80;
    --emp-yellow: #fbbf24;
    --emp-orange: #fb923c;
    --emp-red: #f87171;
    --emp-gray: #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(--panel-accent, #1f7957);
    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 size of the panel's own
 * header information, which is what بالیگپا-کارت-۰۰۹ names as the reference.
 *
 * It supersedes بند ۶-۳۲ («نصف اندازه فونت عنوان اصلی هدر»), which put these
 * five counters at `calc(1rem / 2)` — 8px, measured in the browser, against the
 * 16px of the section's own title. The task's screenshot marks them as too
 * small to read, and names the topbar's line — «تعداد ورود شما به پنل», «زمان
 * ورود» and the date — as the size to take instead. Those are Tailwind's
 * `text-xs`, and all three measure **12px** in this panel, so the counters are
 * `0.75rem` rather than a number read off the picture (the خط قرمز of
 * بالیگپا-کارت-۰۰۹).
 *
 * Only the size changed: the colours, the order and the white rules between
 * them are بند ۶-۳۳'s and are untouched (بالیگپا-کارت-۰۱۰).
 */
.fi-emp-tallies {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.75rem;
    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 #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(--panel-accent, #1f7957);
}

/*
 * بند ۶-۵۵: 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 ─────────────────────────────────────────────────────────── */

/*
 * تسک ۱۴۰۵/۰۶/۱۵/۰۸، کارت-کارمند-۰۱۱ و ۰۱۲: an employee's card is one of the
 * dashboard's own components, so it is laid out on the dashboard's own grid
 * rather than on a grid of its own invention.
 *
 * `.fi-dashboard-grid` in `filament.pages.dashboard` gives a management card
 * six tracks and a `0.75rem` gap on a wide desktop. The same gap is written
 * here, and the minimum track is set so that six of them fill the same content
 * width — measured on this panel at 1440, both grids hand their card
 * ۲۱۹٫۳۳px. What is *not* copied is the fixed track count: بند ۱۹ of
 * تسک ۱۴۰۵/۰۶/۰۲/۱۳ already settled that an employee's card, which carries a
 * portrait and four lines of text where a management's carries an icon and a
 * label, wraps by width rather than by a number written down in advance, and
 * کارت-کارمند-۰۲۷ asks for exactly that as well.
 *
 * `min(100%, …)` is for the phone, where the minimum track is wider than the
 * screen: without it the row overflows instead of falling to a single column.
 */
.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;
}

/*
 * تسک ۱۴۰۵/۰۶/۱۵/۰۱، بالیگپا-کارت-۰۰۲ تا ۰۰۴: the track *counts* are the
 * management grid's now, not just the gap.
 *
 * `repeat(auto-fill, minmax(13.5rem, 1fr))` matched `.fi-dashboard-grid` at
 * 1440, 1024 and 768 by coincidence — the arithmetic happens to land on six,
 * four and three tracks there — and stopped matching the moment the window was
 * wider than about 1520, where auto-fill takes a seventh track while the
 * managements below stay at six. That is the screenshot attached to this task:
 * seven employee cards across a row above six management cards, visibly
 * narrower. Copying the breakpoints instead of guessing a width is what
 * بالیگپا-کارت-۰۰۳ asks for, and بالیگپا-کارت-۰۰۷ has already settled that
 * fewer cards a row is the right trade.
 *
 * The one place the two grids are allowed to disagree is the phone. A
 * management's card is an icon and a label and survives half of a 390px screen;
 * an employee's carries a portrait and four lines of figures and does not, and
 * بالیگپا-کارت-۰۱۷ asks for those to stay readable at that width. So the
 * managements' two tracks start at 480px here rather than at 0 — which is also
 * exactly where the old auto-fill rule went from one card a row to two, so no
 * phone loses a layout it already had.
 */
@media (min-width: 480px) {
    .fi-emp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 640px) {
    .fi-emp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .fi-emp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    .fi-emp-grid { grid-template-columns: repeat(6, 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.
 */
.fi-emp-grid-compact {
    max-height: 22rem;
    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;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    min-width: 0;
    text-align: start;
    /* بند ۱۹ of تسک ۱۴۰۵/۰۶/۰۲/۱۳: one size for every card, so a row of them
       lines up rather than stepping up and down with the length of a name. A
       floor rather than a fixed height, because الزام ۶-۲۵ can add a «حساب
       غیرفعال» mark to a card and a fixed height would push it out. */
    min-height: 7rem;
    border: 1px solid var(--panel-surface-border, #e5e7eb);
    background-color: var(--panel-surface, #ffffff);
    /* بند ۶-۰۷: the state is a stripe down the card's own edge — impossible to
       miss and impossible to mistake for the card's content. It used to be the
       panel's green on every card, which said the same thing forty times. */
    border-inline-start: 3px solid var(--emp-color, var(--emp-gray));
}

/*
 * 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(--panel-surface-border, #e5e7eb);
    color: #374151;
}

.dark .fi-emp-initials {
    background-color: #374151;
    color: var(--panel-surface-border, #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 #ffffff;
}

.dark .fi-emp-dot {
    outline-color: #111827;
}

/*
 * Somebody who is working right now, and only them (بند ۹؛ الزام ۶-۰۷).
 *
 * A breath rather than a blink: two seconds, dimming to under half and growing
 * by a quarter, pushing a ring out as it goes. The other three states are
 * perfectly still, so movement on the page means one thing.
 *
 * The ring that lifts the dot off the picture is an `outline` rather than a
 * second `box-shadow`, because the pulse *is* a box-shadow and a ring written
 * there as well would be thrown away for the length of every beat.
 */
.fi-emp-dot.fi-live-dot-beating {
    animation: fi-emp-pulse 2s ease-in-out infinite;
}

@keyframes fi-emp-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);
    }
}

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

/*
 * 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: #6b7280;
}

.dark .fi-emp-meta {
    color: #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(--panel-surface-border, #e5e7eb);
    color: #374151;
}

.dark .fi-emp-flag-off {
    background-color: #374151;
    color: #f3f4f6;
}

.fi-emp-flag-dormant {
    background-color: #fee2e2;
    color: #b91c1c;
}

.dark .fi-emp-flag-dormant {
    background-color: #b91c1c;
    color: #fee2e2;
}

.fi-emp-empty {
    font-size: 0.75rem;
    text-align: center;
    padding: 1rem;
    color: #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 #d1d5db;
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
    background-color: #ffffff;
    color: #111827;
}

.dark .fi-emp-field input,
.dark .fi-emp-field select {
    border-color: #374151;
    background-color: #111827;
    color: #f3f4f6;
}

.fi-emp-count {
    font-size: 0.7rem;
    margin-inline-start: auto;
    color: #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(--panel-surface-border, #e5e7eb);
}

.dark .fi-emp-table th {
    border-bottom-color: #374151;
}

.fi-emp-table td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.dark .fi-emp-table td {
    border-bottom-color: #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: #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(--panel-surface-border, #e5e7eb);
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
        padding: 0.25rem 0.5rem;
    }

    .dark .fi-emp-table tr {
        border-color: #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(--panel-surface-border, #e5e7eb);
    margin-bottom: 0.75rem;
}

.dark .fi-emp-tabs {
    border-bottom-color: #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: #6b7280;
}

.fi-emp-tab-active {
    color: var(--panel-accent, #1f7957);
    border-bottom-color: var(--panel-accent, #1f7957);
}

.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(--panel-surface-border, #e5e7eb);
    color: #374151;
}

.dark .fi-emp-tab-count {
    background-color: #374151;
    color: #f3f4f6;
}

/*
 * «نمای کلی» — eight cards, four to a row on a desktop, two on a tablet, one on
 * a telephone, every card of a row the same width and the same gap both ways
 * (تسک ۰۸، بند ۸ـ۱). Height follows the content, so nothing is cut off; the
 * title, the main value and the note are three clearly different sizes and
 * colours (بند ۸ـ۲).
 */
.fi-emp-stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .fi-emp-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .fi-emp-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.fi-emp-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--panel-surface-border, #e5e7eb);
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    text-align: right;
}

.dark .fi-emp-stat {
    border-color: #374151;
    background-color: rgba(255, 255, 255, 0.03);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.fi-emp-stat-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #4b5563;
}

.dark .fi-emp-stat-label {
    color: #d1d5db;
}

.fi-emp-stat-value {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.5;
    color: #111827;
    overflow-wrap: anywhere;
}

.dark .fi-emp-stat-value {
    color: #f9fafb;
}

/* «۱۱:۴۶» — the hour on a line of its own under the date (بند ۸ـ۳). */
.fi-emp-stat-clock {
    font-size: 0.95rem;
    font-weight: 700;
    color: #374151;
    direction: ltr;
    text-align: right;
}

.dark .fi-emp-stat-clock {
    color: var(--emp-yellow, #fbbf24);
}

.fi-emp-stat-note {
    font-size: 0.72rem;
    line-height: 1.6;
    color: #6b7280;
}

.dark .fi-emp-stat-note {
    color: #9ca3af;
}

.fi-emp-notice {
    font-size: 0.7rem;
    margin-bottom: 0.5rem;
    color: #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: #f3f4f6;
    color: #374151;
}

.dark .fi-emp-type {
    background-color: #1f2937;
    color: #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.
 * ------------------------------------------------------------------ */

/* The chosen window, and the export button, marked without reaching into
   Filament's own palette — its custom properties are oklch in this version and
   an rgb() around one of them silently paints nothing. */
.fi-emp-report .fi-emp-tab-on {
    background-color: #e5e7eb;
    border-color: #9ca3af;
    font-weight: 700;
}

.dark .fi-emp-report .fi-emp-tab-on {
    background-color: #374151;
    border-color: #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 rgb(217 119 6 / 0.45);
    background: rgb(217 119 6 / 0.10);
    color: rgb(146 64 14);
    font-size: 0.8125rem;
    line-height: 1.9;
}

.dark .fi-emp-warning {
    color: rgb(253 230 138);
}

/* بند ۱۱-۶۲: 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: rgb(148 163 184 / 0.12);
    font-size: 0.8125rem;
}

.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: rgb(22 163 74 / 0.14);
    color: rgb(21 128 61);
}

.fi-emp-quality-incomplete {
    background: rgb(217 119 6 / 0.16);
    color: rgb(146 64 14);
}

.fi-emp-quality-no_activity {
    background: rgb(148 163 184 / 0.18);
    color: rgb(71 85 105);
}

.dark .fi-emp-quality-complete { color: rgb(134 239 172); }
.dark .fi-emp-quality-incomplete { color: rgb(253 230 138); }
.dark .fi-emp-quality-no_activity { color: rgb(203 213 225); }

.fi-emp-flag-partial {
    background: rgb(217 119 6 / 0.16);
    color: rgb(146 64 14);
}

.dark .fi-emp-flag-partial { color: rgb(253 230 138); }

/* بند ۱۱-۹۰ … ۱۱-۹۲: 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. */
    border-inline-start-color: var(--panel-accent, #1f7957);
}

.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;
}

/*
 * ── «ورود و خروج» و «فعالیت‌های اخیر» on an employee's page (تسک ۰۷) ────────
 *
 * Both tables are `.fi-emp-striped`. What changes, and only on a screen wide
 * enough to draw a table (below 768px each row is already a card of its own):
 *
 * - every row half as tall again, the text centred top to bottom (بند ۳ـ۱ و
 *   ۴ـ۲). A row was 30.2px — 0.35rem above and below 18px of text and a 1px
 *   rule — so 0.82rem a side makes it 45.3px;
 * - two backgrounds, alternating, on the light theme and on the dark one; by
 *   `nth-child`, so a filter, a page turn or a Livewire refresh can never leave
 *   two of a colour together (بند ۳ـ۶ و ۴ـ۳);
 * - in «ورود و خروج», the moment of entry in the panel's yellow and of exit in
 *   its red, a little heavier so both stay readable on either stripe (بند ۳ـ۲
 *   و ۳ـ۳). A session with no exit keeps «ثبت نشده» in grey: there is no moment
 *   to colour. On the light theme the yellow is one shade deeper than the
 *   status dot's, which is too pale to be read as text on white.
 */
.fi-emp-striped {
    --emp-stripe: #f3f4f6;
    --emp-entry: #b45309;
}

.dark .fi-emp-striped {
    --emp-stripe: rgba(255, 255, 255, 0.06);
    --emp-entry: var(--emp-yellow);
}

@media (min-width: 769px) {
    .fi-emp-striped .fi-emp-table td {
        padding-block: 0.82rem;
        vertical-align: middle;
    }

    .fi-emp-striped .fi-emp-table tbody tr:nth-child(even) td {
        background-color: var(--emp-stripe);
    }
}

@media (max-width: 768px) {
    .fi-emp-striped .fi-emp-table tbody tr:nth-child(even) {
        background-color: var(--emp-stripe);
    }
}

.fi-emp-striped .fi-emp-table td.fi-emp-entry {
    color: var(--emp-entry);
    font-weight: 600;
}

.fi-emp-striped .fi-emp-table td.fi-emp-exit {
    color: var(--emp-red);
    font-weight: 600;
}

.fi-emp-striped .fi-emp-table td.fi-emp-exit .fi-emp-none {
    font-weight: 400;
}

/* بند ۳ـ۵ — «مدت فعالیت واقعی» reads from the right, like the text it is. */
.fi-emp-table td.fi-emp-start {
    text-align: start;
}

/* بند ۴ـ۴ — «نوع فعالیت» beside its select, on the right, rather than over it. */
.fi-emp-field.fi-emp-field-inline {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

/* بند ۴ـ۵ — the filter and its note ۳٫۷ millimetres (14px) nearer the tabs. */
.fi-emp-activities {
    margin-top: -0.875rem;
}

/*
 * ── «دسترسی‌های ویژه این شخص»: one card per permission, none editable ─────
 * (تسک ۰۷، بند ۵ـ۲). Side by side, as many to a row as fit.
 */
.fi-eff-access-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-size: 0.8rem;
    color: #4b5563;
    margin-bottom: 0.75rem;
}

.dark .fi-eff-access-head {
    color: #d1d5db;
}

.fi-eff-access-link {
    color: var(--panel-accent, #1f7957);
    font-weight: 700;
    text-decoration: underline;
}

.fi-eff-access-full,
.fi-eff-access-count {
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.fi-eff-access-empty {
    font-size: 0.8rem;
    color: #6b7280;
    padding: 0.75rem 0;
}

.fi-eff-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.5rem;
}

.fi-eff-access-card {
    border: 1px solid var(--panel-surface-border, #e5e7eb);
    border-inline-start: 3px solid var(--panel-accent, #1f7957);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: #ffffff;
}

.dark .fi-eff-access-card {
    border-color: #374151;
    border-inline-start-color: var(--panel-accent, #1f7957);
    background-color: rgba(255, 255, 255, 0.03);
}

.fi-eff-access-title {
    font-size: 0.85rem;
    font-weight: 700;
}

.fi-eff-access-source,
.fi-eff-access-legacy {
    font-size: 0.7rem;
    color: #6b7280;
    margin-top: 0.2rem;
}

.fi-eff-access-legacy {
    color: #b45309;
}

.dark .fi-eff-access-legacy {
    color: var(--emp-yellow);
}

/*
 * «افزودن دسترسی ویژه فردی» — the panel's yellow as a frame and a faint wash,
 * never as a solid surface (تسک ۰۸، بند ۴ـ۲).
 */
.fi-direct-access-box {
    --tw-ring-color: rgba(217, 119, 6, 0.6) !important;
    background-image: linear-gradient(rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.08));
}

.dark .fi-direct-access-box {
    --tw-ring-color: rgba(251, 191, 36, 0.55) !important;
    background-image: linear-gradient(rgba(251, 191, 36, 0.06), rgba(251, 191, 36, 0.06));
}

.fi-direct-access-box .fi-section-header-heading,
.fi-direct-access-box .fi-section-header-icon {
    color: #b45309;
}

.dark .fi-direct-access-box .fi-section-header-heading,
.dark .fi-direct-access-box .fi-section-header-icon {
    color: var(--emp-yellow, #fbbf24);
}

.fi-direct-access-guide {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.85rem;
    line-height: 1.9;
    color: #374151;
    border-inline-start: 3px solid rgba(251, 191, 36, 0.8);
    padding-inline-start: 0.75rem;
}

.dark .fi-direct-access-guide {
    color: #e5e7eb;
}

.fi-direct-access-guide-title {
    font-weight: 800;
    font-size: 0.9rem;
}

.fi-eff-access-card-direct {
    border-inline-start-color: var(--emp-yellow, #fbbf24);
}

.dark .fi-eff-access-card-direct {
    border-inline-start-color: var(--emp-yellow, #fbbf24);
}