/* ─────────────────────────────────────────────────────────────────────
   HOMEi Finance — «مالي», every page of the module (FIN-UI-1, design approved by Kamal 28-9-2026
   on the house design system).

   One sheet for the whole finance module (prefix fn), grown from the
   design-system starter; every finance page shares these classes.

   Colours: the house tokens (--lm-d-* in resources/css/tokens.css, with
   their dark mirror); no colour literal here — the ratchet holds this sheet
   at zero. Text never under 12px. RTL-safe: logical properties only.
   Scoped by `.fn-page` (the page class) and `.fn`.

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

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

.fn { display: flex; flex-direction: column; gap: 14px; color: var(--lm-d-ink); }
.fn :focus-visible { outline: 2px solid var(--lm-d-info); outline-offset: 2px; }
.fn .fn-num { font-variant-numeric: tabular-nums; }
.fn bdi { unicode-bidi: isolate; }

/* the page's header actions (Filament): outline buttons, the main decision is the orange */
.fn-page .fi-header-actions-ctn .fi-btn {
    min-block-size: 44px;
    border-radius: 12px;
    padding-inline: 16px;
    background: var(--lm-d-surface);
    color: var(--lm-d-ink);
    box-shadow: inset 0 0 0 1px var(--lm-d-control-edge);
    font-weight: 700;
}
.fn-page .fi-header-actions-ctn .fi-btn .fi-icon { color: currentColor; }
.fn-page .fi-header-actions-ctn .fi-btn:is(.fi-color-primary, .fi-color-success) { background: var(--lm-d-accent); color: var(--lm-d-on-accent); box-shadow: 0 4px 12px var(--lm-d-accent-soft); }
.fn-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); }

/* ── 2. text tones (words and figures only) ── */
.fn .is-ink { color: var(--lm-d-ink); }
.fn .is-muted { color: var(--lm-d-muted); }
.fn .is-ok { color: var(--lm-d-ok); }
.fn .is-warn { color: var(--lm-d-warn); }
.fn .is-danger { color: var(--lm-d-danger); }
.fn .is-accent { color: var(--lm-d-accent-ink); }
.fn .is-info { color: var(--lm-d-info); }

/* ── 3. the numbers strip (KPI row): label · big figure · one line under it ── */
.fn-strip {
    display: grid;
    grid-template-columns: repeat(var(--fn-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);
}
.fn-strip-c { padding: 12px 18px; border-inline-start: 1px solid var(--lm-d-divider); min-inline-size: 0; }
.fn-strip-c:first-child { border-inline-start: 0; }
a.fn-strip-c, button.fn-strip-c { color: inherit; text-decoration: none; background: none; border-block: 0; border-inline-end: 0; text-align: start; font: inherit; cursor: pointer; }
a.fn-strip-c:hover, button.fn-strip-c:hover { background: var(--lm-d-hover); }
.fn-strip .fn-strip-c.is-on { background: var(--lm-d-info-soft); box-shadow: inset 0 -3px 0 var(--lm-d-info); }
.fn-k-l { font-size: 13px; color: var(--lm-d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-k-v { font-size: 26px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-k-s { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 4. the card with the blue rule (the page's main surface) ── */
.fn-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;
}
.fn-card--plain { border-block-start-width: 1px; border-block-start-color: var(--lm-d-border); }
.fn-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);
}
.fn-card-t { font-size: 20px; font-weight: 700; margin: 0; }
.fn-card-t span { font-size: 14px; font-weight: 500; color: var(--lm-d-muted); }
.fn-card-b { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }

/* ── 5. view pills (the page's views / tabs): navy when on ── */
.fn-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fn-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 40px;
    padding-inline: 16px;
    border-radius: 20px;
    border: 1px solid var(--lm-d-border);
    background: var(--lm-d-surface);
    color: var(--lm-d-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}
.fn-pill:hover { border-color: var(--lm-d-control-edge); }
.fn-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); }
.fn-pill-n { font-variant-numeric: tabular-nums; }
.fn-dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--lm-d-info); flex: none; }
.fn-dot.is-accent { background: var(--lm-d-accent); }
.fn-dot.is-ok { background: var(--lm-d-ok); }
.fn-dot.is-warn { background: var(--lm-d-warn); }
.fn-dot.is-danger { background: var(--lm-d-danger); }
.fn-pill.is-on .fn-dot { background: var(--lm-d-accent); }

/* ── 6. status chips with counts (filters on the list's toolbar row) ── */
.fn-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fn-chips-note { white-space: nowrap; margin-inline-start: 6px; }
.fn-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 34px;
    padding-inline: 12px;
    border: 1px solid var(--lm-d-border);
    border-radius: 10px;
    background: var(--lm-d-page);
    color: var(--lm-d-muted);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.fn-chip b { color: var(--lm-d-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.fn-chip:hover { background: var(--lm-d-chip-bg); }
.fn-chip.is-on { background: var(--lm-d-info-soft); border-color: var(--lm-d-info-soft); color: var(--lm-d-info); }
.fn-chip.is-on b { color: var(--lm-d-info); }

/* ── 7. toolbar: search (the panel-wide dictation mic attaches itself) + a small segmented toggle ── */
.fn-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 18px; border-block-end: 1px solid var(--lm-d-divider); }
.fn-search { margin-inline-start: auto; inline-size: min(320px, 100%); block-size: 38px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--lm-d-control-edge); border-radius: 10px; background: var(--lm-d-surface); color: var(--lm-d-muted); }
.fn-search .fn-ic { inline-size: 16px; block-size: 16px; flex: none; }
.fn-search input { flex: 1; min-inline-size: 0; block-size: 34px; border: 0; outline: 0; background: transparent; color: var(--lm-d-ink); font: inherit; font-size: 13.5px; }
.fn-search input::placeholder { color: var(--lm-d-muted); }
.fn-search:focus-within { border-color: var(--lm-d-accent); box-shadow: 0 0 0 3px var(--lm-d-accent-soft); }
.fn-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--lm-d-border); border-radius: 10px; background: var(--lm-d-surface); }
.fn-seg button { block-size: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--lm-d-muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.fn-seg button:hover { color: var(--lm-d-ink); }
.fn-seg button.is-on { background: var(--lm-d-chip-bg); color: var(--lm-d-ink); font-weight: 700; }

/* ── 8. the split: the list (start) and the item opened beside it (end) ── */
.fn-split { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.fn-split.has-open { grid-template-columns: minmax(0, 1fr) 360px; }
.fn-split:not(.has-open) .fn-panel { display: none; }
.fn-list { min-inline-size: 0; }
.fn-split.has-open .fn-list { border-inline-end: 1px solid var(--lm-d-divider); }

/* a Filament table flattened into the card */
:is(.fn-list, .fn-doc-main) .fi-ta-ctn { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
:is(.fn-list, .fn-doc-main) .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); }
:is(.fn-list, .fn-doc-main) .fi-ta-header-ctn > * { border: 0; }
:is(.fn-list, .fn-doc-main) .fi-ta-header { padding: 10px 0; flex: 1 1 auto; min-inline-size: 0; }
:is(.fn-list, .fn-doc-main) .fi-ta-header-toolbar { padding: 8px 0; flex: 0 0 auto; border: 0; }
:is(.fn-list, .fn-doc-main) .fi-ta-search-field { max-inline-size: 260px; }
:is(.fn-list, .fn-doc-main) .fi-ta-header-cell { background: var(--lm-d-surface); color: var(--lm-d-ink); font-size: 13.5px; font-weight: 700; padding-inline: 8px; white-space: nowrap; }
:is(.fn-list, .fn-doc-main) .fi-ta-cell { padding-inline: 8px; color: var(--lm-d-ink); }
:is(.fn-list, .fn-doc-main) .fi-ta-row:hover > td { background: var(--lm-d-hover); }
.fn-list .fi-ta-row { cursor: pointer; }
:is(.fn-list, .fn-doc-main) .fi-ta-actions .fi-btn:is(.fi-color-success, .fi-color-primary) { background: var(--lm-d-accent); color: var(--lm-d-on-accent); }

/* a hand-built table (when the list is not a Filament table) */
.fn-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.fn-table th { text-align: start; padding: 10px 12px; color: var(--lm-d-ink); font-weight: 700; font-size: 13.5px; border-block-end: 1px solid var(--lm-d-border); white-space: nowrap; }
.fn-table td { padding: 10px 12px; border-block-end: 1px solid var(--lm-d-divider); color: var(--lm-d-ink); vertical-align: middle; }
.fn-table tbody tr { cursor: pointer; }
.fn-table tbody tr:hover > td { background: var(--lm-d-hover); }
.fn-table tbody tr.is-open > td { background: var(--lm-d-row-hl); }
.fn-table tbody tr.is-open > td:first-child { box-shadow: inset -3px 0 0 var(--lm-d-accent); }
[dir='ltr'] .fn-table tbody tr.is-open > td:first-child { box-shadow: inset 3px 0 0 var(--lm-d-accent); }
.fn-table td.is-name { font-weight: 700; }
.fn-table tfoot td { background: var(--lm-d-info-soft); font-weight: 700; border: 0; }
.fn-dim { color: var(--lm-d-muted); font-size: 12.5px; }

/* ── 9. the panel (the opened item): head · own scroll · buttons pinned at the foot ── */
.fn-panel { position: sticky; inset-block-start: 12px; display: flex; flex-direction: column; background: var(--lm-d-surface); max-block-size: calc(100dvh - 120px); min-block-size: 420px; }
.fn-p { display: flex; flex-direction: column; min-block-size: 0; flex: 1 1 auto; }
.fn-p-h { padding: 14px 18px 12px; border-block-end: 1px solid var(--lm-d-divider); }
.fn-p-t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; }
.fn-p-x { margin-inline-start: auto; inline-size: 32px; block-size: 32px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--lm-d-border); background: var(--lm-d-surface); color: var(--lm-d-muted); font: inherit; font-size: 13px; cursor: pointer; }
.fn-p-s { margin-block-start: 2px; font-size: 13px; color: var(--lm-d-muted); }
.fn-p-b { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.fn-p-f { padding: 12px 18px; border-block-start: 1px solid var(--lm-d-divider); display: flex; gap: 8px; }
.fn-p-f > .fn-btn { flex: 1 1 0; justify-content: center; }

/* ── 10. status tag (a dot + a word) ── */
.fn-tag { display: inline-flex; align-items: center; gap: 6px; min-block-size: 26px; padding-inline: 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.fn-tag::before { content: ''; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }
.fn-tag.is-info { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.fn-tag.is-ok { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.fn-tag.is-warn { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
.fn-tag.is-danger { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.fn-tag.is-accent { background: var(--lm-d-accent-soft); color: var(--lm-d-accent-ink); }
.fn-tag.is-quiet { background: var(--lm-d-quiet-bg); color: var(--lm-d-muted); }

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

/* ── 12. figures inside a panel / card ── */
.fn-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fn-money > div { border: 1px solid var(--lm-d-border); border-radius: 10px; padding: 8px; display: grid; min-inline-size: 0; }
.fn-money span { font-size: 12px; color: var(--lm-d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-money b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fn-money b.is-long { font-size: 14px; }
.fn-money b.is-xlong { font-size: 12.5px; }
.fn-net { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--lm-d-ok-soft); color: var(--lm-d-ok); font-size: 13.5px; font-weight: 700; }
.fn-net b { font-variant-numeric: tabular-nums; }
.fn-sec { font-size: 14px; font-weight: 700; margin-block-end: 6px; }
.fn-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; }
.fn-line:last-child { border-block-end: 0; }
.fn-line b { font-variant-numeric: tabular-nums; }
.fn-note { border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.6; border: 1px solid var(--lm-d-divider); }
.fn-note.is-info { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.fn-note.is-warn { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
.fn-note.is-danger { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.fn-note.is-ok { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }

/* ── 13. buttons: one orange primary per area, the rest outline ── */
.fn-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: inherit;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.fn-btn:hover { background: var(--lm-d-hover); }
.fn-btn.is-primary { background: var(--lm-d-accent); border-color: var(--lm-d-accent); color: var(--lm-d-on-accent); }
.fn-btn.is-primary:hover { filter: brightness(0.96); }
.fn-btn.is-danger { color: var(--lm-d-danger); border-color: var(--lm-d-gap-edge); }
.fn-btn.is-sm { min-block-size: 36px; padding-inline: 14px; font-size: 13.5px; }
.fn-btn.is-icon { inline-size: 42px; padding: 0; justify-content: center; }
.fn-btn:disabled { opacity: .6; cursor: default; }
.fn-btn-ico, .fn-ic { inline-size: 18px; block-size: 18px; flex: none; }

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

/* ── 15. a record page (Filament view/edit): ruled main card, tabs as pills ── */
.fn-doc-page .fi-page-content { gap: 16px; }
.fn-doc-page .fi-section { border-radius: 16px; box-shadow: 0 1px 2px var(--lm-d-shadow); }
.fn-doc-page .fi-section-header-heading { color: var(--lm-d-ink); font-weight: 700; }
.fn-doc-main {
    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);
}
.fn-doc-main .fi-tabs { gap: 8px; padding: 12px 16px; border-block-end: 1px solid var(--lm-d-divider); justify-content: flex-start; background: transparent; box-shadow: none; border-radius: 0; }
.fn-doc-main .fi-tabs .fi-tabs-item { min-block-size: 42px; padding-inline: 16px; border-radius: 21px; border: 1px solid var(--lm-d-border); background: var(--lm-d-surface); color: var(--lm-d-ink); font-weight: 700; }
.fn-doc-main .fi-tabs .fi-tabs-item .fi-tabs-item-label { color: inherit; }
.fn-doc-main .fi-tabs .fi-tabs-item .fi-icon { color: var(--lm-d-muted); }
.fn-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); }
.fn-doc-main .fi-tabs .fi-tabs-item.fi-active :is(.fi-tabs-item-label, .fi-icon) { color: var(--lm-d-tab-on-ink); }
.fn-doc-main .fi-sc-tabs-tab { padding: 16px; }
.fn-doc-main .fi-sc-tabs-tab .fi-section { box-shadow: none; }

/* ── 15b. a list page's card fills the rest of the screen (≥1024px): the list and the
   panel scroll on their own and the panel's buttons are always in view. The height
   is measured by the card's own x-init into --fn-fill on <html> (a custom property,
   never a colour), so a Livewire re-render cannot wipe it. ── */
@media (min-width: 1024px) {
    .fn-card.is-fill { block-size: var(--fn-fill, auto); min-block-size: 460px; }
    .fn-card.is-fill > .fn-split { flex: 1 1 auto; min-block-size: 0; grid-template-rows: minmax(0, 1fr); }
    .fn-card.is-fill .fn-list { overflow: auto; min-block-size: 0; }
    .fn-card.is-fill .fn-panel { position: static; max-block-size: none; min-block-size: 0; block-size: 100%; }
}

/* ── 15c. the payment desks' own screens (.ip-*: the record wizards) on the house palette ──
   The module sheet (incoming-payments/_styles) names its roles as --ip-* custom
   properties; inside a finance page they read the house tokens instead, so the
   wizards change colour without a line of their markup changing. ── */
.fn-ip .ip {
    --ip-bg: var(--lm-d-page); --ip-card: var(--lm-d-surface); --ip-alt: var(--lm-d-hover);
    --ip-text: var(--lm-d-ink); --ip-text2: var(--lm-d-muted); --ip-muted: var(--lm-d-muted); --ip-faint: var(--lm-d-muted); --ip-ph: var(--lm-d-muted);
    --ip-line: var(--lm-d-border); --ip-line2: var(--lm-d-divider); --ip-line3: var(--lm-d-divider); --ip-field: var(--lm-d-control-edge); --ip-dash: var(--lm-d-control-edge);
    --ip-primary: var(--lm-d-info); --ip-primary-d: var(--lm-d-ink); --ip-primary-l: var(--lm-d-info-soft); --ip-primary-b: var(--lm-d-info-soft); --ip-bar: var(--lm-d-info-soft);
    --ip-ok: var(--lm-d-ok); --ip-ok-t: var(--lm-d-ok); --ip-ok-bg: var(--lm-d-ok-soft); --ip-ok-dot: var(--lm-d-ok);
    --ip-warn-t: var(--lm-d-warn); --ip-warn-bg: var(--lm-d-warn-soft); --ip-warn-dot: var(--lm-d-warn); --ip-warn-b: var(--lm-d-warn);
    --ip-err-t: var(--lm-d-danger); --ip-err-bg: var(--lm-d-danger-soft); --ip-err-dot: var(--lm-d-danger); --ip-err-b: var(--lm-d-gap-edge); --ip-err-solid: var(--lm-d-danger);
    --ip-req: var(--lm-d-danger);
}
.fn-ip .ip-head { display: none; }
.fn-ip .ip-card { border-radius: 16px; box-shadow: 0 1px 2px var(--lm-d-shadow); }
.fn-ip .ip-btn-p, .fn-ip .ip-btn-ok { background: var(--lm-d-accent); color: var(--lm-d-on-accent); }
.fn-ip .ip-btn-p:hover, .fn-ip .ip-btn-ok:hover { background: var(--lm-d-accent); filter: brightness(.96); }
.fn-ip .ip-btn-s, .fn-ip .ip-btn-dg { background: var(--lm-d-surface); }
.fn-ip .ip-btn-s:hover { background: var(--lm-d-hover); }
.fn-ip .ip-in { background: var(--lm-d-surface); }
.fn-ip .ip-in:focus { border-color: var(--lm-d-accent); box-shadow: 0 0 0 3px var(--lm-d-accent-soft); }
.fn-ip .ip-b-mute { background: var(--lm-d-quiet-bg); }
.fn-ip .ip-kpi .ip-badge { white-space: normal; max-width: 100%; }
.fn-ip .ip-card:not(.ip-aside .ip-card):not(.ip-done) { border-block-start: 3px solid var(--lm-d-info); }
.fn-ip .ip-sum-bal { background: var(--lm-d-accent-soft); border: 1px solid var(--lm-d-accent-line); }
.fn-ip .ip-bal-l { color: var(--lm-d-muted); font-size: 13px; }
.fn-ip .ip-bal-v { color: var(--lm-d-accent-ink); }
.fn-ip .ip-step.is-on .ip-step-n { background: var(--lm-d-accent); border-color: var(--lm-d-accent); color: var(--lm-d-on-accent); }

/* ── 16. under 1024px: the page scrolls, the panel becomes a bottom sheet ── */
@media (max-width: 1023.98px) {
    .fn-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fn-strip-c:nth-child(3n + 1) { border-inline-start: 0; }
    .fn-strip-c:nth-child(n + 4) { border-block-start: 1px solid var(--lm-d-divider); }
    .fn-split, .fn-split.has-open { grid-template-columns: minmax(0, 1fr); }
    .fn-split.has-open .fn-list { border-inline-end: 0; }
    .fn-panel { display: none; }
    .fn-split.has-open .fn-panel {
        display: flex;
        position: fixed;
        inset-inline: 0;
        inset-block: auto 0;
        z-index: 45;
        min-block-size: 0;
        max-block-size: 82dvh;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -10px 40px var(--lm-d-sheet-shadow);
    }
    .fn-card-h { align-items: stretch; }
    .fn-pills, .fn-doc-main .fi-tabs { flex-wrap: nowrap; overflow-x: auto; padding-block-end: 2px; scrollbar-width: none; }
    .fn-page .fi-header-heading { font-size: 22px; }
}
@media (max-width: 640px) {
    .fn-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fn-strip-c:nth-child(n) { border-inline-start: 0; border-block-start: 1px solid var(--lm-d-divider); }
    .fn-strip-c:nth-child(-n + 2) { border-block-start: 0; }
    .fn-strip-c:nth-child(2n) { border-inline-start: 1px solid var(--lm-d-divider); }
    .fn-k-v { font-size: 22px; }
    .fn-search { inline-size: 100%; margin-inline-start: 0; block-size: 44px; }
    .fn-money { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* touch: every control at least 44px tall on a phone */
    .fn-pill, .fn-chip, .fn-btn, .fn-seg button, .fn-p-x { min-block-size: 44px; }
    .fn-p-x { inline-size: 44px; }
    .fn-table thead { display: none; }
    .fn-table, .fn-table tbody, .fn-table tr, .fn-table td { display: block; inline-size: 100%; }
    .fn-table tbody tr { padding: 10px 12px; border-block-end: 1px solid var(--lm-d-divider); }
    .fn-table td { padding: 2px 0; border: 0; }
    .fn-table td[data-label]::before { content: attr(data-label) ' · '; color: var(--lm-d-muted); font-size: 12.5px; }
}

/* ── 17. finance extras (FIN-UI-1): money, sub-lines, documents, meters ── */
.fn .fn-cur { margin-inline-start: 3px; font-size: 12.5px; font-weight: 500; color: var(--lm-d-muted); }
.fn .fn-sub { display: block; font-size: 12.5px; font-weight: 400; color: var(--lm-d-muted); }
.fn .fn-late { display: block; font-size: 12.5px; font-weight: 600; color: var(--lm-d-danger); }
.fn .fn-hint { font-size: 12.5px; font-weight: 400; color: var(--lm-d-muted); }
.fn-sec .fn-hint { margin-inline-start: 4px; }

/* key/value grid inside a panel */
.fn-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.fn-kv > div { display: flex; flex-direction: column; min-inline-size: 0; }
.fn-kv span { font-size: 12.5px; color: var(--lm-d-muted); }
.fn-kv b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }

/* the three-button document row: download · WhatsApp · email (receipt / statement) */
.fn-acts3 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.fn-acts3 > .fn-btn { white-space: nowrap; }
.fn-acts3 > .fn-btn { justify-content: center; padding-inline: 8px; }

/* a light row: icon · text · trailing tag or link */
.fn-ch { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-block-end: 1px solid var(--lm-d-divider); font-size: 13.5px; }
.fn-ch:last-child { border-block-end: 0; }
.fn-ch > .fn-tag, .fn-ch > .fn-end { margin-inline-start: auto; }

/* a thin meter (paid share, a collector's load, a budget) */
.fn-prog { flex: none; block-size: 8px; border-radius: 99px; background: var(--lm-d-quiet-bg); overflow: hidden; }
.fn-prog > i { display: block; block-size: 100%; inline-size: var(--fn-pct, 0%); border-radius: 99px; background: var(--lm-d-ok); }
.fn-prog.is-info > i { background: var(--lm-d-info); }
.fn-prog.is-warn > i { background: var(--lm-d-warn); }

/* a line's trailing figure + its small button */
.fn-line-end { display: inline-flex; align-items: center; gap: 8px; }

/* a compact native control inside a panel (collection status, expected date) */
.fn-select { inline-size: 100%; min-block-size: 36px; margin-block-start: 2px; padding-inline: 10px; border: 1px solid var(--lm-d-control-edge); border-radius: 10px; background: var(--lm-d-surface); color: var(--lm-d-ink); font: inherit; font-size: 13.5px; }
.fn-textarea { min-block-size: 84px; padding-block: 8px; resize: vertical; }
.fn-thread { display: grid; gap: 8px; }
.fn-row-docs { display: flex; gap: 6px; }
.fn-thread-i { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--lm-d-border); border-radius: 12px; background: var(--lm-d-surface); font-size: 13.5px; line-height: 1.6; }
.fn-thread-i.is-on { border-color: var(--lm-d-info); }
.fn-select:focus { outline: 2px solid var(--lm-d-info); outline-offset: 1px; }

/* the schedule inside a panel: a clickable row per installment */
.fn-p-b .fn-table { font-size: 13.5px; }
.fn-p-b .fn-table td { padding: 8px 6px; }
.fn-p-b .fn-table td:last-child { padding-inline-end: 0; }
.fn-table td.fn-end-cell { text-align: end; white-space: nowrap; }
.fn-table td.fn-chev { color: var(--lm-d-subtle); padding-inline: 0; }
.fn-link { border: 0; padding: 0; background: none; font: inherit; font-weight: 700; color: var(--lm-d-info); cursor: pointer; }
.fn-kv b .fn-tag { margin-inline-start: 4px; vertical-align: middle; }

/* a hand-built list keeps codes, dates and figures on one line */
.fn-table td bdi, .fn-table td .fn-tag, .fn-table td.fn-nowrap { white-space: nowrap; }

/* a hand-built list's foot: count + pages */
.fn-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-block-start: 1px solid var(--lm-d-divider); }
.fn-table.is-loading { opacity: .55; }
.fn-list > .fn-table th, .fn-list > .fn-table td { padding-inline: 8px; }
.fn-table td.fn-wrap { max-inline-size: 150px; overflow-wrap: anywhere; }

/* a record page lays the panel's sections in two columns */
.fn-doc-cols { column-count: 2; column-gap: 24px; }
.fn-doc-cols > * { break-inside: avoid; margin-block-end: 14px; }
@media (max-width: 1023.98px) { .fn-doc-cols { column-count: 1; } }

/* a hub: the week's card and the aside */
.fn-hub { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }
@media (max-width: 1023.98px) { .fn-hub { grid-template-columns: minmax(0, 1fr); } }
.fn-bars { display: flex; align-items: flex-end; gap: 14px; block-size: 190px; padding-block-start: 8px; }
.fn-bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; block-size: 100%; }
.fn-bars i { display: block; inline-size: 100%; max-inline-size: 46px; block-size: var(--fn-h, 6px); border-radius: 8px 8px 3px 3px; background: var(--lm-d-info-soft); border: 1px solid var(--lm-d-border); }
.fn-bars .is-today i { background: var(--lm-d-accent); border-color: var(--lm-d-accent); }
.fn-bars b { font-size: 13px; }
.fn-bars span { font-size: 12px; color: var(--lm-d-muted); }
.fn-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .fn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fn-tile { border: 1px solid var(--lm-d-border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.fn-tile-l { font-size: 13px; color: var(--lm-d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-tile > b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.fn-tile > a { font-size: 13px; font-weight: 700; text-decoration: none; }

/* sortable headers of a hand-built list, and an inline select on a toolbar */
.fn-table th.fn-sortable { cursor: pointer; }
.fn-table th .fn-sort { color: var(--lm-d-info); }
.fn-select.fn-select-inline { inline-size: auto; min-inline-size: 160px; margin: 0; }

/* a load line: the figures, then its meter */
.fn-line.fn-line--flat { border-block-end: 0; padding-block-end: 4px; }
.fn-load-note { margin-block: 4px 10px; }

/* a documents row inside a section */
.fn-docs-row { margin-block-start: 6px; }

/* a note thread */
.fn-msg { border: 1px solid var(--lm-d-divider); border-radius: 12px; padding: 8px 12px; font-size: 13.5px; }
.fn-msg .fn-who { display: block; font-size: 12.5px; color: var(--lm-d-muted); }

/* a vertical timeline (a contract's story) */
.fn-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fn-tl li { position: relative; padding-inline-start: 24px; padding-block-end: 14px; font-size: 13.5px; }
.fn-tl li::before { content: ''; position: absolute; inset-inline-start: 5px; inset-block: 16px 0; border-inline-start: 2px solid var(--lm-d-divider); }
.fn-tl li:last-child { padding-block-end: 0; }
.fn-tl li:last-child::before { display: none; }
.fn-tl li > i { position: absolute; inset-inline-start: 0; inset-block-start: 5px; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--lm-d-info); }
.fn-tl li > i.is-ok { background: var(--lm-d-ok); }
.fn-tl li > i.is-danger { background: var(--lm-d-danger); }
.fn-tl li > i.is-quiet { background: var(--lm-d-dot); }

/* a group heading row inside a list */
.fn-table tr.fn-grp > td, .fn-list .fn-ta-row.fn-grp > td { background: var(--lm-d-chip-bg); font-weight: 700; }

/* the panel foot: with three buttons the decision takes its own full row */
.fn-p-f:has(> :nth-child(3)):not(:has(.is-icon)) { flex-wrap: wrap; }
.fn-p-f:has(> :nth-child(3)):not(:has(.is-icon)) > .is-primary { order: -1; flex-basis: 100%; }
.fn-p-f .fn-more { position: relative; }

/* a panel that needs room (an order's schedule) */
.fn-split.has-open.is-wide { grid-template-columns: minmax(0, 1fr) 520px; }

/* a Filament table in a finance list: the money columns read as figures */
.fn-list .fi-ta-cell .fi-ta-text-item-label { font-variant-numeric: tabular-nums; }
.fn-list .fi-ta-row.fn-row-open > td { background: var(--lm-d-row-hl); }
.fn-list .fi-ta-row.fn-row-open > td:first-child { box-shadow: inset -3px 0 0 var(--lm-d-accent); }
[dir='ltr'] .fn-list .fi-ta-row.fn-row-open > td:first-child { box-shadow: inset 3px 0 0 var(--lm-d-accent); }
/* compact cells: the list shares its card with the panel */
.fn-list .fi-ta-cell { padding-inline: 4px; }
.fn-list .fi-ta-cell .fi-ta-text, .fn-list .fi-ta-cell .fi-ta-col { padding-inline: 4px; }
.fn-list .fi-ta-header-cell { padding-inline: 8px 4px; }

/* a wrapped cell stays readable, never wider than a third of the list */
.fn-list .fi-ta-cell .fi-ta-text.fi-wrapped { min-inline-size: 170px; max-inline-size: 280px; }

/* the chips on the table's toolbar keep one line and scroll sideways */
.fn-list .fn-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-inline-size: 0; }

/* the row's own actions live in the panel beside the list */
.fn-list.fn-no-row-actions .fi-ta-cell:has(> .fi-ta-actions), .fn-list.fn-no-row-actions .fi-ta-cell:has(.fi-ta-actions), .fn-list.fn-no-row-actions .fi-ta-actions-header-cell, .fn-list.fn-no-row-actions thead th:last-child:empty { display: none; }

.dark .fn select, .dark .fn input, .dark .fn textarea { color-scheme: dark; }

/* ── 20. design parity (review of 28-9-2026 against the approved shots) ──
   Density — the whole page reads without scrolling (Kamal 28-9: «كل الداتا تظهر قدامي»);
   one status pill (rounded · dot · soft fill) in lists too; a quiet table toolbar. */
.fn-page .fi-page-header-main-ctn { row-gap: 12px; padding-block: 14px 12px; }
.fn-page .fi-page-content { row-gap: 12px; }
.fn-page .fi-header-heading { font-size: 24px; }
.fn-page .fi-header-subheading { margin-block-start: 2px; font-size: 13.5px; }
.fn-page .fi-header-actions-ctn .fi-btn { min-block-size: 38px; border-radius: 10px; padding-inline: 14px; }
.fn { gap: 12px; }
.fn-strip-c { padding: 8px 16px; }
.fn-k-v { font-size: 22px; line-height: 1.25; }
.fn-card-h { padding: 8px 16px; }
.fn-card-t { font-size: 17px; }
.fn-card-t span { font-size: 13px; }
:is(.fn-list, .fn-doc-main) .fi-ta-header-cell { padding-block: 9px; }
:is(.fn-list, .fn-doc-main) .fi-ta-text:not(.fi-inline),
:is(.fn-list, .fn-doc-main) .fi-ta-cell:has(.fi-ta-actions),
:is(.fn-list, .fn-doc-main) .fi-ta-icon:not(.fi-inline) { padding-block: 8px; }
:is(.fn-list, .fn-doc-main) .fi-ta-group-header { padding-block: 6px; }
.fn-p-h { padding: 10px 16px 8px; }
.fn-p-b { padding: 10px 16px; gap: 10px; }
.fn-p-f { padding: 10px 16px; }

/* the panel head: title · pill on one line, the close button at the far end */
.fn-p-t { flex-wrap: nowrap; min-inline-size: 0; }
.fn-p-t { align-items: flex-start; }
.fn-p-t > span:first-child { min-inline-size: 0; line-height: 1.35; }
.fn-p-t > .fn-tag, .fn-p-t > .fn-p-x { margin-block-start: 1px; }
.fn-p-t > .fn-tag { flex: 0 0 auto; }

/* a list's status reads like the panel's: rounded, a dot, a soft fill */
:is(.fn-list, .fn-doc-main) .fi-ta-cell .fi-badge {
    min-block-size: 24px; padding-inline: 10px; gap: 6px; border-radius: 999px; box-shadow: none;
    font-size: 12.5px; font-weight: 700; background: var(--lm-d-quiet-bg); color: var(--lm-d-muted);
}
:is(.fn-list, .fn-doc-main) .fi-ta-cell .fi-badge::before { content: ''; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
:is(.fn-list, .fn-doc-main) .fi-ta-cell .fi-badge.fi-color-success { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
:is(.fn-list, .fn-doc-main) .fi-ta-cell .fi-badge:is(.fi-color-info, .fi-color-primary) { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
:is(.fn-list, .fn-doc-main) .fi-ta-cell .fi-badge.fi-color-warning { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
:is(.fn-list, .fn-doc-main) .fi-ta-cell .fi-badge.fi-color-danger { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
:is(.fn-list, .fn-doc-main) .fi-ta-cell .fi-badge.fi-color-gray { background: var(--lm-d-quiet-bg); color: var(--lm-d-muted); }

/* a quiet toolbar: no row checkboxes, no per-page picker, a sort arrow only where the list is sorted */
.fn-list .fi-ta-selection-cell, .fn-list .fi-ta-cell:has(> .fi-ta-record-checkbox), .fn-list th:has(.fi-ta-page-checkbox) { display: none; }
.fn-list .fi-pagination-records-per-page-select-ctn { display: none; }
.fn-list .fi-ta-header-cell:not(.fi-ta-header-cell-sorted) .fi-ta-header-cell-sort-btn .fi-icon { opacity: 0; }
.fn-list .fi-ta-header-cell:not(.fi-ta-header-cell-sorted) .fi-ta-header-cell-sort-btn:hover .fi-icon { opacity: 1; }

.fn-line-stack { display: grid; gap: 2px; }
/* a finance dialog confirms in the one orange, like the page's own decision */
.fn-page .fi-modal-footer .fi-btn:is(.fi-color-primary, .fi-color-success) { background: var(--lm-d-accent); color: var(--lm-d-on-accent); border-radius: 10px; font-weight: 700; }
.fn-page .fi-modal-footer .fi-btn:is(.fi-color-primary, .fi-color-success):hover { filter: brightness(.96); }
.fn-page .fi-modal-footer .fi-btn.fi-color-gray { border-radius: 10px; font-weight: 700; }
/* the «فلاتر · N» button carries its count in its words — no floating badge */
.fn-list .fi-ta-header-toolbar .fi-btn-badge-ctn { display: none; }
.fn-list .fi-ta-header-toolbar .fi-btn:not(.fi-icon-btn) { border-radius: 10px; font-weight: 700; }
.fn-list .fn-chips { flex-wrap: wrap; overflow: visible; }
.fn-k-cur { margin-inline-start: 4px; font-size: 14px; font-weight: 700; }
.fn-card-pill { display: inline-flex; align-items: center; gap: 8px; min-block-size: 32px; padding-inline: 14px; border-radius: 999px; background: var(--lm-d-ink); color: var(--lm-d-surface); font-size: 13.5px; font-weight: 700; }
.fn-card-pill::before { content: ''; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--lm-d-accent); }
.fn-ltr-cell { text-align: end; }
/* phone: the one orange stays full; the others shrink to their icon on one row (approved phone shots) */
@media (max-width: 640px) {
    .fn-page .fi-header-actions-ctn { flex-wrap: wrap; gap: 8px; }
    .fn-page .fi-header-actions-ctn .fi-btn:not(.fi-color-primary):not(.fi-color-success) { padding-inline: 10px; min-inline-size: 40px; font-size: 0; gap: 0; }
    .fn-page .fi-header-actions-ctn .fi-btn:is(.fi-color-primary, .fi-color-success) { flex: 1 1 100%; order: -1; justify-content: center; }
}
.fn-ip .fn-ready-pill { display: flex; inline-size: 100%; background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.fn-ip .fn-ready-amount { display: block; margin-block-start: 6px; font-size: 17px; font-variant-numeric: tabular-nums; }
.fn-ip .ip-kpi > .ip-kpi-l + .ip-help { display: none; } /* the type's long description lives in its tooltip-free title; the card reads title · pill · amount */
.fn-ip .ip-kpi > .ip-kpi-l { font-weight: 700; color: var(--lm-d-ink); }

/* ── 21. «الأقساط › حسب البند» (ITEM-INST-1): the pickers, the month → project list, the items ranked by money ── */
.fn-ibi { display: flex; flex-direction: column; min-inline-size: 0; }
.fn-ibi-bar { align-items: center; }
.fn-ibi-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.fn-ibi-sum { display: none; }
.fn-ibi-search { inline-size: min(240px, 100%); }
.fn-ibi-car { color: var(--lm-d-subtle); font-size: 12px; }

/* a picker: a button that reads like a field, its list drops under it */
.fn-pk { position: relative; }
.fn-pk-b { display: inline-flex; align-items: center; gap: 8px; min-block-size: 38px; padding-inline: 12px; border: 1px solid var(--lm-d-control-edge); border-radius: 10px; background: var(--lm-d-surface); color: var(--lm-d-ink); font: inherit; font-size: 13.5px; white-space: nowrap; cursor: pointer; }
.fn-pk-b:hover { background: var(--lm-d-hover); }
.fn-pk-b[aria-expanded='true'] { border-color: var(--lm-d-accent); box-shadow: 0 0 0 3px var(--lm-d-accent-soft); }
.fn-pk-b > b { font-weight: 700; }
.fn-pk-l { color: var(--lm-d-muted); }
.fn-pk-add { color: var(--lm-d-info); font-weight: 700; font-size: 13px; }
.fn-pk-month select { border: 0; background: transparent; color: var(--lm-d-ink); font: inherit; font-weight: 700; padding-inline-end: 4px; cursor: pointer; }
.fn-tok { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px; border-radius: 999px; background: var(--lm-d-accent-soft); color: var(--lm-d-accent-ink); font-weight: 700; font-size: 13px; }
.fn-tok-x { opacity: .7; cursor: pointer; }
.fn-tok-x:hover { opacity: 1; }
.fn-dd { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; z-index: 30; inline-size: 400px; max-inline-size: calc(100vw - 32px); background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 14px; box-shadow: 0 14px 40px var(--lm-d-sheet-shadow); }
.fn-dd.is-narrow { inline-size: 280px; }
.fn-dd-q { display: flex; align-items: center; gap: 8px; margin: 10px; min-block-size: 40px; padding-inline: 10px; border: 1px solid var(--lm-d-control-edge); border-radius: 10px; color: var(--lm-d-muted); }
.fn-dd-q:focus-within { border-color: var(--lm-d-accent); box-shadow: 0 0 0 3px var(--lm-d-accent-soft); }
.fn-dd-q input { flex: 1; min-inline-size: 0; border: 0; outline: 0; background: transparent; color: var(--lm-d-ink); font: inherit; font-size: 13.5px; }
.fn-dd-list { max-block-size: 320px; overflow-y: auto; scrollbar-width: thin; }
.fn-dd-o { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 9px 14px; border-block-start: 1px solid var(--lm-d-divider); cursor: pointer; }
.fn-dd-o.is-simple { grid-template-columns: auto minmax(0, 1fr); }
.fn-dd-o:hover { background: var(--lm-d-hover); }
.fn-dd-o.is-on { background: var(--lm-d-accent-soft); }
.fn-dd-o > b { font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fn-dd-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.fn-dd-s { grid-column: 2 / -1; font-size: 12.5px; color: var(--lm-d-muted); }
.fn-dd-none { padding: 14px; color: var(--lm-d-muted); font-size: 13px; }
.fn-dd-note { margin: 0 10px 10px; }
.fn-dd-f { display: flex; gap: 8px; padding: 10px 14px; border-block-start: 1px solid var(--lm-d-divider); }
.fn-cb { inline-size: 18px; block-size: 18px; margin: 0; accent-color: var(--lm-d-accent); }
.fn-switch { display: inline-flex; align-items: center; gap: 8px; min-block-size: 38px; padding: 0; border: 0; background: none; color: var(--lm-d-muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.fn-switch > i { position: relative; inline-size: 34px; block-size: 20px; border-radius: 99px; background: var(--lm-d-quiet-bg); border: 1px solid var(--lm-d-border); }
.fn-switch > i::after { content: ''; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--lm-d-surface); box-shadow: 0 1px 2px var(--lm-d-shadow); }
.fn-switch.is-on { color: var(--lm-d-ink); }
.fn-switch.is-on > i { background: var(--lm-d-accent); border-color: var(--lm-d-accent); }
.fn-switch.is-on > i::after { inset-inline-start: 16px; }

/* the list: a month section row, a project row with its subtotal, then the installments */
.fn-table .fn-end { text-align: end; white-space: nowrap; }
.fn-ibi-table tr.fn-ibi-sec > td { background: var(--lm-d-chip-bg); border-block-end: 1px solid var(--lm-d-border); padding-block: 9px; cursor: default; }
.fn-ibi-table tr.fn-ibi-sec .fn-tag { margin-inline-end: 4px; }
.fn-ibi-t { font-size: 15px; font-weight: 700; }
.fn-ibi-table tr.fn-ibi-prj > td { padding-block: 8px; border-block-end: 1px solid var(--lm-d-border); cursor: default; }
.fn-ibi-table tr.fn-ibi-sec:hover > td { background: var(--lm-d-chip-bg); }
.fn-ibi-table tr.fn-ibi-prj:hover > td { background: transparent; }
.fn-ibi-pn { font-size: 14.5px; font-weight: 700; }
.fn-ibi-table tr.fn-ibi-prj .fn-tag { margin-inline-start: 6px; }
.fn-ibi-table tr.fn-ibi-row > td:first-child { padding-inline-start: 26px; }
.fn-ibi-table tr.fn-ibi-none > td { color: var(--lm-d-muted); font-size: 13px; cursor: default; }
.fn-ibi-table tr.fn-ibi-none:hover > td { background: transparent; }
.fn-ibi-empty { padding-block: 48px; }

/* the items ranked by money (the panel with nothing open) */
.fn-rk { display: flex; flex-direction: column; }
.fn-rk-lg { display: flex; gap: 14px; font-size: 12.5px; color: var(--lm-d-muted); }
.fn-rk-lg span::before { content: ''; display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 3px; margin-inline-end: 5px; vertical-align: -1px; background: var(--lm-d-info); }
.fn-rk-lg span.is-a::before { background: var(--lm-d-accent); }
.fn-rk-i { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 7px 10px 10px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--lm-d-ink); font: inherit; text-align: start; cursor: pointer; }
.fn-rk-i:hover { background: var(--lm-d-hover); }
.fn-rk-i.is-on { border-color: var(--lm-d-accent-line); background: var(--lm-d-accent-soft); }
.fn-rk-i > b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-rk-v { font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; text-align: end; }
.fn-rk-s { font-size: 12.5px; color: var(--lm-d-muted); }
.fn-rk-w { font-size: 12.5px; font-weight: 600; color: var(--lm-d-accent-ink); text-align: end; }
.fn-rk-bar { position: absolute; inset-inline: 10px; inset-block-end: 3px; display: flex; block-size: 3px; border-radius: 9px; background: var(--lm-d-quiet-bg); overflow: hidden; }
.fn-rk-bar > i { display: block; block-size: 100%; inline-size: var(--fn-b, 0%); background: var(--lm-d-info); }
.fn-rk-bar > i.is-a { inline-size: var(--fn-a, 0%); background: var(--lm-d-accent); }

/* under 1024px the ranking never covers the list: the sheet opens only for an installment */
@media (max-width: 1023.98px) {
    .fn-split.is-item:not(.has-row) .fn-panel { display: none; }
}

/* the hand-built list scrolls inside the card, beside a panel that keeps its place */
@media (min-width: 1024px) {
    .fn-card.is-fill > .fn-split.is-item { align-items: stretch; }
}

@media (max-width: 640px) {
    /* the choices fold into one line that opens them */
    .fn-ibi-sum { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-inline-size: 0; min-block-size: 44px; padding-inline: 12px; border: 1px solid var(--lm-d-control-edge); border-radius: 10px; background: var(--lm-d-surface); color: var(--lm-d-ink); font: inherit; font-size: 13.5px; text-align: start; }
    .fn-ibi-sum > b { flex: 1; min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fn-ibi-picks { display: none; order: 3; inline-size: 100%; flex-direction: column; align-items: stretch; }
    .fn-ibi-picks.is-open { display: flex; }
    .fn-ibi-picks .fn-pk-b { inline-size: 100%; min-block-size: 44px; }
    .fn-ibi-print { inline-size: 44px; padding: 0; justify-content: center; }
    .fn-ibi-print > span { display: none; }
    .fn-ibi-search { inline-size: 100%; order: 4; }
    .fn-dd { position: fixed; inset-inline: 16px; inset-block: auto 16px; inline-size: auto; max-block-size: 80dvh; display: flex; flex-direction: column; }
    .fn-dd-list { max-block-size: none; flex: 1; }
    /* a month / project row stays one line; an installment is a two-line card */
    .fn-ibi-table tr.fn-ibi-sec, .fn-ibi-table tr.fn-ibi-prj { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
    .fn-ibi-table tr.fn-ibi-sec { background: var(--lm-d-chip-bg); }
    .fn-ibi-table tr.fn-ibi-sec > td, .fn-ibi-table tr.fn-ibi-prj > td { display: block; inline-size: auto; padding: 0; border: 0; background: transparent; }
    .fn-ibi-table tr.fn-ibi-prj > td:empty { display: none; }
    .fn-ibi-table tr.fn-ibi-sec > td:nth-child(2), .fn-ibi-table tr.fn-ibi-prj > td:nth-child(2) { margin-inline-start: auto; }
    .fn-ibi-table tr.fn-ibi-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
    .fn-ibi-table tr.fn-ibi-row > td { inline-size: auto; padding: 0; }
    .fn-ibi-table tr.fn-ibi-row > td:first-child { padding-inline-start: 0; }
    .fn-ibi-table tr.fn-ibi-row > td[data-label]::before { content: none; }
    .fn-ibi-table tr.fn-ibi-row > td:nth-child(1) { grid-area: 1 / 1; }
    .fn-ibi-table tr.fn-ibi-row > td:nth-child(2) { display: none; }
    .fn-ibi-table tr.fn-ibi-row > td:nth-child(3) { grid-area: 1 / 2; }
    .fn-ibi-table tr.fn-ibi-row > td:nth-child(4) { grid-area: 2 / 1; display: flex; gap: 8px; align-items: baseline; }
    .fn-ibi-table tr.fn-ibi-row > td:nth-child(5) { grid-area: 2 / 2; justify-self: end; }
    .fn-ibi-table tfoot { display: block; }
    .fn-ibi-table tfoot tr { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; padding: 10px 12px; background: var(--lm-d-info-soft); }
    .fn-ibi-table tfoot td { display: block; inline-size: auto; padding: 0; }
    .fn-ibi-table tfoot td:empty { display: none; }
}

/* ── 21. a list that fills its card (Kamal 29-9-2026, «مش بعرف اتعمل اسكرول … ولا انقل
   للشاشه التانيه»): the grid row holds the list to the card's height — before, the list
   grew past it (align-items: start) and the card clipped the rows and the pages under
   it. A Filament table inside scrolls its rows under a fixed header, and its pages
   stay in view at the foot. ── */
@media (min-width: 1024px) {
    .fn-card.is-fill > .fn-split { align-items: stretch; }
    .fn-card.is-fill .fn-list > .fi-ta, .fn-card.is-fill .fn-list > .fi-ta > .fi-ta-ctn { block-size: 100%; }
    .fn-card.is-fill .fn-list .fi-ta-main { display: flex; flex-direction: column; block-size: 100%; min-block-size: 0; }
    .fn-card.is-fill .fn-list .fi-ta-main > * { flex: none; }
    .fn-card.is-fill .fn-list .fi-ta-main > .fi-ta-content-ctn { flex: 1 1 auto; min-block-size: 0; overflow: auto; overscroll-behavior: contain; }
    .fn-card.is-fill .fn-list .fi-ta-table > thead > tr > th { position: sticky; inset-block-start: 0; z-index: 2; }
    .fn-card.is-fill .fn-list .fi-ta-main > .fi-pagination { border-block-start: 1px solid var(--lm-d-divider); background: var(--lm-d-surface); }
}
/* how many rows a page shows — on the lists that ask for it */
.fn-list.is-paged .fi-pagination-records-per-page-select-ctn { display: revert; }

/* the installment beside the list gets room (Kamal 29-9: «كبّر عرض القايمه الجانبيه») */
.fn-split.is-roomy.has-row, .fn-split.is-roomy.is-opening { grid-template-columns: minmax(0, 1fr) clamp(420px, 40%, 600px); }
.fn-split.is-opening .fn-panel { display: flex; }
.fn-split.is-opening .fn-list { border-inline-end: 1px solid var(--lm-d-divider); }
.fn-panel { position: relative; }
@media (min-width: 1024px) { .fn-card.is-fill .fn-panel { position: relative; } }
@media (max-width: 1023.98px) {
    .fn-split.is-roomy.has-row, .fn-split.is-roomy.is-opening { grid-template-columns: minmax(0, 1fr); }
    .fn-split.is-opening .fn-list { border-inline-end: 0; }
    .fn-split.is-opening .fn-panel { position: fixed; inset-inline: 0; inset-block: auto 0; z-index: 45; min-block-size: 50dvh; max-block-size: 82dvh; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 40px var(--lm-d-sheet-shadow); }
}

/* the panel's placeholder while the installment loads */
.fn-p-loading { position: absolute; inset: 0; z-index: 5; flex-direction: column; gap: 12px; padding: 18px; background: var(--lm-d-surface); border-radius: inherit; }
.fn-sk { display: block; block-size: 14px; border-radius: 7px; background: var(--lm-d-quiet-bg); animation: fn-sk 1.1s ease-in-out infinite alternate; }
.fn-sk.is-title { block-size: 22px; inline-size: 60%; }
.fn-sk.is-sub { inline-size: 40%; }
.fn-sk-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fn-sk.is-box { block-size: 64px; border-radius: 12px; }
@keyframes fn-sk { from { opacity: 1; } to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .fn-sk { animation: none; } }

/* ── 22. phones (FIN-MOBILE-1, Kamal 29-9-2026: «راجع شاشات ريسبونسيف للموبايل للموديول
   كامل المالي»). Measured at 390px on every «مالي» page:
   · the table toolbar laid the search box ON TOP of the file/state chips — the chips
     now keep one sideways-scrolling line and the search + «فلاتر» take the next line;
   · a Filament list showed two columns and hid the money and the state off-screen —
     each row is now a card: the first cell across the top, the rest in two columns,
     each under its column's name (data-label, resources/js/finance-cards.js);
   · a panel that is not an opened row (the collectors' load, the items ranked by
     money) opened as a sheet over the list on arrival — it now sits under the list. ── */
@media (max-width: 1023.98px) {
    :is(.fn-list, .fn-doc-main) .fi-ta-header-ctn { flex-wrap: wrap; row-gap: 0; padding-inline: 12px; }
    :is(.fn-list, .fn-doc-main) .fi-ta-header-ctn > .fn-chips,
    :is(.fn-list, .fn-doc-main) .fi-ta-header-ctn > .fi-ta-header { flex: 1 1 100%; min-inline-size: 0; }
    .fn-list .fi-ta-header-ctn .fn-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: 10px 2px; }
    .fn-list .fi-ta-header-ctn .fn-chips > * { flex: none; }
    :is(.fn-list, .fn-doc-main) .fi-ta-header-toolbar { flex: 1 1 100%; min-inline-size: 0; }
    :is(.fn-list, .fn-doc-main) .fi-ta-header-toolbar > div:last-child { flex: 1 1 auto; min-inline-size: 0; }
    :is(.fn-list, .fn-doc-main) .fi-ta-search-field { flex: 1 1 auto; max-inline-size: none; min-inline-size: 0; }

    .fn-split.is-inline-panel .fn-panel,
    .fn-split.has-open.is-inline-panel .fn-panel { display: flex; position: static; inset: auto; z-index: auto; max-block-size: none; min-block-size: 0; border-radius: 0; box-shadow: none; border-block-start: 1px solid var(--lm-d-divider); }
}
@media (max-width: 640px) {
    .fn-list .fi-ta-content-ctn { overflow: visible; }
    .fn-list .fi-ta-table, .fn-list .fi-ta-table > tbody { display: block; inline-size: 100%; }
    .fn-list .fi-ta-table > thead { display: none; }
    .fn-list .fi-ta-table > tbody > tr.fi-ta-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; padding: 12px 14px; border-block-end: 1px solid var(--lm-d-divider); }
    .fn-list .fi-ta-table > tbody > tr.fi-ta-row > td { display: block; min-inline-size: 0; padding: 0; border: 0; }
    .fn-list .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-selection-cell { display: none; }
    .fn-list .fi-ta-row > td:nth-child(1 of :not(.fi-ta-selection-cell)) { grid-column: 1 / -1; }
    .fn-list .fi-ta-row > td:has(.fi-ta-actions) { grid-column: 1 / -1; }
    .fn-list .fi-ta-row > td[data-label]:not(:nth-child(1 of :not(.fi-ta-selection-cell)))::before { content: attr(data-label); display: block; margin-block-end: 1px; font-size: 12px; font-weight: 500; color: var(--lm-d-muted); }
    .fn-list .fi-ta-row > td[data-label='']::before { content: none; }
    .fn-list .fi-ta-cell :is(.fi-ta-text, .fi-ta-col, .fi-ta-icon, .fi-ta-text:not(.fi-inline)) { padding: 0; }
    .fn-list .fi-ta-cell .fi-ta-text.fi-wrapped { min-inline-size: 0; max-inline-size: none; }
    /* in a card every value starts under its name — no end/centre alignment from the table */
    .fn-list .fi-ta-row > td :is(.fi-align-end, .fi-align-center, .fi-align-right, .fi-align-left) { justify-content: flex-start; text-align: start; }
    .fn-list .fi-ta-row > td { text-align: start; }
    .fn-list .fi-ta-row.fn-row-open { background: var(--lm-d-row-hl); }
    .fn-list .fi-ta-row.fn-row-open > td:first-child { box-shadow: none; }
    .fn-list .fi-pagination { padding-inline: 12px; }
}

/* ── 23. more rows on the screen (Kamal 29-9-2026, «القايمه صغيره اوي … عدد الصفوف الي
   بيظهر قليل»): denser rows, and once the rows are scrolled the page's title and
   figures strip fold away so the list takes the screen (body.fn-list-scrolled,
   resources/js/finance-lists.js); back at the first row they return. ── */
:is(.fn-list, .fn-doc-main) .fi-ta-text:not(.fi-inline),
:is(.fn-list, .fn-doc-main) .fi-ta-cell:has(.fi-ta-actions),
:is(.fn-list, .fn-doc-main) .fi-ta-icon:not(.fi-inline) { padding-block: 5px; }
.fn-list .fi-ta-cell .fi-ta-text-description, .fn-list .fi-ta-cell .fi-ta-text-item-description { line-height: 1.35; }
@media (min-width: 1024px) {
    body.fn-list-scrolled .fn-page:has(.fn-card.is-fill) :is(.fi-header, .fn-strip) { display: none; }
    body.fn-list-scrolled .fn-page:has(.fn-card.is-fill) .fi-page-header-main-ctn { padding-block: 8px 0; row-gap: 0; }
}

/* a long name or project keeps ONE line on a wide screen (the row opens in full in the panel) */
@media (min-width: 641px) {
    .fn-list .fi-ta-cell .fi-ta-text.fi-wrapped { max-inline-size: 300px; }
    .fn-list .fi-ta-cell .fi-ta-text.fi-wrapped :is(.fi-ta-text-item, .fi-ta-text-item-label, .fi-ta-text-description, p) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* the filter sheet (FIN-FILTERS-1): the fields scroll, the decision stays at the foot */
body:has(.fn-page) .fi-modal.fi-modal-slide-over :is(.fi-modal-header) { border-block-end: 1px solid var(--lm-d-divider); }
body:has(.fn-page) .fi-modal.fi-modal-slide-over .fi-modal-footer { border-block-start: 1px solid var(--lm-d-divider); background: var(--lm-d-surface); }
body:has(.fn-page) .fi-modal.fi-modal-slide-over .fi-modal-footer .fi-btn { min-block-size: 42px; border-radius: 10px; font-weight: 700; }
body:has(.fn-page) .fi-modal.fi-modal-slide-over .fi-ta-filters { gap: 18px; }
body:has(:is(.fn-page, .hx-extracts)) .fi-modal.fi-modal-slide-over .fi-modal-footer .fi-btn.fi-color-danger { background: var(--lm-d-surface); color: var(--lm-d-danger); box-shadow: inset 0 0 0 1px var(--lm-d-border); }
body:has(:is(.fn-page, .hx-extracts)) .fi-modal.fi-modal-slide-over .fi-modal-footer .fi-btn:is(.fi-color-primary, .fi-color-success) { background: var(--lm-d-accent); color: var(--lm-d-on-accent); }