/* ─────────────────────────────────────────────────────────────────────
   HOMEi Payroll — «دورة رواتب» (PAY-SHEET-1, design approved by Kamal
   5-10-2026 on the house design system).

   The run page: the numbers strip, the stages + who signs, and the results
   in the columns of HR's monthly sheet with its «الإجمالي» row — all on one
   screen width, no sideways scroll from 1024px up.

   House tokens only (--lm-d-*, resources/css/tokens.css): no colour literal
   here — the ratchet holds this sheet at zero. Text never under 12px.
   RTL-safe: logical properties only. Scoped by `.prx-page` and `.prx`.

   Registered as a Filament asset — run `php artisan filament:assets` and
   commit public/css/app/ in the same change.
   ──────────────────────────────────────────────────────────────────── */

/* ── 1. ground, head, header actions ── */
body:has(.prx-page) { background: var(--lm-d-page); }
body:has(.prx-page) .fi-main-ctn { background: transparent; }
.prx-page .fi-header-heading { font-size: 28px; font-weight: 700; line-height: 1.25; color: var(--lm-d-ink); }
.prx-page .fi-header-subheading { margin-block-start: 4px; font-size: 14px; color: var(--lm-d-muted); }
.prx-page .fi-header-actions-ctn .fi-btn {
    min-block-size: 44px;
    border-radius: 12px;
    padding-inline: 16px;
    background: var(--lm-d-surface);
    color: var(--lm-d-ink);
    box-shadow: inset 0 0 0 1px var(--lm-d-control-edge);
    font-weight: 700;
}
.prx-page .fi-header-actions-ctn .fi-btn .fi-icon { color: currentColor; }
.prx-page .fi-header-actions-ctn .fi-btn:is(.fi-color-primary, .fi-color-success) { background: var(--lm-d-accent); color: var(--lm-d-on-accent); box-shadow: 0 4px 12px var(--lm-d-accent-soft); }
.prx-page .fi-header-actions-ctn .fi-btn.fi-color-danger { color: var(--lm-d-danger); box-shadow: inset 0 0 0 1px var(--lm-d-gap-edge); }
.prx-page .fi-page-content { gap: 16px; }
/* the head is one ViewEntry — no infolist chrome around it */
.prx-page .fi-sc-component:has(> .fi-in-entry .prx),
.prx-page .fi-in-entry:has(.prx) { padding: 0; }

/* ── 2. the head ── */
.prx { display: flex; flex-direction: column; gap: 14px; color: var(--lm-d-ink); }
.prx bdi { unicode-bidi: isolate; }
.prx .is-ok { color: var(--lm-d-ok); }
.prx .is-info { color: var(--lm-d-info); }
.prx .is-danger { color: var(--lm-d-danger); }

.prx-strip {
    display: grid;
    grid-template-columns: repeat(var(--prx-cols, 5), minmax(0, 1fr));
    background: var(--lm-d-surface);
    border: 1px solid var(--lm-d-border);
    border-radius: 16px;
    box-shadow: 0 1px 2px var(--lm-d-shadow);
}
.prx-strip-c { padding: 12px 18px; border-inline-start: 1px solid var(--lm-d-divider); min-inline-size: 0; }
.prx-strip-c:first-child { border-inline-start: 0; }
.prx-k-l { font-size: 13px; color: var(--lm-d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prx-k-v { font-size: 26px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prx-k-s { font-size: 12.5px; color: var(--lm-d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.prx-card { background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 16px; box-shadow: 0 1px 2px var(--lm-d-shadow); }
.prx-flow { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.prx-flow-c { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; min-inline-size: 0; }
.prx-flow-c + .prx-flow-c { border-inline-start: 1px solid var(--lm-d-divider); }
.prx-sec { font-size: 14px; font-weight: 700; }
.prx-sec small { font-size: 12.5px; font-weight: 500; color: var(--lm-d-muted); }

.prx-steps { display: flex; justify-content: space-between; position: relative; margin: 0; padding: 4px 0 0; list-style: none; }
.prx-steps::before { content: ''; position: absolute; inset-block-start: 12px; inset-inline: 14px; border-block-start: 2px solid var(--lm-d-divider); }
.prx-steps li { position: relative; flex: 1; text-align: center; font-size: 12.5px; color: var(--lm-d-muted); }
.prx-steps li i { display: block; inline-size: 16px; block-size: 16px; margin: 0 auto 4px; border-radius: 50%; background: var(--lm-d-surface); border: 2px solid var(--lm-d-control-edge); }
.prx-steps li.is-done i { background: var(--lm-d-ok); border-color: var(--lm-d-ok); }
.prx-steps li.is-current { color: var(--lm-d-ink); font-weight: 700; }
.prx-steps li.is-current i { background: var(--lm-d-accent); border-color: var(--lm-d-accent); box-shadow: 0 0 0 4px var(--lm-d-accent-soft); }
.prx-steps li.is-cancelled { color: var(--lm-d-danger); }

.prx-note { border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.6; border: 1px solid var(--lm-d-divider); }
.prx-note ul { margin: 4px 0 0; padding-inline-start: 18px; }
.prx-note.is-ok { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.prx-note.is-warn { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
.prx-note.is-danger { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }

.prx-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.prx-who > div { border: 1px solid var(--lm-d-border); border-radius: 10px; padding: 7px 10px; min-inline-size: 0; }
.prx-who span { display: block; font-size: 12px; color: var(--lm-d-muted); }
.prx-who b { display: block; font-size: 13px; line-height: 1.35; }
.prx-who .is-next { border-color: var(--lm-d-accent-line); background: var(--lm-d-accent-soft); }
.prx-who .is-next b { color: var(--lm-d-accent-ink); }

/* ── 3. the results: the sheet's columns, the «الإجمالي» row, no sideways scroll ── */
.prx-page .fi-resource-relation-manager .fi-ta-ctn,
.prx-page .fi-ta-ctn { border-radius: 16px; border-block-start: 3px solid var(--lm-d-info); box-shadow: 0 1px 2px var(--lm-d-shadow); }
.prx-page .fi-ta-header-cell { padding-inline: 6px; font-size: 12.5px; font-weight: 700; line-height: 1.35; white-space: normal; color: var(--lm-d-ink); vertical-align: bottom; }
.prx-page .fi-ta-header-cell.prx-th--late,
.prx-page .fi-ta-header-cell.prx-th--other,
.prx-page .fi-ta-header-cell.prx-th--advances,
.prx-page .fi-ta-header-cell.prx-th--deductions { color: var(--lm-d-danger); }
.prx-page .fi-ta-header-cell.prx-th--net { color: var(--lm-d-ok); }
.prx-page .fi-ta-header-cell :is(span, button) { white-space: normal; text-align: center; }
.prx-page .fi-ta-cell { padding-inline: 6px; font-variant-numeric: tabular-nums; }
.prx-page .fi-ta-cell .fi-ta-text { padding-inline: 4px; }
.prx-page .fi-ta-row:hover > td { background: var(--lm-d-hover); }
.prx-page .fi-ta-summary-row > td,
.prx-page .fi-ta-summary-header-row > td { background: var(--lm-d-info-soft); font-weight: 700; color: var(--lm-d-ink); }
.prx-page .fi-ta-summary-row .fi-ta-text-summary,
.prx-page .fi-ta-summary-row .fi-ta-text-summary-label { font-size: 13.5px; font-weight: 700; }
/* the «الكل · عليهم خصم · ليهم إضافي · استثناء» view: chips, applied as they are pressed */
.prx-page .fi-ta-filters-above-content-ctn .fi-ta-filters-header,
.prx-page .fi-ta-filters-above-content-ctn .fi-ta-filters-actions-ctn { display: none; }
.prx-page .fi-ta-filters-above-content-ctn { padding: 10px 14px; border-block-end: 1px solid var(--lm-d-divider); }
.prx-page .fi-ta-filters-above-content-ctn .fi-fo-toggle-buttons .fi-btn { min-block-size: 34px; border-radius: 10px; font-size: 13.5px; }

/* ── 4. under 1180px the stages and the signers stack; under 1024px the page scrolls ── */
@media (max-width: 1180px) {
    .prx-k-v { font-size: 22px; }
    .prx-flow { grid-template-columns: minmax(0, 1fr); }
    .prx-flow-c + .prx-flow-c { border-inline-start: 0; border-block-start: 1px solid var(--lm-d-divider); }
}
@media (max-width: 1023.98px) {
    .prx-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .prx-strip-c:nth-child(3n + 1) { border-inline-start: 0; }
    .prx-strip-c:nth-child(n + 4) { border-block-start: 1px solid var(--lm-d-divider); }
    .prx-page .fi-header-heading { font-size: 22px; }
}
@media (max-width: 640px) {
    .prx-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .prx-strip-c:nth-child(n) { border-inline-start: 0; border-block-start: 1px solid var(--lm-d-divider); }
    .prx-strip-c:nth-child(-n + 2) { border-block-start: 0; }
    .prx-strip-c:nth-child(2n) { border-inline-start: 1px solid var(--lm-d-divider); }
    .prx-k-v { font-size: 22px; }
    .prx-steps li { font-size: 12px; }
}

/* ── 5. the view chips on one line ── */
.prx-page .fi-ta-filters-above-content-ctn .fi-ta-filters { display: block; }
.prx-page .fi-ta-filters-above-content-ctn .fi-fo-toggle-buttons { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── 6. PAY-SHEET-EXPLAIN-1: a figure's tooltip lists its entries, one per line ── */
body:has(.prx-page) .tippy-box .tippy-content { white-space: pre-line; text-align: start; font-size: 13px; line-height: 1.7; }