/*
    THE unit-details drawer + fullscreen viewer + send panel — ONE stylesheet
    for every screen that opens a unit (Sales → Inventory and Sales →
    Projects). Extracted verbatim from sales-inventory.css on 2026-08-20:
    same class names, same values, single definition. The .sinv scope
    carries the design tokens; host pages wrap the shared partial
    (filament/shared/unit-details-drawer) in a .sinv element.
*/

@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 400; font-style: normal; src: url('/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 500; font-style: normal; src: url('/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 600; font-style: normal; src: url('/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 700; font-style: normal; src: url('/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 400; font-style: normal; src: url('/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 500; font-style: normal; src: url('/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 600; font-style: normal; src: url('/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 700; font-style: normal; src: url('/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A; }

.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;

    font-family: 'IBM Plex Sans Arabic', sans-serif;
    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; }

/* Shared helpers used by both the page tables and the drawer. */
.sinv-spacer { flex: 1; }
.sinv-inst-l2 { font-size: var(--ho-text-xs); color: var(--sinv-muted); margin-top: 1px; }
.sinv-trendpill { display: inline-block; font-size: var(--ho-text-xs); font-weight: 600; color: var(--sinv-green); background: var(--sinv-green-50); border: 1px solid var(--sinv-green-border); padding: 2px 9px; border-radius: 99px; }

/* ---- Drawer ------------------------------------------------------------- */

@keyframes sinvDrawerInRtl { from { transform: translateX(-28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sinvDrawerInLtr { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sinvFadeIn { from { opacity: 0; } to { opacity: 1; } }

.sinv-overlay { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.5); z-index: 40; animation: sinvFadeIn 0.2s ease; }
.sinv-drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: 440px; max-width: 92vw; background: var(--ho-surface); z-index: 50; box-shadow: 0 0 34px rgba(10, 20, 40, 0.2); display: flex; flex-direction: column; }
.sinv-drawer[dir="rtl"] { animation: sinvDrawerInRtl 0.22s ease; }
.sinv-drawer[dir="ltr"] { animation: sinvDrawerInLtr 0.22s ease; }

.sinv-drawer-head { padding: 20px 24px; border-bottom: 1px solid var(--sinv-border-soft); display: flex; align-items: flex-start; gap: 12px; }
.sinv-drawer-head .t { font-size: 18px; font-weight: 700; }
.sinv-drawer-head .s { font-size: 12.5px; color: var(--sinv-muted); margin-top: 3px; }
.sinv-x { border: none; background: var(--sinv-border-soft); color: var(--sinv-ink); width: 30px; height: 30px; border-radius: 8px; font-size: 14px; flex-shrink: 0; }

.sinv-drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 22px; }

.sinv-img { position: relative; width: 100%; height: 200px; }
.sinv-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.sinv-img-placeholder { width: 100%; height: 100%; border-radius: 12px; background: var(--sinv-page); border: 1px dashed var(--sinv-border); display: flex; align-items: center; justify-content: center; color: var(--sinv-faint); font-size: 12.5px; }
.sinv-fullbtn { position: absolute; top: 10px; inset-inline-end: 10px; padding: 6px 12px; border-radius: 8px; border: none; background: rgba(17, 24, 39, 0.72); color: var(--sinv-on-solid); font-size: var(--ho-text-xs); font-weight: 600; }
.sinv-fullbtn:hover { background: rgba(17, 24, 39, 0.9); }

.sinv-pricecard { background: var(--sinv-amber-50); border: 1px solid var(--sinv-amber-border); border-radius: 12px; padding: 16px 18px; }
.sinv-pricecard .lbl { font-size: 12px; color: var(--sinv-amber-dark); }
.sinv-pricecard .amt { font-size: 26px; font-weight: 700; color: var(--sinv-green); margin-top: 2px; }
.sinv-pricecard .cur { font-size: 13px; color: var(--sinv-muted); font-weight: 600; }
.sinv-pricecard .meta { display: flex; gap: 22px; margin-top: 12px; font-size: 12.5px; color: var(--sinv-ink-2); }
.sinv-pricecard .note { font-size: 12px; color: var(--sinv-faint); margin-top: 6px; }

.sinv-sectitle { font-size: 13.5px; font-weight: 700; margin-bottom: 10px; }

.sinv-specs { border: 1px solid var(--sinv-border-soft); border-radius: 12px; overflow: hidden; }
.sinv-spec { display: flex; align-items: center; gap: 12px; padding: 8px 14px; font-size: 12.5px; background: var(--ho-surface); }
.sinv-spec:nth-child(odd) { background: var(--sinv-page); }
.sinv-spec .k { width: 150px; flex-shrink: 0; color: var(--sinv-muted); }
.sinv-spec .v { font-weight: 600; color: var(--sinv-ink); }

.sinv-schedrow { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--sinv-border-soft); }
.sinv-schedrow .n { width: 72px; font-size: 12.5px; color: var(--sinv-muted); flex-shrink: 0; }
.sinv-schedrow .bar { flex: 1; height: 6px; background: var(--sinv-border-soft); border-radius: 3px; overflow: hidden; }
.sinv-schedrow .bar i { display: block; height: 100%; background: var(--sinv-amber); border-radius: 3px; }
.sinv-schedrow .a { font-size: 13.5px; font-weight: 600; min-width: 86px; text-align: end; }

.sinv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sinv-chip { font-size: 12.5px; font-weight: 500; background: var(--sinv-page); border: 1px solid var(--sinv-border); padding: 5px 12px; border-radius: 99px; }
.sinv-trendline { margin-top: 12px; font-size: 12.5px; color: var(--sinv-ink-2); }

.sinv-drawer-foot { padding: 14px 24px; border-top: 1px solid var(--sinv-border-soft); display: flex; flex-direction: column; gap: 8px; }
/* Four actions no longer fit one row in a 440px drawer, so they sit in a
   2x2 grid: View and Download PDF on top, Email and WhatsApp below. */
.sinv-sendrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sinv-sendrow button, .sinv-sendrow a { padding: 10px; border-radius: 10px; border: none; color: var(--sinv-on-solid); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; }
/* View is the primary action: it opens the brochure instantly, with no PDF. */
.sinv-btn-view { background: var(--sinv-fill-amber); }
.sinv-btn-view:hover { background: var(--sinv-fill-amber-hover); color: var(--sinv-on-solid); }
.sinv-ico { width: 16px; height: 16px; flex: 0 0 auto; }
.sinv-btn-wa { background: var(--sinv-wa); }
.sinv-btn-wa:hover { background: var(--sinv-wa-hover); }
.sinv-btn-mail { background: var(--sinv-amber); color: var(--sinv-on-amber); }
.sinv-btn-mail:hover { background: var(--sinv-amber-hover); }
.sinv-btn-pdf { background: var(--sinv-solid); }
.sinv-btn-pdf:hover { background: var(--sinv-solid-hover); }
/* The brochure is rendered on demand, so this button spends seconds in a
   working state — it has to LOOK disabled, not merely be disabled. */
.sinv-sendrow button:disabled { opacity: 0.55; cursor: progress; }
.sinv-sendrow button:disabled:hover { background: var(--sinv-ink); }
.sinv-spin { width: 13px; height: 13px; flex: 0 0 auto; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: var(--sinv-on-solid); animation: sinvSpin 0.7s linear infinite; }
@keyframes sinvSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sinv-spin { animation-duration: 2.4s; } }
.sinv-copybtn { padding: 9px; border-radius: 10px; border: 1px solid var(--sinv-border); background: var(--ho-surface); color: var(--sinv-muted); font-size: 12.5px; font-weight: 600; }
.sinv-copybtn:hover { border-color: var(--sinv-amber); color: var(--sinv-amber-text); }

/* ---- Send panel (client picker) ----------------------------------------- */

.sinv-sendpanel { background: var(--sinv-page); border: 1px solid var(--sinv-border); border-radius: 12px; padding: 12px 14px; }
.sinv-sendpanel .head { display: flex; align-items: center; gap: 8px; }
.sinv-sendpanel .head .t { font-size: 12.5px; font-weight: 700; flex: 1; }
.sinv-sendpanel .head button { border: none; background: transparent; color: var(--sinv-faint); font-size: 13px; padding: 0; }
.sinv-clientq { width: 100%; margin-top: 8px; padding: 9px 12px; border: 1px solid var(--sinv-border); border-radius: 9px; font-size: 13px; background: var(--ho-surface); color: var(--sinv-ink); outline: none; }
.sinv-clientq:focus { border-color: var(--sinv-amber); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); }
.sinv-clients { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; max-height: 150px; overflow-y: auto; }
.sinv-client { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--sinv-border-soft); background: var(--ho-surface); font-size: 12.5px; text-align: start; }
.sinv-client.unreachable { opacity: 0.55; cursor: not-allowed; }
.sinv-client .reason { display: block; font-size: var(--ho-text-xs); color: var(--ho-danger-ink); margin-top: 1px; }
.sinv-client .info { min-width: 0; overflow-wrap: anywhere; }
.sinv-client:hover { background: var(--sinv-amber-50); }
.sinv-client.picked { background: var(--sinv-amber-50); border-color: var(--sinv-amber); }
.sinv-client .av { width: 26px; height: 26px; border-radius: 99px; background: var(--sinv-amber-100); color: var(--sinv-amber-text); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.sinv-client .info { flex: 1; }
.sinv-client .contact { color: var(--sinv-faint); font-size: var(--ho-text-xs); }
.sinv-client .mark { color: var(--sinv-green); font-weight: 700; font-size: 13px; }
.sinv-dosend { width: 100%; margin-top: 10px; padding: 10px; border-radius: 9px; border: none; font-size: 13px; font-weight: 700; color: var(--sinv-on-solid); }
.sinv-dosend:disabled { opacity: 0.45; cursor: not-allowed; }
.sinv-sendhint { font-size: var(--ho-text-xs); color: var(--sinv-faint); margin-top: 6px; text-align: center; }

/* ---- Fullscreen viewer -------------------------------------------------- */

.sinv-fs { position: fixed; inset: 0; z-index: 70; background: rgba(10, 14, 22, 0.96); display: flex; flex-direction: column; animation: sinvFadeIn 0.18s ease; }
.sinv-fs-head { display: flex; align-items: center; gap: 12px; padding: 14px 22px; }
.sinv-fs-head .t { color: var(--sinv-on-solid); font-size: 15px; font-weight: 700; }
.sinv-fs-head .s { color: var(--sinv-on-dark-muted); font-weight: 500; font-size: 12.5px; }
.sinv-fs-head .p { color: var(--sinv-green-ondark); font-size: 15px; font-weight: 700; }
.sinv-fs-head button { border: none; background: rgba(255, 255, 255, 0.12); color: var(--sinv-on-solid); width: 34px; height: 34px; border-radius: 9px; font-size: 15px; }
.sinv-fs-head button:hover { background: rgba(255, 255, 255, 0.24); }
.sinv-fs-body { flex: 1; padding: 0 22px 22px; min-height: 0; display: flex; }
.sinv-fs-body img { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; }
.sinv-fs-body .sinv-img-placeholder { border-color: rgba(255, 255, 255, 0.25); background: transparent; color: var(--sinv-on-dark-muted); }

.sinv [x-cloak] { display: none !important; }