/* ─────────────────────────────────────────────────────────────────────
   HOMEi Requests — «الطلبات» visual layer (CUSTODY-EXP-1)

   The approved reference: a light blue ground, white surfaces with soft
   blue edges, navy headings and body text, HOMEi orange for the primary
   button and the active choice, compact readable tables, line icons and
   quiet status colours. Same temperament as «متابعة الفريق» — dense and
   calm, not big cards in a lot of empty space.

   Presentation only. RTL-safe: logical properties exclusively, so the
   same sheet serves Arabic and English without a mirrored copy.

   Every colour here is a ROLE with a dark-mode counterpart, in the shape
   tokens.css asks for. The blue-ground roles are defined locally
   because the shared layer has no blue-tinted ground yet; the rest read
   from `--ho-*` so one role stays one colour across the product.

   Registered as a Filament asset — a change here ships NOTHING until
   `php artisan filament:assets` is run and public/css/app/ is committed
   in the same change (agent-operating-memory §8.8).
   ──────────────────────────────────────────────────────────────────── */

:root {
    /* Roles only — every value comes from resources/css/tokens.css, which
       is where a colour is decided and where its contrast is measured in
       both themes. This sheet holds no palette of its own, so it gets
       dark mode for free and cannot drift from the product's colours.

       The names below are this screen's vocabulary mapped onto those
       roles, so the rules read as design intent rather than as token
       plumbing. The dark mirror lives in tokens.css, not here. */
    --req-ground: var(--ho-ground-brand);
    --req-surface: var(--ho-surface);
    --req-surface-soft: var(--ho-surface-brand);
    --req-edge: var(--ho-line-brand);
    --req-edge-soft: var(--ho-line-brand-soft);

    --req-ink: var(--ho-ink-brand);
    --req-ink-soft: var(--ho-ink-brand-soft);
    --req-muted: var(--ho-ink-brand-muted);

    /* The accent as INK (a word), and as a FILL (a ground with a word on
       it). They are different requirements and therefore different
       roles — the brighter brand orange carries only 2.87:1 under white
       and cannot be a button label's ground at any size. */
    --req-accent: var(--ho-accent-ink);
    --req-accent-fill: var(--ho-accent-fill);
    --req-accent-on-fill: var(--ho-accent-on-fill);
    --req-accent-soft: var(--ho-accent-soft);
    --req-accent-edge: var(--ho-accent-edge);

    --req-ok: var(--ho-success-ink);
    --req-ok-soft: var(--ho-success-soft);
    --req-warn: var(--ho-warning-ink);
    --req-warn-soft: var(--ho-warning-soft);
    --req-info: var(--ho-info-ink);
    --req-info-soft: var(--ho-info-soft);
    --req-danger: var(--ho-danger-ink);
    --req-danger-soft: var(--ho-danger-soft);

    --req-radius: 8px;
    --req-radius-sm: 6px;
}

/* ── shell ────────────────────────────────────────────────────────── */

.req-page { color: var(--req-ink); }

.req-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 18px;
    margin-block-end: 16px;
}

.req-title { font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: var(--req-ink); }
.req-subtitle { font-size: 13px; color: var(--req-muted); margin: 2px 0 0; }

/* Segmented scope switch — «أنا · بانتظار إجرائي · طلبات الفريق». */
.req-scopes {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--req-edge);
    border-radius: var(--req-radius);
    background: var(--req-surface-soft);
    overflow: hidden;
}

.req-scope {
    appearance: none;
    background: none;
    border: 0;
    border-inline-start: 1px solid var(--req-edge);
    padding: 9px 18px;
    font: inherit;
    font-size: 13px;
    color: var(--req-ink);
    cursor: pointer;
    white-space: nowrap;
}

.req-scope:first-child { border-inline-start: 0; }

.req-scope:hover { background: var(--req-edge-soft); }

.req-scope.is-on {
    color: var(--req-accent);
    background: var(--req-accent-soft);
    box-shadow: inset 0 0 0 1px var(--req-accent-fill);
    border-radius: var(--req-radius-sm);
    font-weight: 600;
}

.req-scope:focus-visible { outline: 3px solid var(--ho-focus); outline-offset: -3px; }

.req-scope-count {
    margin-inline-start: 6px;
    /* The floor is 12px — a count that needs to be smaller needs to be
       lighter, not tinier (TypeFloorTest). */
    font-size: var(--ho-text-xs);
    color: var(--req-muted);
}

.req-scope.is-on .req-scope-count { color: inherit; }

/* ── counters ─────────────────────────────────────────────────────── */

.req-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-block-end: 12px;
}

.req-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--req-surface);
    border: 1px solid var(--req-edge);
    border-radius: var(--req-radius);
    min-width: 0;
}

.req-stat-ic {
    display: flex;
    padding: 9px;
    border-radius: 10px;
    background: var(--req-accent-soft);
    color: var(--req-accent);
    flex: none;
}

.req-stat-ic.is-blue { background: var(--req-info-soft); color: var(--req-info); }
.req-stat-ic svg { width: 18px; height: 18px; }

.req-stat-body { min-width: 0; }
.req-stat-label { font-size: 12px; color: var(--req-muted); }
.req-stat-value { font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--req-ink); }

/* The employee's own money line — two figures that are never added up. */
.req-money-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    justify-content: space-between;
    padding: 10px 15px;
    margin-block-end: 12px;
    background: var(--req-surface);
    border: 1px solid var(--req-edge);
    border-radius: var(--req-radius);
    font-size: 13px;
    color: var(--req-muted);
}

.req-money-line strong { color: var(--req-ink); font-weight: 700; }

.req-money-note { flex-basis: 100%; font-size: 12px; color: var(--req-muted); }

/* ── list + side panel ────────────────────────────────────────────── */

.req-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 12px;
    align-items: start;
}

.req-panel {
    background: var(--req-surface);
    border: 1px solid var(--req-edge);
    border-radius: var(--req-radius);
    overflow: hidden;
}

.req-panel-head {
    padding: 12px 14px;
    border-block-end: 1px solid var(--req-edge);
}

.req-panel-title { font-weight: 700; font-size: 15px; color: var(--req-ink); }
.req-note { font-size: 12px; color: var(--req-muted); margin: 2px 0 0; }

.req-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border-block-end: 1px solid var(--req-edge-soft);
}

.req-filters input,
.req-filters select {
    min-width: 0;
    border: 1px solid var(--req-edge);
    border-radius: var(--req-radius-sm);
    padding: 7px 10px;
    font: inherit;
    font-size: 13px;
    color: var(--req-ink);
    background: var(--req-surface);
}

.req-filters input { flex: 1 1 180px; }
.req-filters select { flex: 0 1 160px; }

.req-filters input:focus-visible,
.req-filters select:focus-visible { outline: 2px solid var(--ho-focus); outline-offset: 1px; }

.req-tablewrap { overflow-x: auto; }

.req-table { width: 100%; border-collapse: collapse; text-align: start; font-size: 13px; }

.req-table th {
    background: var(--req-ground);
    color: var(--req-ink);
    font-weight: 700;
    padding: 10px;
    text-align: start;
    white-space: nowrap;
}

.req-table td { padding: 11px 10px; border-block-start: 1px solid var(--req-edge-soft); vertical-align: top; }
.req-table td small { display: block; color: var(--req-muted); font-size: 12px; margin-block-start: 2px; }
.req-table tbody tr:hover { background: var(--req-edge-soft); }
.req-table tbody tr.is-selected { background: var(--req-info-soft); }
.req-table .req-cell-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }

.req-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-block-start: 1px solid var(--req-edge);
    color: var(--req-muted);
    font-size: 12px;
}

/* ── badges ───────────────────────────────────────────────────────── */

.req-badge {
    display: inline-block;
    border-radius: var(--req-radius-sm);
    padding: 3px 9px;
    font-size: 12px;
    white-space: nowrap;
    color: var(--req-accent);
    background: var(--req-accent-soft);
}

.req-badge.is-blue { color: var(--req-info); background: var(--req-info-soft); }
.req-badge.is-green { color: var(--req-ok); background: var(--req-ok-soft); }
.req-badge.is-gray { color: var(--req-muted); background: var(--req-surface-soft); }
.req-badge.is-red { color: var(--req-danger); background: var(--req-danger-soft); }
.req-badge.is-amber { color: var(--req-warn); background: var(--req-warn-soft); }

/* ── buttons ──────────────────────────────────────────────────────── */

.req-btn {
    appearance: none;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    border-radius: var(--req-radius-sm);
    padding: 8px 18px;
    border: 1px solid var(--req-edge);
    background: var(--req-surface);
    color: var(--req-ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.req-btn:hover { border-color: var(--req-accent-edge); }
.req-btn:focus-visible { outline: 3px solid var(--ho-focus); outline-offset: 2px; }

.req-btn-primary {
    background: var(--req-accent-fill);
    border-color: var(--req-accent-fill);
    color: var(--req-accent-on-fill);
    font-weight: 700;
    padding: 9px 21px;
}

.req-btn-primary:hover { filter: brightness(0.95); border-color: var(--req-accent-fill); }

.req-btn-outline { border-color: var(--req-accent-fill); color: var(--req-accent); background: var(--req-surface); }

.req-btn[disabled] { opacity: 0.45; cursor: default; }

/* ── the side detail panel ────────────────────────────────────────── */

.req-side { padding: 16px; }

.req-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-block-end: 12px;
    border-block-end: 1px solid var(--req-edge);
    margin-block-end: 12px;
}

.req-side-title { font-size: 16px; font-weight: 700; margin: 0; color: var(--req-ink); }

.req-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 13px; }
.req-row + .req-row { border-block-start: 1px solid var(--req-edge-soft); }
.req-row-label { color: var(--req-muted); }
.req-row-value { color: var(--req-ink); font-weight: 600; text-align: end; }

.req-total {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    background: var(--req-ground);
    border: 1px solid var(--req-edge);
    border-radius: var(--req-radius-sm);
    padding: 11px 12px;
    margin-block: 12px;
    font-size: 13px;
}

.req-total strong { font-size: 15px; font-variant-numeric: tabular-nums; }

.req-route { border-inline-start: 2px solid var(--req-edge); padding-inline-start: 13px; margin: 12px 4px; color: var(--req-ink-soft); font-size: 13px; }
.req-route div { margin: 10px 0; }
.req-route .req-route-num { color: var(--req-muted); margin-inline-end: 8px; }

.req-empty { padding: 26px 16px; text-align: center; color: var(--req-muted); font-size: 13px; }
.req-empty-title { color: var(--req-ink); font-weight: 700; font-size: 14px; margin-block-end: 4px; }

/* ── create wizard ────────────────────────────────────────────────── */

.req-steps {
    display: flex;
    background: var(--req-surface);
    border: 1px solid var(--req-edge);
    border-radius: var(--req-radius);
    margin-block-end: 16px;
    overflow: hidden;
}

.req-step {
    flex: 1;
    padding: 13px 18px;
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--req-muted);
    border-inline-start: 1px solid var(--req-edge);
    font-size: 13px;
    min-width: 0;
}

.req-step:first-child { border-inline-start: 0; }

.req-step.is-on {
    color: var(--req-accent);
    background: var(--req-accent-soft);
    box-shadow: inset 0 -2px 0 0 var(--req-accent-fill);
    font-weight: 600;
}

.req-step.is-done { color: var(--req-ok); }

.req-step-num {
    border-radius: 50%;
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border: 1px solid currentColor;
    font-size: 12px;
    flex: none;
}

.req-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 8px;
    font-weight: 700;
    font-size: 14px;
    color: var(--req-ink);
}

.req-group:first-child { margin-block-start: 0; }
.req-group svg { width: 17px; height: 17px; color: var(--req-accent); }

/* The type tiles. Two across for the money pair so they read as the
   headline choice; three across for the rest. */
.req-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.req-tiles.is-money { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.req-tile {
    appearance: none;
    font: inherit;
    cursor: pointer;
    border: 1px solid var(--req-edge);
    border-radius: 7px;
    background: var(--req-surface);
    color: var(--req-ink);
    text-align: start;
    padding: 12px;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

.req-tile:hover { border-color: var(--req-accent-fill); }
.req-tile:focus-visible { outline: 3px solid var(--ho-focus); outline-offset: 2px; }

.req-tile.is-selected {
    background: var(--req-accent-soft);
    border-color: var(--req-accent-fill);
    color: var(--req-accent);
    box-shadow: inset 0 0 0 1px var(--req-accent-fill);
}

.req-tile-name { font-weight: 700; font-size: 13.5px; }
.req-tile-hint { font-size: 12px; color: var(--req-muted); }
.req-tile.is-selected .req-tile-hint { color: inherit; opacity: 0.85; }

.req-context {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    justify-content: space-between;
    padding-block-end: 13px;
    border-block-end: 1px solid var(--req-edge-soft);
    margin-block-end: 14px;
    font-size: 13px;
}

.req-tag {
    background: var(--req-info-soft);
    color: var(--req-info);
    border-radius: var(--req-radius-sm);
    padding: 4px 10px;
    font-size: 12px;
}

.req-advanced { margin-block-start: 18px; }
.req-advanced > summary { cursor: pointer; color: var(--req-muted); font-size: 12.5px; }
.req-advanced > summary:focus-visible { outline: 2px solid var(--ho-focus); outline-offset: 2px; }

.req-notice {
    background: var(--req-accent-soft);
    border: 1px solid var(--req-accent-edge);
    color: var(--req-accent);
    padding: 10px 12px;
    border-radius: var(--req-radius-sm);
    margin-block-start: 14px;
    font-size: 12.5px;
}

/* ── expense lines, on the review screen ──────────────────────────── */

.req-lines { width: 100%; border-collapse: collapse; font-size: 13px; }
.req-lines th {
    text-align: start;
    font-weight: 700;
    color: var(--req-ink);
    background: var(--req-ground);
    padding: 9px 10px;
    white-space: nowrap;
}
.req-lines td { padding: 10px; border-block-start: 1px solid var(--req-edge-soft); vertical-align: top; }
.req-lines .req-cell-amount { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.req-lines tr.is-rejected td { background: var(--req-danger-soft); }
.req-lines tr.is-needs-info td { background: var(--req-warn-soft); }
.req-line-reason { display: block; color: var(--req-muted); font-size: 12px; margin-block-start: 3px; }

.req-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block-start: 12px;
}

.req-total-chip {
    flex: 1 1 130px;
    border: 1px solid var(--req-edge);
    border-radius: var(--req-radius-sm);
    background: var(--req-surface-soft);
    padding: 10px 12px;
}

.req-total-chip .req-row-label { display: block; font-size: 12px; }
.req-total-chip strong { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--req-ink); }

/* ── responsive ───────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .req-layout { grid-template-columns: 1fr; }
    .req-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .req-tiles, .req-tiles.is-money { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .req-step { padding: 10px 9px; font-size: 12px; }
    .req-head { align-items: flex-start; }
    .req-title { font-size: 20px; }
}

/* Phones: a lines table becomes one small card per line — each value
   beside its own column label — so the amount and the decision are never
   scrolled out of sight behind the description. Every <td> carries its
   heading in data-label. */
@media (max-width: 640px) {
    .req-lines thead { display: none; }
    .req-lines, .req-lines tbody, .req-lines tr { display: block; width: 100%; }
    .req-lines tr { border-block-start: 1px solid var(--req-edge); padding-block: 6px; }
    .req-lines td {
        display: block;
        position: relative;
        border: 0;
        padding-block: 4px;
        padding-inline: 38% 10px;
        min-height: 26px;
    }
    .req-lines td::before {
        content: attr(data-label);
        position: absolute;
        inset-inline-start: 10px;
        width: calc(38% - 18px);
        color: var(--req-muted);
        font-size: var(--ho-text-xs);
        font-weight: 600;
    }
    .req-lines .req-cell-amount { text-align: start; font-weight: 700; }
}

@media (max-width: 430px) {
    .req-tiles, .req-tiles.is-money { grid-template-columns: 1fr; }
    /* Two across, tighter — a phone should still read as a dense
       summary, not as four full-width banners to scroll past. */
    .req-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .req-stat { padding: 9px; gap: 8px; }
    .req-stat-ic { padding: 6px; }
    .req-stat-value { font-size: 18px; }
    .req-step-num { display: none; }
    .req-filters select, .req-filters input { flex-basis: 100%; }
}

/* Printed expense statement — a sheet someone signs, not a screenshot
   of an application. Chrome and controls go; dates, categories, lines,
   totals and the approvals stay. */
@media print {
    /* Paper has one theme. These three literals are ink on paper, not
       colours a token could flip — a themed value here would print a
       dark page or an invisible rule. */
    .req-print-hide, .req-scopes, .req-filters, .req-side { display: none !important; }
    .req-panel, .req-lines th { border-color: #999999; background: #ffffff; }
    .req-page { color: #000000; }
    .req-lines tr { break-inside: avoid; }
}

/* ── the scope switcher ───────────────────────────────────────────────
   Filament's own tabs carry the scopes («بانتظار إجرائي · أنا · طلبات
   الفريق»), with the `?tab=` deep links the sidebar items point at. They
   are restyled here into the reference's segmented control rather than
   replaced, so the deep links, the counts and the permission rules that
   build them stay exactly as they are. Scoped to `.req-scopebar`, so no
   other screen's tabs move. */

.req-scopebar .fi-tabs {
    border: 1px solid var(--req-edge);
    border-radius: var(--req-radius);
    background: var(--req-surface-soft);
    padding: 3px;
    gap: 2px;
    box-shadow: none;
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
}

.req-scopebar .fi-tabs-item {
    border-radius: var(--req-radius-sm);
    color: var(--req-ink);
    font-size: 13px;
    padding-inline: 16px;
    background: transparent;
    box-shadow: none;
}

.req-scopebar .fi-tabs-item:hover { background: var(--req-edge-soft); }

.req-scopebar .fi-tabs-item.fi-active,
.req-scopebar .fi-tabs-item[aria-selected="true"] {
    color: var(--req-accent);
    background: var(--req-accent-soft);
    box-shadow: inset 0 0 0 1px var(--req-accent-fill);
    font-weight: 600;
}

.req-scopebar .fi-tabs-item.fi-active .fi-tabs-item-label,
.req-scopebar .fi-tabs-item[aria-selected="true"] .fi-tabs-item-label { color: inherit; }

/* ── the create wizard, inside Filament's own shell ───────────────────
   Same approach: the step header IS Filament's wizard header, restyled
   to the reference (orange active step) rather than rebuilt, so the
   wizard's validation and step guarding are untouched. */

.req-page .fi-sc-wizard-header {
    background: var(--req-surface);
    border: 1px solid var(--req-edge);
    border-radius: var(--req-radius);
}

.req-page .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-label,
.req-page .fi-sc-wizard-header-step[aria-current="step"] .fi-sc-wizard-header-step-label {
    color: var(--req-accent);
}

.req-page .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-icon-ctn,
.req-page .fi-sc-wizard-header-step[aria-current="step"] .fi-sc-wizard-header-step-icon-ctn {
    background: var(--req-accent-fill);
    color: var(--req-accent-on-fill);
}

/* The submit row: primary action first, then the draft controls. */
.req-submit-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* «خيارات إضافية للمخوّلين» — present for the few who hold the grants,
   quiet for everyone else. */
.req-advanced-group {
    border: 1px dashed var(--req-edge);
    border-radius: var(--req-radius);
    padding: 12px;
    margin-block-start: 18px;
    background: var(--req-surface-soft);
}

.req-side-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 12px; }

/* The one primary action on the screen, in HOMEi orange. The panel's
   own `primary` is blue; this class is the exception the reference asks
   for, and it is deliberately narrow — one button, not a theme change. */
.req-cta,
.req-cta.fi-btn {
    background: var(--req-accent-fill);
    border-color: var(--req-accent-fill);
    color: var(--req-accent-on-fill);
    --tw-ring-color: transparent;
}

.req-cta:hover, .req-cta.fi-btn:hover { background: var(--req-accent); border-color: var(--req-accent); }
.req-cta .fi-btn-label, .req-cta svg { color: var(--req-accent-on-fill); }

/* ── the create page's two columns ────────────────────────────────────
   Our own grid, not Filament's column system: the wizard is a
   full-width component and a fractional column leaves both halves too
   narrow. Below 1100px it collapses and the summary follows the form,
   so a phone reads the question before the answer. */
/* The class lands on Filament's outer component wrapper; the element
   that actually holds the two halves is the schema container inside it,
   so that is the one that becomes the grid. */
.req-create-layout > .fi-sc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 16px;
    align-items: start;
}

@media (max-width: 1100px) {
    .req-create-layout > .fi-sc { grid-template-columns: 1fr; }
}

/* The wizard's own next/submit buttons take the primary orange too, so
   the one obvious action on the screen is always the same colour. */
.req-page .fi-sc-wizard-footer .fi-btn.fi-color-primary,
.req-page .req-submit-row .fi-btn.fi-color-primary {
    background: var(--req-accent-fill);
    border-color: var(--req-accent-fill);
    color: var(--req-accent-on-fill);
}

.req-page .fi-sc-wizard-footer .fi-btn.fi-color-primary:hover,
.req-page .req-submit-row .fi-btn.fi-color-primary:hover {
    background: var(--req-accent);
    border-color: var(--req-accent);
}

/* Filament's own table header resolves to ~2.9:1 on this screen, which
   is under the 4.5:1 a word needs. Scoped to the requests page so the
   fix is this screen's, not a product-wide restyle nobody asked for. */
.req-page .fi-ta-header-cell,
.req-page thead th {
    color: var(--req-ink);
    background: var(--req-ground);
}

.dark .req-page .fi-ta-header-cell,
.dark .req-page thead th { background: var(--req-surface-soft); }

/* ═════════════════════════════════════════════════════════════════════
   REQ-UI-2 — «الطلبات» to the approved desktop (1586×992) and phone
   references. Tokens only (dark mode follows tokens.css). Logical
   properties only, so Arabic and English share every rule.
   ═════════════════════════════════════════════════════════════════════ */

.req-v2 { --req-v2-radius: 12px; --req-v2-ctl: 44px; }

/* ── head ─────────────────────────────────────────────────────────── */
.req-v2-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 16px;
    margin-block-end: 8px;
}

.req-v2-head-text { min-width: 0; }
.req-v2-title { margin: 0; font-size: 32px; line-height: 1.25; font-weight: 700; color: var(--req-ink); }
.req-v2-subtitle { margin: 2px 0 0; font-size: 16px; line-height: 1.5; color: var(--req-muted); }

.req-v2-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 8px;
    background: var(--req-accent-fill);
    color: var(--req-accent-on-fill);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

.req-v2-cta:hover { filter: brightness(0.94); }
.req-v2-cta:focus-visible { outline: 3px solid var(--ho-focus); outline-offset: 2px; }
.req-v2-cta-ic { width: 20px; height: 20px; }

.req-v2-crumbs { display: none; }

/* ── counters ─────────────────────────────────────────────────────── */
.req-v2-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.req-v2-stat {
    --tone-ink: var(--req-accent);
    --tone-soft: var(--req-accent-soft);
    --tone-line: var(--ho-accent-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 86px;
    padding: 14px 24px;
    border-radius: var(--req-v2-radius);
    background: var(--tone-soft);
    min-width: 0;
}

.req-v2-stat.is-info { --tone-ink: var(--req-info); --tone-soft: var(--req-info-soft); --tone-line: var(--ho-info-line); }
.req-v2-stat.is-draft { --tone-ink: var(--ho-draft-ink); --tone-soft: var(--ho-draft-soft); --tone-line: var(--ho-draft-ink); }
.req-v2-stat.is-ok { --tone-ink: var(--req-ok); --tone-soft: var(--req-ok-soft); --tone-line: var(--ho-success-line); }

.req-v2-stat-body { min-width: 0; }
.req-v2-stat-label { font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--req-ink); }
.req-v2-stat.is-accent .req-v2-stat-label { color: var(--req-accent); }
.req-v2-stat-value { margin-block-start: 2px; font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--req-ink); font-variant-numeric: tabular-nums; }
.req-v2-stat.is-accent .req-v2-stat-value { color: var(--req-accent); }

.req-v2-stat-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    color: var(--tone-ink);
    background: color-mix(in srgb, var(--tone-line) 13%, transparent);
}

.req-v2-stat-ic svg { width: 30px; height: 30px; }

/* ── the list card: Filament's table, dressed as the reference ───── */
.req-list .fi-ta-ctn {
    position: relative;
    border-radius: var(--req-v2-radius, 12px);
    background: transparent;
    box-shadow: none;
    border: 0;
    overflow: visible;
}

.req-list .fi-ta-ctn > .fi-ta-main,
.req-list .fi-ta-main { gap: 12px; }

.req-list .fi-ta-header-ctn,
.req-list .fi-ta-header { border: 0; background: transparent; padding: 0; }

.req-list .fi-ta-header-toolbar {
    display: block;
    padding: 12px 16px;
    margin-block-end: 12px;
    background: var(--req-surface);
    border: 1px solid var(--req-edge);
    border-radius: 12px;
}

.req-list .fi-ta-header-toolbar > .fi-ta-actions { display: none; }

.req-list .fi-ta-header-toolbar > div:last-of-type {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.req-list .fi-ta-search-field { flex: 0 1 375px; min-width: 0; }

.req-list .fi-ta-search-field .fi-input-wrp {
    min-height: var(--req-v2-ctl, 44px);
    border-radius: 8px;
    box-shadow: none;
    border: 1px solid var(--req-edge);
    background: var(--req-surface);
}

.req-list .fi-ta-search-field .fi-input { font-size: 16px; color: var(--req-ink); }
.req-list .fi-ta-search-field .fi-input::placeholder { color: var(--req-muted); }
.req-list .fi-ta-search-field .fi-input-wrp-prefix { padding-inline-start: 14px; }
.req-list .fi-ta-search-field .fi-input-wrp-prefix .fi-icon { width: 22px; height: 22px; color: var(--req-muted); }

.req-list .fi-ta-filters-dropdown { margin-inline-start: auto; }

.req-list .req-tool-btn,
.req-list .fi-ta-filters-dropdown .fi-btn {
    min-height: var(--req-v2-ctl, 44px);
    padding: 0 22px;
    gap: 12px;
    border-radius: 8px;
    border: 1px solid var(--req-edge);
    background: var(--req-surface);
    color: var(--req-ink);
    font-size: 16px;
    font-weight: 500;
    box-shadow: none;
}

.req-list .req-tool-btn .fi-icon,
.req-list .fi-ta-filters-dropdown .fi-btn .fi-icon { width: 22px; height: 22px; color: var(--req-ink); }
.req-list .req-tool-btn:hover,
.req-list .fi-ta-filters-dropdown .fi-btn:hover { background: var(--req-surface-soft); }
.req-list .fi-ta-filters-dropdown .fi-btn .fi-badge { font-size: 12px; }

.req-list .req-v2-sort { display: inline-flex; align-items: center; min-width: 160px; justify-content: space-between; }
.req-list .req-v2-sort:focus-visible,
.req-list .req-v2-scope:focus-visible { outline: 3px solid var(--ho-focus); outline-offset: -3px; }

/* the scopes: one segmented control, the open one underlined in orange */
.req-v2-scopes {
    display: flex;
    align-items: stretch;
    min-height: var(--req-v2-ctl, 44px);
    border: 1px solid var(--req-edge);
    border-radius: 8px;
    overflow: hidden;
    background: var(--req-surface);
    flex: none;
}

.req-v2-scope {
    appearance: none;
    position: relative;
    padding: 0 24px;
    border: 0;
    border-inline-start: 1px solid var(--req-edge);
    background: transparent;
    font: inherit;
    font-size: 16px;
    line-height: 1.3;
    color: var(--req-ink-soft);
    white-space: nowrap;
    cursor: pointer;
}

.req-v2-scope:first-child { border-inline-start: 0; }
.req-v2-scope:hover { background: var(--req-surface-soft); }
.req-v2-scope.is-on { color: var(--req-accent); font-weight: 600; background: var(--req-surface); }
.req-v2-scope.is-on::after {
    content: '';
    position: absolute;
    inset-inline: 6px;
    inset-block-end: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--ho-accent-line);
}

.req-v2-scope-short { display: none; }
.req-v2-count { display: none; }

/* active-filter chips keep Filament's behaviour, in the card's tone */
.req-list .fi-ta-filter-indicators { padding: 0 4px 10px; border: 0; background: transparent; }

/* the table itself */
.req-list .fi-ta-content-ctn,
.req-list .fi-ta-content {
    background: var(--req-surface);
    border: 1px solid var(--req-edge);
    border-radius: 12px 12px 0 0;
    border-block-end: 0;
    overflow: hidden;
}

.req-list .fi-ta-table { font-size: 16px; }

.req-list .fi-ta-table thead tr { background: var(--req-surface-soft); }

.req-list .fi-ta-table thead th {
    height: 50px;
    padding-block: 0;
    padding-inline: 24px;
    background: var(--req-surface-soft);
    border-block-end: 1px solid var(--req-edge);
}

.req-list .fi-ta-header-cell-label,
.req-list .fi-ta-table thead th { font-size: 16px; font-weight: 600; color: var(--req-ink); text-align: start; }
.req-list .fi-ta-actions-header-cell { text-align: start; }

.req-list .fi-ta-row { border-block-end: 1px solid var(--req-edge-soft); }
.req-list .fi-ta-row:hover { background: var(--req-surface-soft); }
.req-list .fi-ta-row > .fi-ta-cell { padding: 0; vertical-align: middle; }
.req-list .fi-ta-row .fi-ta-col { display: block; padding: 10px 24px; }
.req-list .fi-ta-row .fi-ta-actions { padding: 10px 24px; gap: 16px; justify-content: flex-start; flex-wrap: nowrap; }

.req-v2-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.req-v2-who .wf-avatar { width: 48px; height: 48px; font-size: 16px; flex: none; }
.req-v2-who-text { min-width: 0; line-height: 1.35; }
.req-v2-type { font-size: 18px; font-weight: 700; color: var(--req-ink); }
.req-v2-name { font-size: 15px; color: var(--req-muted); }
.req-v2-code { font-size: 14px; color: var(--req-muted); font-variant-numeric: tabular-nums; }

.req-v2-date { line-height: 1.4; }
.req-v2-date-day { font-size: 16px; font-weight: 500; color: var(--req-ink); white-space: nowrap; }
.req-v2-date-ago { font-size: 14px; color: var(--req-muted); }
.req-v2-late.is-phone { display: none; }

.req-v2-details { font-size: 16px; font-weight: 500; color: var(--req-ink); white-space: nowrap; }

.req-v2-status { display: grid; gap: 6px; justify-items: start; }
.req-v2-status-pills,
.req-v2-stage-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.req-v2-stage-row { flex-wrap: nowrap; }
.req-v2-stage { font-size: 14px; color: var(--req-muted); white-space: nowrap; }

.req-v2-pill,
.req-v2-late {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.req-v2-pill.is-warn { color: var(--req-accent); background: var(--req-accent-soft); }
.req-v2-pill.is-info { color: var(--req-info); background: var(--req-info-soft); }
.req-v2-pill.is-ok { color: var(--req-ok); background: var(--req-ok-soft); }
.req-v2-pill.is-danger { color: var(--req-danger); background: var(--req-danger-soft); }
.req-v2-pill.is-quiet { color: var(--req-muted); background: var(--req-surface-soft); }
.req-v2-late { color: var(--req-danger); background: var(--req-danger-soft); }

/* the row's three buttons: view · reject · approve */
.req-list .fi-ta-actions .fi-btn {
    min-height: var(--req-v2-ctl, 44px);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    gap: 10px;
    padding: 0 20px;
    box-shadow: none;
}

.req-list .fi-ta-actions .fi-btn .fi-icon { width: 24px; height: 24px; }

.req-list .fi-ta-actions .req-row-view {
    width: 52px;
    padding: 0;
    justify-content: center;
    border: 1px solid var(--req-edge);
    background: var(--req-surface);
    color: var(--req-ink);
}

.req-list .fi-ta-actions .req-row-reject {
    min-width: 112px;
    border: 1px solid color-mix(in srgb, var(--ho-danger-line) 45%, transparent);
    background: var(--req-danger-soft);
    color: var(--req-danger);
}

.req-list .fi-ta-actions .req-row-approve {
    min-width: 116px;
    border: 1px solid color-mix(in srgb, var(--ho-success-line) 45%, transparent);
    background: var(--req-ok-soft);
    color: var(--req-ok);
}

.req-list .fi-ta-actions .req-row-view:hover { background: var(--req-surface-soft); }
.req-list .fi-ta-actions .req-row-reject:hover { border-color: var(--ho-danger-line); }
.req-list .fi-ta-actions .req-row-approve:hover { border-color: var(--ho-success-line); }
.req-list .fi-ta-actions .fi-btn:focus-visible { outline: 3px solid var(--ho-focus); outline-offset: 2px; }
.req-list .fi-ta-actions .fi-btn[disabled] { opacity: 0.55; cursor: progress; }

/* footer: «عرض 6 من 10 طلبات» at the start, the pager centred */
.req-list .fi-ta-footer,
.req-list .fi-ta-ctn > .fi-pagination,
.req-list .fi-ta-pagination {
    min-height: 58px;
    background: var(--req-surface);
    border: 1px solid var(--req-edge);
    border-block-start: 1px solid var(--req-edge-soft);
    border-radius: 0 0 12px 12px;
}

.req-list .fi-pagination {
    background: var(--req-surface);
    border: 1px solid var(--req-edge);
    border-block-start-color: var(--req-edge-soft);
    border-radius: 0 0 12px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 10px 24px;
}

.req-list .fi-pagination-overview,
.req-list .fi-pagination-records-per-page-select-ctn { display: none; }

.req-list .fi-pagination-items { border-radius: 8px; box-shadow: none; gap: 8px; display: flex; border: 0; }
.req-list .fi-pagination-item { border: 0; }
.req-list .fi-pagination-item-btn,
.req-list .fi-pagination-previous-btn,
.req-list .fi-pagination-next-btn {
    min-width: 36px;
    min-height: 36px;
    border-radius: 8px;
    border: 1px solid var(--req-edge);
    background: var(--req-surface);
    color: var(--req-ink);
    font-size: 16px;
}

.req-list .fi-pagination-item.fi-active .fi-pagination-item-btn {
    border-color: var(--ho-accent-line);
    color: var(--req-accent);
    background: var(--req-accent-soft);
    font-weight: 700;
}

.req-list .fi-pagination > * { visibility: hidden; }

.req-v2-footer {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding-inline: 24px;
    z-index: 1;
}

.req-v2-overview {
    position: absolute;
    inset-inline-start: 24px;
    font-size: 16px;
    color: var(--req-muted);
}

.req-v2-pager { display: flex; align-items: center; gap: 12px; }

.req-v2-page {
    appearance: none;
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 6px;
    border-radius: 8px;
    border: 1px solid var(--req-edge);
    background: var(--req-surface);
    color: var(--req-ink);
    font: inherit;
    font-size: 16px;
    cursor: pointer;
}

.req-v2-page.is-on { border-color: var(--ho-accent-line); color: var(--req-accent); background: var(--req-accent-soft); font-weight: 700; }
.req-v2-page[disabled] { color: var(--req-muted); cursor: default; }
.req-v2-page:not([disabled]):not(.is-on):hover { background: var(--req-surface-soft); }
.req-v2-page:focus-visible { outline: 3px solid var(--ho-focus); outline-offset: 2px; }
.req-v2-page-ic { width: 18px; height: 18px; }
[dir="ltr"] .req-v2-flip { transform: scaleX(-1); }

/* the filter count is carried by Filament's active-filter chips below the
   toolbar; the reference's button has no badge */
.req-list .fi-ta-filters-dropdown .fi-btn-badge-ctn,
.req-list .fi-ta-filters-dropdown .fi-icon-btn-badge-ctn { display: none; }

/* the date header still sorts on click; the reference draws no arrow */
.req-list .fi-ta-header-cell-sort-icon { display: none; }

.req-list .fi-ta-empty-state { background: var(--req-surface); }

/* ── phone: the same rows, read as cards ──────────────────────────── */
@media (max-width: 767px) {
    .req-v2-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "crumbs cta" "text text";
        align-items: center;
        gap: 4px 12px;
        margin-block-end: 14px;
    }
    .req-v2-crumbs { grid-area: crumbs; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; color: var(--req-muted); }
    .req-v2-crumb { color: var(--req-muted); text-decoration: none; white-space: nowrap; }
    .req-v2-crumb.is-current { color: var(--req-ink); font-weight: 600; }
    .req-v2-crumb-sep { width: 14px; height: 14px; flex: none; }
    .req-v2-head-text { grid-area: text; }
    .req-v2-cta { grid-area: cta; }
    .req-v2-title { font-size: 26px; }
    .req-v2-subtitle { font-size: 14px; margin-block-start: 4px; }
    .req-v2-cta { min-height: 34px; padding: 0 12px; font-size: 15px; gap: 6px; }
    .req-v2-cta-ic { width: 18px; height: 18px; }

    .req-v2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-block-end: 10px; }
    .req-v2-stat { min-height: 53px; padding: 8px 10px 8px 12px; }
    .req-v2-stat-label { font-size: 14px; }
    .req-v2-stat-value { font-size: 20px; margin: 0; }
    .req-v2-stat-ic { width: 36px; height: 36px; }
    .req-v2-stat-ic svg { width: 20px; height: 20px; }

    .req-list .fi-ta-header-toolbar { padding: 0; border: 0; background: transparent; margin-block-end: 8px; }
    .req-list .fi-ta-header-toolbar > div:last-of-type { flex-wrap: wrap; gap: 10px 8px; }
    .req-list .fi-ta-search-field { flex: 1 1 100%; }
    .req-list .fi-ta-search-field .fi-input-wrp { min-height: 32px; }
    .req-list .fi-ta-search-field .fi-input { font-size: 14px; }
    .req-v2-scopes { flex: 1 1 100%; min-height: 30px; }
    .req-v2-scope { flex: 1 1 0; padding: 0 6px; font-size: 14px; }
    .req-v2-scope[data-scope="all"] .req-v2-scope-full { display: none; }
    .req-v2-scope[data-scope="all"] .req-v2-scope-short { display: inline; }
    .req-v2-count { display: block; flex: 1 1 auto; font-size: 14px; color: var(--req-muted); }
    .req-list .fi-ta-filters-dropdown { margin-inline-start: 0; }
    .req-list .req-tool-btn,
    .req-list .fi-ta-filters-dropdown .fi-btn { min-height: 28px; padding: 0 12px; font-size: 14px; gap: 8px; }
    .req-list .req-v2-sort { min-width: 100px; }
    .req-list .req-tool-btn .fi-icon,
    .req-list .fi-ta-filters-dropdown .fi-btn .fi-icon { width: 16px; height: 16px; }

    .req-list .fi-ta-content-ctn,
    .req-list .fi-ta-content { border-radius: 10px 10px 0 0; overflow: visible; }
    .req-list .fi-ta-table,
    .req-list .fi-ta-table tbody { display: block; width: 100%; }
    .req-list .fi-ta-table thead { display: none; }

    .req-list .fi-ta-row {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
        grid-template-areas:
            "who status date"
            "who details date"
            "act act act";
        column-gap: 8px;
        padding: 12px 10px 12px 12px;
    }

    .req-list .fi-ta-row > .fi-ta-cell { display: block; min-width: 0; }
    .req-list .fi-ta-row .fi-ta-col { padding: 0; }
    .req-list .fi-ta-cell-request { grid-area: who; }
    .req-list .fi-ta-cell-status { grid-area: status; }
    .req-list .fi-ta-cell-details { grid-area: details; }
    .req-list .fi-ta-cell-created-at { grid-area: date; }
    .req-list .fi-ta-row > .fi-ta-cell:last-child { grid-area: act; }
    .req-list .fi-ta-row .fi-ta-actions { padding: 10px 0 0; gap: 8px; }

    .req-v2-who { align-items: flex-start; gap: 8px; min-width: 0; }
    .req-v2-who-text { overflow: hidden; }
    /* nothing is cut on a phone: long words wrap inside their column */
    .req-v2-type,
    .req-v2-name,
    .req-v2-code,
    .req-v2-stage,
    .req-v2-details { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
    .req-v2-status,
    .req-v2-stage-row { min-width: 0; max-width: 100%; }
    .req-v2-stage-row { flex-wrap: wrap; justify-content: center; }
    .req-v2-crumbs { flex-wrap: wrap; row-gap: 2px; }
    .req-v2-crumb { white-space: normal; }
    .req-v2-who .wf-avatar { width: 32px; height: 32px; font-size: 12px; }
    .req-v2-type { font-size: 15px; line-height: 1.3; }
    .req-v2-name,
    .req-v2-code { font-size: 12px; }
    .req-v2-status { justify-items: center; gap: 4px; }
    .req-v2-stage-row .req-v2-late { display: none; }
    .req-v2-details { font-size: 13px; text-align: center; }
    .req-v2-date { text-align: end; }
    .req-v2-date-day { font-size: 13px; }
    .req-v2-date-ago { font-size: 12px; }
    .req-v2-late.is-phone { display: inline-flex; margin-block-start: 4px; }
    .req-v2-pill,
    .req-v2-late { min-height: 20px; padding: 0 8px; font-size: 12px; }
    .req-v2-stage { font-size: 12px; }

    .req-list .fi-ta-actions .fi-btn { min-height: 28px; font-size: 14px; padding: 0 10px; gap: 6px; }
    .req-list .fi-ta-actions .fi-btn .fi-icon { width: 18px; height: 18px; }
    .req-list .fi-ta-actions .req-row-view { width: 36px; flex: none; }
    .req-list .fi-ta-actions .req-row-reject,
    .req-list .fi-ta-actions .req-row-approve { flex: 1 1 0; min-width: 0; }

    .req-list .fi-pagination { justify-content: flex-end; padding: 8px 12px; min-height: 44px; background: transparent; border: 0; }
    .req-list .fi-pagination-item-btn,
    .req-list .fi-pagination-previous-btn,
    .req-list .fi-pagination-next-btn { min-width: 22px; min-height: 22px; font-size: 13px; }
    .req-v2-footer { min-height: 44px; justify-content: flex-end; padding-inline: 12px; }
    .req-v2-overview { inset-inline-start: 12px; font-size: 13px; }
    .req-v2-pager { gap: 8px; }
    .req-v2-page { min-width: 22px; height: 22px; padding: 0 4px; font-size: 13px; border-radius: 5px; }
    .req-v2-page-ic { width: 14px; height: 14px; }
}

/* the reference keeps ~20px under the list card, not the panel's 32 */
.fi-page-header-main-ctn:has(.req-list) { padding-block-end: 15px; }

/* ═════════════════════════════════════════════════════════════════════
   REQ-UI-2 — «إضافة طلب» to the approved desktop (1536×1024, every type
   open, no vertical scroll) and phone references. Tokens only.
   ═════════════════════════════════════════════════════════════════════ */

/* page head: title, one-line subtitle, «رجوع» */
.fi-page:has(.req-wz) .fi-header { align-items: flex-start; }
.fi-page:has(.req-wz) .fi-header-heading { font-size: 32px; line-height: 1.25; font-weight: 700; color: var(--req-ink); }
.fi-page:has(.req-wz) .fi-header-subheading { margin-block-start: 2px; font-size: 18px; color: var(--req-muted); }
.fi-page:has(.req-wz) .fi-header .fi-btn {
    min-height: 42px;
    border-radius: 8px;
    border: 1px solid var(--req-edge);
    background: var(--req-surface);
    color: var(--req-ink);
    font-size: 16px;
    box-shadow: none;
}
.fi-page:has(.req-wz) .fi-page-header-main-ctn { row-gap: 16px; padding-block: 24px 16px; }

.req-create-layout > .fi-sc {
    grid-template-columns: minmax(0, 1fr) 284px;
    gap: 12px;
}

/* the wizard: no chrome of its own — the pieces carry it */
.req-wz.fi-sc-wizard { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.req-wz .fi-sc-wizard-step { padding: 0; margin: 0; }
.req-wz .fi-sc-wizard-step:not(.fi-active) { display: none; }

.req-wz-top { display: flex; gap: 8px; align-items: stretch; margin-block-end: 8px; }

.req-wz-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    min-width: 222px;
    max-width: 320px;
    min-height: 64px;
    padding: 0 16px;
    border: 1px solid var(--req-edge);
    border-radius: 12px;
    background: var(--req-surface);
    color: var(--req-ink);
    font: inherit;
    font-size: 18px;
    font-weight: 600;
    text-align: start;
    min-width: 0;
}

.req-wz-chip.is-actionable { cursor: pointer; }
.req-wz-chip.is-actionable:hover { border-color: var(--req-accent-edge); }
.req-wz-chip:focus-visible { outline: 3px solid var(--ho-focus); outline-offset: 2px; }
.req-wz-chip-ic { width: 26px; height: 26px; flex: none; color: var(--req-ink); }
.req-wz-chip-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-wz-chip-chev { width: 20px; height: 20px; flex: none; color: var(--req-muted); }

.req-wz-steps.fi-sc-wizard-header {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0;
    min-height: 64px;
    margin: 0;
    padding: 0 20px;
    border: 1px solid var(--req-edge);
    border-radius: 12px;
    background: var(--req-surface);
    box-shadow: none;
    overflow: visible;
}

.req-wz-step.fi-sc-wizard-header-step { display: flex; align-items: center; flex: 1 1 0; min-width: 0; border: 0; }
.req-wz-step:last-child { flex: 0 0 auto; }

.req-wz-step-btn.fi-sc-wizard-header-step-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    flex: none;
}

.req-wz-step-btn:disabled { cursor: default; }
.req-wz-step-btn:focus-visible { outline: 3px solid var(--ho-focus); outline-offset: 4px; border-radius: 999px; }

.req-wz-step-num {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--req-edge);
    color: var(--req-ink-soft);
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    flex: none;
}

.req-wz-step-done { width: 20px; height: 20px; }
.req-wz-step-label { font-size: 18px; color: var(--req-muted); white-space: nowrap; }
.req-wz-step-line { flex: 1 1 auto; height: 1px; margin-inline: 20px; background: var(--req-edge); min-width: 16px; }

.req-wz-step.fi-active .req-wz-step-num { background: var(--req-accent-fill); border-color: var(--req-accent-fill); color: var(--req-accent-on-fill); }
.req-wz-step.fi-active .req-wz-step-label { color: var(--req-accent); font-weight: 600; }
.req-wz-step.fi-completed .req-wz-step-num { border-color: var(--ho-accent-line); color: var(--req-accent); }
.req-wz-step.fi-completed .req-wz-step-label { color: var(--req-ink); }

.req-wz-search {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    margin-block-end: 9px;
    border: 1px solid var(--req-edge);
    border-radius: 10px;
    background: var(--req-surface);
}

.req-wz-search:focus-within { outline: 3px solid var(--ho-focus); outline-offset: 1px; }
.req-wz-search-ic { position: absolute; inset-inline-start: 18px; width: 24px; height: 24px; color: var(--req-muted); pointer-events: none; }
.req-wz-search-input {
    width: 100%;
    min-height: 46px;
    padding-inline: 56px 16px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 16px;
    color: var(--req-ink);
    outline: none;
    box-shadow: none;
}
.req-wz-search-input::placeholder { color: var(--req-muted); }

.req-wz-card {
    padding: 16px 20px 14px;
    border: 1px solid var(--req-edge);
    border-radius: 12px;
    background: var(--req-surface);
}

/* groups and tiles */
.req-wz-types { display: grid; gap: 0; }

.req-wz-group { padding-block: 0 14px; }
.req-wz-group + .req-wz-group { padding-block-start: 14px; border-block-start: 1px solid var(--req-edge-soft); }
.req-wz-group:has(+ .req-wz-group[style*="display: none"]) { padding-block-end: 0; }

.req-wz-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-block-end: 12px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--req-ink);
    text-align: start;
    cursor: default;
}

.req-wz-group-ic { width: 28px; height: 28px; color: var(--ho-accent-line); flex: none; }
.req-wz-group-title { font-size: 20px; font-weight: 600; line-height: 1.3; }
.req-wz-group-count,
.req-wz-group-chev { display: none; }

.req-wz-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.req-wz-group[data-group="money"] .req-wz-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.req-wz-group[data-group="attendance"] .req-wz-tiles,
.req-wz-group[data-group="employee"] .req-wz-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.req-tile.req-wz-tile {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "ic text";
    align-items: start;
    gap: 14px;
    min-height: 82px;
    padding-block: 16px;
    padding-inline: 16px 44px;
    border: 1px solid var(--req-edge);
    border-radius: 10px;
    background: var(--req-surface);
    color: var(--req-ink);
    text-align: start;
    font: inherit;
    cursor: pointer;
}

.req-wz-group[data-group="attendance"] .req-tile.req-wz-tile,
.req-wz-group[data-group="employee"] .req-tile.req-wz-tile,
.req-wz-group[data-group="money"] .req-tile.req-wz-tile { min-height: 86px; }

.req-tile.req-wz-tile:hover { border-color: var(--req-accent-edge); background: var(--req-surface); }
.req-tile.req-wz-tile:focus-visible { outline: 3px solid var(--ho-focus); outline-offset: 2px; }

.req-wz-tile-ic {
    grid-area: ic;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--req-info-soft);
    color: var(--ho-info-line);
}

.req-wz-tile-ic svg { width: 28px; height: 28px; }
.req-wz-tile-text { grid-area: text; display: grid; gap: 4px; align-self: center; min-width: 0; }
.req-wz-tile .req-tile-name { font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--req-ink); }
.req-wz-tile .req-tile-hint { font-size: 15px; line-height: 1.35; }
.req-wz-tile .req-tile-hint.is-ok { color: var(--req-ok); }
.req-wz-tile .req-tile-hint.is-info { color: var(--req-info); }
.req-wz-tile .req-tile-hint.is-quiet { color: var(--req-muted); }

.req-wz-radio {
    position: absolute;
    inset-block-start: 18px;
    inset-inline-end: 16px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--ho-line-strong);
    background: var(--req-surface);
}

.req-tile.req-wz-tile.is-selected {
    border-color: var(--ho-accent-line);
    background: var(--req-accent-soft);
    box-shadow: none;
    color: var(--req-ink);
}

.req-wz-tile.is-selected .req-wz-tile-ic { background: color-mix(in srgb, var(--ho-accent-line) 14%, transparent); color: var(--ho-accent-line); }
.req-wz-tile.is-selected .req-tile-hint { opacity: 1; }
.req-wz-tile.is-selected .req-wz-radio { border-color: var(--ho-accent-line); background: radial-gradient(circle, var(--ho-accent-line) 0 5px, var(--req-surface) 5.5px); }

.req-wz-nomatch { margin: 8px 0 0; font-size: 15px; color: var(--req-muted); }

/* the on-behalf / historical options, folded behind the subject chip */
.req-wz .req-advanced-group { margin-block: 0 14px; }

/* the review note and the buttons */
.req-wz-note {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin-block-start: 2px;
    padding: 0 18px;
    border-radius: 10px;
    background: var(--req-info-soft);
    color: var(--req-info);
    font-size: 16px;
}

.req-wz-note-ic { width: 24px; height: 24px; flex: none; color: var(--ho-info-line); }

.req-wz-footer.fi-sc-wizard-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-block-start: 22px;
    padding: 0;
    border: 0;
}

.req-wz-footer > .fi-hidden { display: none; }
.req-wz-drafts { display: contents; }

.req-wz-footer .fi-btn {
    min-height: 48px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    gap: 12px;
    box-shadow: none;
}

.req-wz-footer .req-wz-next-btn,
.req-wz-footer .req-wz-submit-btn {
    min-width: 190px;
    background: var(--req-accent-fill);
    border: 1px solid var(--req-accent-fill);
    color: var(--req-accent-on-fill);
    --tw-ring-color: transparent;
}

.req-wz-footer .req-wz-next-btn .fi-icon,
.req-wz-footer .req-wz-next-btn .fi-btn-label,
.req-wz-footer .req-wz-submit-btn .fi-btn-label { color: var(--req-accent-on-fill); }
.req-wz-footer .req-wz-next-btn .fi-icon { width: 24px; height: 24px; }
.req-wz-footer .req-wz-next-btn:hover,
.req-wz-footer .req-wz-submit-btn:hover { filter: brightness(0.94); }

.req-wz-footer .req-wz-draft,
.req-wz-footer .req-wz-prev-btn,
.req-wz-footer .req-wz-discard {
    min-width: 200px;
    padding: 0 20px;
    border: 1px solid var(--req-edge);
    background: var(--req-surface);
    color: var(--req-ink);
}

.req-wz-footer .req-wz-discard { min-width: 0; color: var(--req-danger); }
.req-wz-footer .req-wz-draft:hover,
.req-wz-footer .req-wz-prev-btn:hover { background: var(--req-surface-soft); }
.req-wz-footer .fi-btn:focus-visible { outline: 3px solid var(--ho-focus); outline-offset: 2px; }
.req-wz-footer .fi-btn[disabled],
.req-wz-footer .fi-disabled .fi-btn { opacity: 0.6; cursor: progress; }
.req-wz-prev { margin-inline-start: auto; }

/* details and confirmation steps: Filament's own fields, in the card's tone */
.req-wz .fi-sc-wizard-step .fi-fo-field-label-content { font-size: 16px; color: var(--req-ink); font-weight: 600; }
.req-wz .fi-sc-wizard-step .fi-input-wrp { border-radius: 8px; }
.req-wz .fi-sc-wizard-step > .fi-sc { gap: 16px; margin-block-end: 16px; }
.req-wz .wf-confirm { border-radius: 10px; }

/* ── the summary ──────────────────────────────────────────────────── */
.req-sum {
    padding: 18px 20px 20px;
    border: 1px solid var(--req-edge);
    border-radius: 12px;
    background: var(--req-surface);
    color: var(--req-ink);
}

.req-sum-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 0 0 16px;
    border: 0;
    border-block-end: 1px solid var(--req-edge-soft);
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: default;
}

.req-sum-head-text { display: grid; min-width: 0; }
.req-sum-title { font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--req-ink); }
.req-sum-sub { display: none; }
.req-sum-ic { width: 30px; height: 30px; color: var(--req-ink); flex: none; }
.req-sum-chev { display: none; }

.req-sum-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    border-block-end: 1px solid var(--req-edge-soft);
    font-size: 15px;
}

.req-sum-label { color: var(--req-muted); flex: none; }
.req-sum-value { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; color: var(--req-ink); text-align: end; min-width: 0; }
.req-sum-value.is-ok { color: var(--req-ok); font-size: 20px; font-weight: 700; }
.req-sum-type-ic { width: 26px; height: 26px; color: var(--ho-accent-line); flex: none; }

.req-sum-route-title { margin: 22px 0 18px; font-size: 22px; font-weight: 700; color: var(--req-ink); }

.req-sum-route {
    display: grid;
    grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr));
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.req-sum-route-step { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; }
.req-sum-route-step + .req-sum-route-step::before {
    content: '';
    position: absolute;
    inset-block-start: 11px;
    inset-inline-end: calc(50% + 14px);
    width: calc(100% - 28px);
    height: 2px;
    background: var(--req-edge);
}

.req-sum-route-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--ho-line-strong); opacity: 0.55; }
.req-sum-route-step.is-now .req-sum-route-dot { opacity: 1; background: var(--ho-accent-line); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ho-accent-line) 22%, transparent); }
.req-sum-route-label { font-size: 16px; line-height: 1.35; color: var(--req-muted); }
.req-sum-route-step.is-now .req-sum-route-label { color: var(--req-ink); font-weight: 600; }

.req-sum-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 16px;
    border-radius: 10px;
    background: var(--req-info-soft);
    color: var(--req-info);
    font-size: 15px;
}

.req-sum-info-ic { width: 24px; height: 24px; flex: none; color: var(--ho-info-line); }
.req-sum .req-notice { margin-block: 12px; }

/* ── phone ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .fi-page:has(.req-wz) .fi-header-heading { font-size: 26px; }
    .fi-page:has(.req-wz) .fi-header-subheading { font-size: 16px; }
    .fi-page:has(.req-wz) .fi-header-actions-ctn,
    .fi-page:has(.req-wz) .fi-header .fi-ac { display: none; }
    body:has(.req-wz) .hn-bottomnav { display: none; }
    .fi-page:has(.req-wz) .fi-page-header-main-ctn { padding-block-end: 88px; }

    .req-create-layout > .fi-sc { grid-template-columns: 1fr; gap: 10px; }

    .req-wz-top { flex-direction: column-reverse; gap: 9px; margin-block-end: 9px; }
    .req-wz-chip { flex: none; max-width: none; min-height: 40px; font-size: 16px; padding: 0 12px; }
    .req-wz-chip-ic { width: 22px; height: 22px; }
    .req-wz-chip-chev { margin-inline-start: auto; }
    .req-wz-steps.fi-sc-wizard-header { min-height: 53px; padding: 0 12px; }
    .req-wz-step-num { width: 34px; height: 34px; font-size: 14px; }
    .req-wz-step-label { font-size: 14px; }
    .req-wz-step-btn.fi-sc-wizard-header-step-btn { gap: 8px; }
    .req-wz-step-line { margin-inline: 8px; }

    .req-wz-search { min-height: 38px; }
    .req-wz-search-input { min-height: 36px; font-size: 14px; padding-inline-start: 44px; }
    .req-wz-search-ic { inset-inline-start: 12px; width: 20px; height: 20px; }

    .req-wz-card { padding: 0; border: 0; background: transparent; }
    .req-wz-types { gap: 1px; }
    .req-wz-group,
    .req-wz-group + .req-wz-group {
        padding: 0 10px;
        border: 1px solid var(--req-edge);
        border-radius: 10px;
        background: var(--req-surface);
    }
    .req-wz-group + .req-wz-group { margin-block-start: 0; }
    .req-wz-group-head { min-height: 42px; margin: 0; cursor: pointer; gap: 8px; }
    .req-wz-group.is-open .req-wz-group-head { min-height: 50px; }
    .req-wz-group-ic { width: 22px; height: 22px; }
    .req-wz-group-title { font-size: 16px; }
    .req-wz-group-count {
        display: inline-grid;
        place-items: center;
        min-width: 28px;
        height: 20px;
        margin-inline-start: auto;
        padding: 0 8px;
        border-radius: 999px;
        background: var(--req-surface-soft);
        color: var(--req-ink-soft);
        font-size: 12px;
        font-weight: 600;
    }
    .req-wz-group-chev { display: block; width: 18px; height: 18px; color: var(--req-ink-soft); }
    .req-wz-group.is-open .req-wz-group-count { display: none; }
    .req-wz-group.is-open .req-wz-group-chev { margin-inline-start: auto; transform: rotate(90deg); }
    [dir="ltr"] .req-wz-group.is-open .req-wz-group-chev { transform: scaleX(-1) rotate(90deg); }
    .req-wz-group:not(.is-open) .req-wz-tiles { display: none; }
    .req-wz-group.is-open { padding-block-end: 10px; }

    .req-wz-tiles,
    .req-wz-group[data-group] .req-wz-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

    .req-tile.req-wz-tile,
    .req-wz-group[data-group] .req-tile.req-wz-tile {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "ic" "text";
        justify-items: start;
        gap: 6px;
        min-height: 89px;
        padding: 9px 10px;
    }
    .req-wz-tile-ic { width: 33px; height: 33px; border-radius: 8px; }
    .req-wz-tile-ic svg { width: 20px; height: 20px; }
    .req-wz-radio { width: 18px; height: 18px; inset-block-start: 10px; inset-inline-end: 10px; }
    .req-wz-tile .req-tile-name { font-size: 16px; line-height: 1.25; }
    .req-wz-tile .req-tile-hint { font-size: 13px; line-height: 1.25; }
    .req-wz-tile-text { gap: 2px; justify-items: start; }

    /* the phone reference's own tile order for leave */
    .req-wz-tile[data-request-type="unpaid_leave"] { order: 3; }
    .req-wz-tile[data-request-type="sick_leave"] { order: 4; }
    .req-wz-tile[data-request-type="wfh"] { order: 5; }
    .req-wz-tile[data-request-type="permission"] { order: 6; }

    .req-wz-note { min-height: 32px; margin-block-start: 10px; padding: 0 12px; font-size: 14px; border: 1px solid var(--req-line-brand, var(--req-edge)); }
    .req-wz-note-ic { width: 20px; height: 20px; }

    .req-wz-footer.fi-sc-wizard-footer {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 30;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0;
        padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
        background: var(--req-surface);
        border-block-start: 1px solid var(--req-edge);
    }
    .req-wz-footer > div:not(.fi-hidden):not([style*="display: none"]) { flex: 1 1 0; min-width: 0; }
    .req-wz-footer .fi-btn { width: 100%; min-width: 0; min-height: 34px; font-size: 16px; padding: 0 10px; }
    .req-wz-footer .req-wz-next-btn,
    .req-wz-footer .req-wz-submit-btn,
    .req-wz-footer .req-wz-draft,
    .req-wz-footer .req-wz-prev-btn { min-width: 0; }
    .req-wz-footer > .req-wz-drafts { display: flex; flex: 0 0 auto; gap: 8px; min-width: 0; }
    .req-wz-footer > .req-wz-drafts:has(> .fi-btn:not([style*="display: none"])) { flex: 1 1 0; }
    .req-wz-drafts > .fi-btn[style*="display: none"] { display: none; }
    .req-wz-prev { margin: 0; flex: 0 0 auto !important; }
    .req-wz-footer .req-wz-prev-btn { width: auto; }

    .req-sum { padding: 0 12px; }
    .req-sum-head { min-height: 47px; padding: 6px 0; border: 0; cursor: pointer; flex-direction: row; }
    .req-sum-head-text { order: 2; flex: 1 1 auto; }
    .req-sum-ic { order: 1; width: 24px; height: 24px; }
    .req-sum-chev { order: 3; display: block; width: 18px; height: 18px; color: var(--req-ink-soft); }
    .req-sum-title { font-size: 16px; }
    .req-sum-sub { display: block; font-size: 13px; color: var(--req-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .req-sum:not(.is-open) .req-sum-body { display: none; }
    .req-sum.is-open .req-sum-chev { transform: rotate(90deg); }
    .req-sum.is-open .req-sum-body { padding-block-end: 12px; border-block-start: 1px solid var(--req-edge-soft); }
    .req-sum-row { min-height: 44px; }
    .req-sum-route-title { font-size: 17px; margin: 14px 0 12px; }
}

.req-wz-draft-ic { width: 24px; height: 24px; }

/* ── REQ-UI-2 (round 2): every type group — including «طلبات الموظف»,
   which the reference does not draw — fits the 1536×1024 desktop without
   a vertical scroll. Only spacing and the tile's own box are tightened;
   labels stay 17px (hints 14px), above the 12px floor and legible. The
   phone keeps its own sizes (below). ─────────────────────────────── */
@media (min-width: 768px) {
    .req-wz-card { padding-block: 12px 8px; }
    .req-wz-group { padding-block: 0 10px; }
    .req-wz-group + .req-wz-group { padding-block-start: 10px; }
    .req-wz-group-head { margin-block-end: 8px; }
    .req-wz-group-ic { width: 24px; height: 24px; }
    .req-wz-group-title { font-size: 18px; line-height: 24px; }
    .req-wz-tiles,
    .req-wz-group[data-group] .req-wz-tiles { gap: 8px; }

    .req-tile.req-wz-tile,
    .req-wz-group[data-group] .req-tile.req-wz-tile {
        min-height: 66px;
        gap: 12px;
        padding-block: 10px;
        padding-inline: 12px 36px;
        align-items: center;
    }

    .req-wz-tile-ic { width: 42px; height: 42px; border-radius: 9px; }
    .req-wz-tile-ic svg { width: 24px; height: 24px; }
    .req-wz-tile .req-tile-name { font-size: 17px; line-height: 22px; }
    .req-wz-tile .req-tile-hint { font-size: 14px; line-height: 18px; }
    .req-wz-tile-text { gap: 1px; }
    .req-wz-radio { inset-block-start: 12px; inset-inline-end: 12px; width: 20px; height: 20px; }

    .req-wz-note { min-height: 40px; margin-block-start: 0; }
    .req-wz-footer.fi-sc-wizard-footer { margin-block-start: 8px; }
}

/* step 1 holds only the chooser and the folded on-behalf options: the
   folded block must not leave the schema's row gap behind it */
.req-wz .fi-sc-wizard-step > .fi-sc:has(.req-wz-types) { row-gap: 0; }
.req-wz .req-advanced-group:not([style*="display: none"]) { margin-block-start: 10px; }

/* ═════════════════════════════════════════════════════════════════════
   REQ-UI-2 (round 3) — the DESIGN's colours on these two screens only.
   Every value comes from the --req-d-* tokens in tokens.css (sampled from
   the approved references; dark = the project's approved dark values,
   primary orange kept as designed). Scoped to the two pages, so no other
   screen moves. Contrast conflicts are documented there, not hidden.
   ═════════════════════════════════════════════════════════════════════ */
.fi-page:has(.req-list),
.fi-page:has(.req-wz) {
    --req-surface: var(--req-d-surface);
    --req-surface-soft: var(--req-d-thead);
    --req-edge: var(--req-d-border);
    --req-edge-soft: var(--req-d-divider);
    --req-ink: var(--req-d-ink);
    --req-ink-soft: var(--req-d-ink-2);
    --req-muted: var(--req-d-muted);
    --req-accent: var(--req-d-accent-ink);
    --req-accent-fill: var(--req-d-accent);
    --req-accent-on-fill: var(--req-d-on-accent);
    --req-accent-soft: var(--req-d-accent-soft);
    --req-accent-edge: var(--req-d-accent-edge);
    --req-ok: var(--req-d-ok-ink);
    --req-ok-soft: var(--req-d-approve-bg);
    --req-info: var(--req-d-blue-ink);
    --req-info-soft: var(--req-d-info-bg);
    --req-danger: var(--req-d-late-ink);
    --req-danger-soft: var(--req-d-late-bg);
    --ho-accent-line: var(--req-d-accent);
    --ho-info-line: var(--req-d-icon);
    --ho-line-strong: var(--req-d-radio);
}

body:has(.req-list) { background: var(--req-d-page-list); }
body:has(.req-wz) { background: var(--req-d-page-create); }
body:has(.req-list) .fi-main-ctn,
body:has(.req-wz) .fi-main-ctn { background: transparent; }

/* list — counters */
.req-v2-stat { --tone-soft: var(--req-d-stat-accent-bg); --tone-ring: var(--req-d-stat-accent-ring); --tone-ink: var(--req-d-accent); }
.req-v2-stat.is-info { --tone-soft: var(--req-d-stat-info-bg); --tone-ring: var(--req-d-stat-info-ring); --tone-ink: var(--req-d-stat-info-icon); }
.req-v2-stat.is-draft { --tone-soft: var(--req-d-stat-draft-bg); --tone-ring: var(--req-d-stat-draft-ring); --tone-ink: var(--req-d-stat-draft-icon); }
.req-v2-stat.is-ok { --tone-soft: var(--req-d-stat-ok-bg); --tone-ring: var(--req-d-stat-ok-ring); --tone-ink: var(--req-d-stat-ok-icon); }
.req-v2-stat-ic { background: var(--tone-ring); color: var(--tone-ink); }
.req-v2-stat-label { color: var(--req-d-ink-2); }
.req-v2-stat-value { color: var(--req-d-ink); }
.req-v2-stat.is-accent .req-v2-stat-label,
.req-v2-stat.is-accent .req-v2-stat-value { color: var(--req-d-stat-accent-ink); }

/* list — rows */
.req-list .fi-ta-header-cell-label,
.req-list .fi-ta-table thead th { color: var(--req-d-thead-ink); }
.req-list .fi-ta-table thead tr,
.req-list .fi-ta-table thead th { background: var(--req-d-thead); }
.req-v2-type { color: var(--req-d-ink-2); }
.req-v2-code,
.req-v2-date-ago,
.req-v2-stage { color: var(--req-d-muted-2); }
.req-v2-date-day,
.req-v2-details { color: var(--req-d-ink-3); }
.req-v2-pill.is-warn { color: var(--req-d-pill-ink); background: var(--req-d-pill-bg); }
.req-v2-late { color: var(--req-d-late-ink); background: var(--req-d-late-bg); }
.req-list .fi-ta-actions .req-row-view { border-color: var(--req-d-eye-edge); color: var(--req-d-eye-ink); background: var(--req-d-surface); }
.req-list .fi-ta-actions .req-row-reject { border-color: var(--req-d-reject-edge); background: var(--req-d-reject-bg); color: var(--req-d-reject-ink); }
.req-list .fi-ta-actions .req-row-approve { border-color: var(--req-d-approve-edge); background: var(--req-d-approve-bg); color: var(--req-d-approve-ink); }
.req-list .fi-ta-actions .req-row-reject .fi-icon,
.req-list .fi-ta-actions .req-row-reject .fi-btn-label { color: var(--req-d-reject-ink); }
.req-list .fi-ta-actions .req-row-approve .fi-icon,
.req-list .fi-ta-actions .req-row-approve .fi-btn-label { color: var(--req-d-approve-ink); }
.req-v2-scope { color: var(--req-d-muted); }
.req-v2-scope.is-on { color: var(--req-d-accent-ink); }
.req-v2-overview { color: var(--req-d-muted); }
.req-list .req-tool-btn,
.req-list .fi-ta-filters-dropdown .fi-btn { color: var(--req-d-ink-2); }

/* create — tiles, stepper, note, summary */
.req-wz-tile-ic { background: var(--req-d-icon-sq); color: var(--req-d-icon); }
.req-tile.req-wz-tile.is-selected { border-color: var(--req-d-accent-edge); background: var(--req-d-accent-soft); }
.req-wz-tile.is-selected .req-wz-tile-ic { background: var(--req-d-accent-sq); color: var(--req-d-accent); }
.req-wz-tile .req-tile-name { color: var(--req-d-ink-2); }
.req-wz-tile .req-tile-hint.is-ok { color: var(--req-d-ok-ink); }
.req-wz-tile .req-tile-hint.is-info { color: var(--req-d-blue-ink); }
.req-wz-tile .req-tile-hint.is-quiet { color: var(--req-d-muted); }
.req-wz-group-title { color: var(--req-d-ink); }
.req-wz-step-num { border-color: var(--req-d-step-edge); color: var(--req-d-ink-3); }
.req-wz-step-label { color: var(--req-d-muted); }
.req-wz-step.fi-active .req-wz-step-label { color: var(--req-d-accent-ink); }
.req-wz-step-line { background: var(--req-d-border); }
.req-wz-chip { color: var(--req-d-ink-2); }
.req-wz-note { background: var(--req-d-info-bg); color: var(--req-d-info-ink); }
.req-wz-note-ic { color: var(--req-d-info-icon); }
.req-wz-footer .req-wz-draft,
.req-wz-footer .req-wz-prev-btn { border-color: var(--req-d-btn-edge); color: var(--req-d-ink-2); }
.req-wz-group-count { background: var(--req-d-count-bg); }
.req-sum-title,
.req-sum-route-title { color: var(--req-d-ink); }
.req-sum-label { color: var(--req-d-muted); }
.req-sum-value { color: var(--req-d-ink-2); }
.req-sum-value.is-ok { color: var(--req-d-ok-ink); }
.req-sum-row,
.req-sum-head { border-color: var(--req-d-divider); }
.req-sum-route-dot { background: var(--req-d-route-dot); opacity: 1; }
.req-sum-route-step + .req-sum-route-step::before { background: var(--req-d-route-line); }
.req-sum-route-label { color: var(--req-d-muted); }
.req-sum-route-step.is-now .req-sum-route-label { color: var(--req-d-ink-2); }
.req-sum-info { background: var(--req-d-info-bg); color: var(--req-d-info-ink); }
.req-sum-info-ic { color: var(--req-d-info-icon); }
.fi-page:has(.req-wz) .fi-header-heading { color: var(--req-d-ink); }
.fi-page:has(.req-wz) .fi-header-subheading { color: var(--req-d-muted); }
.req-list .fi-ta-header-cell-sort-btn .fi-icon { display: none; }
.req-list .fi-ta-actions .req-row-view .fi-icon { color: var(--req-d-eye-ink); width: 24px; height: 24px; }

/* summary to the reference's own measures (desktop): rows ~67px, title
   22px, values 18px, balance 21px, type icon 30px, route labels 16px */
@media (min-width: 768px) {
    .req-sum { padding: 20px 20px 22px; }
    .req-sum-head { padding-block-end: 18px; }
    .req-sum-ic { width: 34px; height: 34px; }
    .req-sum-row { min-height: 67px; font-size: 15px; }
    .req-sum-value { font-size: 18px; }
    .req-sum-value.is-ok { font-size: 21px; }
    .req-sum-type-ic { width: 30px; height: 30px; }
    .req-sum-route-title { margin: 32px 0 26px; }
    .req-sum-route { margin-block-end: 30px; }
    .req-sum-route-label { font-size: 16px; line-height: 1.45; }
    .req-sum-info { min-height: 58px; font-size: 15px; }
}

/* phone, to the reference's proportions (drawn for a ~430pt-wide phone) */
@media (max-width: 767px) {
    .req-v2-title { font-size: 22px; }
    .req-v2-subtitle { font-size: 13px; }
    .req-v2-crumbs { font-size: 12.5px; }
    .req-v2-stat-label { font-size: 13px; }
    .req-v2-type { font-size: 13.5px; }
    .req-v2-date-day { font-size: 12px; }
    .req-list { margin-block-start: -20px; }
}
@media (max-width: 767px) {
    .fi-page-header-main-ctn:has(.req-list),
    .fi-page:has(.req-wz) .fi-page-header-main-ctn { padding-block-start: 10px; }
    .req-v2-stat-ic { width: 40px; height: 40px; }
    .req-v2-stat-ic svg { width: 24px; height: 24px; }
}
@media (max-width: 767px) {
    .req-v2-head { row-gap: 0; margin-block-end: 6px; }
    .req-v2-crumbs { line-height: 1.2; }
    .req-v2-title { line-height: 1.2; }
    .req-v2-subtitle { margin-block-start: 2px; line-height: 1.4; }
}