/*
    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 {
    --sinv-amber: #F59E0B;
    --sinv-amber-hover: #D97706;
    --sinv-amber-50: #FFFBEB;
    --sinv-amber-100: #FEF3C7;
    --sinv-amber-border: #FDE68A;
    --sinv-amber-text: #B45309;
    --sinv-amber-dark: #92400E;
    --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: #111827;
    --sinv-ink-2: #374151;
    --sinv-muted: #6B7280;
    --sinv-faint: #9CA3AF;
    --sinv-border: #E5E7EB;
    --sinv-border-soft: #F3F4F6;
    --sinv-page: #F9FAFB;

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

.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: #D1D5DB; }
.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: #FFFFFF; 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: 11px; 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: #FFFFFF; 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 18px; display: flex; align-items: center; gap: 10px; 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: #FFFFFF; color: var(--sinv-ink-2); }
.sinv-pill.active { background: var(--sinv-ink); color: #FFFFFF; border-color: var(--sinv-ink); }

.sinv-search { width: 220px; padding: 8px 13px; border: 1px solid var(--sinv-border); border-radius: 10px; font-size: 12.5px; background: #FFFFFF; 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 11px; border: 1px solid var(--sinv-border); border-radius: 10px; font-size: 12.5px; background: #FFFFFF; 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); }

.sinv-scroll { overflow-x: auto; }
.sinv-table { min-width: 1280px; }

.sinv-thead, .sinv-row { display: grid; grid-template-columns: 44px 190px 90px 105px 1fr 150px 110px 145px 120px; gap: 12px; align-items: center; padding: 14px 18px; }
.sinv-thead { padding: 10px 18px; background: var(--sinv-page); border-bottom: 1px solid var(--sinv-border); font-size: 11.5px; font-weight: 600; color: var(--sinv-muted); }
.sinv-row { border-bottom: 1px solid var(--sinv-border-soft); background: #FFFFFF; }
.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 #D1D5DB; background: #FFFFFF; color: #FFFFFF; font-size: 12px; line-height: 1; padding: 0; }
.sinv-cmpbox.on { background: var(--sinv-amber); border-color: var(--sinv-amber); }

.sinv-unit-title { font-size: 14px; font-weight: 700; }
.sinv-unit-sub { font-size: 11.5px; color: var(--sinv-muted); margin-top: 2px; }
.sinv-unit-rooms { font-size: 11px; color: var(--sinv-faint); margin-top: 2px; }
.sinv-ownerpill { display: inline-block; font-size: 10.5px; 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-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: 11px; 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: 10.5px; color: var(--sinv-faint); margin-top: 1px; }

.sinv-detailsbtn { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--sinv-border); background: #FFFFFF; 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 18px; 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: #FFFFFF; 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: #FFFFFF; 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: #FFFFFF; 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: 11.5px; 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; }
}