/* ─────────────────────────────────────────────────────────────────────
   HOMEi Tenders — «المناقصات» (TENDERS-UI-1, design approved by Kamal
   2026-09-26 on the house design system: the budget / Work Center /
   المستخلصات references).

   The list page: the numbers strip, one card with a blue rule (title, the
   view pills المناقصات · العروض · مهام عاجلة, the status chips on the
   table's toolbar row) and the tender opened BESIDE the list in a panel.
   The tender page and the offer page: the design's title with its status,
   the strip, and the tabs as pills (navy when on).

   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 `.tx-page` (the page class) and `.tx`.

   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(.tx-page) { background: var(--lm-d-page); }
body:has(.tx-page) .fi-main-ctn { background: transparent; }
.tx-page .fi-header-heading { font-size: 28px; font-weight: 700; line-height: 1.25; color: var(--lm-d-ink); }
.tx-page .fi-header-subheading { margin-block-start: 4px; font-size: 13.5px; color: var(--lm-d-muted); }
.tx-doc-h { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tx-doc-h .tx-tag { font-size: 13px; }
.tx-doc-sub b { color: var(--lm-d-ink); font-weight: 700; }

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

/* the header's decisions: outline buttons, the save is the design's orange */
.tx-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;
}
.tx-page .fi-header-actions-ctn .fi-btn .fi-icon { color: currentColor; }
.tx-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); }
.tx-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); }
.tx-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); }

/* ── the numbers strip ── */
.tx-strip {
    display: grid;
    grid-template-columns: repeat(var(--tx-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);
}
.tx-strip-c { padding: 12px 18px; border-inline-start: 1px solid var(--lm-d-divider); min-inline-size: 0; }
.tx-strip-c:first-child { border-inline-start: 0; }
.tx-k-l { font-size: 13px; color: var(--lm-d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-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; }
.tx-k-v.is-muted { font-size: 21px; font-weight: 500; font-style: italic; }
.tx-k-s { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tx .is-ink, .tx-page .is-ink { color: var(--lm-d-ink); }
.tx .is-muted, .tx-page .tx-strip .is-muted { color: var(--lm-d-muted); }
.tx .is-ok, .tx-page .tx-strip .is-ok { color: var(--lm-d-ok); }
.tx .is-danger, .tx-page .tx-strip .is-danger { color: var(--lm-d-danger); }
.tx .is-accent, .tx-page .tx-strip .is-accent { color: var(--lm-d-accent-ink); }
.tx .is-info, .tx-page .tx-strip .is-info { color: var(--lm-d-info); }

/* ── the card with the blue rule ── */
.tx-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;
}
.tx-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);
}
.tx-card-t { font-size: 20px; font-weight: 700; margin: 0; }
.tx-card-t span { font-size: 14px; font-weight: 500; color: var(--lm-d-muted); }

.tx-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tx-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-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.tx-pill:hover { border-color: var(--lm-d-control-edge); }
.tx-pill:focus-visible, .tx-chip:focus-visible, .tx-btn:focus-visible { outline: 2px solid var(--lm-d-info); outline-offset: 2px; }
.tx-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); }
.tx-pill-n { font-variant-numeric: tabular-nums; }
.tx-dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--lm-d-info); }
.tx-dot.is-accent { background: var(--lm-d-accent); }
.tx-dot.is-ok { background: var(--lm-d-ok); }
.tx-pill.is-on .tx-dot { background: var(--lm-d-accent); }

.tx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tx-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-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.tx-chip b { color: var(--lm-d-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.tx-chip:hover { background: var(--lm-d-chip-bg); }
.tx-chip.is-on { background: var(--lm-d-info-soft); border-color: var(--lm-d-info-soft); color: var(--lm-d-info); }
.tx-chip.is-on b { color: var(--lm-d-info); }

/* ── the split: the list (start) and the panel (end) ── */
.tx-split { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.tx-split.has-open { grid-template-columns: minmax(0, 1fr) 360px; }
.tx-split:not(.has-open) .tx-panel { display: none; }
.tx-list { min-inline-size: 0; }
.tx-split.has-open .tx-list { border-inline-end: 1px solid var(--lm-d-divider); }
/* beside the panel the list gives up the budget column — the panel shows it */
.tx-split.has-open :is(.fi-ta-header-cell-budget-estimate, .fi-ta-cell-budget-estimate) { display: none; }
.tx-list--full { border-inline-end: 0; }

/* a Filament table flattened into the card (the list, the offers, the urgent tasks, a tender's offers tab) */
:is(.tx-list, .tx-doc-main) .fi-ta-ctn { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
:is(.tx-list, .tx-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(.tx-list, .tx-doc-main) .fi-ta-header-ctn > * { border: 0; }
:is(.tx-list, .tx-doc-main) .fi-ta-header { padding: 10px 0; flex: 1 1 auto; min-inline-size: 0; }
:is(.tx-list, .tx-doc-main) .fi-ta-header-toolbar { padding: 8px 0; flex: 0 0 auto; border: 0; }
:is(.tx-list, .tx-doc-main) .fi-ta-search-field { max-inline-size: 260px; }
:is(.tx-list, .tx-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(.tx-list, .tx-doc-main) .fi-ta-cell { padding-inline: 8px; color: var(--lm-d-ink); }
:is(.tx-list, .tx-doc-main) .fi-ta-row:hover > td { background: var(--lm-d-hover); }
.tx-list .fi-ta-row { cursor: pointer; }
.tx-list .fi-ta-row.tx-row-open > td { background: var(--lm-d-row-hl); }
.tx-list .fi-ta-row.tx-row-open > td:first-child { box-shadow: inset -3px 0 0 var(--lm-d-accent); }
[dir='ltr'] .tx-list .fi-ta-row.tx-row-open > td:first-child { box-shadow: inset 3px 0 0 var(--lm-d-accent); }
.tx-list .fi-ta-cell-budget-estimate .fi-ta-text-item { color: var(--lm-d-muted); }
.tx-num { font-variant-numeric: tabular-nums; }
.tx-dim { color: var(--lm-d-muted); font-size: 12.5px; }

/* a row's go-ahead (ترسية / إنجاز) is the design's orange */
:is(.tx-list, .tx-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); }
:is(.tx-list, .tx-doc-main) .fi-ta-actions .fi-link.fi-color-success { color: var(--lm-d-accent-ink); }

/* ── the panel ── */
.tx-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; }
.tx-p { display: flex; flex-direction: column; min-block-size: 0; flex: 1 1 auto; }
.tx-p-h { padding: 14px 18px 12px; border-block-end: 1px solid var(--lm-d-divider); }
.tx-p-t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; }
.tx-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; }
.tx-p-s { margin-block-start: 2px; font-size: 13px; color: var(--lm-d-muted); }
.tx-p-b { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.tx-p-f { padding: 12px 18px; border-block-start: 1px solid var(--lm-d-divider); display: flex; gap: 8px; }
.tx-p-f > .tx-btn { flex: 1 1 0; justify-content: center; }

.tx-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; }
.tx-tag::before { content: ''; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }
.tx-tag.is-info { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.tx-tag.is-ok { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.tx-tag.is-danger { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.tx-tag.is-accent { background: var(--lm-d-accent-soft); color: var(--lm-d-accent-ink); }
.tx-tag.is-quiet { background: var(--lm-d-quiet-bg); color: var(--lm-d-muted); }

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

.tx-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tx-money > div { border: 1px solid var(--lm-d-border); border-radius: 10px; padding: 8px 10px; display: grid; min-inline-size: 0; }
.tx-money span { font-size: 12px; color: var(--lm-d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-money b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tx-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; }
.tx-net b { font-variant-numeric: tabular-nums; }
.tx-sec { font-size: 14px; font-weight: 700; margin-block-end: 6px; }
.tx-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; }
.tx-line:last-child { border-block-end: 0; }
.tx-line b { font-variant-numeric: tabular-nums; }
.tx-note { border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.6; border: 1px solid var(--lm-d-divider); }
.tx-note.is-danger { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }

.tx-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;
}
.tx-btn.is-primary { background: var(--lm-d-accent); border-color: var(--lm-d-accent); color: var(--lm-d-on-accent); }
.tx-btn-ico { inline-size: 18px; block-size: 18px; }

.tx-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; }
.tx-empty b { color: var(--lm-d-ink); font-size: 15px; }
.tx-empty-ico { inline-size: 36px; block-size: 36px; color: var(--lm-d-subtle); }

/* ── the tender page / the offer page ── */
.tx-doc-page .fi-page-content { gap: 16px; }
.tx-doc-page .fi-section { border-radius: 16px; box-shadow: 0 1px 2px var(--lm-d-shadow); }
.tx-doc-page .fi-section-header-heading { color: var(--lm-d-ink); font-weight: 700; }
.tx-doc-page .tx-ruled { border-block-start: 3px solid var(--lm-d-info); }

/* the tabs: the design's pills, navy when on */
.tx-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);
}
.tx-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; }
.tx-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;
}
.tx-doc-main .fi-tabs .fi-tabs-item .fi-tabs-item-label { color: inherit; }
.tx-doc-main .fi-tabs .fi-tabs-item .fi-icon { color: var(--lm-d-muted); }
.tx-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); }
.tx-doc-main .fi-tabs .fi-tabs-item.fi-active .fi-tabs-item-label,
.tx-doc-main .fi-tabs .fi-tabs-item.fi-active .fi-icon { color: var(--lm-d-tab-on-ink); }
.tx-doc-main .fi-tabs .fi-tabs-item .fi-badge { font-variant-numeric: tabular-nums; }
.tx-doc-main .fi-sc-tabs-tab { padding: 16px; }
.tx-doc-main .fi-sc-tabs-tab .fi-section { box-shadow: none; }

/* the بنود sheet: budget columns read-only, the contract column bold */
.tx-doc-main .tender-items-sheet .fi-fo-table-repeater-header-cell,
.tx-doc-main .tender-items-sheet th { color: var(--lm-d-ink); font-weight: 700; font-size: 13.5px; }
.tx-doc-main .tender-items-sheet th:nth-child(n + 2):nth-child(-n + 4) { box-shadow: inset 0 -3px 0 var(--lm-d-info-soft); }
.tx-doc-main .tender-items-sheet th:nth-child(5) { box-shadow: inset 0 -3px 0 var(--lm-d-accent); }
.tx-doc-main .tender-items-sheet td { font-variant-numeric: tabular-nums; }
.tx-doc-main .tender-items-sheet td:nth-child(5) input { font-weight: 700; color: var(--lm-d-ink); }

/* the tender's total under its بنود */
.tx-items-total > .fi-section { background: var(--lm-d-info-soft); box-shadow: none; border: 0; }
.tx-items-total .fi-section-header { padding-block: 10px; }
.tx-items-total .fi-section-header-heading { color: var(--lm-d-ink); }
.tx-items-total .fi-section-content-ctn { border-block-start-color: var(--lm-d-border); }
.tx-items-total .fi-in-text { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lm-d-ink); }

/* the contract statement: a figures grid, nothing typed */
.tx-statement .fi-in-entry { border: 1px solid var(--lm-d-divider); border-radius: 10px; padding: 10px 14px; block-size: 100%; }
.tx-statement .fi-in-entry-label { color: var(--lm-d-muted); font-size: 12.5px; }
.tx-statement .fi-in-text { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lm-d-ink); }

/* the termination record: a red banner in the tender's face */
.tx-cancelled > .fi-section { background: var(--lm-d-danger-soft); box-shadow: inset 0 0 0 1px var(--lm-d-gap-edge); }
.tx-cancelled .fi-section-header-heading, .tx-cancelled .fi-section-header-icon { color: var(--lm-d-danger); }

/* the offer's بنود against the budget */
.tx-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tx-table th { text-align: start; padding: 10px 8px; color: var(--lm-d-ink); font-weight: 700; font-size: 13.5px; border-block-end: 1px solid var(--lm-d-border); white-space: nowrap; }
.tx-table th.is-budget { box-shadow: inset 0 -3px 0 var(--lm-d-info-soft); }
.tx-table td { padding: 9px 8px; border-block-end: 1px solid var(--lm-d-divider); color: var(--lm-d-ink); }
.tx-table td.is-name { font-weight: 700; }
.tx-table tfoot td { background: var(--lm-d-info-soft); font-weight: 700; border: 0; }

/* ── under 1024px: the page scrolls, the panel is a bottom sheet ── */
@media (max-width: 1023.98px) {
    .tx-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tx-strip-c:nth-child(3n + 1) { border-inline-start: 0; }
    .tx-strip-c:nth-child(n + 4) { border-block-start: 1px solid var(--lm-d-divider); }
    .tx-split { grid-template-columns: minmax(0, 1fr); }
    .tx-list { border-inline-end: 0; }
    .tx-panel { display: none; }
    .tx-split.has-open .tx-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);
    }
    .tx-card-h { align-items: stretch; }
    .tx-pills, .tx-doc-main .fi-tabs { flex-wrap: nowrap; overflow-x: auto; padding-block-end: 2px; }
    .tx-page .fi-header-heading { font-size: 22px; }
}
@media (max-width: 640px) {
    .tx-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tx-strip-c:nth-child(n) { border-inline-start: 0; border-block-start: 1px solid var(--lm-d-divider); }
    .tx-strip-c:nth-child(-n + 2) { border-block-start: 0; }
    .tx-strip-c:nth-child(2n) { border-inline-start: 1px solid var(--lm-d-divider); }
    .tx-k-v { font-size: 22px; }
}