/* ─────────────────────────────────────────────────────────────────────
   HOMEi Extracts — «المستخلصات» (ONE-EXTRACTS-1, design approved by Kamal
   2026-09-24 on the house design system: the Work Center / المدير اللحظي
   references).

   The list page: the numbers strip, one card with a blue rule (title, the
   type pills, the status chips on the table's toolbar row) and the list with
   the extract / supply request opened BESIDE it in a panel (its own scroll,
   its buttons at its foot). From 1024px the page is one screen — nothing but
   the list and the panel scroll. Under 1024px the page scrolls as every page
   does and the panel is a bottom sheet.

   Colours: the design system's own tokens (--lm-d-* in tokens.css — the same
   values as the reference images, with their dark mirror); no colour literal
   here, the ratchet holds this sheet at zero. Type: the panel's typography
   (IBM Plex Sans Arabic). Text never under 12px. RTL-safe: logical
   properties only. Scoped by `.hx-extracts` (the page class) and `.hx`.

   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).
   ──────────────────────────────────────────────────────────────────── */

/* ── the ground and the head ── */
body:has(.hx-extracts) { background: var(--lm-d-page); }
body:has(.hx-extracts) .fi-main-ctn { background: transparent; }
.hx-extracts .fi-header-heading { font-size: 28px; font-weight: 700; line-height: 1.25; color: var(--lm-d-ink); }
.hx-extracts .fi-header-subheading { margin-block-start: 2px; font-size: 14px; color: var(--lm-d-muted); }

.hx { display: flex; flex-direction: column; gap: 14px; color: var(--lm-d-ink); }

/* ── the numbers strip ── */
.hx-strip {
    display: grid;
    grid-template-columns: repeat(var(--hx-cols, 6), 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);
    flex: none;
}
.hx-strip-c { padding: 12px 18px; border-inline-start: 1px solid var(--lm-d-divider); min-inline-size: 0; }
.hx-strip-c:first-child { border-inline-start: 0; }
.hx-k-l { font-size: 13px; color: var(--lm-d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-k-v { font-size: 26px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hx-k-s { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hx .is-ink { color: var(--lm-d-ink); }
.hx .is-muted { color: var(--lm-d-muted); }
.hx .is-ok { color: var(--lm-d-ok); }
.hx .is-danger { color: var(--lm-d-danger); }
.hx .is-accent { color: var(--lm-d-accent-ink); }
.hx .is-warn { color: var(--lm-d-warn); }
.hx .is-info { color: var(--lm-d-info); }

/* ── the card with the blue rule ── */
.hx-card {
    background: var(--lm-d-surface);
    border: 1px solid var(--lm-d-border);
    border-block-start: 3px solid var(--lm-d-info);
    border-radius: 16px;
    box-shadow: 0 1px 2px var(--lm-d-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-block-size: 0;
}
.hx-card-h {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 12px 18px;
    border-block-end: 1px solid var(--lm-d-divider);
    flex: none;
}
.hx-card-t { font-size: 20px; font-weight: 700; margin: 0; }
.hx-card-t span { font-size: 14px; font-weight: 500; color: var(--lm-d-muted); }

.hx-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hx-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 38px;
    padding-inline: 16px;
    border-radius: 20px;
    border: 1px solid var(--lm-d-border);
    background: var(--lm-d-surface);
    color: var(--lm-d-ink);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.hx-pill:hover { border-color: var(--lm-d-control-edge); }
.hx-pill:focus-visible, .hx-chip:focus-visible, .hx-btn:focus-visible { outline: 2px solid var(--lm-d-info); outline-offset: 2px; }
.hx-pill.is-on { background: var(--lm-d-tab-on-bg); border-color: var(--lm-d-tab-on-bg); color: var(--lm-d-tab-on-ink); }
.hx-pill-n { font-variant-numeric: tabular-nums; }
.hx-pill-ico { inline-size: 18px; block-size: 18px; }
.hx-pill.is-requests { margin-inline-start: 10px; position: relative; }
.hx-pill.is-requests::before {
    content: '';
    position: absolute;
    inset-inline-start: -11px;
    inset-block: 8px;
    border-inline-start: 1px solid var(--lm-d-border);
}

.hx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.hx-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 32px;
    padding-inline: 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--lm-d-muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.hx-chip b { color: var(--lm-d-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.hx-chip:hover { background: var(--lm-d-chip-bg); }
.hx-chip.is-on { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.hx-chip.is-on b { color: var(--lm-d-info); }

/* ── the split: the list (start) and the panel (end) ── */
.hx-split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; min-block-size: 0; }
.hx-list { min-inline-size: 0; min-block-size: 0; border-inline-end: 1px solid var(--lm-d-divider); display: flex; flex-direction: column; }

/* the Filament table, flattened into the card */
.hx-list .fi-ta-ctn { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.hx-list .fi-ta-header-ctn { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding-inline: 18px 12px; border-block-end: 1px solid var(--lm-d-divider); }
.hx-list .fi-ta-header-ctn > * { border: 0; }
.hx-list .fi-ta-header { padding: 10px 0; flex: 1 1 auto; min-inline-size: 0; }
.hx-list .fi-ta-header .hx-chips { flex-wrap: wrap; }
.hx-list .fi-ta-search-field { max-inline-size: 220px; }
.hx-list .fi-ta-header-toolbar { padding: 8px 0; flex: 0 0 auto; border: 0; }
.hx-list .fi-ta-header-cell { background: var(--lm-d-surface); color: var(--lm-d-muted); font-size: 13px; font-weight: 600; padding-inline: 8px; white-space: nowrap; }
.hx-list .fi-ta-cell { padding-inline: 8px; color: var(--lm-d-ink); }
.hx-list .fi-ta-row { cursor: pointer; }
.hx-list .fi-ta-row:hover > td { background: var(--lm-d-hover); }
.hx-list .fi-ta-row.hx-row-open > td { background: var(--lm-d-row-hl); }
.hx-list .fi-ta-row.hx-row-open > td:first-child { box-shadow: inset -3px 0 0 var(--lm-d-accent); }
[dir='ltr'] .hx-list .fi-ta-row.hx-row-open > td:first-child { box-shadow: inset 3px 0 0 var(--lm-d-accent); }

.hx-paid { display: inline-grid; gap: 4px; font-variant-numeric: tabular-nums; }
.hx-list :is(.fi-ta-cell-construction-company, .fi-ta-cell-company) .fi-ta-text { max-inline-size: 140px; white-space: normal; }
.hx-bar { display: block; inline-size: 56px; block-size: 6px; border-radius: 3px; background: var(--lm-d-quiet-bg); overflow: hidden; }
.hx-bar i { display: block; block-size: 100%; border-radius: 3px; background: var(--lm-d-accent); }
.hx-bar.is-full i { background: var(--lm-d-ok); }
.hx-bar.is-wide { inline-size: 100%; block-size: 8px; margin-block-start: 6px; }
.hx-dim { color: var(--lm-d-muted); font-size: 12.5px; }

/* ── the panel ── */
.hx-panel { min-block-size: 0; display: flex; flex-direction: column; background: var(--lm-d-surface); }
.hx-p { display: flex; flex-direction: column; min-block-size: 0; flex: 1 1 auto; }
.hx-p-h { padding: 14px 18px 12px; border-block-end: 1px solid var(--lm-d-divider); flex: none; }
.hx-p-t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; }
.hx-num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.hx-p-x.is-open { margin-inline-start: auto; display: inline-grid; place-items: center; text-decoration: none; color: var(--lm-d-info); }
.hx-p-x.is-open + .hx-p-x { margin-inline-start: 0; }
.hx-p-x { margin-inline-start: auto; inline-size: 30px; block-size: 30px; border-radius: 8px; border: 1px solid var(--lm-d-border); background: var(--lm-d-surface); color: var(--lm-d-muted); font-size: 13px; cursor: pointer; }
.hx-p-s { margin-block-start: 2px; font-size: 13px; color: var(--lm-d-muted); }
.hx-p-b { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 18px; display: flex; flex-direction: column; gap: 12px; }
.hx-p-f { flex: none; padding: 12px 18px; border-block-start: 1px solid var(--lm-d-divider); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hx-p-f > .hx-btn { flex: 1 1 auto; justify-content: center; }

.hx-tag { display: inline-flex; align-items: center; min-block-size: 26px; padding-inline: 10px; border-radius: 8px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.hx-tag.is-info { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.hx-tag.is-warn { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
.hx-tag.is-ok { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.hx-tag.is-danger { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.hx-tag.is-accent { background: var(--lm-d-accent-soft); color: var(--lm-d-accent-ink); }
.hx-tag.is-quiet { background: var(--lm-d-quiet-bg); color: var(--lm-d-muted); }

.hx-steps { display: flex; justify-content: space-between; position: relative; margin: 0; padding: 4px 0 0; list-style: none; }
.hx-steps::before { content: ''; position: absolute; inset-block-start: 12px; inset-inline: 14px; border-block-start: 2px solid var(--lm-d-divider); }
.hx-steps li { position: relative; flex: 1; text-align: center; font-size: 12px; color: var(--lm-d-muted); }
.hx-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); }
.hx-steps li.is-done i { background: var(--lm-d-ok); border-color: var(--lm-d-ok); }
.hx-steps li.is-now { color: var(--lm-d-ink); font-weight: 700; }
.hx-steps li.is-now i { background: var(--lm-d-accent); border-color: var(--lm-d-accent); box-shadow: 0 0 0 4px var(--lm-d-accent-soft); }
.hx-steps li.is-stop i { background: var(--lm-d-danger); border-color: var(--lm-d-danger); }

.hx-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hx-money > div { background: var(--lm-d-ai-bg); border: 1px solid var(--lm-d-divider); border-radius: 10px; padding: 8px 10px; display: grid; min-inline-size: 0; }
.hx-money span { font-size: 12px; color: var(--lm-d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-money b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hx-net { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 10px; background: var(--lm-d-ok-soft); font-size: 13.5px; font-weight: 700; }
.hx-net b { color: var(--lm-d-ok); font-variant-numeric: tabular-nums; }
.hx-kv { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 4px 10px; font-size: 13px; color: var(--lm-d-muted); }
.hx-kv b { color: var(--lm-d-ink); font-variant-numeric: tabular-nums; }
.hx-sec { font-size: 14px; font-weight: 700; margin-block-end: 6px; }
.hx-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-block-end: 1px solid var(--lm-d-divider); font-size: 13.5px; }
.hx-line:last-child { border-block-end: 0; }
.hx-line b { font-variant-numeric: tabular-nums; }
.hx-note { border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.6; border: 1px solid var(--lm-d-divider); }
.hx-note.is-note { background: var(--lm-d-warn-soft); color: var(--lm-d-ink); }
.hx-note.is-info { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.hx-note.is-warn { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
.hx-note.is-danger { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.hx-link { color: var(--lm-d-info); font-weight: 700; text-decoration: none; }
.hx-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hx-tl li { position: relative; padding-inline-start: 20px; font-size: 13px; }
.hx-tl li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 6px; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--lm-d-control-edge); }
.hx-tl li.is-ok::before { background: var(--lm-d-ok); }
.hx-tl li.is-danger::before { background: var(--lm-d-danger); }
.hx-tl small { display: block; font-size: 12px; color: var(--lm-d-muted); }

.hx-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 42px;
    padding-inline: 16px;
    border-radius: 10px;
    border: 1px solid var(--lm-d-control-edge);
    background: var(--lm-d-surface);
    color: var(--lm-d-ink);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.hx-btn.is-primary { background: var(--lm-d-accent); border-color: var(--lm-d-accent); color: var(--lm-d-on-accent); }
.hx-btn.is-danger { color: var(--lm-d-danger); border-color: var(--lm-d-gap-edge); }
.hx-btn-icon { flex: none; inline-size: 42px; justify-content: center; padding: 0; }
.hx-menu { position: relative; }
.hx-menu-list { position: absolute; inset-block-end: calc(100% + 6px); inset-inline-start: 0; z-index: 30; min-inline-size: 220px; padding: 6px; background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 12px; box-shadow: 0 10px 30px var(--lm-d-sheet-shadow); display: grid; }
.hx-menu-i { text-align: start; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--lm-d-ink); font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.hx-menu-i:hover { background: var(--lm-d-hover); }
.hx-menu-i.is-danger { color: var(--lm-d-danger); }
.hx [x-cloak] { display: none !important; }

.hx-empty { flex: 1 1 auto; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 24px; text-align: center; color: var(--lm-d-muted); font-size: 13px; }
.hx-empty b { color: var(--lm-d-ink); font-size: 15px; }
.hx-empty-ico { inline-size: 36px; block-size: 36px; color: var(--lm-d-subtle); }

/* ── the document page («مستخلص EX-…») ── */
.hx-doc-h { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hx-doc-h .hx-tag { font-size: 13px; }
.hx-doc-sub { color: var(--lm-d-muted); }
.hx-doc-strip { grid-template-columns: minmax(0, 2.2fr) repeat(6, minmax(0, 1fr)); }
.hx-doc-stage .hx-steps { margin-block-start: 6px; }
.hx-doc-page .hx-doc-main { border-block-start: 3px solid var(--lm-d-info); border-radius: 16px; }
.hx-doc-page .hx-doc-main > .fi-tabs { gap: 8px; padding: 10px 14px; border-block-end: 1px solid var(--lm-d-divider); justify-content: flex-start; }
.hx-doc-page .hx-doc-main > .fi-tabs .fi-tabs-item {
    min-block-size: 38px;
    padding-inline: 16px;
    border-radius: 20px;
    border: 1px solid var(--lm-d-border);
    background: var(--lm-d-surface);
    color: var(--lm-d-ink);
    font-weight: 700;
}
.hx-doc-page .hx-doc-main > .fi-tabs .fi-tabs-item.fi-active { background: var(--lm-d-tab-on-bg); border-color: var(--lm-d-tab-on-bg); color: var(--lm-d-tab-on-ink); }
.hx-doc-page .hx-doc-main > .fi-tabs .fi-tabs-item.fi-active .fi-tabs-item-label { color: var(--lm-d-tab-on-ink); }
.hx-doc-page .hx-doc-aside .fi-section { border-radius: 16px; }
.hx-doc-page .fi-section { box-shadow: 0 1px 2px var(--lm-d-shadow); }

/* the header's decisions: the stage's go-ahead is the design's orange, the rest outline */
.hx-doc-page .fi-header-actions-ctn .fi-btn {
    min-block-size: 42px;
    border-radius: 10px;
    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;
}
.hx-doc-page .fi-header-actions-ctn .fi-btn .fi-icon { color: currentColor; }
.hx-doc-page .fi-header-actions-ctn .fi-btn:is(.fi-color-success, .fi-color-primary) { background: var(--lm-d-accent); color: var(--lm-d-on-accent); box-shadow: none; }
.hx-doc-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); }
.hx-doc-page .fi-header-actions-ctn .fi-btn.fi-color-warning { color: var(--lm-d-warn); }

/* ── تسجيل مستخلص: the type as two cards, numbered steps, the summary beside ── */
.hx-create-main { counter-reset: hx-step; }
.hx-create-main .fi-section-header-heading::before { counter-increment: hx-step; content: counter(hx-step) ' · '; color: var(--lm-d-muted); }
.hx-create-main > .fi-sc > .fi-grid-col:first-child .fi-section { border-block-start: 3px solid var(--lm-d-info); }
.hx-create-main .fi-fo-radio.fi-inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hx-create-main .fi-fo-radio-label {
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--lm-d-border);
    border-radius: 14px;
    background: var(--lm-d-surface);
    cursor: pointer;
}
.hx-create-main .fi-fo-radio-label:has(input:checked) { border: 2px solid var(--lm-d-accent); background: var(--lm-d-accent-soft); }
.hx-create-main .fi-fo-radio-label:has(input:checked) .fi-radio-input { accent-color: var(--lm-d-accent); }
.hx-create-aside .fi-section { border-block-start: 3px solid var(--lm-d-ok); }
.hx-create-actions { padding-block: 12px 0; }
.hx-create-actions .fi-ac { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* EXT-SUBMIT-1: the stage's go-ahead («حفظ وإرسال للمراجعة», else «حفظ كمسودة») on its own full row */
.hx-create-actions .fi-ac > :first-child { grid-column: 1 / -1; }
.hx-create-actions .fi-ac > * { inline-size: 100%; min-inline-size: 0; }
.hx-create-actions .fi-btn { inline-size: 100%; justify-content: center; white-space: nowrap; padding-inline: 10px; }
.hx-create-actions .fi-ac > :not(:first-child) .fi-btn, .hx-create-actions .fi-ac > .fi-btn:not(:first-child) { font-size: 13px; padding-inline: 6px; }
.hx-create-actions .fi-btn { min-block-size: 44px; border-radius: 10px; font-weight: 700; }
.hx-create-actions .fi-btn.fi-color-primary { background: var(--lm-d-accent); color: var(--lm-d-on-accent); }

/* ── one screen, from 1024px: only the list and the panel scroll ── */
@media (min-width: 1024px) {
    html:has(.hx-extracts), html:has(.hx-extracts) body { overflow: hidden; }

    body:has(.hx-extracts) .fi-main-ctn { min-inline-size: 0; }
    body:has(.hx-extracts) .fi-main {
        block-size: calc(100dvh - var(--hn-topbar-h, 68px));
        display: flex;
        flex-direction: column;
        padding-block: 16px;
        min-inline-size: 0;
        overflow: hidden;
    }

    .hx-extracts,
    .hx-extracts .fi-page-header-main-ctn,
    .hx-extracts .fi-page-main,
    .hx-extracts .fi-page-content,
    .hx {
        flex: 1 1 auto;
        min-block-size: 0;
        min-inline-size: 0;
        display: flex;
        flex-direction: column;
    }
    .hx-extracts .fi-page-header-main-ctn { gap: 14px; padding-block: 0; }
    .hx-doc-page .fi-page-content { gap: 14px; }
    .hx-extracts .fi-page-content { gap: 0; }
    .hx-card { flex: 1 1 auto; }
    .hx-split { flex: 1 1 auto; }

    .hx-list > *,
    .hx-list :is(.fi-wi-widget, .fi-wi-table, .fi-ta, .fi-ta-ctn, .fi-ta-main) {
        flex: 1 1 auto;
        min-block-size: 0;
        min-inline-size: 0;
        display: flex;
        flex-direction: column;
    }
    .hx-list .fi-ta-header-ctn,
    .hx-list .fi-ta-filter-indicators,
    .hx-list .fi-ta-footer,
    .hx-list .fi-pagination { flex: none; }
    .hx-list .fi-ta-content-ctn { flex: 1 1 auto; min-block-size: 0; overflow: auto; overscroll-behavior: contain; }
    .hx-list .fi-ta-table thead { position: sticky; inset-block-start: 0; z-index: 2; }

    /* the document page: the strip stays, the tab and the data card scroll —
       every box around `.hx-doc` hands its height down; its siblings keep theirs */
    .hx-doc-page .fi-page-content *:has(.hx-doc) { flex: 1 1 auto; min-block-size: 0; display: flex; flex-direction: column; }
    .hx-doc-page .fi-page-content *:has(.hx-doc) > :not(:has(.hx-doc)):not(.hx-doc) { flex: none; }
    /* `.hx-doc` wraps the two-column grid (.fi-sc) — the grid gets the height */
    .hx-doc-page .hx-doc { flex: 1 1 auto; min-block-size: 0; display: flex; flex-direction: column; }
    .hx-doc-page .hx-doc > .fi-sc { flex: 1 1 auto; min-block-size: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
    .hx-doc-page .hx-doc > .fi-sc > .fi-grid-col,
    .hx-doc-page .hx-doc > .fi-sc > .fi-grid-col > .fi-sc-component { min-block-size: 0; block-size: 100%; display: flex; flex-direction: column; }
    .hx-doc-page .hx-doc-main { flex: 1 1 auto; min-block-size: 0; display: flex; flex-direction: column; }
    .hx-doc-page .hx-doc-main > .fi-tabs { flex: none; }
    .hx-doc-page .hx-doc-main > .fi-sc-tabs-tab.fi-active { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; }
    .hx-doc-page .hx-doc-aside { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; }

    /* تسجيل مستخلص: every box around the form hands its height down; the form scrolls, the summary stays */
    .hx-create-page .fi-page-content,
    .hx-create-page .fi-page-content *:has(.hx-create),
    .hx-create-page .hx-create { flex: 1 1 auto; min-block-size: 0; display: flex; flex-direction: column; }
    .hx-create-page .hx-create > .fi-sc { flex: 1 1 auto; min-block-size: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
    .hx-create-page .hx-create > .fi-sc > .fi-grid-col,
    .hx-create-page .hx-create > .fi-sc > .fi-grid-col > .fi-sc-component { min-block-size: 0; block-size: 100%; display: flex; flex-direction: column; }
    .hx-create-page .hx-create-main,
    .hx-create-page .hx-create-aside { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding-inline-end: 2px; }
    .hx-create-page .hx-create-actions { position: sticky; inset-block-end: 0; background: var(--lm-d-page); }
}

/* ── under 1024px: the page scrolls, the panel is a bottom sheet ── */
@media (max-width: 1023.98px) {
    .hx-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hx-strip-c:nth-child(3n + 1) { border-inline-start: 0; }
    .hx-strip-c:nth-child(n + 4) { border-block-start: 1px solid var(--lm-d-divider); }
    .hx-split { grid-template-columns: minmax(0, 1fr); }
    .hx-list { border-inline-end: 0; }
    .hx-panel { display: none; }
    .hx-split.has-open .hx-panel {
        display: flex;
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 45;
        max-block-size: 82dvh;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -10px 40px var(--lm-d-sheet-shadow);
    }
    .hx-card-h { align-items: stretch; }
    .hx-pills { flex-wrap: nowrap; overflow-x: auto; padding-block-end: 2px; }
}

/* ── EXT-INLINE-LINES-1: the works lines as a grid (Kamal 29-9) ──
   «كل صف بيانات البند تبقى باينة، مش عايز اسكرول يمين وشمال، ولا اسكرول كتير لتحت».
   No table and no min-width: the sheet is a container; from 960px each بند is
   one line under one header; narrower, it folds into two lines (the contract
   figures, then the typed figures), each cell with its own small label. */
.xl-sheet { container-type: inline-size; min-inline-size: 0; max-inline-size: 100%; display: flex; flex-direction: column; gap: 8px; color: var(--lm-d-ink); }
.xl-count { font-size: 13px; color: var(--lm-d-muted); }
.xl-grid { display: flex; flex-direction: column; border: 1px solid var(--lm-d-border); border-radius: 12px; background: var(--lm-d-surface); }
.xl-head, .xl-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1fr) auto;
    grid-template-areas: "c1 c2 c3 c4 c5 c6 c7 act";
    column-gap: 10px;
    align-items: start;
    padding: 8px 12px;
}
.xl-head { background: var(--lm-d-chip-bg); border-start-start-radius: 12px; border-start-end-radius: 12px; font-size: 12px; font-weight: 700; color: var(--lm-d-muted); }
.xl-row { border-block-start: 1px solid var(--lm-d-divider); }
.xl-row:hover { background: var(--lm-d-hover); }
.xl-c1 { grid-area: c1; } .xl-c2 { grid-area: c2; } .xl-c3 { grid-area: c3; } .xl-c4 { grid-area: c4; }
.xl-c5 { grid-area: c5; } .xl-c6 { grid-area: c6; } .xl-c7 { grid-area: c7; } .xl-act { grid-area: act; }
.xl-cell { min-inline-size: 0; font-size: 13px; }
.xl-lab { display: none; font-size: 12px; color: var(--lm-d-subtle); margin-block-end: 2px; }
.xl-act { display: flex; gap: 2px; align-items: center; justify-content: flex-end; }
.xl-act .fi-icon-btn { min-inline-size: 32px; min-block-size: 32px; }
.xl-sheet .fi-sc, .xl-sheet .fi-fo-field { gap: 4px; row-gap: 4px; }
.xl-sheet .fi-fo-field-label-ctn, .xl-sheet .fi-fo-field-label { display: none; }
.xl-sheet .fi-input-wrp { min-inline-size: 0; }
.xl-sheet .fi-input { font-size: 13px; min-inline-size: 0; }
.xl-sheet .fi-fo-placeholder, .xl-sheet .fi-sc-text { font-size: 13px; overflow-wrap: anywhere; }
.xl-sheet .fi-fo-field-wrp-helper-text { font-size: 12px; }
.xl-c1 .fi-select-input-value-label, .xl-c1 .fi-select-input-btn { white-space: normal; font-weight: 700; }
.xl-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.xl-num.is-out { color: var(--lm-d-danger); }
.xl-sub { display: block; font-size: 12px; color: var(--lm-d-muted); }
.xl-empty-note { padding: 16px; color: var(--lm-d-muted); }

@container (max-width: 959px) {
    .xl-head { display: none; }
    .xl-row {
        grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
        grid-template-areas:
            "c1 c1 c2 c3 act"
            "c4 c5 c6 c7 act";
        row-gap: 8px;
        padding: 10px 12px;
    }
    .xl-lab { display: block; }
    .xl-c1 .xl-lab { display: none; }
}
@container (max-width: 560px) {
    .xl-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
        grid-template-areas: "c1 c1 act" "c2 c3 c3" "c4 c5 c5" "c6 c7 c7";
    }
}

/* the inline editor on the extract's own page */
.xl-editor-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-block-start: 12px; }
.xl-editor-note { font-size: 12px; color: var(--lm-d-muted); }
.xl-save { background: var(--lm-d-accent); color: var(--lm-d-on-accent); border-radius: 10px; padding: 9px 18px; font-size: 14px; font-weight: 700; }
.xl-save[disabled] { opacity: .6; }

/* EXT-INLINE-LINES-1: the document head never pushes the page sideways — the
   decisions wrap under the heading instead of squeezing it. */
@media (min-width: 640px) {
    /* a row only from 640px — on a phone the head is a column, where a flex-basis would become height */
    .hx-doc-page .fi-header { flex-wrap: wrap; row-gap: 10px; min-inline-size: 0; }
    .hx-doc-page .fi-header > :first-child { flex: 1 1 320px; min-inline-size: 0; }
    .hx-doc-page .fi-header-actions-ctn { flex: 1 1 auto; min-inline-size: 0; }
}
.hx-doc-page .fi-header-actions-ctn .fi-ac { flex-wrap: wrap; justify-content: flex-end; }

/* ── EXT-SITE-CHECK-1: «قائمة التسليم» — one compact row per بند ── */
.sc { display: flex; flex-direction: column; gap: 12px; color: var(--lm-d-ink); }
.sc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.sc-title { font-size: 16px; font-weight: 700; }
.sc-hint { font-size: 12px; color: var(--lm-d-muted); margin-block-start: 2px; }
.sc-progress { font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--lm-d-warn-soft); color: var(--lm-d-warn); white-space: nowrap; }
.sc-progress.is-ok { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.sc-list { display: flex; flex-direction: column; border: 1px solid var(--lm-d-border); border-radius: 12px; background: var(--lm-d-surface); }
.sc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main act" "extra act"; gap: 4px 12px; padding: 10px 12px; border-block-start: 1px solid var(--lm-d-divider); }
.sc-row:first-child { border-block-start: 0; }
.sc-main { grid-area: main; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-inline-size: 0; }
.sc-name { font-size: 14px; }
.sc-chip { font-size: 12px; padding: 2px 10px; border-radius: 999px; }
.sc-chip.is-ok { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.sc-chip.is-wait { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
.sc-points { font-size: 12px; color: var(--lm-d-muted); }
.sc-extra { grid-area: extra; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--lm-d-muted); }
.sc-note { color: var(--lm-d-ink); }
.sc-photo { color: var(--lm-d-info); text-decoration: underline; }
.sc-act { grid-area: act; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* ── EXT-SPLIT-1: «توزيع المستحق على المقاولين» ── */
.xs { display: flex; flex-direction: column; gap: 14px; color: var(--lm-d-ink); }
.xs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.xs-title { font-size: 16px; font-weight: 700; }
.xs-hint { font-size: 12px; color: var(--lm-d-muted); margin-block-start: 2px; }
.xs-mode { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 3px; border: 1px solid var(--lm-d-border); border-radius: 999px; background: var(--lm-d-chip-bg); }
.xs-mode-label { font-size: 12px; font-weight: 700; color: var(--lm-d-muted); padding-inline: 8px 4px; }
.xs-pill { font-size: 13px; font-weight: 700; min-block-size: 32px; padding-inline: 14px; border-radius: 999px; color: var(--lm-d-muted); }
.xs-pill.is-on { background: var(--lm-d-tab-on-bg); color: var(--lm-d-tab-on-ink); }
.xs-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.xs-kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--lm-d-border); border-radius: 12px; background: var(--lm-d-surface); }
.xs-kpi span { font-size: 12px; font-weight: 700; color: var(--lm-d-muted); }
.xs-kpi b { font-size: 20px; font-weight: 800; }
.xs-kpi.is-warn { background: var(--lm-d-warn-soft); }
.xs-kpi.is-warn span, .xs-kpi.is-warn b { color: var(--lm-d-warn); }
.xs-kpi.is-ok { background: var(--lm-d-ok-soft); }
.xs-kpi.is-ok span, .xs-kpi.is-ok b, .xs .is-ok { color: var(--lm-d-ok); }
.xs .is-warn { color: var(--lm-d-warn); }
.xs-table { display: flex; flex-direction: column; border: 1px solid var(--lm-d-border); border-block-start: 3px solid var(--lm-d-info); border-radius: 12px; background: var(--lm-d-surface); }
.xs-row { display: grid; grid-template-columns: 28px minmax(0, 2.2fr) minmax(0, 1.6fr) 150px minmax(0, 1.6fr) 36px; gap: 12px; align-items: center; padding: 10px 14px; border-block-start: 1px solid var(--lm-d-divider); font-size: 14px; }
.xs-row.is-read { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.6fr) minmax(90px, 1fr); align-items: start; }
.xs-row.is-read.is-each { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.6fr) repeat(3, minmax(90px, 1fr)); }
.xs-num { text-align: end; font-variant-numeric: tabular-nums; }
.xs-th .xs-num, .xs-row.is-read.xs-th > span:nth-child(n+3) { text-align: end; }
.xs-note { font-size: 12px; color: var(--lm-d-ink); }
.xs-accno { unicode-bidi: plaintext; overflow-wrap: anywhere; }
.xs-row.is-open { background: var(--lm-d-row-hl); align-items: start; }
.xs-th { background: var(--lm-d-chip-bg); border-block-start: 0; font-size: 12px; font-weight: 700; color: var(--lm-d-muted); }
.xs-n { color: var(--lm-d-muted); }
.xs-who, .xs-acc, .xs-amt { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.xs-sub { font-size: 12px; color: var(--lm-d-muted); display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.xs-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 1px 10px; border-radius: 999px; background: var(--lm-d-chip-bg); color: var(--lm-d-muted); inline-size: fit-content; }
.xs-chip.is-info { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.xs-chip.is-bad { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.xs-input { inline-size: 100%; min-block-size: 40px; box-sizing: border-box; border: 1px solid var(--lm-d-control-edge); border-radius: 10px; padding-inline: 12px; background: var(--lm-d-surface); color: var(--lm-d-ink); font-size: 14px; }
.xs-input.is-focus { border: 2px solid var(--lm-d-accent); }
.xs-pick { text-align: start; color: var(--lm-d-muted); }
.xs-link { font-size: 12px; font-weight: 700; color: var(--lm-d-info); text-decoration: underline; inline-size: fit-content; }
.xs-picker { position: relative; }
.xs-drop { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; inline-size: min(520px, 80vw); z-index: 20; display: flex; flex-direction: column; border: 1px solid var(--lm-d-border); border-radius: 12px; background: var(--lm-d-surface); box-shadow: 0 12px 32px var(--lm-d-sheet-shadow); overflow: hidden; }
.xs-opt { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-block-start: 1px solid var(--lm-d-divider); text-align: start; }
.xs-opt:first-child { border-block-start: 0; }
.xs-opt:hover, .xs-opt:focus-visible { background: var(--lm-d-info-soft); }
.xs-opt-main { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.xs-opt-acc { font-size: 12px; font-weight: 700; white-space: nowrap; }
.xs-empty { padding: 12px 14px; font-size: 13px; color: var(--lm-d-muted); }
.xs-add { padding: 10px 14px; border-block-start: 1px solid var(--lm-d-border); background: var(--lm-d-accent-soft); }
.xs-x { display: inline-flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 36px; border: 1px solid var(--lm-d-control-edge); border-radius: 10px; color: var(--lm-d-muted); }
.xs-ico { inline-size: 16px; block-size: 16px; }
.xs-notef { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.xs-mlabel { display: none; font-size: 12px; font-weight: 700; color: var(--lm-d-muted); }
.xs-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-block-start: 1px solid var(--lm-d-border); background: var(--lm-d-chip-bg); border-end-start-radius: 12px; border-end-end-radius: 12px; }
.xs-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.xs-btn { display: inline-flex; align-items: center; gap: 6px; min-block-size: 40px; padding-inline: 16px; border: 1px solid var(--lm-d-control-edge); border-radius: 10px; background: var(--lm-d-surface); color: var(--lm-d-ink); font-size: 14px; font-weight: 700; }
.xs-btn.is-acc { background: var(--lm-d-accent); border-color: var(--lm-d-accent); color: var(--lm-d-on-accent); }
@media (max-width: 1023px) {
    .xs-th { display: none; }
    .xs-row, .xs-row.is-read, .xs-row.is-read.is-each { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .xs-row .xs-who { grid-column: 1 / -1; }
}
/* Phone: the three figures stay one row, each contractor is a compact card
   (name + remove on top, contact and account, then amount and comment full width). */
@media (max-width: 639px) {
    .xs-mode { inline-size: 100%; border-radius: 14px; }
    .xs-mode-label { inline-size: 100%; padding-block: 4px 2px; }
    .xs-pill { flex: 1 1 0; min-block-size: 40px; padding-inline: 8px; line-height: 1.3; }
    .xs-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .xs-kpi { padding: 8px 10px; }
    .xs-kpi b { font-size: 15px; }
    .xs-row:not(.is-read) { grid-template-columns: minmax(0, 1fr) 40px; grid-template-areas: "who x" "acc acc" "amt amt" "note note"; gap: 8px; padding: 12px; }
    .xs-row:not(.is-read) .xs-n { display: none; }
    .xs-row:not(.is-read) .xs-who { grid-area: who; grid-column: auto; }
    .xs-row:not(.is-read) .xs-acc { grid-area: acc; }
    .xs-row:not(.is-read) .xs-amt { grid-area: amt; }
    .xs-row:not(.is-read) .xs-notef { grid-area: note; }
    .xs-mlabel { display: block; }
    .xs-row:not(.is-read) .xs-x { grid-area: x; inline-size: 40px; block-size: 40px; }
    .xs-row.is-read, .xs-row.is-read.is-each { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; }
    .xs-row.is-read .xs-who, .xs-row.is-read .xs-acc { grid-column: 1 / -1; }
    .xs-row.is-read:not(.is-each) > .xs-num { grid-column: 1 / -1; text-align: start; }
    .xs-row.is-read .xs-num { text-align: start; }
    .xs-row.is-read .xs-num::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; color: var(--lm-d-muted); }
    .xs-drop { position: static; inline-size: 100%; margin-block-start: 6px; box-shadow: none; }
    .xs-opt { flex-wrap: wrap; }
    .xs-foot, .xs-btns { flex-direction: column; align-items: stretch; }
    .xs-btn { justify-content: center; }
}

/* EXT-FIN-APPROVE-1: six stages need the strip's whole width under 1024px — the
   stage cell takes its own row, the six figures follow three by three. */
@media (max-width: 1023.98px) {
    .hx-strip .hx-doc-stage { grid-column: 1 / -1; }
    .hx-strip:has(.hx-doc-stage) .hx-strip-c:nth-child(n + 2) { border-block-start: 1px solid var(--lm-d-divider); }
    .hx-strip:has(.hx-doc-stage) .hx-strip-c:nth-child(3n + 2) { border-inline-start: 0; }
    .hx-strip:has(.hx-doc-stage) .hx-strip-c:nth-child(3n + 1):not(:first-child) { border-inline-start: 1px solid var(--lm-d-divider); }
}
/* Under 640px the six figures go two by two and shrink with the screen — a seven-digit
   amount (4,125,250) never runs out of its cell. */
@media (max-width: 639.98px) {
    .hx-strip:has(.hx-doc-stage) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hx-strip:has(.hx-doc-stage) .hx-strip-c:nth-child(n + 2) { border-inline-start: 0; }
    .hx-strip:has(.hx-doc-stage) .hx-strip-c:nth-child(2n + 3) { border-inline-start: 1px solid var(--lm-d-divider); }
    .hx-strip .hx-k-v { font-size: clamp(18px, 6vw, 26px); white-space: nowrap; }
    .hx-strip-c { padding-inline: 12px; }
}
/* MAT-SPLIT-1 — a material extract's sheets (its materials, what each supplier is due, the
   additional costs, and the materials editor) on a phone: each row becomes a card and every
   cell names its column (data-label), so no figure and no button hides behind a sideways
   scroll. Above the phone they stay the sheet they were. */
.extract-lines-sheet.mx-repeater td:nth-child(2) { min-inline-size: 220px; }
.mx-sub { font-size: 12px; color: var(--lm-d-muted); }
.mx-over { font-weight: 700; color: var(--lm-d-warn); }
.mx-ok { font-weight: 700; color: var(--lm-d-ok); }
.mx-h { margin: 16px 0 4px; font-size: 16px; font-weight: 800; color: var(--lm-d-ink); }
.mx-h:first-child { margin-block-start: 0; }
.mx-help { margin: 0 0 8px; font-size: 13px; color: var(--lm-d-muted); }
.mx-grand { margin: 12px 0 0; font-size: 14px; color: var(--lm-d-ink); }
.extract-lines-sheet.mx-cards tr.mx-total { background: var(--lm-d-chip-bg); }
/* A number never breaks in the middle («18 00 0»): cells wrap between words only. */
.extract-lines-sheet.mx-cards td, .extract-lines-sheet.mx-cards td * { overflow-wrap: normal; word-break: keep-all; }
/* The editor's figures (budget, before, received, remaining, overrun, price, value) keep room for a
   whole number — the sheet scrolls sideways inside the dialog rather than clipping «18000» to «000». */
@media (min-width: 640px) {
    .extract-lines-sheet.mx-repeater td:nth-child(n+4):nth-child(-n+10) { min-inline-size: 92px; }
    /* The value column also carries the material's total under it. */
    .extract-lines-sheet.mx-repeater td:nth-child(10) { min-inline-size: 190px; }
    .extract-lines-sheet.mx-cards .fi-in-text-item { display: block; overflow: visible; }
}
@media (max-width: 639px) {
    .extract-lines-sheet.mx-cards.mx-cards .extract-lines-scroll { overflow: visible; }
    .extract-lines-sheet.mx-cards.mx-cards table { min-inline-size: 0; inline-size: 100%; display: block; }
    .extract-lines-sheet.mx-cards.mx-cards thead { display: none; }
    .extract-lines-sheet.mx-cards.mx-cards tbody { display: flex; flex-direction: column; gap: 10px; }
    .extract-lines-sheet.mx-cards.mx-cards tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 12px; border: 1px solid var(--lm-d-border); border-radius: 12px; background: var(--lm-d-surface); }
    .extract-lines-sheet.mx-cards.mx-cards td { display: block; min-inline-size: 0; padding: 0; border: 0; }
    .extract-lines-sheet.mx-cards.mx-cards td.fi-hidden { display: none; }
    .extract-lines-sheet.mx-cards.mx-cards td[data-label]::before { content: attr(data-label); display: block; margin-block-end: 2px; font-size: 12px; font-weight: 700; color: var(--lm-d-muted); }
    .extract-lines-sheet.mx-cards.mx-cards td.mx-wide,
    .extract-lines-sheet.mx-cards.mx-cards tr.mx-total td { grid-column: 1 / -1; }
    .extract-lines-sheet.mx-cards.mx-cards tr.mx-total { background: var(--lm-d-chip-bg); }
    .extract-lines-sheet.mx-cards.mx-cards td .fi-btn { inline-size: 100%; justify-content: center; min-block-size: 44px; }
    /* The editor: the material, its supplier, the overrun and the price carry inputs — full width. */
    .extract-lines-sheet.mx-repeater.mx-repeater td:nth-child(1),
    .extract-lines-sheet.mx-repeater.mx-repeater td:nth-child(2),
    .extract-lines-sheet.mx-repeater.mx-repeater td:nth-child(8),
    .extract-lines-sheet.mx-repeater.mx-repeater td:nth-child(9),
    .extract-lines-sheet.mx-repeater.mx-repeater td:nth-child(10),
    .extract-lines-sheet.mx-repeater.mx-repeater td:last-child { grid-column: 1 / -1; }
    .extract-lines-sheet.mx-repeater.mx-repeater td:last-child .fi-fo-table-repeater-actions { justify-content: flex-end; }
}

/* FIN-ROWS-1 (Kamal 29-9-2026, «القايمه صغيره اوي»): denser rows, and the title and
   strip fold away while the rows are scrolled (body.fn-list-scrolled, resources/js/finance-lists.js). */
.hx-list .fi-ta-text:not(.fi-inline), .hx-list .fi-ta-icon:not(.fi-inline), .hx-list .fi-ta-cell:has(.fi-ta-actions) { padding-block: 7px; }
@media (min-width: 1024px) {
    body.fn-list-scrolled .hx-extracts .fi-header, body.fn-list-scrolled .hx-extracts .hx-strip { display: none; }
}
/* the filter sheet: bordered head and foot around the scrolling fields */
body:has(.hx-extracts) .fi-modal.fi-modal-slide-over .fi-modal-header { border-block-end: 1px solid var(--lm-d-divider); }
body:has(.hx-extracts) .fi-modal.fi-modal-slide-over .fi-modal-footer { border-block-start: 1px solid var(--lm-d-divider); }
body:has(.hx-extracts) .fi-modal.fi-modal-slide-over .fi-modal-footer .fi-btn { min-block-size: 42px; border-radius: 10px; font-weight: 700; }
/* «فلاتر · N» carries its count in its words — no floating «0» badge */
.hx-list .fi-ta-header-toolbar .fi-btn-badge-ctn { display: none; }
.hx-list .fi-ta-header-toolbar .fi-btn:not(.fi-icon-btn) { border-radius: 10px; font-weight: 700; }