/* ─────────────────────────────────────────────────────────────────────
   HOMEi Sales — «المبيعات» on the house design system (SALES-DS-1,
   Kamal 2026-10-02: «راجع موديول المبيعات كله وعدل التصميم للديزاين سيستم
   بتاعنا واضغط الداتا ميبقاش فيه اسكرول كتير لتحت»).

   The stock Filament screens of the section — طلبات البيع, طلبات الأسهم,
   طلبات إعادة البيع, تقرير المبيعات (lists) and their record pages — wear
   the house look: the light blue-grey page, navy ink, the table as ONE
   ruled card, the status tabs as chips with their counts, the orange
   decision, and dense rows / dense forms so a screen holds more and the
   page scrolls less.

   Colours: the design system's own tokens (--lm-d-* in 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 the page classes `.sx-page` (+ `.sx-list-page` / `.sx-doc-page`).

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

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

/* the header's decisions: outline buttons, the create / save is the design's orange */
.sx-page .fi-header-actions-ctn .fi-btn {
    min-block-size: 40px;
    border-radius: 12px;
    padding-inline: 14px;
    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;
}
.sx-page .fi-header-actions-ctn .fi-btn .fi-icon { color: currentColor; }
.sx-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); }
.sx-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); }
.sx-page .fi-header-actions-ctn .fi-btn.fi-color-warning { color: var(--lm-d-accent-ink); background: var(--lm-d-accent-soft); box-shadow: inset 0 0 0 1px var(--lm-d-accent-line); }
.sx-page .fi-header-actions-ctn .fi-btn.fi-color-info { color: var(--lm-d-info); }

/* the form's own save row (sticky at the foot): the save is orange, the rest outline */
.sx-doc-page .fi-sc-actions .fi-btn { min-block-size: 40px; border-radius: 12px; font-weight: 700; }
.sx-doc-page .fi-sc-actions .fi-btn.fi-color-primary { background: var(--lm-d-accent); color: var(--lm-d-on-accent); }
.sx-doc-page .fi-sc-actions .fi-btn.fi-color-gray { background: var(--lm-d-surface); color: var(--lm-d-ink); box-shadow: inset 0 0 0 1px var(--lm-d-control-edge); }

/* ── the status tabs of a list: chips with counts, on the page's start ── */
.sx-list-page .fi-tabs:not(.fi-contained) {
    justify-content: flex-start;
    margin-inline: 0;
    gap: 6px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    --tw-ring-shadow: 0 0 transparent;
}
.sx-list-page .fi-tabs .fi-tabs-item {
    flex: 0 0 auto;
    min-block-size: 36px;
    padding-inline: 14px;
    border-radius: 18px;
    border: 1px solid var(--lm-d-border);
    background: var(--lm-d-surface);
    color: var(--lm-d-ink);
    font-size: 13.5px;
    font-weight: 700;
}
.sx-list-page .fi-tabs .fi-tabs-item .fi-tabs-item-label { color: inherit; }
.sx-list-page .fi-tabs .fi-tabs-item:hover { border-color: var(--lm-d-control-edge); background: var(--lm-d-surface); }
.sx-list-page .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); }
.sx-list-page .fi-tabs .fi-tabs-item.fi-active .fi-tabs-item-label { color: var(--lm-d-tab-on-ink); }
.sx-list-page .fi-tabs .fi-tabs-item .fi-badge { min-inline-size: 22px; justify-content: center; background: var(--lm-d-chip-bg); color: var(--lm-d-ink); box-shadow: none; font-variant-numeric: tabular-nums; font-size: 12px; }
.sx-list-page .fi-tabs .fi-tabs-item.fi-active .fi-badge { background: var(--lm-d-tab-on-ink); color: var(--lm-d-tab-on-bg); }
.sx-list-page .fi-tabs .fi-tabs-item:focus-visible { outline: 2px solid var(--lm-d-info); outline-offset: 2px; }

/* ── the table: one card with the blue rule, dense rows ── */
.sx-page .fi-ta-ctn {
    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);
    --tw-ring-shadow: 0 0 transparent;
    overflow: hidden;
}
.sx-page .fi-ta-header-toolbar { padding-block: 8px; padding-inline: 14px; gap: 8px; }
.sx-page .fi-ta-search-field { max-inline-size: 280px; }
.sx-page .fi-ta-header-cell { background: var(--lm-d-surface); color: var(--lm-d-ink); font-size: 13px; font-weight: 700; padding-block: 9px; padding-inline: 8px; white-space: nowrap; }
.sx-page .fi-ta-header-cell .fi-ta-header-cell-label { color: var(--lm-d-ink); }
.sx-page .fi-ta-cell { color: var(--lm-d-ink); }
.sx-page .fi-ta-text:not(.fi-inline) { padding-block: 7px; padding-inline: 8px; }
.sx-page .fi-ta-text-item, .sx-page .fi-ta-text-item-label { font-size: 13.5px; color: var(--lm-d-ink); }
.sx-page .fi-ta-text-description { font-size: 12px; color: var(--lm-d-muted); }
.sx-page .fi-ta-icon:not(.fi-inline) { padding-block: 7px; padding-inline: 8px; }
.sx-page .fi-ta-cell .fi-ta-col, .sx-page .fi-ta-selection-cell, .sx-page .fi-ta-actions-cell { padding-block: 0; }
.sx-page .fi-ta-selection-cell { padding-inline: 12px 6px; }
.sx-page .fi-ta-row:hover > td { background: var(--lm-d-hover); }
.sx-page .fi-ta-row > td { border-color: var(--lm-d-divider); }
.sx-page .fi-ta-summary-row td, .sx-page .fi-ta-summary-header-cell { background: var(--lm-d-info-soft); color: var(--lm-d-ink); font-weight: 700; }
.sx-page .fi-ta-text-summary { padding-block: 7px; }
.sx-page .fi-pagination { padding-block: 8px; padding-inline: 14px; }
.sx-num { font-variant-numeric: tabular-nums; }

/* a row's money reads as money: tabular, bold */
.sx-page :is(.fi-ta-cell-items\.unit-price, .fi-ta-cell-share-price, .fi-ta-cell-resale-price, .fi-ta-cell-total) .fi-ta-text-item { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── the record page (create / edit): dense sections ── */
.sx-doc-page .fi-sc-has-gap { gap: 14px; }
.sx-doc-page .fi-section {
    border-radius: 16px;
    background: var(--lm-d-surface);
    box-shadow: 0 1px 2px var(--lm-d-shadow);
    --tw-ring-color: var(--lm-d-border);
}
.sx-doc-page .fi-section-header { padding-block: 10px; padding-inline: 16px; }
.sx-doc-page .fi-section-header-heading { color: var(--lm-d-ink); font-size: 15px; font-weight: 700; }
.sx-doc-page .fi-section-content { padding: 14px 16px; }
.sx-doc-page .fi-section-content .fi-sc-has-gap { gap: 12px 14px; }
.sx-doc-page .fi-sc-flex { gap: 14px; }
.sx-doc-page .fi-fo-field { row-gap: 6px; }
.sx-doc-page .fi-fo-field-label-content { color: var(--lm-d-ink); font-weight: 600; font-size: 13.5px; }
.sx-doc-page .fi-fo-field-wrp-helper-text, .sx-doc-page .fi-sc-text { font-size: 12px; color: var(--lm-d-muted); }
.sx-doc-page .fi-fo-repeater-item-content { padding: 12px 14px; }
/* the first section of the page carries the blue rule */
.sx-doc-page .sx-ruled { border-block-start: 3px solid var(--lm-d-info); }

/* the price summary of the record (total · discount · tax · identity) */
.sx-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; }
.sx-fig b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lm-d-ink); }
.sx-fig span { font-size: 12.5px; color: var(--lm-d-muted); }
.sx-fig small { font-size: 12px; color: var(--lm-d-muted); font-variant-numeric: tabular-nums; }
.sx-fig.is-ok b { color: var(--lm-d-ok); }
.sx-fig.is-accent b { color: var(--lm-d-accent-ink); }
.sx-id { display: grid; gap: 2px; font-size: 13px; color: var(--lm-d-muted); }
.sx-id b { color: var(--lm-d-info); font-size: 14px; }
.sx-id.is-missing { color: var(--lm-d-danger); font-weight: 700; }
.sx-tickets { inline-size: 100%; border-collapse: collapse; font-size: 13px; }
.sx-tickets th { text-align: start; padding: 6px 4px; color: var(--lm-d-ink); font-weight: 700; border-block-end: 1px solid var(--lm-d-border); }
.sx-tickets td { padding: 6px 4px; border-block-end: 1px solid var(--lm-d-divider); color: var(--lm-d-ink); }
.sx-empty { font-size: 13px; color: var(--lm-d-muted); }

/* ── Growth-style density (Kamal 2026-10-02 «اضغط الداتا شوويه زي صفحات الجروث الذكي») ──
   At desktop width the status chips sit INSIDE the table card, on its
   toolbar row beside the search, like the growth log. They are placed
   against the card itself — not by pulling margins across the page's
   gaps, which differ between browsers (Safari put them on the blue rule):
   the chips' column leaves the flow, so the table is the first thing in
   the grid, and the chips are pinned to its toolbar band (3px rule + a
   56px toolbar). Only the chips take clicks; the search under the rest of
   that band stays reachable. */
@media (min-width: 1280px) {
    .sx-list-page .fi-page-content > .fi-sc:has(> .fi-grid-col > .fi-sc-component > .fi-sc-tabs) { position: relative; }
    .sx-list-page .fi-page-content > .fi-sc > .fi-grid-col:has(> .fi-sc-component > .fi-sc-tabs) {
        position: absolute;
        z-index: 3;
        inset-block-start: 2px;
        inset-inline-start: 14px;
        margin: 0;
        padding: 9px 0 0;
        pointer-events: none;
    }
    /* exact heights so the two centres meet in every browser: band 56, chips 38 ⇒ 9px */
    .sx-list-page .fi-sc:has(> .fi-grid-col > .fi-sc-component > .fi-sc-tabs) .fi-ta-header-toolbar { block-size: 56px; padding-block: 0; align-items: center; box-sizing: border-box; justify-content: flex-end; }
    .sx-list-page .fi-sc-tabs .fi-tabs { inline-size: fit-content; block-size: 38px; align-items: center; pointer-events: auto; }
    .sx-list-page .fi-sc-tabs .fi-tabs .fi-tabs-item { block-size: 38px; min-block-size: 0; box-sizing: border-box; }
}

/* the list's total, under its title (moved up from the table's footer) */
.sx-list-page .fi-header-subheading { font-size: 14px; color: var(--lm-d-muted); }
.sx-list-page .fi-header-subheading b { color: var(--lm-d-ink); font-weight: 700; font-size: 15px; }

/* the record pages: labels beside their fields (the growth policies look) —
   the label column is as wide as its words (max 120px, then it wraps), the
   field takes the rest; help lines live in the ⓘ beside the label. */
.sx-doc-page .fi-fo-field.fi-fo-field-has-inline-label { grid-template-columns: minmax(64px, max-content) minmax(0, 1fr); column-gap: 10px; align-items: center; }
.sx-doc-page .fi-fo-field-has-inline-label .fi-fo-field-label-col { padding-block-start: 0; max-inline-size: 120px; }
.sx-doc-page .fi-fo-field-has-inline-label .fi-fo-field-content-col { grid-column: auto; }

/* dense table rows: the cell carries no padding of its own, its content does */
.sx-page .fi-ta-row > td.fi-ta-cell { padding-block: 0; }
.sx-page .fi-ta-row > td .fi-ta-actions { padding-block: 0; }
.sx-doc-page .fi-fieldset { padding: 10px 14px; border-radius: 12px; border-color: var(--lm-d-border); }

/* the payment schedule: closed rows are short and sit three to a line;
   an opened row takes the whole line (SALES-DS-1 «اضغط صفحة تعديل الطلب») */
.sx-doc-page .sx-schedule .fi-fo-repeater-items { gap: 6px; }
.sx-doc-page .sx-schedule .fi-fo-repeater-item-header { padding-block: 7px; padding-inline: 12px; gap: 8px; }
.sx-doc-page .sx-schedule .fi-fo-repeater-item-header-label { font-size: 13px; font-weight: 600; color: var(--lm-d-ink); font-variant-numeric: tabular-nums; }
.sx-itag { display: inline-flex; align-items: center; min-block-size: 20px; padding-inline: 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sx-itag.is-ok { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.sx-itag.is-warn { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
@media (min-width: 1024px) {
    .sx-doc-page .sx-schedule .fi-fo-repeater-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
    .sx-doc-page .sx-schedule .fi-fo-repeater-item:not(.fi-collapsed) { grid-column: 1 / -1; }
}

/* ── under 1024px: the page scrolls, chips scroll sideways ── */
@media (max-width: 1023.98px) {
    .sx-list-page .fi-tabs:not(.fi-contained) { flex-wrap: nowrap; overflow-x: auto; padding-block-end: 2px; }
    .sx-page .fi-header-heading { font-size: 22px; }
    .sx-page .fi-ta-search-field { max-inline-size: none; }
}
@media (max-width: 640px) {
    .sx-page .fi-header-actions-ctn .fi-btn, .sx-list-page .fi-tabs .fi-tabs-item { min-block-size: 44px; }
    .sx-doc-page .fi-section-content { padding: 12px; }
    /* the phone's top bar already names the page */
    .sx-list-page .fi-header-heading { display: none; }
}

/* ── phones: a list row is a card (the growth phone pass) ──
   line 1: the number (bold) · the status · the row's ⋮ at the end;
   line 2: the project and its unit; then the rest wraps under it.
   No sideways scroll inside the card; the check boxes and the resale ✕
   icon (desktop-only signals) are not drawn here. */
@media (max-width: 639.98px) {
    .sx-list-page .fi-ta-content { overflow-x: visible; }
    .sx-list-page .fi-ta-table { display: block; min-inline-size: 0; }
    .sx-list-page .fi-ta-table > thead { display: none; }
    .sx-list-page .fi-ta-table > tbody { display: block; }
    .sx-list-page .fi-ta-table > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 14px; border-block-end: 1px solid var(--lm-d-divider); }
    .sx-list-page .fi-ta-table > tbody > tr > td { display: block; border: 0; padding: 0; background: transparent; min-inline-size: 0; }
    .sx-list-page .fi-ta-row > td :is(.fi-ta-text, .fi-ta-icon):not(.fi-inline) { padding: 0; }
    .sx-list-page .fi-ta-row > td.fi-ta-selection-cell,
    .sx-list-page .fi-ta-row > td.fi-ta-cell-has-resale-order,
    .sx-list-page .fi-ta-table > tbody > tr:not(.fi-ta-row) > td:first-child:empty { display: none; }
    .sx-list-page .fi-ta-row > td:nth-child(2) { order: -3; }
    .sx-list-page .fi-ta-row > td:nth-child(2) .fi-ta-text-item { font-weight: 700; }
    .sx-list-page .fi-ta-row > td.fi-ta-cell-status { order: -2; }
    .sx-list-page .fi-ta-row > td:last-child { order: -1; margin-inline-start: auto; }
    .sx-list-page .fi-ta-row > td:is(.fi-ta-cell-items\.project\.name, .fi-ta-cell-commission-relation\.order\.items\.project\.name) { flex-basis: 100%; }
    .sx-list-page .fi-ta-row > td :is(.fi-ta-text-item, .fi-ta-text-item-label) { font-size: 13px; }
    .sx-list-page .fi-ta-row > td:is(.fi-ta-cell-confirmed-date, .fi-ta-cell-created-at, .fi-ta-cell-resale-date) .fi-ta-text-item { color: var(--lm-d-muted); font-size: 12px; }
}