/*
    Sales Inventory redesign (2026-08 handoff) — scoped under .sinv.
    The unit-details drawer, send panel and fullscreen viewer (and the
    .sinv token/base block they need) live in unit-details.css — the ONE
    stylesheet shared with Sales → Projects. Page-only styles stay here.
    High-fidelity tokens from the approved prototype: Filament amber accents,
    money green, resale purple, RTL-first. The design is light-palette by
    contract; every surface paints its own background.

    Typography moved OUT of this file in the 2026-08 global typography
    sprint: the IBM Plex Sans Arabic @font-face set this screen introduced
    is now panel-wide in resources/css/typography.css, and the whole admin
    inherits it. This screen renders in exactly the same type it always
    did — it simply no longer declares it privately.
*/


.sinv {
    /* ── Shared roles read from the token layer (tokens.css, HO-3104) ──
       Each resolves to the very value it replaces (the map is in the
       HO-3106 PR), and gains a dark value for free. */
    --sinv-ink: var(--ho-ink);
    --sinv-muted: var(--ho-ink-muted);
    --sinv-border: var(--ho-line);
    --sinv-page: var(--ho-surface-sunken);
    --sinv-amber-hover: var(--ho-warning-line);
    --sinv-amber-50: var(--ho-warning-soft);
    --sinv-amber-dark: var(--ho-warning-ink);
    /* gray-400 was painted as TEXT eleven times at 2.54:1 on white. Text
       cannot be that light; de-emphasis is --ho-ink-muted (4.83:1). The two
       uses on the fullscreen viewer's dark overlay keep a fixed light grey
       (--sinv-on-dark-muted) — that overlay is dark in both themes. */
    --sinv-faint: var(--ho-ink-muted);

    /* ── Local to this design, unchanged in light ─────────────────────
       The Sales-side amber accent and its tints, the WhatsApp green, and
       the grey steps the tokens do not model. In dark (below) each
       collapses onto the nearest shared token — no dark value is a
       literal chosen by hand. */
    --sinv-amber: #F59E0B;
    --sinv-amber-100: #FEF3C7;
    --sinv-amber-border: #FDE68A;
    --sinv-amber-text: #B45309;
    --sinv-green: #047857;
    --sinv-green-50: #ECFDF5;
    --sinv-green-border: #A7F3D0;
    --sinv-green-ondark: #5BD79A;
    --sinv-wa: #25D366;
    --sinv-wa-hover: #1EBE5A;
    --sinv-purple: #6D28D9;
    --sinv-purple-50: #F5F3FF;
    --sinv-purple-border: #DDD6FE;
    --sinv-ink-2: #374151;
    --sinv-border-soft: #F3F4F6;

    /* ── Fixed in BOTH themes: solids and the ink that sits on them ──
       A filled button keeps its fill on a dark page; only its surroundings
       change. --sinv-ink used to double as the PDF button's fill and the
       active pill's fill — in dark that ink goes light and white text on
       it would vanish, so fills get their own names. --sinv-on-amber is
       dark ink for the amber fill: white on amber-500 was 2.2:1. */
    --sinv-on-solid: #FFFFFF;
    --sinv-on-amber: #111827;
    --sinv-solid: #111827;
    --sinv-solid-hover: #374151;
    --sinv-fill-amber: #B45309;
    --sinv-fill-amber-hover: #92400E;
    --sinv-on-dark-muted: #9CA3AF;

    /* Type comes from the panel-wide system (resources/css/typography.css);
       this skin owns colour and layout only. */
    color: var(--sinv-ink);
}

/* Dark: the shared roles above flip through the tokens by themselves. The
   local steps collapse onto the nearest shared token here, so this block
   adds no literal and cannot fall out of step with tokens.css. The amber
   and WhatsApp fills stay as they are — bright enough on a dark ground,
   and their ink is fixed. Purple (one badge) rides the info tokens. */
.dark .sinv {
    --sinv-amber-100: var(--ho-warning-soft);
    --sinv-amber-border: var(--ho-warning-line);
    --sinv-amber-text: var(--ho-warning-ink);
    --sinv-green: var(--ho-success-ink);
    --sinv-green-50: var(--ho-success-soft);
    --sinv-green-border: var(--ho-success-line);
    --sinv-purple: var(--ho-info-ink);
    --sinv-purple-50: var(--ho-info-soft);
    --sinv-purple-border: var(--ho-info-line);
    --sinv-ink-2: var(--ho-ink);
    --sinv-border-soft: var(--ho-surface-inset);
}

.sinv *, .sinv *::before, .sinv *::after { box-sizing: border-box; }

.sinv button { font-family: inherit; cursor: pointer; }
.sinv input, .sinv select { font-family: inherit; }

/* Financial figures never reorder in RTL context. */
.sinv-num, .sinv .sinv-num { direction: ltr; unicode-bidi: isolate; }

/* ---- Breadcrumb + header ------------------------------------------------ */

.sinv-crumb { font-size: 12.5px; color: var(--sinv-muted); display: flex; align-items: center; gap: 6px; }
.sinv-crumb .sep { color: var(--ho-line-strong); }
.sinv-crumb .cur { color: var(--sinv-ink); font-weight: 500; }

.sinv-headrow { display: flex; align-items: center; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.sinv-headrow h1 { margin: 0; font-size: 24px; font-weight: 700; }
.sinv-summary { font-size: 12.5px; color: var(--sinv-muted); }
.sinv-summary b { color: var(--sinv-green); }

.sinv-srcswitch { display: flex; gap: 4px; background: var(--sinv-border-soft); border: 1px solid var(--sinv-border); border-radius: 11px; padding: 4px; }
.sinv-srcswitch button { padding: 7px 18px; border-radius: 8px; border: none; font-size: 13px; font-weight: 700; background: transparent; color: var(--sinv-muted); box-shadow: none; }
.sinv-srcswitch button.active { background: var(--ho-surface); color: var(--sinv-amber-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }

/* ---- Status tabs -------------------------------------------------------- */

.sinv-statustabs { display: flex; gap: 4px; margin-top: 20px; border-bottom: 1px solid var(--sinv-border); }
.sinv-statustabs button { padding: 10px 16px; border: none; background: transparent; font-size: 13.5px; font-weight: 500; color: var(--sinv-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sinv-statustabs button.active { font-weight: 700; color: var(--sinv-amber-text); border-bottom-color: var(--sinv-amber); }
.sinv-statustabs .cnt { font-size: var(--ho-text-xs); font-weight: 600; background: var(--sinv-border-soft); color: var(--sinv-muted); padding: 1px 8px; border-radius: 99px; }
.sinv-statustabs button.active .cnt { background: var(--sinv-amber-100); color: var(--sinv-amber-text); }

/* ---- Table card --------------------------------------------------------- */

.sinv-card { background: var(--ho-surface); border: 1px solid var(--sinv-border); border-radius: 14px; margin-top: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); overflow: hidden; }

.sinv-toolbar { padding: 14px 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--sinv-border-soft); }
.sinv-pill { padding: 6px 14px; border-radius: 99px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--sinv-border); background: var(--ho-surface); color: var(--sinv-ink-2); }
.sinv-pill.active { background: var(--sinv-solid); color: var(--sinv-on-solid); border-color: var(--sinv-solid); }

.sinv-search { width: 178px; padding: 8px 11px; border: 1px solid var(--sinv-border); border-radius: 10px; font-size: 12.5px; background: var(--ho-surface); color: var(--sinv-ink); outline: none; }
.sinv-search:focus { border-color: var(--sinv-amber); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); }
.sinv-sort { padding: 8px 9px; border: 1px solid var(--sinv-border); border-radius: 10px; font-size: 12.5px; background: var(--ho-surface); color: var(--sinv-ink); outline: none; }
.sinv-sort:focus { border-color: var(--sinv-amber); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); }

/*
    Table geometry — compact desktop fit (2026-08-28).

    The screen is laid out for a 1470px desktop; with the redesigned 196px
    sidebar fully open and the panel's 32px page gutters, the card gives the
    table ~1208px. The old `min-width: 1280px` was 72px wider than that, so
    the grid could never shrink to fit: `.sinv-scroll` turned the excess into
    a horizontal scroll and clipped the trailing Details column off-screen.
    The old tracks were the other half of it — 954px of fixed columns plus
    8x12px gaps and 18px gutters left the `1fr` Installments column only
    194px, so widening it was impossible without pushing the table wider.

    The grid now sizes itself: efficient per-column tracks (1176px at their
    minimum, ~30px under the available width), 10px gaps, 12px cell gutters,
    and the slack handed to Installments. Every column — Details included —
    lands inside the container with the sidebar open, and the table still
    flexes to 100% of whatever width it is given. Nothing is hidden,
    truncated or type-shrunk: the same nine columns render at the same font
    sizes, with the secondary lines free to wrap onto a second line.

    `.sinv-scroll` keeps overflow-x purely as a safety net for genuinely
    narrow viewports (< ~1290px total); it never engages at desktop width.
*/
.sinv-scroll { overflow-x: auto; }
.sinv-table { min-width: 0; }

/* checkbox | unit | area | meter | installments | trend | status | total | details */
.sinv-thead, .sinv-row { display: grid; grid-template-columns: 40px minmax(178px, 200px) 88px 100px minmax(220px, 1fr) 118px 104px 138px 88px; gap: 10px; align-items: center; padding: 13px 12px; }
.sinv-thead > *, .sinv-row > * { min-width: 0; overflow-wrap: break-word; }
.sinv-thead { padding: 10px 12px; background: var(--sinv-page); border-bottom: 1px solid var(--sinv-border); font-size: var(--ho-text-xs); font-weight: 600; color: var(--sinv-muted); }
.sinv-row { border-bottom: 1px solid var(--sinv-border-soft); background: var(--ho-surface); }
.sinv-row:hover { background: var(--sinv-amber-50); }
.sinv-row.compared { background: var(--sinv-amber-50); }

.sinv-cmpbox { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--ho-line-strong); background: var(--ho-surface); color: var(--ho-surface); font-size: 12px; line-height: 1; padding: 0; }
.sinv-cmpbox.on { background: var(--sinv-amber); border-color: var(--sinv-amber); color: var(--sinv-on-amber); }

.sinv-unit-title { font-size: 14px; font-weight: 700; }
.sinv-unit-sub { font-size: var(--ho-text-xs); color: var(--sinv-muted); margin-top: 2px; }
.sinv-unit-rooms { font-size: var(--ho-text-xs); color: var(--sinv-faint); margin-top: 2px; }
.sinv-ownerpill { display: inline-block; font-size: var(--ho-text-xs); font-weight: 600; color: var(--sinv-purple); background: var(--sinv-purple-50); border: 1px solid var(--sinv-purple-border); padding: 1px 8px; border-radius: 99px; margin-top: 4px; }

.sinv-area { font-size: 13px; font-weight: 600; }
.sinv-meter { font-size: 13px; }

.sinv-row .sinv-trendpill { max-width: 100%; white-space: normal; }

.sinv-inst-l1 { font-size: 12.5px; font-weight: 600; }
.sinv-inst-l1 .pct { color: var(--sinv-green); }

.sinv-statuspill { display: inline-block; width: fit-content; font-size: var(--ho-text-xs); font-weight: 600; padding: 2.5px 9px; border-radius: 99px; }
.sinv-statuspill.available { background: var(--sinv-green-50); color: var(--sinv-green); border: 1px solid var(--sinv-green-border); }
.sinv-statuspill.processing { background: var(--sinv-amber-50); color: var(--sinv-amber-text); border: 1px solid var(--sinv-amber-border); }

.sinv-total { font-size: 14.5px; font-weight: 700; color: var(--sinv-green); }
.sinv-garage-note { font-size: var(--ho-text-xs); color: var(--sinv-faint); margin-top: 1px; }

.sinv-detailsbtn { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--sinv-border); background: var(--ho-surface); color: var(--sinv-amber-text); font-size: 12px; font-weight: 600; justify-self: end; }
.sinv-detailsbtn:hover { border-color: var(--sinv-amber); background: var(--sinv-amber-50); }

.sinv-empty { padding: 48px; text-align: center; color: var(--sinv-faint); font-size: 13.5px; }

.sinv-foot { padding: 12px 12px; font-size: 12px; color: var(--sinv-muted); border-top: 1px solid var(--sinv-border-soft); display: flex; align-items: center; gap: 12px; }
.sinv-loadmore { border: 1px solid var(--sinv-border); background: var(--ho-surface); color: var(--sinv-amber-text); padding: 5px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.sinv-loadmore:hover { border-color: var(--sinv-amber); background: var(--sinv-amber-50); }

/* ---- Compare bar -------------------------------------------------------- */

.sinv-cmpbar { position: fixed; bottom: 0; right: 0; left: 0; z-index: 30; background: var(--ho-surface); border-top: 1px solid var(--sinv-border); box-shadow: 0 -8px 26px rgba(17, 24, 39, 0.12); animation: sinvFadeIn 0.2s ease; }
.sinv-cmpbar-in { max-width: 1240px; margin: 0 auto; padding: 14px 28px; }
.sinv-cmpbar-head { display: flex; align-items: center; gap: 12px; }
.sinv-cmpbar-head .t { font-size: 13.5px; font-weight: 700; }
.sinv-cmpbar-head .hint { font-size: 12px; color: var(--sinv-faint); }
.sinv-cmpclear { border: 1px solid var(--sinv-border); background: var(--ho-surface); color: var(--sinv-muted); padding: 5px 14px; border-radius: 8px; font-size: 12px; }
.sinv-cmpclear:hover { border-color: var(--sinv-amber); color: var(--sinv-amber-text); }
.sinv-cmpcards { display: flex; gap: 14px; margin-top: 14px; overflow-x: auto; padding-bottom: 4px; }
.sinv-cmpcard { min-width: 230px; flex: 1; background: var(--sinv-page); border: 1px solid var(--sinv-border); border-radius: 12px; padding: 14px 16px; }
.sinv-cmpcard .head { display: flex; align-items: center; gap: 8px; }
.sinv-cmpcard .head .t { font-size: 14.5px; font-weight: 700; flex: 1; }
.sinv-cmpcard .head button { border: none; background: transparent; color: var(--sinv-faint); font-size: 13px; }
.sinv-cmpcard .total { font-size: 19px; font-weight: 700; color: var(--sinv-green); margin-top: 6px; }
.sinv-cmpcard .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--sinv-muted); }
.sinv-cmpcard .grid b { color: var(--sinv-ink); }
.sinv-cmpcard .trend { font-size: var(--ho-text-xs); color: var(--sinv-faint); margin-top: 8px; }

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 768px) {
    .sinv-headrow h1 { font-size: 20px; }
    .sinv-srcswitch { width: 100%; }
    .sinv-srcswitch button { flex: 1; padding: 7px 8px; }
    .sinv-search { width: 100%; }
    .sinv-sort { width: 100%; }
    .sinv-statustabs { overflow-x: auto; }
    .sinv-cmpbar-in { padding: 12px 16px; }
}