/* ── Desktop 90% scale (owner 2026-10-17: «زي ما عملناه بالموبايل») — phones/tablets already get 0.9 from the viewport meta
   (App.razor), which desktop browsers ignore, so screens driven by a mouse (web on a PC + the desktop app) zoom the page here.
   Under zoom a raw 100vh would cover only 90% of the screen, so every viewport size in the app uses var(--vh)/var(--vw),
   which undo the zoom; scripts that place popups divide screen coordinates by the zoom (see js/float-drop.js). ── */
:root { --vh: 1vh; --vw: 1vw; }
@media (hover: hover) and (pointer: fine) {
    html { zoom: .9; }
    :root { --vh: calc(1vh / .9); --vw: calc(1vw / .9); }
}

/* ── System-wide scrollbar standard (2026-08-23) — the ONE definition for every scrollable area
   in the app, current and future: thin, rounded accent-colored thumb, transparent track, instead
   of the raw OS scrollbar. A global selector on purpose — no per-component opt-in, so a new
   scrollable screen picks this up automatically without adding any CSS of its own. ── */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--th-accent-500-rgb), .4) transparent;
}
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(var(--th-accent-500-rgb), .4); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--th-accent-500-rgb), .6); }

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ══════════════════════════════════════════════════════════════
   Dark/Light Design Tokens — owner's explicit ask, 2026-08-22, ported
   from Legacy's actual working theme system (index.html: --bg/--text/
   --muted/--text-sub/--border/--card-bg tokens + a [data-theme="light"]
   override block + instant-apply-before-first-paint inline script,
   see App.razor). Same token names, reuse-first.

   Scope: only the classes that actually consume var(...) below are
   theme-aware — currently the Login screen (.login-page/.login-card/
   field classes/.btn-login/etc), the Splash (.app-splash- classes) and
   .restore-loading, matching exactly what was asked for. The App
   Shell/Sidebar (.app-shell/.sidebar/.nav-item/etc, further down this
   file) deliberately still use their own hardcoded dark colors — these
   tokens existing globally costs nothing and sets up the same
   vocabulary for extending theme support there later, but doing that
   now would be scope creep beyond what was requested.
   ══════════════════════════════════════════════════════════════ */
:root {
    --accent:      var(--th-accent-500);
    --accent-2:    var(--th-accent2-500);
    --bg:          var(--th-d-0);
    --text:        var(--th-n-200);
    --muted:       var(--th-n-500);
    --text-sub:    var(--th-n-400);
    --border:      rgba(255, 255, 255, .08);
    --card-bg:     #111827;
    --field-bg:    #1f2937;
    --field-border:#374151;
    --danger-bg:   #7f1d1d;
    --danger-text: #fecaca;

    /* ── Legacy Panel Design System (docs/legacy-visual-spec-products.md) — real values
       extracted from Legacy's own panels/inventory/inv_items.css and styles.css, verified by
       rendering Legacy's real markup+CSS in Chromium (owner's explicit "Legacy is the visual
       source of truth, not your memory of it" directive, 2026-08-22). Prefixed --lg- so these
       never collide with or get confused for the Login/App-Shell tokens above (--card-bg/
       --field-bg etc are solid colors for the LOCKED Login/App-Shell; these are the translucent
       glass-panel values Legacy's data screens actually use — a genuinely different value set,
       not a rename). Consumed only by .page (Legacy's own top-level wrapper class) below, so
       nothing here can leak into or override the App Shell/Login, which stay untouched. ── */
    --lg-panel-bg:     rgba(var(--th-n-900-rgb), .52);
    --lg-panel-border: rgba(255, 255, 255, .07);
    --lg-panel-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 10px 30px rgba(0, 0, 0, .25);
    --lg-input-bg:     rgba(255, 255, 255, .05);
    --lg-hover-bg:     rgba(255, 255, 255, .06);
    --lg-border:       rgba(255, 255, 255, .08);
    --lg-border-focus: rgba(var(--th-accent-500-rgb), .7);
    --lg-accent-glow:  rgba(var(--th-accent-500-rgb), .25);
    --lg-success:      #10b981;
    --lg-success-bg:   rgba(16, 185, 129, .12);
    --lg-danger:       #ef4444;
    --lg-danger-bg:    rgba(239, 68, 68, .12);
    --lg-warn:         #f59e0b;
    --lg-warn-bg:      rgba(245, 158, 11, .12);
    --lg-info:         #3b82f6;
    --lg-info-bg:      rgba(59, 130, 246, .12);
    --lg-radius:       14px;
    /* Native controls (the <select> dropdown list, date pickers, scrollbars) follow the theme —
       without this Chrome paints every open <select> list white while its text inherits the dark
       theme's light --text, so options are unreadable until hovered. */
    color-scheme: dark;
}
/* Same bug, belt-and-braces for engines that ignore color-scheme on the option popup. Low
   specificity on purpose: per-screen option rules (maintenance/inventory report) still win. */
select option, select optgroup { background-color: var(--th-n-900); color: var(--th-n-200); }
[data-theme="light"] select option, [data-theme="light"] select optgroup { background-color: #fff; color: var(--th-n-800); }
[data-theme="light"] {
    color-scheme: light;
    --bg:          var(--th-l-1);
    --text:        var(--th-n-800);
    --muted:       var(--th-n-400);
    --text-sub:    var(--th-n-600);
    --border:      rgba(var(--th-n-900-rgb), .10);
    --card-bg:     rgba(255, 255, 255, .92);
    --field-bg:    rgba(var(--th-n-900-rgb), .04);
    --field-border:rgba(var(--th-n-900-rgb), .16);
    --danger-bg:   #fee2e2;
    --danger-text: #b91c1c;

    --lg-panel-bg:     rgba(255, 255, 255, .78);
    --lg-panel-border: rgba(var(--th-n-900-rgb), .08);
    --lg-panel-shadow: 0 4px 22px rgba(30, 60, 120, .08), 0 1px 0 rgba(255, 255, 255, .95) inset;
    --lg-input-bg:     rgba(var(--th-n-900-rgb), .04);
    --lg-hover-bg:     rgba(59, 130, 246, .06);
    --lg-border:       rgba(var(--th-n-900-rgb), .10);
    --lg-border-focus: rgba(var(--th-accent-500-rgb), .55);
    --lg-success-bg:   rgba(16, 185, 129, .10);
    --lg-danger-bg:    rgba(239, 68, 68, .10);
    --lg-warn-bg:      rgba(245, 158, 11, .10);
    --lg-info-bg:      rgba(59, 130, 246, .10);
}

/* Real Legacy font (Cairo) + real Legacy icon set (Lucide), scoped to .page only — the App Shell
   around it keeps its current Segoe UI/Tahoma per its own LOCKED status; only Products' own
   content area matches Legacy's actual typography, not a substitute. */
.page {
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    padding: 4px 0 24px;
}

/* ── Page Header — SHARED component (Components/Shared/PageHeader.razor), one definition for
   every screen. Structure ported from Legacy's real header (panels/customers/customers.html
   .panel-header, confirmed identical in panels/purchases/suppliers.html): icon+title+subtitle on
   one side, a date badge + refresh button + optional "add" button grouped together on the other —
   adopted 2026-08-23 as the system-wide standard (Categories.razor's .cat-panel-header was already
   this exact shape under different class names; unified onto these, no more per-screen copies). ── */
.lg-page-header {
    background: var(--lg-panel-bg);
    border: 1px solid var(--lg-panel-border);
    border-radius: 18px;
    margin-bottom: 20px;
    box-shadow: var(--lg-panel-shadow);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.lg-page-header-content { display: flex; align-items: center; gap: 16px; padding: 18px 24px; }
.lg-page-header-actions { display: flex; align-items: center; gap: 10px; padding-inline-end: 24px; flex-shrink: 0; flex-wrap: wrap; }
.lg-page-header-center { display: flex; align-items: center; }
/* Purchases' Store Type Selector, relocated into the header's own middle gap 2026-08-28 — same
   .lg-modal-tabs/.lg-modal-tab classes reused as-is (per project reuse-first rule), just stripped of
   the modal-only chrome (bottom border line, top-anchored padding, background tint) that doesn't fit
   a vertically-centered header row. */
.lg-page-header-type-tabs { border-bottom: none; padding: 0; background: none; margin-bottom: 0; }
.lg-page-icon {
    width: 48px; height: 48px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(var(--th-accent-500-rgb), .3);
}
.lg-page-icon svg { width: 24px; height: 24px; color: #fff; }
.lg-page-title { font-size: 22px; font-weight: 900; color: var(--text); margin: 0; line-height: 1.2; }
.lg-page-subtitle { font-size: 13px; color: var(--muted); font-weight: 600; margin: 2px 0 0; }
.lg-date-badge { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--lg-input-bg); border: 1px solid var(--lg-border); border-radius: 8px; padding: 6px 10px; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.lg-date-badge svg { width: 13px; height: 13px; }

/* ── Stats row (Legacy: .stats-row/.stat-card) ── */
.lg-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
/* Customers' 6-KPI row (Legacy: .kpi-strip is a strict 5-column grid, customers.html:180) — a
   class, not an inline style, so the mobile/tablet breakpoints below can still override it; an
   inline style would win over any external-stylesheet media query regardless of viewport. */
.lg-stats-row-5 { grid-template-columns: repeat(5, 1fr); }
/* Expenses' 3-KPI row (docs/architecture-cash-payments-2026-08-23.md) — same "class, not inline
   style" reasoning as -5 above, so mobile/tablet breakpoints still apply. */
.lg-stats-row-3 { grid-template-columns: repeat(3, 1fr); }
/* Purchases List's 6-KPI row (Legacy: purchases-log.html's real .kpi-strip, 2026-08-27) — same
   "class, not inline style" reasoning as -5/-3 above. */
.lg-stats-row-6 { grid-template-columns: repeat(6, 1fr); }
/* Sync queue's 4-KPI row (Offline-First Phase 1, 2026-10-15) — same "class, not inline style" reasoning. */
.lg-stats-row-4 { grid-template-columns: repeat(4, 1fr); }

/* Purchases Editor's real two-column layout (Legacy: purchases-log.html's .purchase-wide-box
   .pm-col × 2, 2026-08-27 UX correction — replacing the earlier single-column zone stack this
   screen was originally, wrongly, invented with instead of extracted from the real Legacy
   screen). Left column: item entry + items table + order data. Right column: tabs. Collapses to
   one column on tablet/mobile — Desktop only ever sees this two-column layout, matching every
   other reflow rule in this file. */
.pe-editor-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }
/* 2026-10-17 (owner) — on wide screens each column scrolls on its own (the items never push the order data/payment away) */
@media (min-width: 901px) {
    .lg-modal-main:has(> .pe-editor-grid) { overflow: hidden; }
    .pe-editor-grid { flex: 1 1 auto; min-height: 0; height: 100%; align-items: stretch; }
    .pe-col-left, .pe-col-right { min-height: 0; overflow-y: auto; padding-inline-end: 6px; }
}
.pe-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.pe-summary-card { background: var(--lg-input-bg, transparent); border: 1px solid var(--lg-border, var(--border)); border-radius: 12px; padding: 12px 14px; }
.pe-summary-lbl { font-size: 10.5px; font-weight: 800; color: var(--muted); margin-bottom: 6px; }
.pe-summary-val { font-size: 15px; font-weight: 900; color: var(--text); }
.pe-summary-warn { margin-top: 14px; border: 1px solid rgba(251,191,36,.3); background: rgba(251,191,36,.08); border-radius: 12px; padding: 12px 14px; font-size: 12px; color: var(--text); display: flex; flex-direction: column; gap: 4px; }
.pe-summary-warn-title { display: flex; align-items: center; gap: 6px; color: #f59e0b; font-weight: 800; margin-bottom: 4px; }
.pe-summary-warn-title svg { width: 13px; height: 13px; }
@media (max-width: 900px) {
    .pe-editor-grid { grid-template-columns: 1fr; }
}
.lg-stat-card {
    background: var(--lg-panel-bg);
    border: 1px solid var(--lg-panel-border);
    border-radius: var(--lg-radius);
    padding: 14px 16px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: var(--lg-panel-shadow);
    display: flex; align-items: center; gap: 12px;
}
.lg-stat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lg-stat-icon svg { width: 18px; height: 18px; }
.lg-si-total  { background: rgba(var(--th-accent-500-rgb), .12); color: var(--th-accent-400); }
.lg-si-active { background: rgba(16, 185, 129, .12); color: #34d399; }
.lg-si-low    { background: rgba(239, 68, 68, .12);  color: #f87171; }
.lg-si-cats   { background: rgba(245, 158, 11, .12); color: #fbbf24; }
.lg-si-muted  { background: var(--lg-input-bg); color: var(--muted); }
.lg-stat-val { font-size: 22px; font-weight: 900; color: var(--text); line-height: 1; }
.lg-stat-lbl { font-size: 11px; color: var(--muted); margin-top: 3px; font-weight: 600; }

/* ── Toolbar (Legacy: .filter-bar, panels/customers/customers.html:268-309 — confirmed identical
   in suppliers.html) — sizes corrected 2026-08-23 to match exactly: the search box is a FIXED
   220px (expanding to 260px on focus), not a flex:1 box that stretches to fill the row; filter
   selects are 34px tall, sized to content, not a forced 130px-wide field. This is the single
   shared definition every toolbar (Customers/Products/Suppliers) renders through. ── */
.lg-toolbar { display: flex; gap: 8px; margin-bottom: 18px; align-items: center; flex-wrap: wrap; }
.lg-search-wrap {
    width: 220px; flex-shrink: 0; display: flex; align-items: center; gap: 7px;
    background: var(--lg-input-bg); border: 1px solid var(--lg-border);
    border-radius: 11px; padding: 0 10px; height: 36px;
    transition: border-color .15s, box-shadow .15s, width .2s;
}
.lg-search-wrap:focus-within { border-color: var(--lg-border-focus); box-shadow: 0 0 0 3px var(--lg-accent-glow); width: 260px; }
.lg-search-wrap svg { width: 13px; height: 13px; color: var(--muted); flex-shrink: 0; }
.lg-search-input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 12.5px; }
.lg-search-input::placeholder { color: var(--muted); }
.lg-filter-divider { width: 1px; height: 22px; background: var(--lg-border); flex-shrink: 0; }
.lg-filter-spacer { flex: 1; }
.lg-filter-select {
    height: 34px;
    background: var(--lg-input-bg); border: 1px solid var(--lg-border);
    border-radius: 9px; padding: 0 10px; color: var(--text); font-family: inherit; font-size: 12px; font-weight: 600;
    outline: none; cursor: pointer;
}
/* Sized for its real Legacy position — the page header's action group (moved out of the toolbar
   2026-08-23, see .lg-page-header-actions) — not the 42px toolbar-field height. */
.lg-btn-add {
    display: flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; border: none; border-radius: 10px; padding: 0 14px; height: 36px;
    font-size: 13px; font-weight: 800; font-family: inherit; cursor: pointer;
    box-shadow: 0 2px 10px rgba(var(--th-accent-500-rgb), .35); white-space: nowrap; flex-shrink: 0;
}
.lg-btn-add:hover { box-shadow: 0 3px 18px rgba(var(--th-accent-500-rgb), .55); }
.lg-btn-add svg { width: 15px; height: 15px; }

/* ── Table (Legacy: .table-card/.table-head/.item-row) ── */
.lg-table-card {
    background: var(--lg-panel-bg); border: 1px solid var(--lg-panel-border); border-radius: 18px;
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    box-shadow: var(--lg-panel-shadow); overflow: hidden;
}
/* Part 2 of the 2026-08-28 modal-scroll fix (see .lg-modal-main above): overflow:hidden makes a flex
   item's automatic min-height resolve to 0 per spec, so without this, flex-shrink (default 1) let
   .lg-table-card get squashed down to whatever space was left instead of keeping its real content
   height — its own overflow:hidden then silently clipped everything past that squashed height,
   invisible to .lg-modal-main's overflow-y:auto above it. flex-shrink:0 keeps it at natural height,
   so .lg-modal-main is the one that overflows and scrolls, as intended. Scoped to modal usage only —
   .lg-table-card elsewhere (list screens) isn't inside a .lg-modal-main flex column, so unaffected. */
.lg-modal-main > .lg-table-card { flex-shrink: 0; }
.lg-table-head {
    display: grid;
    grid-template-columns: 52px 1.8fr 1fr 110px 110px 90px 90px 110px 150px;
    padding: 12px 18px; border-bottom: 1px solid var(--lg-border);
    background: rgba(255, 255, 255, .02);
    font-size: 10px; font-weight: 700; color: var(--muted);
    letter-spacing: .05em; text-transform: uppercase; align-items: center; gap: 10px;
}
[data-theme="light"] .lg-table-head { background: rgba(var(--th-n-900-rgb), .03); }
.lg-item-row {
    display: grid;
    grid-template-columns: 52px 1.8fr 1fr 110px 110px 90px 90px 110px 150px;
    padding: 14px 18px; gap: 10px; align-items: center;
    border-bottom: 1px solid var(--lg-border);
}
.lg-item-row:hover { background: var(--lg-hover-bg); }
.lg-item-row:last-child { border-bottom: none; }
.lg-item-thumb-placeholder {
    width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--th-accent-500-rgb), .1); border: 1px solid var(--lg-panel-border); color: var(--th-accent-400);
}
.lg-item-thumb-placeholder svg { width: 20px; height: 20px; }
.lg-item-name { font-weight: 800; font-size: 13px; color: var(--text); }
.lg-item-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.lg-cat-badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
    font-size: 10px; font-weight: 700;
    background: rgba(var(--th-accent-500-rgb), .1); border: 1px solid rgba(var(--th-accent-500-rgb), .2); color: var(--th-accent-300);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.lg-price-cost { font-size: 12px; font-weight: 700; color: var(--text-sub); }
.lg-price-sell { font-size: 13px; font-weight: 900; color: var(--th-accent-300); }
.lg-price-whole { font-size: 11px; color: var(--muted); }
.lg-qty-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(16, 185, 129, .12); border: 1px solid rgba(16, 185, 129, .2);
    color: #34d399; border-radius: 8px; font-size: 12px; font-weight: 700; padding: 4px 10px; min-width: 44px;
}
.lg-qty-badge.low { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .2); color: #f87171; }
.lg-qty-badge.na { background: rgba(var(--th-n-500-rgb), .1); border-color: rgba(var(--th-n-500-rgb), .2); color: var(--muted); font-size: 11px; }
.lg-status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.lg-status-badge.active { background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .25); color: #34d399; }
.lg-status-badge.inactive { background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .25); color: #fbbf24; }
/* 2026-09-18, Users screen — the only current 3-state status (Active/Inactive/Suspended);
   additive variant, changes nothing for existing .active/.inactive-only consumers. */
.lg-status-badge.suspended { background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .25); color: #f87171; }
.lg-status-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
/* ── Row-action icon buttons — SINGLE shared component for the whole app (Products, Categories,
   Suppliers, Customers, and any future screen with view/edit/portal/delete-style row actions).
   Color language ported from Legacy's real Customers screen (panels/customers/customers.html
   .act-btn/.ab-blue/.ab-amber/.ab-purple/.ab-rose, lines 400-410) and adopted 2026-08-23 as the
   system-wide visual standard, replacing the old hover-only neutral pattern and Categories' near-
   duplicate .cat-act-btn — one definition here, no per-screen copies. Semantic mapping (same
   meaning everywhere a screen uses it): ab-blue = view/عرض, ab-amber = edit/تعديل,
   ab-purple = secondary/portal-style action, ab-rose = delete/حذف (replaces the old .danger). ── */
.lg-act-btns { display: flex; gap: 5px; flex-shrink: 0; }
.lg-act-btn {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--lg-border);
    background: rgba(255, 255, 255, .03); color: var(--muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform .12s, filter .12s, background .12s, color .12s, border-color .12s;
}
.lg-act-btn:hover { transform: scale(1.12); filter: brightness(1.15); }
/* 2026-09-18, Roles cards — first real disabled-state consumer (blocked delete, users still
   assigned); additive, no existing consumer applies `disabled` so this changes nothing elsewhere. */
.lg-act-btn:disabled { opacity: .35; cursor: not-allowed; }
.lg-act-btn:disabled:hover { transform: none; filter: none; }
.lg-act-btn svg { width: 14px; height: 14px; }
.lg-act-btn.ab-blue   { background: rgba(59, 130, 246, .12);  border-color: rgba(59, 130, 246, .3);  color: #60a5fa; }
.lg-act-btn.ab-amber  { background: rgba(245, 158, 11, .12);  border-color: rgba(245, 158, 11, .3);  color: #fbbf24; }
.lg-act-btn.ab-purple { background: rgba(var(--th-accent2-500-rgb), .12);  border-color: rgba(var(--th-accent2-500-rgb), .3);  color: var(--th-accent2-400); }
.lg-act-btn.ab-rose   { background: rgba(244, 63, 94, .12);   border-color: rgba(244, 63, 94, .3);   color: #fb7185; }
.lg-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; gap: 14px; color: var(--muted); }
.lg-empty-icon { width: 72px; height: 72px; border-radius: 20px; background: rgba(var(--th-accent-500-rgb), .08); border: 1px solid rgba(var(--th-accent-500-rgb), .15); display: flex; align-items: center; justify-content: center; }
.lg-empty-icon svg { width: 32px; height: 32px; color: var(--th-accent-400); }
.lg-empty-title { font-size: 16px; font-weight: 900; color: var(--text); }
.lg-empty-sub { font-size: 13px; color: var(--muted); text-align: center; max-width: 280px; }

/* ── Pagination (Legacy: inv_items.html .pagination-bar/.pg-btn) — table view only, found missing
   2026-08-22 during the unified Products/Categories/Suppliers re-audit. ── */
.lg-pagination-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-top: 1px solid var(--lg-border); flex-wrap: wrap; gap: 10px; }
.lg-pagination-info { font-size: 12px; color: var(--muted); }
.lg-pagination-info strong { color: var(--text); }
.lg-pagination-controls { display: flex; align-items: center; gap: 4px; }
.lg-pg-btn {
    min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--lg-border);
    background: rgba(255, 255, 255, .03); color: var(--muted); cursor: pointer; font-family: inherit;
    font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.lg-pg-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .08); color: var(--text); }
.lg-pg-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.lg-pg-btn:disabled { opacity: .4; cursor: not-allowed; }
.lg-pg-btn svg { width: 14px; height: 14px; }
.lg-pg-sep { color: var(--muted); font-size: 12px; padding: 0 2px; }

/* ── View toggle + Grid view (Legacy: inv_items.css .view-toggle/.view-btn/.grid-*, ~L174-431) —
   real table/grid switch (table default), found missing 2026-08-22 alongside ShowOnWebsite during
   the owner's re-review of the "closed" Products screen against a real Legacy screenshot. ── */
.lg-view-toggle {
    display: flex; gap: 4px;
    background: var(--lg-panel-bg); border: 1px solid var(--lg-panel-border);
    border-radius: 11px; padding: 4px;
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    box-shadow: var(--lg-panel-shadow); flex-shrink: 0;
}
.lg-view-btn {
    width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; color: var(--muted);
}
.lg-view-btn svg { width: 16px; height: 16px; }
.lg-view-btn:hover { color: var(--text); background: var(--lg-hover-bg); }
.lg-view-btn.active { background: rgba(var(--th-accent-500-rgb), .2); color: var(--th-accent-400); }

.lg-grid-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.lg-grid-card {
    background: var(--lg-panel-bg); border: 1px solid var(--lg-panel-border); border-radius: 18px;
    overflow: hidden; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    box-shadow: var(--lg-panel-shadow); display: flex; flex-direction: column;
}
.lg-grid-card:hover { transform: translateY(-2px); }
.lg-grid-media {
    height: 160px; position: relative; overflow: hidden; flex-shrink: 0;
    background: radial-gradient(circle at 30% 30%, rgba(var(--th-accent-500-rgb),0.22), transparent 60%),
                radial-gradient(circle at 75% 70%, rgba(var(--th-accent2-500-rgb),0.16), transparent 55%),
                rgba(var(--th-n-900-rgb),0.55);
    display: flex; align-items: center; justify-content: center;
}
[data-theme="light"] .lg-grid-media {
    background: radial-gradient(circle at 30% 30%, rgba(var(--th-accent-500-rgb),0.14), transparent 60%),
                radial-gradient(circle at 75% 70%, rgba(var(--th-accent2-500-rgb),0.10), transparent 55%),
                rgba(var(--th-l-0-rgb),0.85);
}
.lg-grid-media-icon { color: rgba(var(--th-accent-500-rgb),0.4); }
.lg-grid-media-icon svg { width: 44px; height: 44px; }
.lg-grid-qty-chip {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 800;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.lg-grid-qty-chip.ok  { background: rgba(16,185,129,0.85); color: #fff; }
.lg-grid-qty-chip.low { background: rgba(239,68,68,0.85);  color: #fff; }
.lg-grid-qty-chip.na  { background: rgba(var(--th-n-900-rgb),0.75);   color: var(--th-n-400); }
.lg-grid-content { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.lg-grid-title { font-size: 14px; font-weight: 900; color: var(--text); }
.lg-grid-cat   { font-size: 10px; font-weight: 700; color: var(--th-accent-400); }
.lg-grid-prices { display: flex; gap: 8px; align-items: baseline; }
.lg-grid-price-sell { font-size: 15px; font-weight: 900; color: var(--th-accent-300); }
.lg-grid-price-cost { font-size: 11px; color: var(--muted); }
.lg-grid-footer {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--lg-border); padding-top: 10px;
}
.lg-grid-acts { display: flex; gap: 5px; }
@media (max-width: 900px) {
    .lg-grid-media { height: 120px; }
    .lg-grid-title { font-size: 12.5px; }
    .lg-grid-content { padding: 10px 12px 12px; gap: 6px; }
}

/* ── Modal (Legacy: .modal-overlay/.modal/.field/.switch) ── */
.lg-modal-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    /* Live-bug fix (2026-09-24) — was 300, far below several already-open-modal overlays this
       shared class's own consumers (ConfirmDialog especially) can be triggered from on top of:
       .action-modal-overlay (9000, MaintenanceBoard's own detail panel), .exec-modal-overlay
       (9500/9600), .fault-modal-overlay/.svc-modal-overlay (99999) — a confirm dialog rendered at
       300 behind any of those was fully hidden and unreachable. A confirmation dialog is the one
       thing in the app that must always win the stack (nothing else should be interactable while
       it's open), so this now sits above the current highest z-index anywhere in the app (99999)
       instead of guessing a value tied to today's Maintenance-specific numbers. */
    z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px;
}
.lg-modal {
    background: linear-gradient(180deg, rgba(13, 18, 36, .96), rgba(var(--th-d-9-rgb), .97));
    border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px;
    width: min(920px, calc(98 * var(--vw))); max-height: min(calc(92 * var(--vh)), 780px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .05) inset, 0 32px 100px rgba(0, 0, 0, .7);
    display: flex; flex-direction: column; overflow: hidden; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}
[data-theme="light"] .lg-modal { background: linear-gradient(180deg, rgba(var(--th-l-5-rgb), .98), rgba(var(--th-l-4-rgb), .98)); border-color: rgba(var(--th-n-900-rgb), .10); }
.lg-modal.maximized { width: calc(100 * var(--vw)) !important; height: calc(100 * var(--vh)); max-height: calc(100 * var(--vh)); border-radius: 0; }
.lg-modal-header {
    padding: 18px 22px 14px; border-bottom: 1px solid rgba(255, 255, 255, .07);
    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
    background: rgba(var(--th-d-8-rgb), .6);
}
[data-theme="light"] .lg-modal-header { background: rgba(var(--th-l-3-rgb), .8); border-bottom-color: rgba(var(--th-n-900-rgb), .08); }
.lg-modal-title-row { display: flex; align-items: center; gap: 12px; }
.lg-modal-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(var(--th-accent-500-rgb), .15); border: 1px solid rgba(var(--th-accent-500-rgb), .25); display: flex; align-items: center; justify-content: center; color: var(--th-accent-400); }
.lg-modal-icon svg { width: 18px; height: 18px; }
.lg-modal-title { font-size: 15px; font-weight: 900; color: var(--text); }
/* System-wide convention (2026-08-23): every exit/close/delete icon button is red, every
   maximize/expand icon button is yellow — set once here (.lg-modal-close is the one shared close
   button used by every modal in the app) and in the .fc-close-btn/.fc-maximize-btn pair below,
   not per-screen. */
.lg-modal-close {
    width: 32px; height: 32px; border-radius: 8px; background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .3); display: flex; align-items: center; justify-content: center;
    color: #f87171; cursor: pointer;
}
.lg-modal-close:hover { background: rgba(239, 68, 68, .2); color: #fca5a5; }
.lg-modal-close svg { width: 16px; height: 16px; }
.lg-modal-tabs { display: flex; gap: 2px; padding: 10px 22px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); flex-shrink: 0; background: rgba(var(--th-d-8-rgb), .4); overflow-x: auto; overflow-y: hidden; } /* the tabs' -1px margin made a stray vertical scrollbar */
[data-theme="light"] .lg-modal-tabs { background: rgba(var(--th-l-3-rgb), .6); border-bottom-color: rgba(var(--th-n-900-rgb), .07); }
.lg-modal-tab {
    padding: 8px 18px; border-radius: 10px 10px 0 0; font-size: 12px; font-weight: 700;
    color: var(--muted); background: none; border: none; cursor: pointer;
    display: flex; align-items: center; gap: 7px; border-bottom: 2px solid transparent; margin-bottom: -1px;
    white-space: nowrap;
}
.lg-modal-tab svg { width: 14px; height: 14px; }
.lg-modal-tab:hover:not(:disabled) { color: var(--text); background: rgba(255, 255, 255, .04); }
.lg-modal-tab.active { color: var(--th-accent-400); border-bottom-color: var(--accent); }
[data-theme="light"] .lg-modal-tab.active { color: var(--accent); }
.lg-modal-tab:disabled { opacity: .4; cursor: not-allowed; }
/* min-height:0 is required here — a flex item (.lg-modal-main is flex:1 inside .lg-modal's
   flex-column) defaults to min-height:auto, which sizes it to fit its CONTENT instead of the
   available space, so overflow-y:auto never actually engages: content just grows past .lg-modal's
   own max-height/overflow:hidden and gets silently clipped with no scrollbar to reach it. Found
   2026-08-28 (Quick Purchase grid with many rows — the footer buttons and bottom rows became
   unreachable). Shared by every content modal via AppModal.razor, so this one fix applies system-wide. */
.lg-modal-main { overflow-y: auto; min-height: 0; padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
/* 2026-10-16 (owner: «زر الحفظ مش باين» in the spare-part form) — 12 screens wrap .lg-modal-main + .lg-modal-footer in an EditForm,
   so the <form> was the flex item: it never shrank, .lg-modal-main never scrolled, and once the content was taller than the
   modal the footer (Save) was clipped by .lg-modal's overflow:hidden. The form now passes the column layout through. */
.lg-modal > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.lg-section-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.lg-section-title::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .06); }
[data-theme="light"] .lg-section-title::after { background: rgba(var(--th-n-900-rgb), .08); }
.lg-field { display: flex; flex-direction: column; gap: 6px; }
.lg-field-label { font-size: 12px; font-weight: 700; color: var(--text-sub); display: flex; align-items: center; gap: 4px; }
.lg-field-label .lg-req { color: #f87171; font-size: 14px; line-height: 1; }
.lg-field-hint { font-size: 11px; color: var(--muted); margin-top: 2px; }
.lg-field-input, .lg-field-select {
    background: var(--lg-input-bg); border: 1px solid var(--lg-border); border-radius: 10px;
    padding: 10px 13px; color: var(--text); font-family: inherit; font-size: 13px; outline: none; width: 100%;
}
.lg-field-input:focus, .lg-field-select:focus { border-color: var(--lg-border-focus); box-shadow: 0 0 0 3px var(--lg-accent-glow); }
.lg-field-input::placeholder { color: var(--muted); }
.lg-field-select { cursor: pointer; }
.lg-fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lg-input-affix { position: relative; }
.lg-input-affix .lg-field-input { padding-left: 13px; padding-right: 48px; }
.lg-input-prefix { position: absolute; top: 50%; transform: translateY(-50%); right: 13px; font-size: 12px; font-weight: 700; color: var(--muted); pointer-events: none; }
.lg-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lg-toggle-label { font-size: 13px; font-weight: 700; color: var(--text); }
.lg-toggle-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.lg-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; display: inline-block; }
.lg-switch input { opacity: 0; width: 0; height: 0; }
.lg-slider { position: absolute; inset: 0; cursor: pointer; background: rgba(255, 255, 255, .08); border-radius: 12px; transition: .25s; border: 1px solid var(--lg-border); }
.lg-slider::before { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; bottom: 3px; right: 3px; transition: .25s; }
.lg-switch input:checked + .lg-slider { background: var(--lg-success); border-color: var(--lg-success); }
.lg-switch input:checked + .lg-slider::before { transform: translateX(-20px); }
.lg-qty-note { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); background: rgba(255, 255, 255, .03); border: 1px solid var(--lg-border); border-radius: 10px; padding: 9px 12px; }
.lg-qty-note svg { width: 14px; height: 14px; flex-shrink: 0; }
.lg-modal-footer { padding: 12px 22px 16px; display: flex; gap: 10px; flex-shrink: 0; border-top: 1px solid rgba(255, 255, 255, .06); background: rgba(var(--th-d-8-rgb), .5); }
[data-theme="light"] .lg-modal-footer { background: rgba(var(--th-l-3-rgb), .7); border-top-color: rgba(var(--th-n-900-rgb), .07); }
.lg-btn-save {
    flex: 1; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none;
    border-radius: 11px; padding: 11px 20px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.lg-btn-save:hover:not(:disabled) { box-shadow: 0 4px 18px rgba(var(--th-accent-500-rgb), .45); }
.lg-btn-save:disabled { opacity: .5; cursor: not-allowed; }
.lg-btn-save svg { width: 16px; height: 16px; }
.lg-btn-cancel {
    background: rgba(255, 255, 255, .04); color: var(--muted); border: 1px solid var(--lg-border);
    border-radius: 11px; padding: 11px 18px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap;
}
.lg-btn-cancel:hover { background: rgba(255, 255, 255, .08); color: var(--text); }

/* ── Delete confirmation dialog (Legacy: panels/inventory/inv_items.css .del-*, ~L889-925) —
   shared ConfirmDialog.razor, not Products-specific: extracted 2026-08-22 during the Products
   closure pass, real Legacy behavior always confirms a destructive delete with an impact-note
   list before committing, never an instant single-click delete. ── */
.del-modal {
    background: linear-gradient(180deg, rgba(13, 18, 36, .96), rgba(var(--th-d-9-rgb), .97));
    border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px;
    width: min(420px, calc(90 * var(--vw))); text-align: center;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .05) inset, 0 32px 100px rgba(0, 0, 0, .7);
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    /* 2026-10-17 (owner: a purchase delete listed every item and pushed the buttons off-screen) — the dialog never grows past
       the screen: header and buttons stay, the middle scrolls. Covers every dialog built on .del-modal. */
    display: flex; flex-direction: column; max-height: min(calc(90 * var(--vh)), 760px); overflow: hidden;
}
.del-modal > .lg-modal-header, .del-modal > .del-footer { flex-shrink: 0; }
.del-modal > div:not(.lg-modal-header):not(.del-footer) { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.del-details { margin: 0 0 14px; text-align: right; }
.del-details summary { cursor: pointer; font-size: 12px; font-weight: 800; color: var(--accent); padding: 4px 2px; list-style: none; }
.del-details summary::-webkit-details-marker { display: none; }
.del-details summary::before { content: '▸ '; }
.del-details[open] summary::before { content: '▾ '; }
.del-details ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.del-details li { font-size: 11.5px; color: var(--text-sub); padding: 5px 10px; border-radius: 7px; background: var(--lg-input-bg); display: flex; justify-content: space-between; gap: 10px; }
.del-details li b { color: var(--text); font-weight: 800; white-space: nowrap; }
[data-theme="light"] .del-modal { background: linear-gradient(180deg, rgba(var(--th-l-5-rgb), .98), rgba(var(--th-l-4-rgb), .98)); border-color: rgba(var(--th-n-900-rgb), .10); }
.del-icon-wrap {
    width: 64px; height: 64px; border-radius: 18px;
    background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .2);
    display: flex; align-items: center; justify-content: center; margin: 4px auto 16px;
}
.del-icon-wrap svg { width: 28px; height: 28px; color: var(--lg-danger); }
.del-title { font-size: 18px; font-weight: 900; color: var(--text); margin-bottom: 8px; }
.del-sub { font-size: 13px; color: var(--text-sub); line-height: 1.6; }
.del-name { color: var(--accent); font-weight: 700; }
.del-footer { display: flex; gap: 10px; padding: 16px 22px 20px; }
.del-impact-list { list-style: none; margin: 0 0 14px; padding: 0; width: 100%; text-align: right; display: flex; flex-direction: column; gap: 7px; }
.del-impact-list li { font-size: 12px; font-weight: 600; color: var(--text-sub); line-height: 1.6; padding: 8px 12px; border-radius: 9px; background: var(--lg-input-bg); border: 1px solid var(--lg-border); }
.btn-del-confirm {
    flex: 1; background: var(--lg-danger); color: #fff; border: none; border-radius: 11px;
    padding: 11px; font-size: 14px; font-weight: 700; font-family: 'Cairo', sans-serif;
    cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-del-confirm:hover:not(:disabled) { background: #dc2626; box-shadow: 0 4px 16px rgba(239, 68, 68, .4); }
.btn-del-confirm:disabled { opacity: .5; cursor: not-allowed; }
.btn-del-confirm svg { width: 16px; height: 16px; }

/* 2026-10-24 (owner) — SmartDeleteDialog: «أرشفة» by default (amber), «حذف نهائي» (red) with owner password + alone/all choice */
.smart-del { max-width: min(520px, calc(96 * var(--vw))); }
.del-icon-wrap.sd-archive { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .25); }
.del-icon-wrap.sd-archive svg { color: #f59e0b; }
.btn-del-confirm.sd-archive-btn { background: #d97706; }
.btn-del-confirm.sd-archive-btn:hover:not(:disabled) { background: #b45309; box-shadow: 0 4px 16px rgba(245, 158, 11, .35); }
.sd-links-title { font-size: 12.5px; font-weight: 800; color: var(--text-sub); margin: 14px 0 8px; text-align: right; }
.sd-links li { display: flex; align-items: center; gap: 8px; }
.sd-links li > span:first-child { flex: 1; }
.sd-count { min-width: 26px; padding: 1px 8px; border-radius: 99px; text-align: center; font-weight: 800; font-size: 11.5px; background: rgba(var(--th-accent-500-rgb), .14); color: var(--accent); }
.sd-owned { padding: 1px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800; background: rgba(16, 185, 129, .12); color: #10b981; }
.sd-note { font-size: 12px; color: var(--text-sub); line-height: 1.7; margin-bottom: 12px; text-align: right; }
.sd-check { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px dashed rgba(239, 68, 68, .35); background: rgba(239, 68, 68, .05); cursor: pointer; font-size: 13px; font-weight: 800; color: var(--lg-danger); margin-bottom: 12px; }
.sd-check input { width: 17px; height: 17px; accent-color: #ef4444; }
.sd-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.sd-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--lg-border); background: var(--lg-input-bg); cursor: pointer; text-align: right; }
.sd-option.on { border-color: rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .06); }
.sd-option.disabled { opacity: .65; cursor: not-allowed; }
.sd-option input { margin-top: 4px; accent-color: #ef4444; }
.sd-option b { display: block; font-size: 13px; color: var(--text); }
.sd-option small { display: block; font-size: 11.5px; line-height: 1.7; color: var(--text-sub); margin-top: 2px; }
.sd-error { margin-top: 10px; padding: 8px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: #f87171; background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .25); }

/* Non-destructive primary action inside a .del-modal-shaped dialog (Legacy: .btn-del-stop,
   inv_items.css ~L919-925) — amber, used for the "reactivate instead of duplicate" choice. */
.btn-del-stop {
    flex: 1; background: var(--lg-warn); color: #fff; border: none; border-radius: 11px;
    padding: 11px; font-size: 14px; font-weight: 700; font-family: 'Cairo', sans-serif;
    cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-del-stop:hover:not(:disabled) { background: #d97706; box-shadow: 0 4px 16px rgba(245, 158, 11, .4); }
.btn-del-stop:disabled { opacity: .5; cursor: not-allowed; }
.btn-del-stop svg { width: 16px; height: 16px; }

/* ── Toast notifications (Legacy: inv_items.css .toast-container/.toast, ~L993-1010) — shared
   ToastContainer.razor rendered once in MainLayout, not per-screen. Exact Legacy timing/values. ── */
/* Live-bug fix (2026-09-24) — was z-index:500, already below several modal overlays (9000+) even
   before ConfirmDialog's own fix; bumping ConfirmDialog to 100000 made it worse — a failed confirm
   action (e.g. a blocked delete) shows its error Toast while ConfirmDialog deliberately stays open,
   and the toast rendered fully hidden behind it. Toasts are the one thing that must always be
   visible above literally everything else (transient, time-sensitive system feedback), so this sits
   above every other z-index in the app instead of chasing whichever modal is currently highest. */
.toast-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
    display: flex; align-items: center; gap: 10px;
    background: rgba(var(--th-d-4-rgb), .92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-radius: 12px; padding: 12px 20px; font-size: 13px; font-weight: 700;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 8px 32px rgba(0, 0, 0, .5);
    animation: toastIn .3s ease both; pointer-events: all; max-width: 340px;
    border: 1px solid rgba(255, 255, 255, .08); color: var(--text); font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}
[data-theme="light"] .toast { background: rgba(255, 255, 255, .92); }
.toast svg { width: 18px; height: 18px; flex-shrink: 0; }
.toast.success { color: var(--lg-success); border-color: rgba(16, 185, 129, .2); }
.toast.error { color: var(--lg-danger); border-color: rgba(239, 68, 68, .2); }
.toast.info { color: var(--th-accent-400); border-color: rgba(var(--th-accent-500-rgb), .2); }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.95); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
    .toast-container { bottom: 16px; left: 10px; right: 10px; transform: none; }
    .toast { max-width: 100%; width: 100%; font-size: 12.5px; padding: 11px 16px; }
}

/* ── Tablet/phone responsive — matches Legacy's real breakpoints (customers.html:1858-1887,
   confirmed identical shape in suppliers.html): KPI row steps down to 3 columns at tablet width,
   the toolbar's search box goes full-width with filters wrapping 2-per-row and chips hidden
   (Legacy hides them outright rather than reflow — same choice here), and at phone width the KPI
   row becomes a horizontal scroll-snap strip instead of wrapping further. Added 2026-08-23. ── */
@media (max-width: 1024px) {
    .lg-stats-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .lg-stats-row { grid-template-columns: repeat(2, 1fr); }
    .lg-table-head { display: none; }
    .lg-item-row { grid-template-columns: 1fr !important; gap: 6px; }
    .lg-item-row > div[data-label]::before {
        content: attr(data-label); display: block; font-size: 10px; font-weight: 700;
        color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px;
    }
    .lg-modal { width: calc(100 * var(--vw)); height: calc(100 * var(--vh)); max-height: calc(100 * var(--vh)); border-radius: 0; }
    .lg-toolbar { padding: 0; }
    .lg-search-wrap { width: 100% !important; order: 1; }
    .lg-search-wrap:focus-within { width: 100% !important; }
    .lg-filter-divider { display: none; }
    .lg-filter-select { flex: 1; min-width: calc(50% - 4px); order: 2; }
    .lg-toolbar .lg-cat-badge:not(.lg-clear-filter-btn) { display: none; }
    .lg-filter-spacer { display: none; }
    .lg-clear-filter-btn { width: 100%; order: 3; justify-content: center; }
}
@media (max-width: 480px) {
    .lg-stats-row {
        display: flex; overflow-x: auto; overflow-y: hidden; gap: 8px;
        scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    }
    .lg-stats-row::-webkit-scrollbar { display: none; }
    .lg-stat-card { min-width: 130px; flex-shrink: 0; scroll-snap-align: start; }
}

/* Theme toggle FAB (Login.razor) — same corner placement as Legacy's real theme-fab. No
   backdrop-filter here (nor anywhere in this file) — kept consistent with the mobile-sidebar
   blur+transform GPU-thrash bug already avoided further below, even though this static button
   isn't the element that bug was about. */
.theme-fab {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 20;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text-sub);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.theme-fab:hover { color: var(--text); border-color: var(--accent); }

/* ══════════════════════════════════════════════════════════════
   App Shell — structural parity with Legacy's RTL sidebar
   (docs/legacy-ui-analysis-app-shell-2026-08-22.md). Deliberately
   NOT a pixel-for-pixel clone (Visual Parity is BLOCKED, ADR 0017 —
   no screenshot/browser-automation tool to verify pixel matching).
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    direction: rtl;
    /* Owner's explicit instruction (2026-08-29): Legacy's real system-wide font is Cairo (every
       real Legacy screen sets font-family:'Cairo' at the body level — maintenance.css L85 etc.),
       not Segoe UI/Tahoma. cairo.css was already loaded app-wide (App.razor) since 2026-08-22 for
       exactly this reason but this rule never actually pointed to it — changed here app-wide, not
       scoped to any one module, since the owner asked for the whole system, not just Maintenance. */
    font-family: 'Cairo', "Segoe UI", Tahoma, sans-serif;
    /* Real bug found live via Chromium (2026-08-22): this was hardcoded to the dark value with
       no light-theme override — invisible until now because Products/Categories/Suppliers all
       have opaque full-bleed panel backgrounds that happened to cover the gap. ComingSoon.razor's
       emptier layout exposed it. --bg is already theme-aware (both :root blocks above). */
    background: var(--bg);
    color: var(--text);
    /* Real, not cosmetic: the whole point of this rule (owner's explicit ask, 2026-08-22) is that
       nothing on this page should ever force horizontal scroll on a narrow device — every other
       responsive rule in this file exists to keep this true. */
    overflow-x: hidden;
}

/* ══════════════════════════════════════════════════════════════
   App Shell — REBUILT 2026-08-22 for genuine Legacy visual/behavioral
   parity (docs/legacy-visual-spec-appshell-2026-08-22.md), replacing
   the earlier hand-approximated version wholesale, not patched on top
   of it. Every value below is copied from Legacy's real dashboard.html
   + styles.css (verified by direct file read, not memory) — this is
   the same design-token approach already used for Products
   (--lg-*), extended here to the App Shell itself since the owner
   explicitly asked for the Sidebar to match Legacy exactly, not stay
   at its own earlier approximation.

   Real, load-bearing behavioral finding from Legacy (not assumed):
   the sidebar is an off-canvas OVERLAY DRAWER on every screen size,
   including desktop — not a static always-visible column that only
   becomes a drawer on small screens. It auto-closes after every
   single navigation, desktop included. Matched exactly here. ══════ */
:root {
    --sb-bg:            rgba(9, 13, 26, .95);
    --sb-panel-bg:      rgba(var(--th-n-900-rgb), .52);
    --sb-user-card-bg:  rgba(5, 8, 23, .65);
    --sb-nav-hover:     rgba(255, 255, 255, .05);
    --sb-text-primary:  var(--th-n-200);
    --sb-text-secondary:var(--th-n-400);
    --sb-text-muted:    var(--th-n-500);
    --sb-text-heading:  #ffffff;
    --sb-border-subtle: rgba(var(--th-d-0-rgb), .25);
    --sb-sidebar-border:rgba(var(--th-d-0-rgb), .20);
    --sb-sidebar-shadow:-10px 0 40px rgba(0, 0, 0, .55);
    --sb-active-main-bg:rgba(59, 130, 246, .14);
    --sb-nav-sec-bg:        rgba(255, 255, 255, .04);
    --sb-nav-sec-border:    rgba(255, 255, 255, .08);
    --sb-nav-sec-hover-bg:  rgba(255, 255, 255, .08);
    --sb-nav-sec-hover-border: rgba(255, 255, 255, .15);
    --sb-nav-sec-text:      #7a8ba0;
    --sb-nav-sec-hover-text:var(--th-n-200);
    --sb-theme-toggle-bg:     rgba(255, 255, 255, .05);
    --sb-theme-toggle-border: rgba(255, 255, 255, .09);
    --sb-theme-toggle-hover:  rgba(255, 255, 255, .10);
    --sb-theme-label-sub:     var(--th-n-500);
    --sb-overlay-bg:    rgba(0, 0, 0, .52);
    --sb-brand-logo-bg: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.78) 75%, rgba(255,255,255,.55) 100%);
    --sb-w: 268px;
    --sb-ease: cubic-bezier(.22, .61, .36, 1);
    --sb-dur: 280ms;
}
[data-theme="light"] {
    --sb-bg:            rgba(251, 253, 255, .97);
    --sb-panel-bg:      rgba(255, 255, 255, .80);
    --sb-user-card-bg:  rgba(242, 246, 254, .98);
    --sb-nav-hover:     rgba(59, 130, 246, .06);
    --sb-text-primary:  var(--th-n-800);
    --sb-text-secondary:var(--th-n-600);
    --sb-text-muted:    var(--th-n-400);
    --sb-text-heading:  var(--th-n-900);
    --sb-border-subtle: rgba(var(--th-l-1-rgb), .40);
    --sb-sidebar-border:rgba(var(--th-l-1-rgb), .35);
    --sb-sidebar-shadow:-4px 0 30px rgba(80, 110, 180, .12);
    --sb-active-main-bg:rgba(59, 130, 246, .10);
    --sb-nav-sec-bg:        rgba(var(--th-n-900-rgb), .04);
    --sb-nav-sec-border:    rgba(var(--th-n-900-rgb), .09);
    --sb-nav-sec-hover-bg:  rgba(59, 130, 246, .07);
    --sb-nav-sec-hover-border: rgba(59, 130, 246, .18);
    --sb-nav-sec-text:      var(--th-n-500);
    --sb-nav-sec-hover-text:var(--th-n-800);
    --sb-theme-toggle-bg:     rgba(var(--th-n-900-rgb), .05);
    --sb-theme-toggle-border: rgba(var(--th-n-900-rgb), .11);
    --sb-theme-toggle-hover:  rgba(var(--th-n-900-rgb), .09);
    --sb-theme-label-sub:     var(--th-n-500);
    --sb-overlay-bg:    rgba(0, 0, 0, .32);
    --sb-brand-logo-bg: transparent;
}

.app-shell {
    position: relative;
    height: calc(100 * var(--vh));
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}

/* Hamburger toggle — always visible, fixed top-right, every screen size (Legacy: #sidebar-toggle-btn). */
.mobile-menu-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1.5px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .6);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2), inset 0 1px 2px rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--sb-dur) var(--sb-ease), border-color var(--sb-dur) var(--sb-ease), color var(--sb-dur) var(--sb-ease), box-shadow var(--sb-dur) var(--sb-ease);
}
.mobile-menu-btn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .75); }
.mobile-menu-btn.sidebar-open {
    background: linear-gradient(135deg, var(--accent), var(--th-violet-500));
    border-color: rgba(255, 255, 255, .18);
    color: #fff;
    box-shadow: 0 4px 16px rgba(var(--th-accent-500-rgb), .4);
}

/* Hamburger→X morph (Legacy: .hamburger-icon / #close-icon, styles.css ~L1012-1059) —
   3 static bars fade+shrink out, a separate X icon fades+rotates in. Exact Legacy values. */
.hamburger-icon { width: 20px; height: 16px; display: flex; flex-direction: column; justify-content: space-between; transition: opacity .3s ease, transform .3s ease; }
.hamburger-icon span { width: 100%; height: 2px; background: currentColor; border-radius: 2px; }
.mobile-menu-btn.sidebar-open .hamburger-icon { opacity: 0; transform: scale(.8); }
.close-icon { position: absolute; width: 22px; height: 22px; opacity: 0; transform: rotate(45deg) scale(.8); transition: opacity .3s ease, transform .3s ease; }
.mobile-menu-btn.sidebar-open .close-icon { opacity: 1; transform: rotate(0) scale(1); }

.sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: var(--sb-overlay-bg);
}

/* Off-canvas overlay drawer at EVERY size — real Legacy behavior, not an assumption (see doc §5).
   No backdrop-filter here on the overlay itself, only on the panel below (matches Legacy exactly
   and stays consistent with the mobile-sidebar blur+transform bug already avoided elsewhere). */
.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    z-index: 9999;
    width: min(var(--sb-w), calc(85 * var(--vw)));
    max-width: 320px;
    background: var(--sb-bg);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-left: 1px solid var(--sb-sidebar-border);
    box-shadow: var(--sb-sidebar-shadow);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--sb-dur) var(--sb-ease), background var(--sb-dur) var(--sb-ease), box-shadow var(--sb-dur) var(--sb-ease), border-color var(--sb-dur) var(--sb-ease);
    overflow: hidden;
}
.sidebar.sidebar-open { transform: translateX(0); }

.brand-section {
    padding: 16px 18px 12px;
    text-align: center;
    border-bottom: 1px solid var(--sb-border-subtle);
    flex-shrink: 0;
}
.brand-logo-img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border-radius: 50%;
    background: var(--sb-brand-logo-bg);
    padding: 3px;
    margin: 0 auto 8px;
    display: block;
}
.brand-name {
    font-size: 19px;
    font-weight: 900;
    margin: 0;
    line-height: 1;
    background: linear-gradient(135deg, #60a5fa 0%, var(--th-accent2-500) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.brand-sub {
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--sb-text-muted);
    font-weight: 700;
    margin: 2px 0 0;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 8px 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sb-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: right;
    text-decoration: none;
    transition: background 180ms var(--sb-ease), color 180ms var(--sb-ease);
}
.nav-item:hover { background: var(--sb-nav-hover); color: var(--sb-text-heading); }
.nav-item.active {
    background: linear-gradient(to left, var(--sb-active-main-bg), transparent);
    border-right: 3px solid #3b82f6;
    color: var(--sb-text-heading);
}
.nav-item .ni { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-item .ni svg { width: 15px; height: 15px; }

/* Icon accent badges — exact Legacy values (styles.css .ni-*, L1377-1382), same colored-badge
   signature on every nav icon, not a flat single-tone icon set. Legacy's own markup also
   references .ni-amber and .ni-green on a few items (dashboard.html) but never actually defines
   those classes — a real, harmless Legacy CSS bug (the badge silently renders with no background)
   — not reproduced here; those items are mapped to the nearest defined family (orange/emerald)
   instead of a see-through badge, while keeping each item's own real Legacy icon glyph color. */
.ni-blue    { background: rgba(59, 130, 246, .13); }
.ni-purple  { background: rgba(var(--th-accent2-500-rgb), .13); }
.ni-emerald { background: rgba(16, 185, 129, .13); }
.ni-orange  { background: rgba(249, 115, 22, .13); }
.ni-indigo  { background: rgba(var(--th-accent-500-rgb), .13); }

.nav-group-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sb-nav-sec-text);
    background: var(--sb-nav-sec-bg);
    border: 1px solid var(--sb-nav-sec-border);
    cursor: pointer;
    text-align: right;
    margin-top: 2px;
    transition: background 180ms var(--sb-ease), border-color 180ms var(--sb-ease), color 180ms var(--sb-ease);
}
.nav-group-header:hover { background: var(--sb-nav-sec-hover-bg); border-color: var(--sb-nav-sec-hover-border); color: var(--sb-nav-sec-hover-text); }
.nav-group-header .ni { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-group-header .ni svg { width: 14px; height: 14px; }
.acc-chevron { width: 14px; height: 14px; color: var(--sb-text-muted); flex-shrink: 0; transition: transform var(--sb-dur) var(--sb-ease), color 180ms var(--sb-ease); }
.nav-group-header.open .acc-chevron { transform: rotate(180deg); color: var(--sb-text-secondary); }

.nav-group-children {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 0 4px 2px;
    margin-right: 8px;
    border-right: 2px solid rgba(255, 255, 255, .06);
}
[data-theme="light"] .nav-group-children { border-color: rgba(var(--th-n-900-rgb), .09); }

.nav-item.nav-sub {
    padding: 7px 10px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sb-text-muted);
    border: 1px solid transparent;
    gap: 10px;
}
.nav-item.nav-sub:hover { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .07); color: var(--sb-text-primary); }
[data-theme="light"] .nav-item.nav-sub:hover { background: rgba(var(--th-n-900-rgb), .06); border-color: rgba(var(--th-n-900-rgb), .10); color: var(--th-n-800); }
.nav-item.nav-sub.active {
    background: linear-gradient(135deg, rgba(var(--th-accent-500-rgb), .18), rgba(14, 165, 233, .07));
    border-color: rgba(var(--th-accent-500-rgb), .22);
    color: #e0e7ff;
    font-weight: 700;
    box-shadow: 0 2px 12px rgba(var(--th-accent-500-rgb), .12), inset 0 1px 0 rgba(255, 255, 255, .07);
}
[data-theme="light"] .nav-item.nav-sub.active {
    background: linear-gradient(135deg, rgba(var(--th-accent-500-rgb), .13), rgba(14, 165, 233, .07));
    border-color: rgba(var(--th-accent-500-rgb), .25);
    color: #3730a3;
}

/* ── Branch Selector, inside the sidebar (docs/decisions/0035) — same rounded-box language as
   .sb-theme-btn immediately below, not a new visual style. */
.branch-selector-wrap {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    margin: 0 8px 7px;
    border-radius: 12px;
    background: var(--sb-theme-toggle-bg);
    border: 1px solid var(--sb-theme-toggle-border);
}
.branch-selector-wrap i, .branch-selector-static i { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); }
.branch-selector-select {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: var(--sb-text-primary);
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
}
.branch-selector-select:disabled { opacity: .6; cursor: wait; }
.branch-selector-static {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    margin: 0 8px 7px;
    border-radius: 12px;
    background: var(--sb-theme-toggle-bg);
    border: 1px solid var(--sb-theme-toggle-border);
    font-size: 12.5px;
    font-weight: 800;
    color: var(--sb-text-primary);
}

/* ── Theme toggle, inside the sidebar (Legacy: .theme-toggle-wrap, above the user card) ── */
.theme-toggle-wrap { padding: 0 8px; flex-shrink: 0; }
.sb-theme-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border-radius: 12px;
    background: var(--sb-theme-toggle-bg);
    border: 1px solid var(--sb-theme-toggle-border);
    cursor: pointer;
    margin-bottom: 7px;
    transition: background .2s ease, border-color .2s ease;
}
.sb-theme-btn:hover { background: var(--sb-theme-toggle-hover); }
.sb-theme-orb {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #0c1526 0%, #1a3560 100%);
    box-shadow: 0 0 0 1px rgba(var(--th-accent-500-rgb), .22), 0 4px 14px rgba(0, 0, 0, .45);
}
[data-theme="light"] .sb-theme-orb {
    background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 55%, #f97316 100%);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, .32), 0 4px 14px rgba(249, 115, 22, .28);
}
.sb-theme-orb svg { width: 17px; height: 17px; }
.sb-theme-label { flex: 1; text-align: right; }
.sb-theme-label-main { display: block; font-size: 12.5px; font-weight: 800; color: var(--sb-text-primary); line-height: 1.3; }
.sb-theme-label-sub { display: block; font-size: 10px; font-weight: 600; color: var(--sb-theme-label-sub); }
.sb-theme-pill { width: 34px; height: 19px; border-radius: 10px; background: rgba(var(--th-accent-500-rgb), .20); border: 1px solid rgba(var(--th-accent-500-rgb), .28); position: relative; flex-shrink: 0; }
[data-theme="light"] .sb-theme-pill { background: var(--accent); border-color: var(--accent); }
.sb-theme-pill-dot { position: absolute; top: 2.5px; right: 2.5px; width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .36); transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), background .3s ease; }
[data-theme="light"] .sb-theme-pill-dot { transform: translateX(-14px); background: #fff; }

/* ── User status card (Legacy: .user-status-card) ── */
.sidebar-footer {
    background: var(--sb-user-card-bg);
    border-top: 1px solid var(--sb-border-subtle);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 11px 13px 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.user-avatar-wrap { position: relative; flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 14px; border: 1.5px solid rgba(var(--th-accent-500-rgb), .25); }
.user-online-dot { position: absolute; bottom: -2px; left: -2px; width: 10px; height: 10px; background: #22c55e; border-radius: 50%; border: 2px solid var(--sb-bg); }
.current-user { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 900; color: var(--sb-text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logout-btn {
    width: 32px; height: 32px; flex-shrink: 0;
    background: rgba(239, 68, 68, .09);
    border: 1px solid rgba(239, 68, 68, .18);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    color: #f87171;
    cursor: pointer;
    transition: background .18s ease;
}
.logout-btn:hover { background: rgba(239, 68, 68, .18); }
.logout-btn svg { width: 14px; height: 14px; }

.content-area {
    height: calc(100 * var(--vh));
    overflow-y: auto;
    padding: 24px;
}

/* ── App Splash (App.razor) — rebuilt clean 2026-08-22. Disappearance is controlled entirely by
   the inline script in App.razor (opacity -> 0 then remove()); this CSS only needs a transition
   for that opacity change to look smooth, no @keyframes/animation-delay timeline of its own to
   fall out of sync with anything. ── */
.app-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--bg);
    opacity: 1;
    transition: opacity .35s ease;
}
/* Entrance — purely decorative, stronger staggered rise+scale for each line (owner's ask: the
   first pass was too subtle). Independent of the removal mechanism (App.razor/splash.js own that
   entirely); this only ever affects opacity/transform, never display/visibility, so it can't
   interfere with removal. */
@keyframes app-splash-in {
    from { opacity: 0; transform: translateY(22px) scale(.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.app-splash > * { animation: app-splash-in .6s cubic-bezier(.2, .9, .3, 1.3) both; }

.app-splash-logo-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px; height: 88px;
    margin: 0 auto 16px;
    animation-delay: 0s;
}
.app-splash-logo-wrap::before {
    /* Spinning conic-gradient ring — reads as "energy/loading", not just a static glow. Rotation
       is a `transform`-only animation, cheap regardless of element size. */
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    animation: app-splash-spin 2.4s linear infinite;
}
.app-splash-logo-wrap::after {
    /* Pulsing glow behind the ring — bigger swing than before, color-shifting between the two
       accent tones for more visual energy. */
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    opacity: .3;
    z-index: -1;
    animation: app-splash-glow 1.6s ease-in-out infinite;
}
@keyframes app-splash-spin {
    to { transform: rotate(360deg); }
}
@keyframes app-splash-glow {
    0%, 100% { transform: scale(0.75); opacity: .25; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); }
    50%      { transform: scale(1.35); opacity: .55; background: radial-gradient(circle, var(--accent-2) 0%, transparent 70%); }
}
.app-splash-logo {
    position: relative;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    border-radius: 50%;
    background: var(--bg);
    animation: app-splash-pulse 1.3s ease-in-out infinite;
}
@keyframes app-splash-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}
.app-splash-title { font-size: 24px; font-weight: 800; color: var(--text); animation-delay: .1s; }
.app-splash-sub { font-size: 11px; color: var(--text-sub); margin-top: 4px; letter-spacing: .08em; text-transform: uppercase; animation-delay: .18s; }
/* Purely decorative — none of these three control the splash's removal (that's the JS-driven
   mechanism in App.razor/splash.js). Progress-fill's duration is tuned to roughly match the
   splash's actual typical visible window (~700ms-1s), so it reads as "in progress" rather than
   restarting/looking stuck if the splash disappears mid-way through a longer animation. */
.app-splash-progress-track {
    width: 220px; height: 4px; border-radius: 99px; background: var(--field-bg);
    margin: 22px auto 0; overflow: hidden; position: relative;
    animation-delay: .26s;
}
.app-splash-progress-fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    animation: app-splash-progress .9s ease-out forwards;
    position: relative;
    overflow: hidden;
}
.app-splash-progress-fill::after {
    /* Shimmer sweep across the fill — a moving highlight, not a static gradient. */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: app-splash-shimmer .9s ease-in-out infinite;
}
@keyframes app-splash-progress {
    0%   { width: 0%; }
    100% { width: 100%; }
}
@keyframes app-splash-shimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}
.app-splash-status { font-size: 11px; color: var(--muted); margin-top: 10px; animation-delay: .32s; }
.app-splash-bar { display: flex; gap: 6px; justify-content: center; margin-top: 14px; animation-delay: .38s; }
.app-splash-bar span {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    animation: app-splash-dot 1.2s ease-in-out infinite;
}
.app-splash-bar span:nth-child(2) { animation-delay: 0.15s; }
.app-splash-bar span:nth-child(3) { animation-delay: 0.3s; }
@keyframes app-splash-dot {
    0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
    40%           { opacity: 1; transform: translateY(-4px); }
}

/* ── Session restore gate (MainLayout.razor) ── */
.restore-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100 * var(--vh));
    /* Paints its own background rather than relying on html/body (which deliberately stays the
       App Shell's fixed dark color, not theme-token-driven — see the tokens comment above): this
       gate can appear for an about-to-be-authenticated user in Light mode, and it must not show
       dark-on-dark or light-text-on-dark-body. */
    background: var(--bg);
    color: var(--text-sub);
    font-size: 13px;
}

/* ── Login ── */
.login-page {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100 * var(--vh));
    background: var(--bg);
    /* Contains the ambient blobs below — they're positioned outside the visible box on purpose
       (to float partly off-screen), `overflow: hidden` here is what stops that from ever causing
       page scroll (the standing rule this session: nothing on this app should force horizontal
       scroll on a narrow device). */
    overflow: hidden;
}

/* Ambient background — ported from Legacy's own login screen (index.html .blob elements, the
   pattern the owner already approved via screenshot). Static blur + a slow `transform` float is a
   different, much lower-risk case than the mobile sidebar bug (project_mobile_sidebar_perf_audit):
   that was blur *combined with* a frequently-toggled interactive drawer animation; this is a few
   idle decorative shapes on an otherwise-static screen, competing with nothing else for the GPU.
   `will-change: transform` hints the browser to promote these to their own compositor layer once,
   rather than repainting the blur on every frame. */
.login-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.login-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .55;
    will-change: transform, opacity;
    animation: login-blob-float 8s ease-in-out infinite alternate;
}
[data-theme="light"] .login-blob { opacity: .38; }
.login-blob-1 {
    width: 460px; height: 460px;
    top: -160px; right: -120px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    animation-name: login-blob-float-1;
    animation-duration: 9s;
}
.login-blob-2 {
    width: 420px; height: 420px;
    bottom: -170px; left: -130px;
    background: radial-gradient(circle, var(--accent-2) 0%, transparent 70%);
    animation-name: login-blob-float-2;
    animation-duration: 11s;
    animation-delay: -3s;
}
.login-blob-3 {
    width: 300px; height: 300px;
    top: 38%; left: 4%;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    animation-name: login-blob-float-3;
    animation-duration: 7s;
    animation-delay: -5s;
    opacity: .4;
}
[data-theme="light"] .login-blob-3 { opacity: .26; }
.login-blob-4 {
    width: 240px; height: 240px;
    top: 8%; left: 55%;
    background: radial-gradient(circle, var(--accent-2) 0%, transparent 70%);
    animation-name: login-blob-float-2;
    animation-duration: 10s;
    animation-delay: -1s;
    opacity: .32;
}
[data-theme="light"] .login-blob-4 { opacity: .2; }
/* Each blob gets its own path (not just one shared keyframe reused identically) so the motion
   reads as organic drifting rather than everything pulsing in lockstep — real, clearly visible
   movement (owner's ask: the first pass at ~20px over 16-19s was imperceptible). */
@keyframes login-blob-float-1 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-90px, 70px) scale(1.15); }
    100% { transform: translate(-40px, -50px) scale(0.95); }
}
@keyframes login-blob-float-2 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(80px, -60px) scale(0.9); }
    100% { transform: translate(50px, 60px) scale(1.1); }
}
@keyframes login-blob-float-3 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(70px, 90px) scale(1.2); }
    100% { transform: translate(-60px, 40px) scale(0.9); }
}

.login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    box-sizing: border-box;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 28px;
    text-align: center;
    color: var(--text);
}

.card-logo-badge {
    width: 56px; height: 56px; margin: 0 auto;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--th-accent-400), var(--th-accent2-500));
    box-shadow: 0 8px 24px rgba(var(--th-accent-400-rgb), .35);
}
.card-brand-name { font-size: 19px; font-weight: 800; margin-top: 14px; color: #c7d2fe; }
/* #c7d2fe (light lavender) is meant to sit on a near-black card — on the light card background
   it would be nearly unreadable, so it gets a darker, still-branded indigo instead. */
[data-theme="light"] .card-brand-name { color: #4338ca; }
.card-brand-sub { font-size: 11.5px; color: var(--text-sub); margin-bottom: 22px; }
.field-group { text-align: right; }
.field-wrap { margin-bottom: 14px; }
.field-label { display: block; font-size: 12px; color: var(--text-sub); margin-bottom: 4px; }
.input-box { position: relative; display: flex; align-items: center; }
.field-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 38px 11px 38px;
    border-radius: 8px;
    border: 1px solid var(--field-border);
    background: var(--field-bg);
    color: var(--text);
    font-size: 15px; /* prevents iOS auto-zoom on focus */
}
.input-box .inp-icon {
    position: absolute; right: 12px; color: var(--muted);
    display: flex; align-items: center; pointer-events: none;
}
.input-box .pass-toggle {
    position: absolute; left: 12px; background: none; border: none;
    color: var(--muted); cursor: pointer; display: flex; align-items: center; padding: 4px;
}
.remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    color: var(--text-sub);
    margin: 2px 0 16px;
    cursor: pointer;
}
.btn-login {
    width: 100%;
    padding: 13px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(90deg, var(--th-accent-500), var(--th-accent2-500));
    color: white;
    font-weight: 700;
    font-size: 14.5px;
    cursor: pointer;
    margin-top: 6px;
}
.btn-login:disabled { opacity: .6; cursor: default; }
.error-box {
    background: var(--danger-bg);
    color: var(--danger-text);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    margin: 10px 0;
}
.security-row { display: flex; justify-content: center; gap: 16px; margin-top: 18px; }
.sec-badge {
    display: flex; align-items: center; gap: 5px;
    font-size: 10.5px; color: var(--muted);
}
.sec-link { color: var(--th-accent-400, #a78bfa); font-weight: 700; text-decoration: none; }
.sec-link:hover { text-decoration: underline; }
.card-footer { font-size: 11px; color: var(--muted); margin-top: 14px; }
.card-footer span { color: var(--text-sub); }

/* ── Screens ── */
.inline-form { display: flex; gap: 8px; margin-bottom: 16px; }
.inline-form .field-input { width: auto; flex: 1; }
.inline-form button {
    padding: 10px 18px;
    border-radius: 8px;
    border: none;
    background: var(--th-accent-600);
    color: white;
    cursor: pointer;
}
.table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; min-width: 480px; border-collapse: collapse; }
.data-table th, .data-table td {
    text-align: right;
    padding: 10px 12px;
    border-bottom: 1px solid #1f2937;
    font-size: 13px;
    white-space: nowrap;
}
.empty-state { color: var(--th-n-500); padding: 20px; text-align: center; }
.muted { color: var(--th-n-400); font-size: 13px; }

/* ══════════════════════════════════════════════════════════════
   Responsive — Mobile / Tablet / Desktop (owner's explicit ask,
   2026-08-22: "make the whole project fully compatible with mobile,
   tablet and desktop, don't repeat Legacy's old problems").

   The Sidebar itself no longer needs a breakpoint here — it's an
   off-canvas overlay drawer at EVERY size now (real Legacy behavior,
   see the App Shell section above), so its own width/position/
   transform are already correct everywhere via var(--sb-w) with a
   `min(...,calc(85 * var(--vw)))` clamp, exactly matching Legacy's own approach. The
   old version of this file had the drawer only activate <=900px
   (static-on-desktop) with separate, conflicting width/z-index/
   shadow values — that's been removed here, not left duplicated,
   now that the base rules already match Legacy unconditionally.

   Honest flag, not resolved either way: the sidebar panel below has
   `backdrop-filter: blur(40px)` AND animates via `transform` on every
   open/close — the same combination previously root-caused as a real
   mobile GPU-thrash bug (project_mobile_sidebar_perf_audit). This is
   Legacy's own actual, current, shipped CSS (verified by direct file
   read, not a guess) — kept here for genuine visual parity rather
   than silently dropping the blur, since "100% parity" was the
   explicit ask this round and the drawer now opens/closes on every
   single navigation (Legacy's real behavior), making this a real risk
   worth low-end-device testing before calling it production-safe, not
   a settled question either direction. Flagged explicitly in the
   report, not quietly decided. ═══════════════════════════════════ */
@media (max-width: 480px) {
    .login-page { padding: 16px; }
    .login-card { padding: 26px 20px; }
    .card-brand-name { font-size: 17px; }

    .content-area { padding: 60px 12px 16px; }

    .inline-form { flex-direction: column; align-items: stretch; }
    .inline-form .field-input { width: 100%; }
    .inline-form button { width: 100%; }
}

@media (max-width: 900px) {
    /* Touch targets: comfortably above the ~44px accessibility minimum. */
    .nav-item, .nav-group-header, .logout-btn, .btn-login, .inline-form button {
        min-height: 44px;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   CATEGORIES (أقسام المنتجات) — Legacy: panels/inventory/categories.html,
   read in full 2026-08-22 (Products Closure Phase 2). Its own real, self-
   contained visual identity — a Tree View + KPI cards, genuinely different
   from Products' inherited-dashboard-iframe design, NOT a reuse of .lg-*.
   Scoped under .cat-page throughout so nothing here can leak elsewhere.
   Delete-confirm and toast reuse the already-built shared ConfirmDialog/
   ToastService instead of rebuilding Legacy's own (identical visual result).
   ══════════════════════════════════════════════════════════════════════ */
.cat-page {
    --cat-bg-card: rgba(var(--th-d-8-rgb), .55);
    --cat-card-border: rgba(255, 255, 255, .07);
    --cat-bg-input: rgba(255, 255, 255, .05);
    --cat-bg-hover: rgba(255, 255, 255, .07);
    --cat-teal: #14b8a6;
    --cat-teal-bg: rgba(20, 184, 166, .12);
    --cat-purple: var(--th-violet-500);
    --cat-purple-bg: rgba(var(--th-violet-500-rgb), .12);
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}
[data-theme="light"] .cat-page {
    --cat-bg-card: rgba(255, 255, 255, .78);
    --cat-card-border: rgba(var(--th-n-900-rgb), .08);
    --cat-bg-input: rgba(var(--th-n-900-rgb), .04);
    --cat-bg-hover: rgba(var(--th-accent-500-rgb), .06);
}

/* .cat-panel-header/.cat-panel-icon/.cat-panel-title/.cat-panel-subtitle/.cat-add-btn retired
   2026-08-23 — Categories now renders through the shared PageHeader component (.lg-page-header/
   .lg-page-icon/.lg-page-title/.lg-page-subtitle/.lg-btn-add), same as every other list screen. */

.cat-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.cat-kpi-card { background: var(--cat-bg-card); border: 1px solid var(--cat-card-border); border-radius: 14px; padding: 12px 14px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); position: relative; overflow: hidden; }
.cat-kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 99px 99px 0 0; }
.cat-kpi-card.c-indigo::before { background: linear-gradient(90deg, var(--th-accent-500), var(--th-accent-400)); }
.cat-kpi-card.c-purple::before { background: linear-gradient(90deg, var(--th-violet-500), var(--th-accent2-500)); }
.cat-kpi-card.c-teal::before { background: linear-gradient(90deg, #14b8a6, var(--th-accent-500)); }
.cat-kpi-card.c-amber::before { background: linear-gradient(90deg, #f59e0b, #f97316); }
.cat-kpi-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cat-kpi-label { font-size: 10.5px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.cat-kpi-icon { width: 27px; height: 27px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cat-kpi-icon svg { width: 13px; height: 13px; }
.c-indigo .cat-kpi-icon { background: rgba(var(--th-accent-500-rgb), .12); color: var(--accent); }
.c-purple .cat-kpi-icon { background: var(--cat-purple-bg); color: var(--cat-purple); }
.c-teal .cat-kpi-icon { background: var(--cat-teal-bg); color: var(--cat-teal); }
.c-amber .cat-kpi-icon { background: rgba(245, 158, 11, .12); color: #f59e0b; }
.cat-kpi-value { font-size: 22px; font-weight: 900; line-height: 1.1; color: var(--text); }
.cat-kpi-sub { font-size: 10px; color: var(--muted); font-weight: 600; margin-top: 2px; }

.cat-filter-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.cat-search-wrap { width: 240px; flex-shrink: 0; display: flex; align-items: center; gap: 7px; background: var(--cat-bg-input); border: 1px solid var(--cat-card-border); border-radius: 11px; padding: 0 10px; height: 38px; transition: border-color .17s, box-shadow .17s; }
.cat-search-wrap:focus-within { border-color: rgba(var(--th-accent-500-rgb), .5); box-shadow: 0 0 0 3px rgba(var(--th-accent-500-rgb), .12); }
.cat-search-wrap svg { width: 13px; height: 13px; color: var(--muted); flex-shrink: 0; }
.cat-search-input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 12.5px; min-width: 0; }
.cat-search-input::placeholder { color: var(--muted); }
.cat-search-clear-btn { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: none; background: none; color: var(--muted); cursor: pointer; flex-shrink: 0; }
.cat-search-clear-btn:hover { color: var(--text); }
.cat-search-clear-btn svg { width: 12px; height: 12px; }
.cat-chips { display: flex; gap: 5px; align-items: center; }
.cat-chip { padding: 5px 12px; border-radius: 20px; border: 1px solid var(--cat-card-border); background: var(--cat-bg-input); font-family: inherit; font-size: 11px; font-weight: 700; color: var(--muted); cursor: pointer; transition: all .17s; white-space: nowrap; }
.cat-chip.active { background: rgba(var(--th-accent-500-rgb), .18); border-color: rgba(var(--th-accent-500-rgb), .5); color: var(--accent); }
.cat-chip:hover:not(.active) { background: var(--cat-bg-hover); }
.cat-clear-filter-btn { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 10px; background: linear-gradient(135deg, rgba(239, 68, 68, .18), rgba(239, 68, 68, .08)); border: 1.5px solid rgba(239, 68, 68, .45); color: #f87171; font-family: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.cat-clear-filter-btn:hover { background: linear-gradient(135deg, rgba(239, 68, 68, .28), rgba(239, 68, 68, .15)); }
.cat-clear-filter-btn svg { width: 14px; height: 14px; }

.cat-tree-section { margin-bottom: 10px; }
.cat-tree-root-item { background: var(--cat-bg-card); border: 1px solid var(--cat-card-border); border-radius: 14px; overflow: hidden; transition: border-color .17s; }
.cat-tree-root-item:hover { border-color: rgba(var(--th-accent-500-rgb), .3); }
.cat-tree-root-item.orphan { border-color: rgba(245, 158, 11, .3); }
.cat-tree-root-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; user-select: none; }
.cat-tree-root-row:hover { background: var(--cat-bg-hover); }
.cat-tree-root-row.leaf { cursor: default; }
.cat-tree-toggle-btn { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(var(--th-accent-500-rgb), .1); border: 1px solid rgba(var(--th-accent-500-rgb), .2); color: var(--accent); }
.cat-tree-toggle-btn svg { width: 11px; height: 11px; transition: transform .17s; }
.cat-tree-toggle-btn.expanded svg { transform: rotate(90deg); }
.cat-tree-toggle-btn.leaf { background: transparent; border-color: transparent; color: var(--muted); }
.cat-icon-badge { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #fff; }
.cat-icon-badge.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 10px; }
.cat-info { flex: 1; min-width: 0; }
.cat-name { font-size: 13px; font-weight: 800; color: var(--text); }
.cat-name.sm { font-size: 12.5px; }
.cat-meta { font-size: 10.5px; color: var(--muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.cat-type-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 800; }
.cat-type-badge.type-main { background: rgba(var(--th-accent-500-rgb), .14); color: var(--accent); border: 1px solid rgba(var(--th-accent-500-rgb), .25); }
.cat-type-badge.type-sub { background: var(--cat-teal-bg); color: var(--cat-teal); border: 1px solid rgba(20, 184, 166, .22); }
/* .cat-actions/.cat-act-btn retired 2026-08-23 — Categories now uses the shared .lg-act-btns/
   .lg-act-btn* component (see its definition near .lg-status-dot) instead of a near-duplicate
   per-screen copy. */

.cat-tree-children { border-top: 1px solid var(--border); overflow: hidden; }
.cat-tree-child-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 44px; border-bottom: 1px solid var(--border); position: relative; }
.cat-tree-child-row:last-child { border-bottom: none; }
.cat-tree-child-row:hover { background: var(--cat-bg-hover); }
.cat-tree-child-row::before { content: ''; position: absolute; right: 26px; top: 50%; transform: translateY(-50%); width: 10px; height: 1px; background: rgba(var(--th-accent-500-rgb), .3); }
.cat-orphan-heading { font-size: 10px; font-weight: 800; color: #f59e0b; letter-spacing: .08em; text-transform: uppercase; margin: 16px 0 6px; display: flex; align-items: center; gap: 6px; padding: 0 2px; }
.cat-orphan-heading svg { width: 13px; height: 13px; }

/* Type selector + parent-field slide (modal) */
.cat-type-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cat-type-option { padding: 12px 14px; border-radius: 11px; cursor: pointer; border: 2px solid var(--lg-border); background: var(--lg-input-bg); display: flex; align-items: center; gap: 10px; transition: all .17s; }
.cat-type-option:hover { background: rgba(255, 255, 255, .04); }
.cat-type-option.selected.main { border-color: var(--accent); background: rgba(var(--th-accent-500-rgb), .1); }
.cat-type-option.selected.sub { border-color: var(--cat-teal); background: rgba(20, 184, 166, .08); }
.cat-type-option-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cat-type-option-icon svg { width: 15px; height: 15px; }
.cat-type-option.main .cat-type-option-icon { background: rgba(var(--th-accent-500-rgb), .15); color: var(--accent); }
.cat-type-option.sub .cat-type-option-icon { background: var(--cat-teal-bg); color: var(--cat-teal); }
.cat-type-option-label { font-size: 12.5px; font-weight: 800; color: var(--text); }
.cat-type-option-desc { font-size: 10px; color: var(--muted); margin-top: 1px; }

@media (max-width: 900px) {
    .cat-kpi-strip { grid-template-columns: repeat(2, 1fr); }
    .cat-search-wrap { width: 100%; }
    .cat-tree-child-row { padding-right: 36px; }
}

/* ── Suppliers (Legacy: panels/purchases/suppliers.html) — rebuilt 2026-08-22 during the unified
   Products/Categories/Suppliers re-audit, replacing the bare skeleton. Reuses lg-* tokens
   throughout — no new color system, same visual identity as Products/Categories. ── */
.sup-badge-row { display: flex; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.sup-mini-badge {
    display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px;
    font-size: 9.5px; font-weight: 700;
}
.sup-mini-badge.trusted { background: rgba(16, 185, 129, .12); color: #34d399; }
.sup-mini-badge.customer { background: rgba(var(--th-accent-500-rgb), .12); color: var(--th-accent-400); }
.sup-mini-badge.new { background: rgba(245, 158, 11, .12); color: #fbbf24; }

.sup-debt-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800;
}
.sup-debt-pill.due { background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .25); color: #fbbf24; }
.sup-debt-pill.credit { background: rgba(var(--th-accent-500-rgb), .12); border: 1px solid rgba(var(--th-accent-500-rgb), .25); color: var(--th-accent-400); }
.sup-debt-pill.none { background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .2); color: #34d399; }
.sup-pay-btn {
    border: none; background: rgba(255, 255, 255, .08); color: var(--text); border-radius: 7px;
    padding: 2px 8px; font-size: 10.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.sup-pay-btn:hover { background: rgba(255, 255, 255, .16); }

.sup-stars { display: flex; gap: 2px; }
.sup-stars svg { width: 13px; height: 13px; }
.sup-stars .filled { color: #fbbf24; fill: #fbbf24; }
.sup-stars .empty { color: var(--lg-border); }
.sup-star-input { display: flex; gap: 4px; cursor: pointer; }
.sup-star-input svg { width: 22px; height: 22px; }
.sup-star-input .filled { color: #fbbf24; fill: #fbbf24; }
.sup-star-input .empty { color: var(--lg-border); }

.sup-refresh-btn {
    width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--lg-panel-border);
    background: var(--lg-panel-bg); color: var(--muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sup-refresh-btn:hover { color: var(--text); background: var(--lg-hover-bg); }
.sup-refresh-btn svg { width: 16px; height: 16px; }
.sup-refresh-btn.spinning svg { animation: sup-spin .7s linear infinite; }
@keyframes sup-spin { to { transform: rotate(360deg); } }

/* Statement panel + payment modal — reuse .lg-modal-overlay/.lg-modal shell */
.sup-stmt-header { display: flex; align-items: center; gap: 12px; padding: 4px 0 14px; border-bottom: 1px solid var(--lg-border); margin-bottom: 14px; }
.sup-stmt-avatar {
    width: 44px; height: 44px; border-radius: 12px; background: rgba(var(--th-accent-500-rgb), .12);
    color: var(--th-accent-400); display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 15px; flex-shrink: 0;
}
.sup-stmt-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.sup-stmt-kpi { background: var(--lg-input-bg); border: 1px solid var(--lg-border); border-radius: 12px; padding: 10px 12px; text-align: center; }
.sup-stmt-kpi-val { font-size: 15px; font-weight: 900; color: var(--text); }
.sup-stmt-kpi-lbl { font-size: 10px; color: var(--muted); margin-top: 2px; }
.sup-pay-row {
    display: flex; align-items: center; justify-content: space-between; padding: 10px 12px;
    border: 1px solid var(--lg-border); border-radius: 10px; margin-bottom: 8px; font-size: 12.5px;
}
.sup-pay-row.payment { border-inline-start: 3px solid #fbbf24; }
.sup-pay-row.refund { border-inline-start: 3px solid var(--th-accent-400); }
.sup-pay-type-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.sup-pay-type-btn {
    flex: 1; padding: 10px; border-radius: 10px; border: 2px solid var(--lg-border);
    background: var(--lg-input-bg); color: var(--text); font-family: inherit; font-weight: 700;
    font-size: 12.5px; cursor: pointer;
}
.sup-pay-type-btn.active.payment { border-color: #fbbf24; background: rgba(245, 158, 11, .1); color: #fbbf24; }
.sup-pay-type-btn.active.refund { border-color: var(--th-accent-400); background: rgba(var(--th-accent-500-rgb), .1); color: var(--th-accent-400); }
.sup-pay-presets { display: flex; gap: 6px; margin: 8px 0 14px; flex-wrap: wrap; }
.sup-pay-preset-btn {
    border: 1px solid var(--lg-border); background: var(--lg-input-bg); color: var(--text-sub);
    border-radius: 8px; padding: 5px 10px; font-size: 11px; cursor: pointer; font-family: inherit;
}
.sup-pay-preset-btn:hover { background: rgba(255, 255, 255, .06); }

/* ── Customer Financial Center (Legacy: panels/customers/customers.html #stmt-overlay,
   literally labelled "النموذج التجريبي" / trial model in Legacy's own comments) — full-screen
   customer profile opened by the row's "عرض الملف" action. Rebuilt 2026-08-23 at full Legacy
   visual scale per explicit owner instruction, using V2's existing --lg-*, --text, --muted tokens
   instead of Legacy's raw hardcoded dark-mode hex + duplicate html[data-theme=light] blocks — same
   layout/sizes/structure, auto-adapts to both themes through the token system already in place.
   Elements whose real content needs Sales/Repairs data that doesn't exist in V2 yet (Score gauge,
   activity heatmap, insights/alerts sidebar, sales/repairs/devices tabs, total-transacted/
   outstanding/last-transaction KPIs) render at full size with an honest "—"/"غير متاح حاليًا"
   state — never a fake number — and get wired to real data when those modules are built, without
   redesigning this shell. ── */
.fc-overlay {
    position: fixed; inset: 0; z-index: 950; background: rgba(0, 0, 0, .6); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 0;
}
.fc-shell {
    width: calc(85 * var(--vw)); height: calc(85 * var(--vh)); background: var(--card-bg); border-radius: 20px;
    border: 1px solid var(--lg-panel-border); box-shadow: var(--lg-panel-shadow);
    display: flex; flex-direction: column; overflow: hidden;
}
@media (max-width: 900px) { .fc-shell { width: calc(100 * var(--vw)); height: calc(100 * var(--vh)); border-radius: 0; } }

.fc-topbar { display: flex; align-items: center; gap: 12px; padding: 14px 22px; background: var(--lg-input-bg); border-bottom: 1px solid var(--lg-border); flex-shrink: 0; }
.fc-shell-icon { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(135deg, var(--th-accent-500), var(--th-accent2-500)); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px rgba(var(--th-accent-500-rgb), .35); }
.fc-shell-icon svg { width: 16px; height: 16px; color: #fff; }
.fc-topbar-title { font-size: 14px; font-weight: 800; color: var(--muted); flex: 1; }
.fc-actions { display: flex; gap: 6px; align-items: center; }
.fc-action-btn { display: flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 9px; border: 1px solid; font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap; font-family: inherit; background: transparent; }
.fc-action-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.fc-action-btn.wa { background: rgba(37, 211, 102, .1); border-color: rgba(37, 211, 102, .3); color: #25d366; }
.fc-action-btn.img { background: rgba(var(--th-accent-500-rgb), .1); border-color: rgba(var(--th-accent-500-rgb), .3); color: var(--th-accent-400); }
.fc-action-btn.pdf { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .3); color: #f87171; }
.fc-close-btn { width: 34px; height: 34px; border-radius: 10px; background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .3); color: #f87171; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fc-close-btn:hover { background: rgba(239, 68, 68, .2); color: #fca5a5; }
.fc-close-btn svg { width: 15px; height: 15px; }
.fc-maximize-btn { width: 34px; height: 34px; border-radius: 10px; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .3); color: #fbbf24; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fc-maximize-btn:hover { background: rgba(245, 158, 11, .2); color: #fcd34d; }
.fc-maximize-btn svg { width: 15px; height: 15px; }
.fc-shell.maximized { width: calc(100 * var(--vw)); height: calc(100 * var(--vh)); border-radius: 0; }

.fc-scroll { flex: 1; overflow-y: auto; }
.fc-hero { padding: 20px 22px 0; }
.fc-hero-top { position: relative; overflow: hidden; border-radius: 20px; padding: 24px 26px; background: linear-gradient(135deg, rgba(var(--th-accent-500-rgb), .14) 0%, rgba(var(--th-accent2-500-rgb), .08) 45%, var(--card-bg) 100%); border: 1px solid var(--lg-panel-border); box-shadow: 0 4px 20px rgba(0, 0, 0, .12); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.fc-avatar { width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--th-accent-500), var(--th-accent2-500)); box-shadow: 0 8px 26px rgba(0, 0, 0, .25); }
.fc-hero-info { flex: 1; min-width: 220px; }
.fc-hero-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.fc-hero-name { font-size: 22px; font-weight: 900; color: var(--text); line-height: 1.2; }
.fc-hero-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fc-hero-phone, .fc-identity-counts { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-sub); font-weight: 700; background: var(--lg-input-bg); border: 1px solid var(--lg-border); padding: 4px 11px; border-radius: 99px; }
.fc-hero-phone { direction: ltr; }
.fc-hero-badges { display: flex; gap: 6px; }

.fc-score-wrap { z-index: 1; flex-shrink: 0; min-width: 168px; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-inline-start: 18px; border-inline-start: 1px solid var(--lg-panel-border); }
.fc-score-gauge { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
.fc-score-gauge svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.fc-score-gauge-track { fill: none; stroke: var(--lg-border); stroke-width: 8; }
.fc-score-gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fc-score-num { font-size: 22px; font-weight: 900; color: var(--muted); line-height: 1; }
.fc-score-lbl { font-size: 8.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }
.fc-score-band { display: inline-block; padding: 3px 13px; border-radius: 99px; font-size: 11px; font-weight: 900; background: var(--lg-input-bg); color: var(--muted); }
.fc-score-note { font-size: 9.5px; color: var(--muted); text-align: center; }

.fc-story-wrap { background: var(--lg-input-bg); border: 1px solid var(--lg-border); border-radius: 16px; padding: 18px 20px; margin-bottom: 16px; }
.fc-story-track { height: 8px; border-radius: 99px; background: var(--lg-border); overflow: hidden; margin: 12px 0 10px; }
.fc-story-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #34d399, #10b981); }
.fc-story-bottom { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-story-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; font-size: 12px; font-weight: 800; }
.fc-story-tag.success { background: rgba(16, 185, 129, .12); color: #34d399; }
.fc-story-tag.danger { background: rgba(239, 68, 68, .12); color: #f87171; }
.fc-story-tag.muted { background: var(--lg-input-bg); color: var(--muted); }

.fc-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 64px; grid-auto-flow: dense; gap: 1px; background: var(--lg-border); border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
@media (max-width: 640px) { .fc-bento { grid-template-columns: repeat(2, 1fr); } }
.fc-bento-tile { background: var(--card-bg); padding: 9px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.fc-bento-span2 { grid-column: span 2; }
.fc-bento-rspan2 { grid-row: span 2; }
.fc-bento-big .fc-bento-val { font-size: 22px; }
.fc-bento-val { font-size: 14.5px; font-weight: 900; line-height: 1; }
.fc-bento-lbl { font-size: 8.5px; font-weight: 700; color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.fc-kc-blue { color: #60a5fa; } .fc-kc-purple { color: var(--th-accent2-400); } .fc-kc-red { color: #f87171; } .fc-kc-green { color: #34d399; } .fc-kc-amber { color: #fbbf24; } .fc-kc-muted { color: var(--muted); }

.fc-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--lg-border); flex-shrink: 0; padding: 0 22px; overflow-x: auto; }
.fc-tab { display: flex; align-items: center; gap: 7px; padding: 13px 18px; border: none; border-bottom: 2.5px solid transparent; background: transparent; font-size: 12px; font-weight: 800; color: var(--muted); cursor: pointer; white-space: nowrap; font-family: inherit; }
.fc-tab svg { width: 14px; height: 14px; }
.fc-tab .fc-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 99px; background: var(--lg-input-bg); color: var(--muted); font-size: 10px; font-weight: 900; padding: 0 5px; }
.fc-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.fc-tab.active .fc-tab-count { background: rgba(var(--th-accent-500-rgb), .18); color: var(--accent); }
.fc-tab:disabled { cursor: not-allowed; opacity: .55; }

.fc-grid { display: grid; grid-template-columns: 1fr 300px; gap: 4px; align-items: start; }
@media (max-width: 900px) { .fc-grid { grid-template-columns: 1fr; } }
.fc-main { min-width: 0; padding: 18px 22px; }
.fc-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 20px 0; }
.fc-side-block { background: var(--lg-input-bg); border: 1px solid var(--lg-border); border-radius: 16px; padding: 16px 15px; }
.fc-side-title { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--lg-border); }
.fc-side-title svg { width: 13px; height: 13px; flex-shrink: 0; }
.fc-side-empty { font-size: 11.5px; color: var(--muted); text-align: center; padding: 6px 0; }
.fc-heatmap-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; overflow-x: auto; padding-bottom: 2px; }
.fc-heatmap-cell { width: 10px; height: 10px; border-radius: 3px; background: var(--lg-border); flex-shrink: 0; }

.fc-panel-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; color: var(--muted); text-align: center; }
.fc-panel-empty svg { width: 32px; height: 32px; opacity: .5; }
.fc-portal-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; font-size: 10px; font-weight: 800; background: var(--lg-input-bg); color: var(--muted); border: 1px solid var(--lg-border); }
.fc-mini-stat { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-sub); }
.fc-mini-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════
   طلبات الشراء ("الطلبات") — docs/architecture-purchase-requests-2026-08-27.md §9.
   A slide-out DRAWER (not a centered modal, deliberate Legacy-parity choice — the
   background list stays visible/scrollable behind it) + a floating bulk-selection bar,
   the two genuinely new UI concepts this screen needs beyond the existing .lg-*/.fc-*
   vocabulary. Everything else (KPI cards, table, filters, tabs, item composer) reuses
   the existing classes exactly, per the standing Visual Identity rule.
   ══════════════════════════════════════════════════════════════════ */
/* z-index 260/261 — deliberately BELOW .lg-modal-overlay's 300 (AppModal/ConfirmDialog), so any
   real dialog opened from within the panel (WhatsApp send, confirm cancel/delete) correctly stacks
   on top of it, same layering AppModal-over-page content already relies on. */
.rq-panel-overlay { position: fixed; inset: 0; z-index: 260; background: rgba(0,0,0,.4); }
/* App is always Arabic/RTL — inset-inline-start:0 sits at the physical right edge; the panel
   slides in from that same physical edge (translateX is physical, not logical, regardless of dir). */
.rq-panel { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(460px, calc(92 * var(--vw))); background: var(--lg-panel-bg); backdrop-filter: blur(14px); border-inline-end: 1px solid var(--lg-panel-border); box-shadow: 12px 0 40px rgba(0,0,0,.35); display: flex; flex-direction: column; z-index: 261; animation: rqSlideIn .25s cubic-bezier(.22,.61,.36,1) both; }
@keyframes rqSlideIn { from { transform: translateX(100%); opacity: .4; } to { transform: translateX(0); opacity: 1; } }
.rq-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--lg-border); flex-shrink: 0; }
.rq-panel-title-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rq-panel-title { font-size: 15px; font-weight: 900; }
.rq-panel-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.rq-panel-footer { padding: 12px 18px; border-top: 1px solid var(--lg-border); flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) { .rq-panel { width: calc(100 * var(--vw)); } }

.rq-bulk-bar { display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: rgba(var(--th-accent-500-rgb),.08); border: 1px solid rgba(var(--th-accent-500-rgb),.25); border-radius: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.rq-bulk-count { font-size: 12.5px; font-weight: 800; color: var(--accent); }
.rq-bulk-spacer { flex: 1; }

.rq-pri-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.rq-pri-badge.critical { color: var(--lg-danger); }
.rq-pri-badge.urgent { color: #f59e0b; }
.rq-pri-badge.normal { color: var(--muted); }

.rq-src-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; background: var(--lg-input-bg); border: 1px solid var(--lg-border); font-size: 10.5px; font-weight: 700; color: var(--text-sub); margin: 2px; }

.rq-item-line { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--lg-border); font-size: 12px; }
.rq-item-line:last-child { border-bottom: none; }
.rq-item-line-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rq-item-line-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rq-item-line-name { font-weight: 700; }
.rq-item-line-sub { color: var(--muted); font-size: 11px; }
.rq-reason-chip { font-size: 9.5px; font-weight: 700; color: var(--muted); background: var(--lg-input-bg); border: 1px solid var(--lg-border); border-radius: 6px; padding: 1px 7px; white-space: nowrap; }

.rq-om-tabs { display: flex; gap: 5px; margin-bottom: 10px; background: var(--lg-input-bg); border: 1px solid var(--lg-border); border-radius: 10px; padding: 3px; }
.rq-om-tab { flex: 1; padding: 6px 10px; border-radius: 7px; border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--muted); }
.rq-om-tab.active { background: rgba(var(--th-accent-500-rgb),.18); color: var(--accent); }
.fc-mini-dot.blue { background: #38bdf8; } .fc-mini-dot.green { background: #34d399; } .fc-mini-dot.muted { background: var(--lg-border); }

/* التقسيط — form + live calculation side by side, stacked on narrow screens. */
@media (max-width: 900px) { .inst-new-grid { grid-template-columns: minmax(0, 1fr) !important; } }


/* ── Offline-First Phase 1 (2026-10-15) — connection + offline-queue indicator (Components/Shared/SyncStatusIndicator.razor)
   and the sync queue's state chips (Pages/SyncQueue.razor). Theme tokens only, so it follows «مظهر النظام». ── */
.sync-indicator {
    /* 2026-10-17 — only shown when offline / pending / needing review; bottom-middle collides with no screen's buttons */
    position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 900; box-shadow: 0 8px 24px rgba(0,0,0,.35);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 600;
    background: rgba(var(--th-d-4-rgb), 0.85); color: var(--th-n-200);
    border: 1px solid rgba(var(--th-n-500-rgb), 0.35); backdrop-filter: blur(8px);
}
[data-theme="light"] .sync-indicator { background: rgba(var(--th-l-0-rgb), 0.92); color: var(--th-n-700); }
.sync-indicator .sync-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
.sync-indicator.is-offline { border-color: rgba(245, 158, 11, 0.55); }
.sync-indicator.is-offline .sync-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }
.sync-indicator .sync-badge { padding: 2px 8px; border-radius: 999px; font-size: 11px; }
.sync-indicator .sync-badge-pending { background: rgba(245, 158, 11, 0.16); color: #f59e0b; }
.sync-indicator .sync-badge-problem { background: rgba(248, 113, 113, 0.16); color: #f87171; }
@media (max-width: 900px) { .sync-indicator { bottom: 10px; max-width: calc(calc(100 * var(--vw)) - 24px); } }
/* the side-menu footer copy (all fine) */
.sync-inline { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(34,197,94,.3); background: rgba(34,197,94,.08); color: #22c55e; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.sync-inline .sync-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sync-inline.is-offline { border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.1); color: #f59e0b; }
.sync-inline-count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #f59e0b; color: #111; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; }

.sync-state { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.sync-state-pending { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.sync-state-synced { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.sync-state-failed { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.sync-state-conflict { background: rgba(var(--th-violet-500-rgb), 0.18); color: var(--th-violet-500); }
.sync-state-discarded { background: rgba(var(--th-n-500-rgb), 0.18); color: var(--th-n-400); }

/* ═══ Reconnection overlay (js/reconnect.js, 2026-10-15) — replaces Blazor's default English dialog. Theme variables only. ═══ */
#icv2-reconnect {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(var(--th-d-0-rgb), .55);
    backdrop-filter: blur(4px);
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}
#icv2-reconnect.show { display: flex; }
#icv2-reconnect .icv2-rc-card {
    width: min(380px, 100%);
    padding: 24px 22px;
    border-radius: var(--lg-radius);
    background: var(--card-bg);
    border: 1px solid var(--border);
    box-shadow: var(--lg-panel-shadow);
    color: var(--text);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
#icv2-reconnect .icv2-rc-title { font-size: 16px; font-weight: 800; }
#icv2-reconnect .icv2-rc-text { font-size: 13px; color: var(--text-sub); line-height: 1.7; }
#icv2-reconnect .icv2-rc-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(var(--th-accent-500-rgb), .25);
    border-top-color: var(--accent);
    animation: icv2-rc-spin .9s linear infinite;
}
#icv2-reconnect[data-phase="gave-up"] .icv2-rc-spinner { display: none; }
#icv2-reconnect .icv2-rc-btn {
    margin-top: 6px;
    padding: 8px 18px;
    border-radius: 10px;
    border: 1px solid rgba(var(--th-accent-500-rgb), .5);
    background: rgba(var(--th-accent-500-rgb), .15);
    color: var(--text);
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}
#icv2-reconnect .icv2-rc-btn:hover { background: rgba(var(--th-accent-500-rgb), .28); }
@keyframes icv2-rc-spin { to { transform: rotate(360deg); } }

/* Unsaved-intake draft bar (ReceiveModal + MaintenanceBoard, reconnection fix 2026-10-15). */
.recv-draft-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 16px 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(245, 158, 11, .35);
    background: var(--lg-warn-bg);
    color: var(--text);
    font-size: 12.5px;
    line-height: 1.6;
}
.recv-draft-bar span { flex: 1 1 260px; min-width: 0; }
.recv-draft-bar.recv-draft-note { border-color: rgba(var(--th-accent-500-rgb), .35); background: rgba(var(--th-accent-500-rgb), .1); }
.board-draft-bar { margin: 0 0 12px; }
.recv-draft-bar button {
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--lg-input-bg);
    color: var(--text);
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}
.recv-draft-bar .btn-draft-restore { border-color: rgba(var(--th-accent-500-rgb), .5); background: rgba(var(--th-accent-500-rgb), .18); }

/* ═══ Mobile cards for every shared list (.lg-item-row — ~28 screens), 2026-10-16 ═══
   Applies to phones and tablets: any screen up to 900px, and touch screens up to 1180px (a tablet in landscape; a desktop
   window of the same width keeps its tables — pointer: fine).
   Owner: phones scroll vertically only, and a record must read as one professional card — not a column of
   one-field-per-line. At phone width each row becomes its own card: header = thumbnail/selector + the first labelled
   cell (the record's name, shown as the title, its label hidden), body = the other fields TWO per line (label above
   value), footer = the action buttons on one full-width line. Pure layout: no markup or data changes. */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1180px) {
    .lg-table-card { background: transparent; border: none; box-shadow: none; overflow: visible; }
    .lg-item-row {
        display: flex !important; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px;
        padding: 14px; margin-bottom: 10px;
        border: 1px solid var(--lg-panel-border); border-radius: var(--lg-radius);
        background: var(--lg-panel-bg); box-shadow: var(--lg-panel-shadow);
    }
    .lg-item-row:last-child { border-bottom: 1px solid var(--lg-panel-border); }
    .lg-item-row > * { flex: 1 1 calc(50% - 6px); min-width: 0; overflow-wrap: anywhere; }
    /* header: thumbnail / checkbox (unlabelled first cell) + the record's title */
    .lg-item-row > :first-child:not([data-label]):not(.lg-act-btns) { flex: 0 0 auto; }
    .lg-item-row > :first-child[data-label],
    .lg-item-row > :first-child:not([data-label]) + [data-label] {
        flex: 1 1 calc(100% - 64px); align-self: center;
    }
    .lg-item-row > :first-child[data-label]::before,
    .lg-item-row > :first-child:not([data-label]) + [data-label]::before { display: none !important; }
    /* an entry cell (input/select) always says what it is, even in the first column */
    .lg-item-row > [data-label]:has(input:not([type=checkbox]):not([type=hidden]), select, textarea)::before { display: block !important; }
    .lg-item-row .lg-item-name { font-size: 15px; }
    .lg-item-row .lg-item-sub { font-size: 12px; }
    .lg-item-row > div[data-label]::before { font-size: 11px; letter-spacing: 0; text-transform: none; margin-bottom: 3px; }
    /* footer: the actions, one full line, comfortable to tap */
    .lg-item-row > .lg-act-btns, .lg-item-row > :last-child:not([data-label]):not(:first-child) {
        flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start;
        padding-top: 10px; border-top: 1px dashed var(--lg-panel-border);
    }
    .lg-item-row .lg-act-btn { width: 38px; height: 38px; }
    /* fields whose value is only a placeholder dash are hidden on cards (js/table-cards.js marks them data-empty) */
    .lg-item-row > [data-empty] { display: none !important; }
    .lg-item-row { gap: 8px 12px !important; }
    .lg-item-row .lg-cat-badge, .lg-item-row .lg-status-badge { padding-top: 3px; padding-bottom: 3px; }
    /* stat cards: a 2-column grid instead of a sideways-scrolling strip */
    .lg-stats-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible !important; }
    .lg-stat-card { min-width: 0 !important; }
}

/* ═══ Phone + tablet layout, system-wide (2026-10-16) — vertical scrolling only ═══ */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1180px) {
    /* Data tables -> cards (js/table-cards.js copies each column's header onto its cells as data-label). */
    table.icv2-cards { min-width: 0 !important; width: 100% !important; border: none !important; background: transparent !important; }
    table.icv2-cards thead { display: none !important; }
    /* No !important on the table itself: a screen that has its OWN phone cards and hides its table on phones (e.g. the
       maintenance board, .maint-page .sl-table { display: none }) must keep winning — otherwise both lists show (owner, 2026-10-16). */
    table.icv2-cards { display: block; }
    table.icv2-cards > tbody, table.icv2-cards > tfoot { display: block !important; }
    table.icv2-cards > tbody > tr, table.icv2-cards > tfoot > tr {
        display: flex !important; flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; margin-bottom: 10px;
        border: 1px solid var(--lg-panel-border); border-radius: 12px; background: var(--lg-panel-bg);
    }
    table.icv2-cards > tbody > tr > td, table.icv2-cards > tfoot > tr > td {
        display: block !important; flex: 1 1 calc(50% - 6px); min-width: 0; width: auto !important;
        border: none !important; padding: 0 !important; text-align: start !important; white-space: normal !important;
        overflow-wrap: anywhere; font-size: 13px;
    }
    table.icv2-cards > tbody > tr > td:first-child { flex-basis: 100%; font-weight: 800; font-size: 14px; }
    table.icv2-cards > tbody > tr > td[data-label]::before, table.icv2-cards > tfoot > tr > td[data-label]::before {
        content: attr(data-label); display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 2px;
    }
    table.icv2-cards > tbody > tr > td:first-child::before { display: none; }
    table.icv2-cards > tbody > tr > td:empty, table.icv2-cards > tbody > tr > td[data-empty] { display: none !important; }
    table.icv2-cards > tbody > tr > td[colspan] { flex-basis: 100%; }
    /* the boxes around a table / list no longer scroll sideways */
    :has(> table.icv2-cards) { overflow-x: visible !important; max-width: 100%; }
    .table-scroll-wrap { overflow-x: visible !important; }
    .table-scroll-wrap > * { min-width: 0 !important; max-width: 100%; }

    /* Tab bars / chip rows / tool rows wrap onto more lines instead of scrolling sideways. */
    .lg-modal-tabs, .sl-tabs-bar, .ws-tabs-nav, .tabs-row, .header-quick-actions, .toolbar {
        flex-wrap: wrap !important; overflow-x: visible !important; white-space: normal !important;
    }
    .lg-modal-tabs > *, .sl-tabs-bar > *, .ws-tabs-nav > *, .tabs-row > * { flex: 1 1 auto; justify-content: center; }

    /* Shared page header: title and icon on top, its buttons on their own full line below. */
    .lg-page-header-content { padding: 14px 16px; flex: 1 1 100%; min-width: 0; }
    .lg-page-header-actions { flex: 1 1 100%; padding: 0 16px 14px; justify-content: flex-start; }
    .lg-page-header-center { flex: 1 1 100%; padding: 0 16px; overflow-x: visible; }

    /* Room for the floating menu button: page content starts below it. Never a sideways scroll (owner): decorative layers
       (glows) that reach past the edge are clipped here; real content overflow is caught by scripts/desktop/e2e/mobile-audit.js. */
    .content-area { padding: 76px 12px 16px !important; overflow-x: hidden !important; }
    /* Panel headers holding filter bars: shrink and wrap instead of pushing the page wider. */
    .panel-header-left { flex-shrink: 1 !important; min-width: 0 !important; max-width: 100%; }
    .maint-page .panel-header-left { flex: 1 1 100% !important; }
    .rpt-filter-bar { flex-wrap: wrap !important; }
    /* Full-bleed legacy screens cancel the content padding with a negative margin sized for desktop (24px): match the phone's. */
    .maint-page .stg-fab-bar { margin: 0 0 -12px !important; }
    .content-area .maint-page { margin: 0 -12px !important; padding: 0 12px 16px !important; width: calc(100% + 24px) !important; min-height: 0 !important; }
    /* A tab group inside a flex toolbar takes its own full content width unless allowed to shrink — then it wraps. */
    .lg-modal-tabs, .sl-tabs-bar, .ws-tabs-nav, .tabs-row { min-width: 0 !important; max-width: 100%; }
    /* Bookings KPI strip: 2 per row. */
    .bkl-root .kpi-strip { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible !important; }
    /* Maintenance settings menu: a wrapped grid of sections instead of a sideways strip. */
    .maint-page .stg-sidebar { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); overflow: visible !important; position: static !important; }
    .maint-page .stg-nav-item { white-space: normal !important; text-align: center; min-width: 0 !important; font-size: 11.5px !important; }
    /* General report: the balance hero stacks; panel headers may wrap. */
    .gr-root .balance-hero { flex-direction: column !important; }
    .gr-root .bh-partners-side { border-right: none !important; padding-right: 0 !important; }
    .gr-root .panel-header { flex-wrap: wrap; }
    .gr-root .panel-header-left { flex-shrink: 1 !important; min-width: 0; }
    /* POS header: a fixed-height sticky bar whose quick actions scrolled sideways. On phones/tablets: the title on its own
       line, every quick action visible on wrapped lines below it, and a normal (non-sticky) header so nothing slides under
       the floating menu button. */
    .pos-header { height: auto !important; position: static !important; flex-wrap: wrap; padding: 10px 12px !important; gap: 8px; }
    .pos-header-content { flex-wrap: wrap !important; width: 100%; gap: 10px !important; }
    .pos-header .header-quick-actions { flex: 1 1 100% !important; justify-content: flex-start; gap: 8px !important; overflow: visible !important; }
    .pos-header .hqa-divider { display: none; }
    /* POS search: let the box shrink so the camera button stays inside it, beside the view toggle and the cart. */
    .pos-toolbar .search-wrap { min-width: 0 !important; flex: 1 1 auto !important; }
    .pos-toolbar .pos-search-input { min-width: 0 !important; width: 100% !important; }
    /* Chart grids: 1fr columns let a chart's content widen the column (grid items default to min-width:auto) — clamp them. */
    .charts-row { grid-template-columns: minmax(0, 1fr) !important; }
    .charts-row > *, .bar-chart > * { min-width: 0 !important; }
    .bar-chart { gap: 2px !important; }
    /* Charts never wider than their card. */
    .cr-root .chart-card, .gr-root .chart-card { min-width: 0; max-width: 100%; }
    canvas, svg.chart { max-width: 100% !important; }
}

/* Tablets (641-900px, and touch tablets up to 1180px in landscape): the same cards, three fields per line; stat cards three per row. */
@media (min-width: 641px) and (max-width: 900px), (pointer: coarse) and (min-width: 641px) and (max-width: 1180px) {
    .lg-item-row > * { flex-basis: calc(33.333% - 8px); }
    table.icv2-cards > tbody > tr > td, table.icv2-cards > tfoot > tr > td { flex-basis: calc(33.333% - 8px); }
    .lg-stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .bkl-root .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
/* Very small phones: report trend bars shrink with their chart. */
@media (max-width: 400px) {
    .trend-bar-wrap, .trend-bars > * { min-width: 0 !important; }
    .cr-root .page, .cr-root .page > * { min-width: 0; max-width: 100%; }
    .cr-root .page { overflow-x: hidden; }
}

/* Phones: inline two-equal-column grids (e.g. report panels side by side) stack into one full-width column; and a lone
   last stat card spans the row instead of sitting half-width. Tablets: stat cards take as many columns as fit. */
@media (max-width: 640px) {
    [style*="grid-template-columns:1fr 1fr;"], [style*="grid-template-columns: 1fr 1fr;"],
    [style$="grid-template-columns:1fr 1fr"], [style$="grid-template-columns: 1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
    .lg-stats-row > .lg-stat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 641px) and (max-width: 900px), (pointer: coarse) and (min-width: 641px) and (max-width: 1180px) {
    .lg-stats-row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; }
}

/* ─── Purchase form «حالة الاستلام» (2026-10-16, owner: receiving like Legacy) — Legacy purchases-log.html .rs-combo-* ported
   onto the lg-* form tokens: a picker in the invoice form itself, «مستلم بالكامل» by default. ─── */
.rs-combo-wrap { position: relative; }
.rs-combo-backdrop { position: fixed; inset: 0; z-index: 599; }
.rs-combo-trigger { width: 100%; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--lg-input-bg); border: 1.5px solid var(--lg-border); border-radius: 13px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; position: relative; overflow: hidden; user-select: none; color: inherit; font-family: inherit; text-align: right; }
.rs-combo-trigger:hover { border-color: var(--lg-border-focus); }
.rs-combo-trigger.open { border-color: var(--lg-border-focus); box-shadow: 0 0 0 3px var(--lg-accent-glow); }
.rs-combo-trigger::before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; border-radius: 0 13px 13px 0; }
.rs-combo-trigger[data-val="received"]::before { background: #10b981; }
.rs-combo-trigger[data-val="pending"]::before { background: #f59e0b; }
.rs-combo-trigger[data-val="partial"]::before { background: #3b82f6; }
.rs-combo-trigger[data-val="cancelled"]::before { background: #ef4444; }
.rs-combo-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.rs-combo-trigger[data-val="received"] .rs-combo-dot { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,.5); }
.rs-combo-trigger[data-val="pending"] .rs-combo-dot { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,.5); }
.rs-combo-trigger[data-val="partial"] .rs-combo-dot { background: #3b82f6; box-shadow: 0 0 6px rgba(59,130,246,.5); }
.rs-combo-trigger[data-val="cancelled"] .rs-combo-dot { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,.5); }
.rs-combo-icon, .rs-opt-icon { border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.rs-combo-icon { width: 32px; height: 32px; }
.rs-opt-icon { width: 34px; height: 34px; border-radius: 10px; }
.rs-combo-icon svg, .rs-opt-icon svg, .rs-combo-chevron svg { width: 15px; height: 15px; }
.rs-combo-trigger[data-val="received"] .rs-combo-icon, .rs-opt-received .rs-opt-icon { background: rgba(16,185,129,.14); color: #10b981; }
.rs-combo-trigger[data-val="pending"] .rs-combo-icon, .rs-opt-pending .rs-opt-icon { background: rgba(245,158,11,.14); color: #f59e0b; }
.rs-combo-trigger[data-val="partial"] .rs-combo-icon, .rs-opt-partial .rs-opt-icon { background: rgba(59,130,246,.14); color: #3b82f6; }
.rs-combo-trigger[data-val="cancelled"] .rs-combo-icon, .rs-opt-cancelled .rs-opt-icon { background: rgba(239,68,68,.14); color: #ef4444; }
.rs-combo-text, .rs-opt-body { flex: 1; min-width: 0; }
.rs-combo-label { font-size: 13.5px; font-weight: 800; color: var(--text); }
.rs-combo-trigger[data-val="received"] .rs-combo-label { color: #10b981; }
.rs-combo-trigger[data-val="pending"] .rs-combo-label { color: #f59e0b; }
.rs-combo-trigger[data-val="partial"] .rs-combo-label { color: #3b82f6; }
.rs-combo-trigger[data-val="cancelled"] .rs-combo-label { color: #ef4444; }
.rs-combo-sub, .rs-opt-sub { font-size: 10.5px; color: var(--muted); font-weight: 600; margin-top: 1px; }
.rs-combo-chevron { flex-shrink: 0; color: var(--muted); transition: transform .2s; display: flex; }
.rs-combo-trigger.open .rs-combo-chevron { transform: rotate(180deg); color: var(--th-accent-500); }
.rs-combo-dropdown { position: absolute; top: calc(100% + 7px); right: 0; left: 0; z-index: 600; background: #0d1a2e; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.55); display: flex; flex-direction: column; animation: rsDropIn .2s both; }
[data-theme="light"] .rs-combo-dropdown { background: #fff; border-color: rgba(15,23,42,.1); box-shadow: 0 16px 48px rgba(15,23,42,.14); }
@keyframes rsDropIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.rs-combo-option { display: flex; align-items: center; gap: 11px; padding: 11px 14px; cursor: pointer; border: none; border-bottom: 1px solid rgba(255,255,255,.04); background: none; color: inherit; font-family: inherit; text-align: right; position: relative; overflow: hidden; width: 100%; }
[data-theme="light"] .rs-combo-option { border-bottom-color: rgba(15,23,42,.06); }
.rs-combo-option:last-child { border-bottom: none; }
.rs-combo-option:hover { background: rgba(255,255,255,.04); }
[data-theme="light"] .rs-combo-option:hover { background: rgba(15,23,42,.04); }
.rs-combo-option.active { background: rgba(255,255,255,.03); }
.rs-combo-option::after { content: ''; position: absolute; right: 0; top: 10%; bottom: 10%; width: 2.5px; border-radius: 99px; opacity: 0; }
.rs-combo-option.active::after { opacity: 1; }
.rs-opt-received.active::after, .rs-opt-received.active .rs-opt-check { background: #10b981; }
.rs-opt-pending.active::after, .rs-opt-pending.active .rs-opt-check { background: #f59e0b; }
.rs-opt-partial.active::after, .rs-opt-partial.active .rs-opt-check { background: #3b82f6; }
.rs-opt-cancelled.active::after, .rs-opt-cancelled.active .rs-opt-check { background: #ef4444; }
.rs-opt-label { font-size: 13px; font-weight: 800; color: var(--text); }
.rs-opt-check { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; opacity: 0; }
.rs-opt-check svg { width: 10px; height: 10px; color: #fff; }
.rs-combo-option.active .rs-opt-check { opacity: 1; }
/* Added-items table: the editable sale price (owner 2026-10-16). */
.lg-line-sell-input { width: 100%; min-width: 0; padding: 6px 8px; font-size: 12.5px; }

/* ═══ Intake brand/model combos (2026-10-16, owner: like Legacy maintenance.css .brand-combo-*) — the Maintenance Settings catalog,
   brands grouped by device type, then the chosen brand's models. Global tokens (the intake modal is not always inside .maint-page). ═══ */
.brand-combo-drop { position: absolute; top: calc(100% + 6px); right: 0; left: 0; background: #0e1a2e; border: 1px solid rgba(var(--th-accent-500-rgb),.35); border-radius: 14px; z-index: 99999; box-shadow: 0 20px 60px rgba(0,0,0,.75), 0 0 0 1px rgba(var(--th-accent-500-rgb),.1); overflow: hidden; animation: brandComboIn .2s cubic-bezier(0.34, 1.56, 0.64, 1); min-width: 240px; }
[data-theme="light"] .brand-combo-drop { background: #ffffff; border-color: #d1d5db; box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 0 0 1px rgba(var(--th-accent-500-rgb),.12); }
@keyframes brandComboIn { from { opacity: 0; transform: translateY(-8px) scale(0.97); } to { opacity: 1; transform: none; } }
.brand-combo-list { max-height: 280px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.brand-combo-list::-webkit-scrollbar { width: 4px; }
.brand-combo-list::-webkit-scrollbar-thumb { background: rgba(148,163,184,.2); border-radius: 99px; }
.bcd-group { font-size: 10px; font-weight: 800; color: var(--muted); letter-spacing: .06em; padding: 8px 10px 4px; display: flex; align-items: center; gap: 6px; }
.bcd-group::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.brand-combo-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; cursor: pointer; transition: background .12s, color .12s; border: 1px solid transparent; outline: none; }
.brand-combo-item:hover, .brand-combo-item:focus { background: rgba(var(--th-accent-500-rgb),.08); border-color: rgba(var(--th-accent-500-rgb),.18); }
.brand-combo-item.selected { background: rgba(var(--th-accent-500-rgb),.12); border-color: rgba(var(--th-accent-500-rgb),.35); }
.brand-combo-item.selected .bci-name { color: var(--th-accent-500); font-weight: 900; }
.bci-icon { font-size: 18px; flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.04); border-radius: 8px; }
[data-theme="light"] .bci-icon { background: rgba(0,0,0,.04); }
.bci-info { flex: 1; min-width: 0; }
.bci-name { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bci-type { font-size: 10.5px; font-weight: 600; color: var(--muted); margin-top: 1px; }
.bcd-empty { text-align: center; padding: 24px 12px; font-size: 12px; font-weight: 700; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bcd-empty svg { width: 28px; height: 28px; opacity: .3; }
.bcd-empty .bcd-hint { font-size: 11px; font-weight: 600; opacity: .6; }

/* Intake «تسجيل» a typed model for the chosen brand (Legacy maintenance.css .btn-register-model, full width under the model field). */
.btn-register-model { margin-top: 6px; width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 5px; padding: 0 13px; height: 38px; border-radius: 10px; border: 1.5px solid rgba(var(--th-accent-500-rgb),.45); background: rgba(var(--th-accent-500-rgb),.10); color: var(--th-accent-300, #a5b4fc); font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition: all .15s; }
.btn-register-model:hover:not(:disabled) { background: rgba(var(--th-accent-500-rgb),.22); border-color: rgba(var(--th-accent-500-rgb),.7); }
.btn-register-model:active { transform: scale(.98); }
.btn-register-model:disabled { cursor: default; }
.btn-register-model.registered { border-color: rgba(16,185,129,.5); background: rgba(16,185,129,.12); color: #34d399; }
[data-theme="light"] .btn-register-model { color: var(--th-accent-600, #4f46e5); }
[data-theme="light"] .btn-register-model.registered { color: #059669; }

/* ═══ Intake fault picker (2026-10-16, owner: faults drive the intake) — reuses the brand-combo dropdown look. ═══ */
.fault-pick-btn { max-width: none; white-space: nowrap; }
.fault-pick-drop { top: calc(100% + 4px); }
.fault-pick-top { padding: 8px 8px 4px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--border); }
.fault-pick-search { height: 34px; font-size: 12.5px; }
.fault-pick-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.fault-pick-tab { padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-family: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.fault-pick-tab.active { background: rgba(var(--th-accent-500-rgb),.14); border-color: rgba(var(--th-accent-500-rgb),.45); color: var(--th-accent-500); }
.fault-pick-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border); font-size: 11px; font-weight: 700; color: var(--muted); }
.fault-pick-done { padding: 5px 16px; border-radius: 8px; border: none; background: var(--th-accent-500); color: #fff; font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.fault-primary-tag { font-size: 10px; font-weight: 900; padding: 2px 8px; border-radius: 20px; background: rgba(245,158,11,.14); color: #f59e0b; flex-shrink: 0; }
.fault-register-item .bci-icon { color: var(--th-accent-500); font-weight: 900; }
.fault-chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.fault-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 20px; background: rgba(var(--th-accent-500-rgb),.08); border: 1px solid rgba(var(--th-accent-500-rgb),.25); color: var(--text); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.fault-chip.primary { background: rgba(var(--th-accent-500-rgb),.16); border-color: rgba(var(--th-accent-500-rgb),.5); color: var(--th-accent-500); font-weight: 900; }
.fault-chip-x { width: 18px; height: 18px; border-radius: 50%; border: none; background: rgba(148,163,184,.18); color: inherit; font-size: 10px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.fault-chip-x:hover { background: rgba(239,68,68,.25); color: #ef4444; }
.fault-info-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; background: rgba(148,163,184,.08); border: 1px solid var(--border); color: var(--muted); font-size: 11px; font-weight: 700; }
.fault-save-desc { margin-top: 4px; padding: 0; border: none; background: none; color: var(--th-accent-500); font-family: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; }
.fault-save-desc:hover { text-decoration: underline; }
.fault-cost-hint { margin-top: 5px; font-size: 11px; font-weight: 700; color: #f59e0b; }
.svc-tab-empty { font-size: 11.5px; color: var(--muted); }
.part-suggest-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; padding: 8px 10px; border-radius: 10px; border: 1px dashed rgba(var(--th-accent-500-rgb),.35); background: rgba(var(--th-accent-500-rgb),.04); }
.part-suggest-label { font-size: 11.5px; font-weight: 800; color: var(--text); }
.part-suggest-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text); font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.part-suggest-chip.fits { border-color: rgba(16,185,129,.45); background: rgba(16,185,129,.08); color: #10b981; }
.part-suggest-chip:hover { border-color: rgba(var(--th-accent-500-rgb),.5); }
.psc-meta { font-size: 10.5px; opacity: .7; font-weight: 600; }

/* Execute: fault review strip (2026-10-16) — reported vs confirmed vs found during the work */
.exec-faults-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 9px; border: 1px dashed var(--border); }
.exec-faults-lbl { font-size: 12px; font-weight: 800; color: var(--text); }
.exec-faults-none { font-size: 11.5px; color: var(--muted); }
.exec-fault-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border); background: rgba(148,163,184,.08); color: var(--text); font-size: 11.5px; font-weight: 700; cursor: pointer; user-select: none; }
.exec-fault-chip.confirmed { border-color: rgba(16,185,129,.45); background: rgba(16,185,129,.10); color: #10b981; }
.exec-fault-chip.found { border-style: dashed; }
.exec-fault-tag { font-size: 9.5px; font-weight: 900; padding: 1px 6px; border-radius: 10px; background: rgba(245,158,11,.15); color: #f59e0b; }
.exec-fault-x { width: 16px; height: 16px; border-radius: 50%; border: none; background: rgba(148,163,184,.2); color: inherit; font-size: 9px; line-height: 1; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.exec-fault-add { height: 28px; padding: 0 8px; border-radius: 20px; border: 1px solid rgba(var(--th-accent-500-rgb),.35); background: transparent; color: var(--th-accent-500); font-family: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; max-width: 200px; }

/* ═══ Device-model picker for spare parts (2026-10-16) — part form + spare-parts purchase line ═══ */
.dml-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; padding: 5px 8px; border-radius: 10px; border: 1px solid var(--lg-border, var(--border)); background: var(--lg-input-bg, transparent); cursor: text; }
.dml-box:focus-within { border-color: rgba(var(--th-accent-500-rgb),.55); box-shadow: 0 0 0 3px rgba(var(--th-accent-500-rgb),.10); }
.dml-input { flex: 1; min-width: 140px; border: none; outline: none; background: transparent; color: var(--text); font-family: inherit; font-size: 13px; padding: 4px 2px; }
.dml-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px 3px 10px; border-radius: 20px; background: rgba(var(--th-accent-500-rgb),.12); border: 1px solid rgba(var(--th-accent-500-rgb),.35); color: var(--text); font-size: 12px; font-weight: 700; white-space: nowrap; }
.dml-chip.locked { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.4); padding-left: 10px; }
.dml-chip-x { width: 17px; height: 17px; border-radius: 50%; border: none; background: rgba(148,163,184,.22); color: inherit; font-size: 9px; line-height: 1; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dml-chip-x:hover { background: rgba(239,68,68,.25); color: #ef4444; }
.dml-drop { position: absolute; top: calc(100% + 4px); right: 0; left: 0; max-height: 260px; overflow-y: auto; padding: 6px; border-radius: 12px; border: 1px solid rgba(var(--th-accent-500-rgb),.35); background: #0e1a2e; box-shadow: 0 16px 40px rgba(0,0,0,.55); z-index: 99999; display: flex; flex-direction: column; gap: 2px; }
[data-theme="light"] .dml-drop { background: #ffffff; border-color: #d1d5db; box-shadow: 0 8px 30px rgba(0,0,0,.15); }
.dml-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text); }
.dml-item:hover { background: rgba(var(--th-accent-500-rgb),.10); }
.dml-item-name b { font-weight: 900; }
.dml-item-tag { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 10px; background: rgba(16,185,129,.14); color: #10b981; }
.dml-empty { padding: 14px 10px; text-align: center; font-size: 12px; color: var(--muted); }
.dml-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.dml-suggest-lbl { font-size: 11px; font-weight: 800; color: var(--muted); }
.dml-suggest-chip { padding: 3px 10px; border-radius: 20px; border: 1px dashed rgba(16,185,129,.5); background: rgba(16,185,129,.06); color: #10b981; font-family: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; }
.dml-suggest-chip:hover { background: rgba(16,185,129,.14); }
.dml-suggest-all { padding: 3px 10px; border-radius: 20px; border: none; background: none; color: var(--th-accent-500); font-family: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; }
.dml-count-badge { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: 6px; padding: 1px 7px; border-radius: 10px; background: rgba(16,185,129,.12); color: #10b981; font-size: 10.5px; font-weight: 800; }

/* Employees «المؤرشفون» toggle (2026-10-17) */
.emp-archived-toggle { display: inline-flex; align-items: center; gap: 6px; }
.emp-archived-toggle.on { border-color: rgba(var(--th-accent-500-rgb),.5); color: var(--th-accent-400); background: rgba(var(--th-accent-500-rgb),.10); }
.emp-archived-toggle svg { width: 14px; height: 14px; }

/* 2026-10-17 — audit of every dialog box with no height limit (after the purchase-delete dialog grew past the screen): none of
   them may ever push its own buttons off-screen; long content scrolls inside instead. */
/* «html» prefix: wins over the screen files loaded after app.css (e.g. .sub-modal's own overflow:hidden would clip, not scroll) */
html .dm-root .erase-confirm-modal, html .maint-page .sub-modal, html .maint-page .dev-modal, html .more-popup,
html .st-root .wa-modal, html .st-root .adj-confirm-modal, html .st-root .confirm-modal, html .st-root .bsc-modal { max-height: calc(90 * var(--vh)); overflow-y: auto; }

/* ═══ Camera barcode / QR scanner (2026-10-17) — Legacy camera-scanner-dialog.js design on V2 tokens ═══ */
.csd-body { padding: 0 0 4px; }
.csd-video-wrap { position: relative; overflow: hidden; background: #000; margin: 14px 18px 0; border-radius: 14px; border: 1px solid rgba(var(--th-accent-500-rgb),.25); aspect-ratio: 4/3; }
.csd-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.csd-laser { position: absolute; left: 10%; right: 10%; height: 2px; top: 50%; border-radius: 99px; background: linear-gradient(90deg, transparent, var(--th-accent-500), var(--th-accent-400), transparent); box-shadow: 0 0 8px rgba(var(--th-accent-500-rgb),.7); animation: csdLaserScan 2.2s ease-in-out infinite; }
@keyframes csdLaserScan { 0% { top: 15%; opacity: .9 } 50% { top: 85%; opacity: 1 } 100% { top: 15%; opacity: .9 } }
.csd-corners { position: absolute; inset: 20px; pointer-events: none; }
.csd-corners::before, .csd-corners::after, .csd-corner-bl, .csd-corner-br { content: ""; position: absolute; width: 22px; height: 22px; border-color: rgba(var(--th-accent-500-rgb),.85); border-style: solid; }
.csd-corners::before { top: 0; right: 0; border-width: 3px 3px 0 0; border-radius: 0 5px 0 0; }
.csd-corners::after { top: 0; left: 0; border-width: 3px 0 0 3px; border-radius: 5px 0 0 0; }
.csd-corner-bl { bottom: 0; right: 0; border-width: 0 3px 3px 0; border-radius: 0 0 5px 0; }
.csd-corner-br { bottom: 0; left: 0; border-width: 0 0 3px 3px; border-radius: 0 0 0 5px; }
.csd-success-flash { position: absolute; inset: 0; background: rgba(16,185,129,.28); opacity: 0; pointer-events: none; }
.csd-success-flash.csd-flash { animation: csdSuccessFlash .5s ease forwards; }
@keyframes csdSuccessFlash { 0% { opacity: 0 } 30% { opacity: 1 } 100% { opacity: 0 } }
.csd-status { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; font-size: 12px; font-weight: 700; color: var(--muted); min-height: 42px; text-align: center; }
.csd-status.scanning { color: var(--th-accent-400); }
.csd-status.error { color: #f87171; }
.csd-status.success { color: #10b981; }
.csd-status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: csdStatusBlink 1.1s ease-in-out infinite; flex-shrink: 0; }
@keyframes csdStatusBlink { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
.csd-placeholder { aspect-ratio: 4/3; margin: 14px 18px 0; border-radius: 14px; background: rgba(var(--th-accent-500-rgb),.05); border: 2px dashed rgba(var(--th-accent-500-rgb),.22); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); padding: 20px; text-align: center; }
.csd-placeholder svg { color: rgba(var(--th-accent-500-rgb),.45); }
.csd-ph-title { font-size: 14px; font-weight: 800; color: var(--text); }
.csd-ph-sub { font-size: 12px; color: var(--muted); line-height: 1.7; }
.csd-footer { padding: 4px 18px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.csd-select { flex: 1; min-width: 0; height: 36px; background: var(--lg-input-bg, transparent); border: 1px solid var(--lg-border, var(--border)); border-radius: 9px; color: var(--text); font-family: 'Cairo', sans-serif; font-size: 12px; padding: 0 10px; }
.csd-retry-btn { height: 36px; padding: 0 16px; border-radius: 9px; border: 1px solid rgba(var(--th-accent-500-rgb),.4); background: rgba(var(--th-accent-500-rgb),.12); color: var(--th-accent-400); font-family: 'Cairo', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; }
.csd-cancel-btn { margin-inline-start: auto; height: 36px; padding: 0 16px; border-radius: 9px; border: 1px solid rgba(239,68,68,.22); background: rgba(239,68,68,.1); color: #f87171; font-family: 'Cairo', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; }
.csd-trigger-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; cursor: pointer; color: var(--th-accent-400); background: linear-gradient(135deg, rgba(var(--th-accent-500-rgb),.18), rgba(168,85,247,.14)); border: 1px solid rgba(var(--th-accent-500-rgb),.35); box-shadow: 0 2px 10px rgba(var(--th-accent-500-rgb),.15); transition: all .15s; }
.csd-trigger-btn:hover { border-color: var(--th-accent-500); background: linear-gradient(135deg, rgba(var(--th-accent-500-rgb),.28), rgba(168,85,247,.22)); }
.csd-search-row { display: flex; align-items: center; gap: 8px; }
.csd-search-row > :first-child { flex: 1; min-width: 0; }

/* Floating dropdowns (2026-10-17) — js/float-drop.js places any .ac-float list under its field, above every scrolling box */
.ac-float { position: fixed; z-index: 100001 !important; visibility: hidden; margin: 0 !important; }
.ac-float-host { transform: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; perspective: none !important; contain: none !important; will-change: auto !important; overflow: visible !important; }
.ac-menu { background: #0e1a2e; border: 1px solid rgba(var(--th-accent-500-rgb),.35); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.55); padding: 6px; overflow-y: auto; max-height: 260px; display: flex; flex-direction: column; gap: 2px; }
[data-theme="light"] .ac-menu { background: #ffffff; border-color: #d1d5db; box-shadow: 0 8px 30px rgba(0,0,0,.15); }
.ac-menu-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; text-align: right; }
.ac-menu-item:hover { background: rgba(var(--th-accent-500-rgb),.10); }
.ac-menu-name { font-size: 13px; font-weight: 700; color: var(--text); }
.ac-menu-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.ac-menu-new { color: #f59e0b; font-size: 12.5px; font-weight: 800; border-top: 1px dashed rgba(245,158,11,.3); margin-top: 2px; }

/* Spare-part quality badges / picker in purchase invoices (2026-10-17) — same names as the spare-part form */
.pq-badge { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; border: 1px solid transparent; vertical-align: middle; margin-inline-start: 6px; white-space: nowrap; font-family: inherit; }
.pq-original { background: rgba(16,185,129,.12); color: #10b981; border-color: rgba(16,185,129,.35); }
.pq-agency { background: rgba(59,130,246,.12); color: #60a5fa; border-color: rgba(59,130,246,.35); }
.pq-pulled { background: rgba(245,158,11,.12); color: #f59e0b; border-color: rgba(245,158,11,.35); }
.pq-commercial { background: rgba(168,85,247,.12); color: #c084fc; border-color: rgba(168,85,247,.35); }
.pq-copy { background: rgba(239,68,68,.12); color: #f87171; border-color: rgba(239,68,68,.35); }
.pq-unspecified { background: rgba(148,163,184,.10); color: var(--muted); border-color: rgba(148,163,184,.25); }
.pq-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.pq-picker .pq-badge { margin: 0; padding: 6px 12px; font-size: 12px; cursor: pointer; opacity: .55; }
.pq-picker .pq-badge.on { opacity: 1; box-shadow: 0 0 0 2px currentColor inset; }
.pq-select { min-width: 0; }

/* 2026-10-17 (owner) — no up/down arrows in any number box (typing only, Legacy look); the wheel is handled in select-on-focus.js */
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Installments «طريقة حساب القسط» (2026-10-17) */
.inst-mode { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; border: 1px solid var(--lg-border, var(--border)); background: var(--lg-input-bg, transparent); }
.inst-mode-btn { padding: 7px 16px; border-radius: 8px; border: none; background: transparent; color: var(--muted); font-family: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.inst-mode-btn.on { background: rgba(var(--th-accent-500-rgb),.16); color: var(--th-accent-400); box-shadow: 0 0 0 1px rgba(var(--th-accent-500-rgb),.4) inset; }

/* ═══ Product images (2026-10-21, Legacy «الصور والوسائط») — cover over the package icon; a broken image removes itself ═══ */
.pi-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pi-thumb-host { position: relative; overflow: hidden; }
.pi-main { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.pi-preview { width: 180px; height: 180px; max-width: 100%; border-radius: 14px; overflow: hidden; border: 1px solid var(--lg-border, var(--border));
    background: var(--lg-input-bg, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pi-preview img { width: 100%; height: 100%; object-fit: cover; }
.pi-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.pi-empty svg { width: 34px; height: 34px; opacity: .6; }
.pi-actions { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pi-pick { position: relative; overflow: hidden; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pi-pick input[type=file], .pi-gadd input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pi-pick.busy, .pi-gadd.busy { opacity: .5; pointer-events: none; }
.pi-url-row { display: flex; gap: 8px; }
.pi-url-row .lg-field-input { flex: 1; min-width: 0; }
.pi-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.pi-gthumb, .pi-gadd { position: relative; aspect-ratio: 1; max-width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--lg-border, var(--border)); }
.pi-gthumb img { width: 100%; height: 100%; object-fit: cover; }
.pi-gbtn { position: absolute; border: none; cursor: pointer; font-family: inherit; font-size: 10.5px; font-weight: 800; border-radius: 8px; padding: 3px 7px;
    background: rgba(0,0,0,.6); color: #fff; }
.pi-gdel { top: 5px; left: 5px; }
.pi-gmain { bottom: 5px; right: 5px; }
.pi-gbtn:disabled { opacity: .5; }
.pi-gadd { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; border-style: dashed;
    color: var(--muted); font-size: 12px; font-weight: 700; background: var(--lg-input-bg, transparent); }
.pi-gadd svg { width: 20px; height: 20px; }

/* A dropdown with no match (2026-10-21) — a plain note, not a selectable row */
.ac-menu-item.ac-menu-none { cursor: default; color: var(--muted); font-size: 12px; }
.ac-menu-item.ac-menu-none:hover { background: transparent; }

/* ═══ Product units (2026-10-21, Legacy «الوحدات») — one row per extra unit, the «1 علبة = 12 قطعة» line under it ═══ */
.pu-row { display: grid; grid-template-columns: 1.3fr .8fr 1fr 1fr auto; gap: 8px; align-items: end; padding: 10px; margin-bottom: 8px;
    border: 1px solid var(--lg-border, var(--border)); border-radius: 12px; background: var(--lg-input-bg, transparent); }
.pu-row .lg-field { margin: 0; min-width: 0; }
.pu-del { margin-bottom: 4px; }
.pu-eq { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); }
@media (max-width: 640px) { .pu-row { grid-template-columns: 1fr 1fr; } .pu-del { justify-self: start; } }

/* Phone check under every phone field (2026-10-21, Components/Shared/PhoneHint.razor) — warning only, never blocks saving */
.phone-check { font-size: 11px; font-weight: 700; margin-top: 4px; line-height: 1.4; }
.phone-check.ok { color: #10b981; }
.phone-check.warn { color: #f59e0b; }
.phone-check.err { color: #f87171; }

/* ═══ مركز العميل المالي — phase 1 (2026-10-22): Legacy customers.html score gauge/breakdown, story tags, alerts, insights ═══ */
.fc-score-gauge-fill { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.22,.68,0,1.18); }
.fc-score-breakdown { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.fc-score-factor { display: flex; align-items: center; gap: 7px; }
.fc-score-factor-lbl { font-size: 9.5px; font-weight: 800; color: var(--muted); width: 30px; flex-shrink: 0; }
.fc-score-factor-track { flex: 1; height: 4px; border-radius: 99px; background: var(--lg-border); overflow: hidden; }
.fc-score-factor-fill { height: 100%; border-radius: 99px; transition: width .8s ease; }
.fc-story-received { font-size: 13.5px; font-weight: 800; }
.fc-story-received b { color: #c084fc; }
.fc-story-fill { background: linear-gradient(90deg, #34d399, #10b981); }
.fc-story-tag.success { background: rgba(16,185,129,.12); color: #34d399; }
.fc-story-tag.danger { background: rgba(239,68,68,.12); color: #f87171; }
.fc-story-tag.purple { background: rgba(139,92,246,.12); color: #c084fc; }
.fc-alert { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 10px; border: 1px solid; font-size: 11.5px; font-weight: 800; }
.fc-alert.danger { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.28); color: #f87171; }
.fc-alert.warn { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.28); color: #fbbf24; }
.fc-alert.info { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.28); color: #60a5fa; }
.fc-alert.purple { background: rgba(139,92,246,.12); border-color: rgba(139,92,246,.28); color: #c084fc; }
.fc-kpi-list { display: flex; flex-direction: column; }
.fc-kpi-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--lg-border); }
.fc-kpi-row:last-child { border-bottom: none; }
.fc-kpi-row-body { flex: 1; min-width: 0; }
.fc-kpi-row-lbl { font-size: 10px; color: var(--muted); font-weight: 700; }
.fc-kpi-row-val { font-size: 12.5px; font-weight: 800; }
.fc-tab:disabled { opacity: .45; cursor: not-allowed; }

/* ═══ 2026-10-23 — desktop update banner (Components/Shared/UpdateBanner.razor) ═══ */
.update-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px;
    border: 1px solid var(--lg-border); background: var(--lg-panel-bg); font-size: 13.5px; font-weight: 700; }
.update-banner > span:first-child { flex: 1; min-width: 200px; }
.update-banner.info { border-color: rgba(var(--th-accent-500-rgb), .45); }
.update-banner.ok { border-color: rgba(34, 197, 94, .5); }
.update-banner.warn { border-color: rgba(245, 158, 11, .55); }
.update-banner.err { border-color: rgba(239, 68, 68, .55); }
.update-progress { flex: 1; min-width: 160px; height: 8px; border-radius: 999px; background: var(--lg-border); overflow: hidden; }
.update-progress > span { display: block; height: 100%; background: rgb(var(--th-accent-500-rgb)); transition: width .2s; }
.brand-version { display: block; margin: 4px auto 0; padding: 2px 8px; border: 0; background: transparent; color: inherit; opacity: .6;
    font: inherit; font-size: 11px; cursor: pointer; }
.brand-version:hover { opacity: 1; text-decoration: underline; }

/* ── Touch screens (all-in-one / touch POS), 2026-10-23 owner: «متوافق مع الاجهزه التاتش all in one» ─────────────────
   Only on a touch-first screen (no hover, coarse pointer) - a mouse PC is unchanged:
   - no double-tap zoom delay on taps;
   - things shown only on mouse hover are always shown (a finger cannot hover);
   - a long press / quick double tap on a button does not select its text. */
html { touch-action: manipulation; }
@media (hover: none), (pointer: coarse) {
    .maint-page .dev-model-actions { opacity: 1; }
    .dash-card-action { opacity: 1; }
    button, [role="button"], .btn, .action-btn, .ps-tab, .pt-pill, .nav-link, .sidebar a { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
}

/* 2026-10-28 — «ترخيص البرنامج» */
.lic-card { padding: 16px; margin-bottom: 14px; }
.lic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; }
.lic-item { background: rgba(var(--th-n-500-rgb), .06); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.lic-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.lic-value { font-size: 14px; font-weight: 700; }
.lic-code { font-family: ui-monospace, Consolas, monospace; letter-spacing: .3px; user-select: all; white-space: nowrap; font-size: 13px; overflow-wrap: normal; }
.lic-banner { margin-top: 10px; padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; }
.lic-banner.warn { background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .3); color: #fbbf24; }
.lic-banner.danger { background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .3); color: #f87171; }

/* 2026-10-28 — first-run activation («عميل جديد») on the login card */
.activate-card { max-width: 440px; }
.act-title { font-size: 17px; font-weight: 800; margin: 6px 0 4px; }
.act-title.act-ok { color: #34d399; }
.act-note { font-size: 12.5px; color: var(--text-sub); margin-bottom: 12px; line-height: 1.7; }
.act-note.act-warn { color: #fbbf24; margin-top: 10px; }
.act-code { font-family: ui-monospace, Consolas, monospace; font-size: 15px; font-weight: 800; letter-spacing: 1px; padding: 9px 12px; border-radius: 10px; border: 1px dashed var(--border); text-align: center; user-select: all; }
.act-code-input { text-align: center; font-family: ui-monospace, Consolas, monospace; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; }
.act-wait { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0 4px; }
.act-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(var(--th-n-500-rgb), .25); border-top-color: var(--th-accent-500, #8b5cf6); animation: act-spin 1s linear infinite; }
@keyframes act-spin { to { transform: rotate(360deg); } }
.act-link, .act-entry { display: block; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--th-accent-400, #a78bfa); text-decoration: none; }
.act-entry { padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(139, 92, 246, .35); background: rgba(139, 92, 246, .08); }
.act-link:hover, .act-entry:hover { text-decoration: underline; }