/* ══════════════════════════════════════════════════════════════════
   POS Phase 4 — verbatim port of Legacy panels/pos/pos.css +
   pos-responsive-patch.css (pos-mobile-cart.css confirmed DEAD/unused
   in Legacy itself — not ported). Every color/padding/radius value
   below is copied exactly from the real Legacy source, not invented.
   Root tokens use this app's own [data-theme="light"] convention
   (Legacy's html[data-theme] selector, adapted) since the values
   themselves are identical to what iCare V2's own --accent/--accent-2
   already are — confirmed by direct comparison, not a coincidence to
   second-guess.
   ══════════════════════════════════════════════════════════════════ */

:root {
    --pos-bg-card:      rgba(var(--th-n-900-rgb),0.52);
    --pos-bg-input:     rgba(255,255,255,0.05);
    --pos-bg-hover:     rgba(255,255,255,0.06);
    --pos-border:       rgba(255,255,255,0.08);
    --pos-border-focus: rgba(var(--th-accent-500-rgb),0.7);
    --pos-text:         var(--th-n-200);
    --pos-text-muted:   var(--th-n-500);
    --pos-text-sub:     var(--th-n-400);
    --pos-accent:       var(--th-accent-500);
    --pos-accent-2:     var(--th-accent2-500);
    --pos-accent-glow:  rgba(var(--th-accent-500-rgb),0.25);
    --pos-success:      #10b981;
    --pos-success-bg:   rgba(16,185,129,0.12);
    --pos-danger:       #ef4444;
    --pos-danger-bg:    rgba(239,68,68,0.12);
    --pos-warn:         #f59e0b;
    --pos-warn-bg:      rgba(245,158,11,0.12);
    --pos-info:         #3b82f6;
    --pos-info-bg:      rgba(59,130,246,0.12);
    --pos-radius:       14px;
    --pos-card-border:  rgba(255,255,255,0.07);
    --pos-card-shadow:  0 0 0 1px rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.22);
    --pos-card-bg-hover:rgba(255,255,255,0.055);
    --pos-ease-smooth:  cubic-bezier(.22,.61,.36,1);
    --pos-ease-spring:  cubic-bezier(.34,1.56,.64,1);
    --pos-dur-fast:     170ms;
}
[data-theme="light"] {
    --pos-bg-card:      rgba(255,255,255,0.82);
    --pos-bg-input:     rgba(var(--th-n-900-rgb),0.04);
    --pos-bg-hover:     rgba(59,130,246,0.06);
    --pos-border:       rgba(var(--th-n-900-rgb),0.10);
    --pos-border-focus: rgba(var(--th-accent-500-rgb),0.55);
    --pos-text:         var(--th-n-800);
    --pos-text-muted:   var(--th-n-500);
    --pos-text-sub:     var(--th-n-600);
    --pos-card-border:  rgba(var(--th-n-900-rgb),0.08);
    --pos-card-shadow:  0 4px 22px rgba(30,60,120,0.08), 0 1px 0 rgba(255,255,255,0.95) inset;
    --pos-card-bg-hover:rgba(255,255,255,0.88);
    --pos-success-bg:   rgba(16,185,129,0.10);
    --pos-danger-bg:    rgba(239,68,68,0.10);
    --pos-warn-bg:      rgba(245,158,11,0.10);
    --pos-info-bg:      rgba(59,130,246,0.10);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { /* dark values already the :root default above */ }
}

/* Bug found live (2026-09-17, owner screenshot + report): Legacy's real page is a standalone
   document with `html,body{height:100%;overflow:hidden} body{display:flex;flex-direction:column}`
   (panels/pos/pos.css:47-55) — .pos-layout's own `flex:1;min-height:0` (already ported verbatim
   below) depends entirely on that flex-column ancestor to have any effect. V2's Pos.razor instead
   renders inside MainLayout's shared `.content-area` (app.css:1049 — `height:calc(100 * var(--vh));overflow-y:auto;
   padding:24px`, correct for every OTHER page's normal scrolling content, but never designed for a
   full-bleed operations-hub screen with its OWN internal per-panel scrolling). With no bounded-flex
   ancestor, .pos-layout had no effective height constraint at all and just grew to fit its content
   (~2228px measured live with an empty cart) — the whole page then scrolled as one long column
   instead of only the cart's own item list scrolling internally, which is what "زي القديم" (like
   Legacy) actually means here. Scoped to POS only via :has(), never touching .content-area's
   behavior on any other screen. */
.content-area:has(.pos-root) { height: calc(100 * var(--vh)); overflow: hidden; padding: 0; display: flex; flex-direction: column; }

.pos-root { direction: rtl; display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ══ Header ══════════════════════════════════════════════════════ */
.pos-header {
    display: flex; align-items: center;
    padding: 0 14px;
    background: var(--pos-bg-card);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--pos-border);
    flex-shrink: 0; height: 60px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    overflow: hidden;
}
/* زر القائمة العام (.mobile-menu-btn، fixed أعلى اليمين) — مساحة محجوزة له بالهيدر، نفس باقي الشاشات (2026-10-21: كان فوق «محطة البيع»). */
.pos-header { padding-right: 80px; }
.pos-header-content { display: flex; align-items: center; width: 100%; gap: 10px; min-width: 0; }
.pos-header-title { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; margin-top: 4px; }
.pos-header-title h1 { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; margin: 0; color: var(--pos-text); letter-spacing: -0.5px; }
.pos-title-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: linear-gradient(135deg, var(--pos-accent), var(--pos-accent-2)); border-radius: 8px; color: #fff; flex-shrink: 0; }
.pos-title-icon i { width: 16px; height: 16px; }
.pos-title-subtitle { font-size: 12px; color: var(--pos-text-muted); margin: 0; font-weight: 400; letter-spacing: 0.3px; }

/* ══ Header quick-actions ════════════════════════════════════════ */
/* 2026-10-17 (owner: «زي النظام القديم») — Legacy pos.css: margin-right:auto pushes the whole row to the far left (no flex:1) */
.header-quick-actions { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; margin-right: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.header-quick-actions::-webkit-scrollbar { display: none; }
.hqa-divider { width: 1px; height: 22px; background: var(--pos-border); flex-shrink: 0; }
.hqa-btn {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding: 0 12px; height: 34px; border-radius: 9px;
    background: var(--pos-bg-input); border: 1px solid var(--pos-border);
    color: var(--pos-text-sub); font-family: 'Cairo', sans-serif; font-size: 12px; font-weight: 700;
    cursor: pointer; white-space: nowrap; transition: all var(--pos-dur-fast) var(--pos-ease-smooth);
}
.hqa-btn i { width: 13px; height: 13px; flex-shrink: 0; }
.hqa-btn:hover:not(:disabled) { transform: translateY(-1px); }
.hqa-btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.hqa-btn:disabled { opacity: .4; cursor: not-allowed; }
.hqa-btn.returns          { border-color: rgba(239,68,68,0.22);  color: #f87171; }
.hqa-btn.returns:hover    { background: rgba(239,68,68,0.1);  border-color: rgba(239,68,68,0.5); }
.hqa-btn.edit-inv         { border-color: rgba(245,158,11,0.22); color: #fbbf24; }
.hqa-btn.edit-inv:hover   { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.5); }
.hqa-btn.print-inv        { border-color: rgba(16,185,129,0.22); color: #34d399; }
.hqa-btn.print-inv:hover  { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.5); }
.hqa-btn.maintenance-query{ border-color: rgba(var(--th-violet-500-rgb),0.22); color: var(--th-violet-400); }
.hqa-btn.maintenance-query:hover { background: rgba(var(--th-violet-500-rgb),0.1); border-color: rgba(var(--th-violet-500-rgb),0.5); }
.hqa-btn.product-query    { border-color: rgba(6,182,212,0.22);  color: #22d3ee; }
.hqa-btn.product-query:hover { background: rgba(6,182,212,0.1); border-color: rgba(6,182,212,0.5); }
.hqa-btn.shift-btn         { border-color: rgba(16,185,129,0.22); color: #34d399; }
.hqa-btn.shift-btn.closed  { border-color: rgba(239,68,68,0.3); color: #f87171; background: rgba(239,68,68,0.08); }
.hqa-btn.more-btn { background: var(--pos-bg-input); }
.more-dot { display: flex; gap: 2px; align-items: center; }
.more-dot span { width: 3px; height: 3px; border-radius: 50%; background: currentColor; display: block; }

/* ══ More popup ══════════════════════════════════════════════════ */
.more-popup-overlay { position: fixed; inset: 0; z-index: 1200; background: transparent; }
.more-popup {
    /* placed under the «أخرى» button by js/anchor-popup.js (Legacy positionPopup); hidden until placed */
    position: fixed; top: 70px; left: 50%; transform: translateX(-50%); visibility: hidden;
    z-index: 1201;
    background: var(--pos-bg-card); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
    border: 1px solid var(--pos-border); border-radius: 16px; padding: 16px; width: 320px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05) inset;
}
[data-theme="light"] .more-popup { background: rgba(255,255,255,0.95); box-shadow: 0 20px 60px rgba(30,60,120,0.18); }
.more-popup-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--pos-border); }
.more-popup-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--pos-text); }
.more-popup-title i { width: 16px; height: 16px; color: var(--pos-accent); }
.more-popup-close { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--pos-border); background: var(--pos-bg-hover); color: var(--pos-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.more-popup-close:hover { color: var(--pos-danger); border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.1); }
.more-popup-close i { width: 14px; height: 14px; }
.more-popup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.more-popup-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 10px; border-radius: 12px; border: 1px solid var(--pos-border);
    background: var(--pos-bg-input); color: var(--pos-text-sub);
    font-family: 'Cairo', sans-serif; cursor: pointer; transition: all 180ms var(--pos-ease-smooth); text-align: center;
}
[data-theme="light"] .more-popup-btn { background: rgba(var(--th-n-900-rgb),0.03); }
.more-popup-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.more-popup-btn:disabled { opacity: .4; cursor: not-allowed; }
.mpb-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mpb-icon i { width: 18px; height: 18px; }
.mpb-label { font-size: 12px; font-weight: 700; color: var(--pos-text); line-height: 1.3; }
.mpb-sub { font-size: 10px; color: var(--pos-text-muted); font-weight: 400; line-height: 1.2; }
.more-popup-btn.expenses .mpb-icon  { background: rgba(245,158,11,0.12); color: #f59e0b; }
.more-popup-btn.bookings .mpb-icon  { background: rgba(var(--th-accent-500-rgb),0.12); color: var(--th-accent-500); }
.more-popup-btn.shortages .mpb-icon { background: rgba(239,68,68,0.12);  color: #ef4444; }
.more-popup-btn.customers .mpb-icon { background: rgba(16,185,129,0.12); color: #10b981; }
.more-popup-btn.waste .mpb-icon     { background: rgba(var(--th-accent2-500-rgb),0.12); color: var(--th-accent2-500); }

/* ══ Layout ═══════════════════════════════════════════════════════ */
.pos-layout { display: grid; grid-template-columns: 1fr 360px; flex: 1; min-height: 0; gap: 0; overflow: hidden; }
.products-panel { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-left: 1px solid var(--pos-border); }
.cart-panel {
    display: flex; flex-direction: column; height: 100%; min-height: 0;
    background: var(--pos-bg-card); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
    border-right: 1px solid var(--pos-card-border); overflow: hidden; position: relative;
}

/* ══ Toolbar / search ═══════════════════════════════════════════ */
.pos-toolbar { padding: 14px 16px 10px; border-bottom: 1px solid var(--pos-border); background: var(--pos-bg-card); backdrop-filter: blur(24px); flex-shrink: 0; }
.toolbar-top { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.search-wrap { flex: 1; display: flex; align-items: center; gap: 9px; background: var(--pos-bg-input); border: 1px solid var(--pos-card-border); border-radius: 12px; padding: 0 12px; height: 42px; transition: border-color var(--pos-dur-fast), box-shadow var(--pos-dur-fast); }
.search-wrap:focus-within { border-color: var(--pos-border-focus); box-shadow: 0 0 0 3px var(--pos-accent-glow); }
.search-wrap i { width: 15px; height: 15px; color: var(--pos-text-muted); flex-shrink: 0; }
.pos-search-input { flex: 1; background: none; border: none; outline: none; color: var(--pos-text); font-family: 'Cairo', sans-serif; font-size: 13px; }
.pos-search-input::placeholder { color: var(--pos-text-muted); }
.search-clear { background: none; border: none; cursor: pointer; color: var(--pos-text-muted); padding: 2px; border-radius: 6px; display: flex; }
.search-clear:hover { color: var(--pos-text); }
.search-clear i { width: 13px; height: 13px; }
.search-cam { background: rgba(var(--th-accent-500-rgb),0.12); border: none; cursor: pointer; width: 26px; height: 26px; padding: 0; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.search-cam:hover { background: rgba(var(--th-accent-500-rgb),0.22); }
.search-cam svg, .search-cam i { width: 14px; height: 14px; color: var(--pos-accent); }
.toolbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.view-toggle { display: flex; gap: 3px; background: var(--pos-bg-card); border: 1px solid var(--pos-card-border); border-radius: 11px; padding: 3px; }
.view-btn { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--pos-text-muted); }
.view-btn i { width: 15px; height: 15px; }
.view-btn:hover { color: var(--pos-text); background: var(--pos-bg-hover); }
.view-btn.active { background: rgba(var(--th-accent-500-rgb),0.2); color: var(--th-accent-400); }
.pos-action-btn { position: relative; width: 42px; height: 42px; border-radius: 12px; background: var(--pos-bg-card); border: 1px solid var(--pos-card-border); color: var(--pos-text-muted); cursor: pointer; align-items: center; justify-content: center; display: none; }
.pos-action-btn i { width: 18px; height: 18px; }
.cart-count-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 99px; background: linear-gradient(135deg,var(--pos-accent),var(--pos-accent-2)); color: #fff; font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--pos-bg-card); }

/* ══ Sale-type bar + buyer toggle ════════════════════════════════ */
.sale-type-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px 10px; border-top: 1px solid var(--pos-border); flex-wrap: nowrap; }
.stb-tabs { display: flex; gap: 6px; flex: 1; min-width: 0; }
.stb-tab {
    flex: 1; display: flex; align-items: center; gap: 9px; padding: 7px 12px; border-radius: 10px;
    border: 1.5px solid var(--pos-border); background: var(--pos-bg-input); color: var(--pos-text-sub);
    font-family: 'Cairo', sans-serif; cursor: pointer; transition: all 200ms var(--pos-ease-smooth); position: relative;
}
.stb-tab:hover { background: var(--pos-bg-hover); border-color: rgba(255,255,255,0.14); }
.stb-tab-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; background: rgba(255,255,255,0.06); flex-shrink: 0; }
.stb-tab-icon i { width: 14px; height: 14px; }
.stb-tab-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; flex: 1; min-width: 0; }
.stb-tab-title { font-size: 12px; font-weight: 800; line-height: 1.2; color: var(--pos-text-sub); }
.stb-tab-sub { font-size: 9.5px; font-weight: 500; color: var(--pos-text-muted); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stb-tab-check { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: transparent; border: 1.5px solid var(--pos-border); opacity: 0; flex-shrink: 0; }
.stb-tab-check i { width: 10px; height: 10px; }
.stb-tab.retail.active { background: rgba(var(--th-accent-500-rgb),0.12); border-color: rgba(var(--th-accent-500-rgb),0.45); }
.stb-tab.retail.active .stb-tab-icon { background: rgba(var(--th-accent-500-rgb),0.2); color: var(--th-accent-400); }
.stb-tab.retail.active .stb-tab-title { color: var(--th-accent-300); }
.stb-tab.retail.active .stb-tab-check { background: var(--th-accent-500); border-color: var(--th-accent-500); color: #fff; opacity: 1; }
.stb-tab.wholesale.active { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.45); }
.stb-tab.wholesale.active .stb-tab-icon { background: rgba(245,158,11,0.18); color: #fbbf24; }
.stb-tab.wholesale.active .stb-tab-title { color: #fcd34d; }
.stb-tab.wholesale.active .stb-tab-check { background: #f59e0b; border-color: #f59e0b; color: #fff; opacity: 1; }
[data-theme="light"] .stb-tab.retail.active { background: rgba(var(--th-accent-500-rgb),0.08); }
[data-theme="light"] .stb-tab.wholesale.active { background: rgba(245,158,11,0.08); }

/* 2026-10-24 (owner) — compact sale-type row: قطاعي | جملة + «قطع غيار» / «هواتف» switches on the same line */
.sale-type-bar.stb-compact { padding: 6px 14px 8px; gap: 10px; flex-wrap: wrap; }
.stb-chips { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--pos-bg-input); border: 1px solid var(--pos-border); }
.stb-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px; border: none; border-radius: 8px;
    background: transparent; color: var(--pos-text-sub); font-family: 'Cairo', sans-serif; font-size: 12px; font-weight: 800;
    cursor: pointer; transition: background 160ms var(--pos-ease-smooth), color 160ms;
}
.stb-chip:hover { background: var(--pos-bg-hover); }
.stb-chip.retail.active { background: rgba(var(--th-accent-500-rgb),0.18); color: var(--th-accent-300); box-shadow: inset 0 0 0 1px rgba(var(--th-accent-500-rgb),0.45); }
.stb-chip.wholesale.active { background: rgba(245,158,11,0.16); color: #fcd34d; box-shadow: inset 0 0 0 1px rgba(245,158,11,0.45); }
.stb-sep { width: 1px; align-self: stretch; margin: 4px 0; background: var(--pos-border); }
.stb-box { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--pos-text-muted); flex-shrink: 0; position: relative; }
.stb-chip.kind.on { color: #6ee7b7; background: rgba(16,185,129,0.12); box-shadow: inset 0 0 0 1px rgba(16,185,129,0.4); }
.stb-chip.kind.on .stb-box { background: #10b981; border-color: #10b981; }
.stb-chip.kind.on .stb-box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
[data-theme="light"] .stb-chip.retail.active { color: var(--th-accent-600); }
[data-theme="light"] .stb-chip.wholesale.active { color: #b45309; }
[data-theme="light"] .stb-chip.kind.on { color: #047857; }

/* category browsing: breadcrumb + tiles (main → sub → items) */
.pos-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.pos-crumb { border: 1px solid var(--pos-border); background: var(--pos-bg-input); color: var(--pos-text-sub); border-radius: 8px; padding: 4px 10px; font-family: 'Cairo', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; }
.pos-crumb:hover { border-color: rgba(var(--th-accent-500-rgb),0.45); color: var(--pos-text); }
.pos-crumb.current { background: rgba(var(--th-accent-500-rgb),0.15); border-color: rgba(var(--th-accent-500-rgb),0.45); color: var(--th-accent-300); cursor: default; }
.pos-crumb-sep { color: var(--pos-text-muted); font-size: 13px; }
.pos-section-title { font-size: 12.5px; font-weight: 800; color: var(--pos-text-sub); margin: 4px 2px 10px; }
.products-grid + .pos-section-title, .products-table-wrap + .pos-section-title, .pos-empty + .pos-section-title { margin-top: 18px; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 10px; margin-bottom: 14px; }
.cat-grid:empty { display: none; }
.cat-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; min-height: 92px; text-align: right;
    background: var(--pos-bg-card); border: 1px solid var(--pos-card-border); border-radius: var(--pos-radius); cursor: pointer;
    font-family: 'Cairo', sans-serif; color: var(--pos-text); transition: transform var(--pos-dur-fast) var(--pos-ease-smooth), border-color var(--pos-dur-fast);
}
.cat-tile:hover { transform: translateY(-2px); border-color: rgba(var(--th-accent-500-rgb),0.45); }
.cat-tile-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(var(--th-accent-500-rgb),0.14); color: var(--th-accent-400); }
.cat-tile.part .cat-tile-icon { background: rgba(16,185,129,0.14); color: #34d399; }
.cat-tile.phone .cat-tile-icon { background: rgba(var(--th-violet-500-rgb),0.16); color: var(--th-violet-400); }
.cat-tile-name { font-size: 13px; font-weight: 800; line-height: 1.35; }
.cat-tile-count { font-size: 11px; font-weight: 600; color: var(--pos-text-muted); }
.pos-kind-badge { position: absolute; top: 6px; left: 6px; padding: 1px 7px; border-radius: 99px; font-size: 10px; font-weight: 800; color: #fff; background: #10b981; }
.pos-kind-badge.phone { background: var(--th-violet-500); }
.pos-kind-badge.inline { position: static; margin-inline-start: 6px; vertical-align: middle; }

.buyer-type-toggle { display: flex; gap: 6px; padding: 4px; margin-bottom: 8px; background: rgba(var(--th-n-400-rgb),0.12); border-radius: 12px; }
.btn-buyer-type { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border: none; border-radius: 9px; background: transparent; color: var(--th-n-400); font-family: 'Cairo', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.btn-buyer-type i { width: 15px; height: 15px; }
.btn-buyer-type:hover:not(.active) { background: rgba(var(--th-n-400-rgb),0.14); color: var(--th-n-300); }
.btn-buyer-type.active.type-customer { background: #10b981; color: #fff; box-shadow: 0 2px 8px rgba(16,185,129,.35); }
.btn-buyer-type.active.type-supplier { background: #f59e0b; color: #fff; box-shadow: 0 2px 8px rgba(245,158,11,.35); }
[data-theme="light"] .buyer-type-toggle { background: rgba(var(--th-n-500-rgb),0.10); }
[data-theme="light"] .btn-buyer-type { color: var(--th-n-500); }

/* ══ Products grid/cards ══════════════════════════════════════════ */
.products-area { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; }
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px,1fr)); gap: 12px; }
.product-card { background: var(--pos-bg-card); border: 1px solid var(--pos-card-border); border-radius: var(--pos-radius); overflow: hidden; cursor: pointer; transition: transform var(--pos-dur-fast) var(--pos-ease-smooth), box-shadow var(--pos-dur-fast), border-color var(--pos-dur-fast); position: relative; text-align: right; padding: 0; font-family: 'Cairo', sans-serif; }
.product-card:hover:not(:disabled) { transform: translateY(-3px); border-color: rgba(var(--th-accent-500-rgb),0.4); box-shadow: 0 8px 28px rgba(var(--th-accent-500-rgb),0.18), var(--pos-card-shadow); }
.product-card:disabled, .product-card.out-of-stock { opacity: .5; cursor: not-allowed; }
.product-card-media { position: relative; height: 90px; background: var(--pos-bg-input); display: flex; align-items: center; justify-content: center; }
.product-card-media i { width: 32px; height: 32px; color: var(--pos-text-muted); }
/* Legacy pos.css .product-card-img — over the icon (a broken image removes itself) */
.product-card-media { overflow: hidden; }
.product-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.product-card:hover .product-card-img { transform: scale(1.06); }
.stock-badge { position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: 99px; font-size: 10px; font-weight: 800; pointer-events: none; }
.stock-badge.out { background: rgba(239,68,68,.85); color: #fff; }
.stock-badge.low { background: rgba(245,158,11,.85); color: #fff; }
.product-card-body { padding: 11px 12px 12px; }
.product-card-name { font-size: 12.5px; font-weight: 700; color: var(--pos-text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 3px; }
.product-card-cat { font-size: 10px; color: var(--pos-text-muted); margin-bottom: 7px; font-weight: 600; }
.product-card-footer { display: flex; align-items: center; justify-content: space-between; }
.product-price { font-size: 14px; font-weight: 900; color: var(--th-accent-300); }
[data-theme="light"] .product-price { color: var(--th-accent-600); }
.price-currency { font-size: 10px; font-weight: 700; opacity: .7; }
.product-unit { font-size: 10px; color: var(--pos-text-muted); background: var(--pos-bg-input); border: 1px solid var(--pos-card-border); border-radius: 6px; padding: 2px 6px; font-weight: 700; }
.product-card-qty { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: 6px; width: fit-content; }
.product-card-qty i { width: 11px; height: 11px; }
.product-card-qty.qty-ok  { background: rgba(16,185,129,.12); color: #34d399; border: 1px solid rgba(16,185,129,.25); }
.product-card-qty.qty-low { background: rgba(245,158,11,.12); color: #fbbf24; border: 1px solid rgba(245,158,11,.25); }
.product-card-qty.qty-out { background: rgba(239,68,68,.1);  color: #f87171; border: 1px solid rgba(239,68,68,.2); }
[data-theme="light"] .product-card-qty.qty-ok  { background: rgba(16,185,129,.1); color: #059669; border-color: rgba(16,185,129,.3); }
[data-theme="light"] .product-card-qty.qty-low { background: rgba(245,158,11,.1); color: #d97706; border-color: rgba(245,158,11,.3); }
[data-theme="light"] .product-card-qty.qty-out { background: rgba(239,68,68,.08); color: #dc2626; border-color: rgba(239,68,68,.2); }
.ws-badge { display: inline-flex; align-items: center; font-size: 9px; font-weight: 800; letter-spacing: .3px; background: rgba(245,158,11,.18); color: #fbbf24; border: 1px solid rgba(245,158,11,.35); border-radius: 5px; padding: 1px 5px; margin-left: 4px; }

/* Products table (list view) — ptbl-* verbatim */
.products-table-wrap { width: 100%; overflow-x: auto; overflow-y: auto; height: 100%; }
.products-table { width: 100%; border-collapse: collapse; font-family: 'Cairo', sans-serif; min-width: 520px; }
.ptbl-th { padding: 10px 12px; font-size: 10.5px; font-weight: 800; color: var(--pos-text-muted); text-align: right; white-space: nowrap; background: rgba(var(--th-n-900-rgb),0.92); border-bottom: 2px solid var(--pos-border); letter-spacing: 0.04em; text-transform: uppercase; }
[data-theme="light"] .ptbl-th { background: rgba(var(--th-n-50-rgb),0.96); }
.ptbl-row { border-bottom: 1px solid rgba(255,255,255,0.04); }
.ptbl-row:hover { background: rgba(var(--th-accent-500-rgb),0.06); }
.ptbl-row.ptbl-out { opacity: 0.45; }
.ptbl-td { padding: 9px 12px; vertical-align: middle; font-size: 12.5px; }
.ptbl-pname { font-size: 12.5px; font-weight: 700; color: var(--pos-text); }
.ptbl-unit { font-size: 10px; font-weight: 600; color: var(--pos-text-muted); }
.ptbl-td-qty, .ptbl-td-price, .ptbl-td-ws, .ptbl-td-action { text-align: center; }
.ptbl-qty-badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 800; min-width: 40px; }
.ptbl-qty-badge.out { background: rgba(239,68,68,0.15); color: #f87171; }
.ptbl-qty-badge.low { background: rgba(245,158,11,0.15); color: #fbbf24; }
.ptbl-qty-ok { font-size: 12px; font-weight: 800; color: #34d399; }
.ptbl-retail-price { font-size: 13px; font-weight: 800; color: var(--pos-text); }
.ptbl-ws-price { font-size: 13px; font-weight: 800; color: #fbbf24; }
.ptbl-add-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(var(--th-accent-500-rgb),0.3); background: rgba(var(--th-accent-500-rgb),0.1); color: var(--th-accent-400); cursor: pointer; }
.ptbl-add-btn:hover:not(:disabled) { background: rgba(var(--th-accent-500-rgb),0.22); border-color: rgba(var(--th-accent-500-rgb),0.55); }
.ptbl-add-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ══ Cart lines ═══════════════════════════════════════════════════ */
.cart-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--pos-border); flex-shrink: 0; font-weight: 800; color: var(--pos-text); font-size: 14px; }
.mobile-close-btn { display: none; background: none; border: none; color: var(--pos-text-muted); cursor: pointer; }
.cart-items-wrap { flex: 1; min-height: 0; overflow-y: auto; }
.cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 30px; text-align: center; }
.cart-empty-icon { width: 54px; height: 54px; border-radius: 16px; background: rgba(var(--th-accent-500-rgb),0.08); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.cart-empty-icon i { width: 24px; height: 24px; color: var(--pos-text-muted); }
.cart-empty-title { font-size: 14px; font-weight: 800; color: var(--pos-text-muted); margin-bottom: 4px; }
.cart-empty-sub { font-size: 11px; color: var(--pos-text-muted); opacity: .7; }
.cart-item { display: grid; grid-template-columns: 1fr auto auto 24px; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--pos-border); }
.cart-item:hover { background: var(--pos-bg-hover); }
.ci-info { min-width: 0; cursor: pointer; }
.ci-name { font-size: 12px; font-weight: 700; color: var(--pos-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-price { font-size: 10px; color: var(--pos-text-muted); font-weight: 600; margin-top: 2px; }
.ci-sale-badge { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 5px; font-size: 9px; font-weight: 800; margin-right: 4px; }
.ci-sale-badge.retail { background: rgba(var(--th-accent-500-rgb),0.12); color: var(--th-accent-300); }
.ci-sale-badge.wholesale { background: rgba(245,158,11,0.12); color: #fbbf24; }
.ci-qty-ctrl { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.ci-qty-btn { width: 24px; height: 24px; border-radius: 7px; background: var(--pos-bg-input); border: 1px solid var(--pos-card-border); color: var(--pos-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ci-qty-btn:hover { background: rgba(var(--th-accent-500-rgb),0.15); color: var(--th-accent-400); border-color: rgba(var(--th-accent-500-rgb),0.4); }
.ci-qty { font-size: 12px; font-weight: 900; color: var(--pos-text); min-width: 18px; text-align: center; }
.ci-total { font-size: 12px; font-weight: 800; color: var(--th-accent-300); white-space: nowrap; flex-shrink: 0; }
[data-theme="light"] .ci-total { color: var(--th-accent-600); }
.ci-remove { background: none; border: none; cursor: pointer; color: var(--pos-text-muted); padding: 2px; display: flex; }
.ci-remove:hover { color: var(--pos-danger); }

/* ══ Buyer / customer search ══════════════════════════════════════ */
.customer-search-wrap { padding: 10px 16px; border-bottom: 1px solid var(--pos-border); position: relative; flex-shrink: 0; }
.csr-field { display: flex; align-items: center; gap: 8px; background: var(--pos-bg-input); border: 1px solid var(--pos-card-border); border-radius: 11px; padding: 0 10px; height: 38px; }
.csr-field:focus-within { border-color: var(--pos-border-focus); }
.csr-icon i { width: 15px; height: 15px; color: var(--pos-text-muted); }
.csr-input { flex: 1; background: none; border: none; outline: none; color: var(--pos-text); font-family: 'Cairo', sans-serif; font-size: 12.5px; }
.csr-clear, .csr-add-btn { background: none; border: none; cursor: pointer; color: var(--pos-text-muted); display: flex; padding: 2px; }
.csr-add-btn { background: rgba(var(--th-accent-500-rgb),0.12); border-radius: 7px; width: 26px; height: 26px; align-items: center; justify-content: center; color: var(--pos-accent); }
.csr-add-btn:hover { background: rgba(var(--th-accent-500-rgb),0.22); }
.csr-dropdown { position: absolute; top: calc(100% - 4px); left: 16px; right: 16px; z-index: 20; background: var(--pos-bg-card); border: 1px solid var(--pos-border); border-radius: 12px; overflow: hidden; max-height: 260px; overflow-y: auto; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
[data-theme="light"] .csr-dropdown { background: #fff; box-shadow: 0 8px 30px rgba(30,60,120,0.15); }
.csr-dd-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: none; background: transparent; cursor: pointer; text-align: right; font-family: 'Cairo', sans-serif; border-bottom: 1px solid rgba(255,255,255,0.04); }
.csr-dd-item:hover { background: rgba(var(--th-accent-500-rgb),0.1); }
.csr-dd-avatar { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; background: var(--pos-accent); flex-shrink: 0; }
.csr-dd-info { flex: 1; min-width: 0; }
.csr-dd-name { font-size: 12px; font-weight: 700; color: var(--pos-text); margin-bottom: 2px; }
.csr-dd-phone { font-size: 11px; font-weight: 500; color: var(--pos-text-muted); direction: ltr; }
.csr-dd-debt { font-size: 9.5px; font-weight: 700; color: #f87171; }
.csr-selected { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; padding: 7px 10px; background: rgba(16,185,129,0.08); border: 1.5px solid rgba(16,185,129,0.25); border-radius: 10px; gap: 8px; }
.csr-sel-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.csr-sel-avatar { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; background: var(--pos-success); flex-shrink: 0; }
.csr-sel-name { font-size: 12px; font-weight: 800; color: var(--pos-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csr-sel-meta { font-size: 10.5px; color: var(--pos-text-muted); direction: ltr; }
.csr-sel-remove { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px; border: none; background: transparent; color: var(--pos-text-muted); cursor: pointer; flex-shrink: 0; }
.csr-sel-remove:hover { background: rgba(239,68,68,0.15); color: #f87171; }

/* ══ Discount row ═════════════════════════════════════════════════ */
.discount-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 14px; border-bottom: 1px solid var(--pos-border); gap: 10px; flex-shrink: 0; }
.discount-row.pos-disabled { opacity: .5; }
.discount-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--pos-text-muted); flex-shrink: 0; }
.discount-label i { width: 13px; height: 13px; }
.discount-inputs { display: flex; gap: 6px; align-items: center; }
.discount-input { width: 80px; background: var(--pos-bg-input); border: 1px solid var(--pos-card-border); border-radius: 9px; padding: 6px 10px; color: var(--pos-text); font-family: 'Cairo', sans-serif; font-size: 13px; outline: none; text-align: center; }
.discount-input:focus { border-color: var(--pos-border-focus); }
.discount-type-sel { background: var(--pos-bg-input); border: 1px solid var(--pos-card-border); border-radius: 9px; padding: 6px 8px; color: var(--pos-text); font-family: 'Cairo', sans-serif; font-size: 12px; outline: none; cursor: pointer; }

/* ══ Totals ═══════════════════════════════════════════════════════ */
.cart-summary { padding: 8px 14px; border-bottom: 1px solid var(--pos-border); flex-shrink: 0; }
.summary-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; }
.summary-lbl { font-size: 12px; color: var(--pos-text-muted); font-weight: 600; }
.summary-val { font-size: 13px; font-weight: 800; color: var(--pos-text); }
.discount-lbl { display: flex; align-items: center; gap: 5px; color: var(--pos-warn); }
.discount-val { color: var(--pos-warn); }
.total-row { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--pos-border); }
.total-lbl { font-size: 13px; font-weight: 900; color: var(--pos-text); }
.total-val { font-size: 17px; font-weight: 900; color: var(--th-accent-300); }
[data-theme="light"] .total-val { color: var(--th-accent-600); }

/* ══ Payment ══════════════════════════════════════════════════════ */
.payment-methods { padding: 8px 14px; border-bottom: 1px solid var(--pos-border); flex: 1; min-height: 0; overflow-y: auto; }
.pay-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pay-label { font-size: 11px; color: var(--pos-text-muted); font-weight: 700; }
.pay-mode-tabs { display: flex; gap: 4px; background: var(--pos-bg-input); border: 1px solid var(--pos-card-border); border-radius: 10px; padding: 3px; }
.pay-mode-tab { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 7px; border: none; background: transparent; color: var(--pos-text-muted); font-family: 'Cairo', sans-serif; font-size: 10.5px; font-weight: 800; cursor: pointer; }
.pay-mode-tab i { width: 12px; height: 12px; }
.pay-mode-tab.active { background: rgba(var(--th-accent-500-rgb),0.22); color: var(--th-accent-300); }
[data-theme="light"] .pay-mode-tab.active { background: rgba(var(--th-accent-500-rgb),0.12); color: var(--th-accent-600); }
.pay-btns { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-bottom: 6px; }
.pay-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border-radius: 9px; background: var(--pos-bg-input); border: 1px solid var(--pos-card-border); color: var(--pos-text-muted); font-size: 10px; font-weight: 700; font-family: 'Cairo', sans-serif; cursor: pointer; white-space: nowrap; }
.pay-btn i { width: 16px; height: 16px; }
.pay-btn:hover:not(:disabled) { color: var(--pos-text); border-color: rgba(255,255,255,0.18); background: var(--pos-bg-hover); }
.pay-btn.active { background: rgba(var(--th-accent-500-rgb),0.18); border-color: rgba(var(--th-accent-500-rgb),0.5); color: var(--th-accent-300); box-shadow: 0 0 0 2px rgba(var(--th-accent-500-rgb),0.15); }
.pay-btn:disabled { opacity: .45; cursor: not-allowed; }
[data-theme="light"] .pay-btn.active { background: rgba(var(--th-accent-500-rgb),0.1); border-color: rgba(var(--th-accent-500-rgb),0.4); color: var(--th-accent-600); }
.pay-details-panel { margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.pay-details-label { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; color: var(--pos-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.pay-details-label i { width: 12px; height: 12px; }
.pay-drawer-list, .pay-wallet-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-source-chip { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--pos-card-border); background: var(--pos-bg-input); color: var(--pos-text-muted); font-family: 'Cairo', sans-serif; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pay-source-chip:hover { border-color: rgba(var(--th-accent-500-rgb),0.4); color: var(--pos-text); background: var(--pos-bg-hover); }
.pay-source-chip.selected { border-color: rgba(var(--th-accent-500-rgb),0.6); background: rgba(var(--th-accent-500-rgb),0.14); color: var(--th-accent-300); box-shadow: 0 0 0 2px rgba(var(--th-accent-500-rgb),0.12); }
[data-theme="light"] .pay-source-chip.selected { color: var(--th-accent-600); background: rgba(var(--th-accent-500-rgb),0.09); }
.pay-source-empty { font-size: 11px; color: var(--pos-text-muted); font-style: italic; padding: 6px 0; }
.pay-tendered-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pay-tendered-wrap { flex: 1; min-width: 110px; display: flex; align-items: center; gap: 8px; background: var(--pos-bg-input); border: 1px solid var(--pos-card-border); border-radius: 9px; padding: 0 10px; height: 32px; }
.pay-tendered-wrap:focus-within { border-color: var(--pos-border-focus); }
.pay-tendered-icon i { width: 13px; height: 13px; color: var(--pos-text-muted); }
.cash-input { flex: 1; background: none; border: none; outline: none; color: var(--pos-text); font-family: 'Cairo', sans-serif; font-size: 13px; }
.change-display { display: flex; align-items: center; gap: 8px; background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.25); border-radius: 10px; padding: 6px 12px; }
.change-display.negative { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.25); }
.change-lbl { font-size: 11px; color: var(--pos-text-muted); font-weight: 700; }
.change-val { font-size: 14px; font-weight: 900; color: #34d399; }
.change-display.negative .change-val { color: #f87171; }
.pay-debt-info { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; font-size: 12px; font-weight: 700; border: 1px solid rgba(245,158,11,0.3); background: rgba(245,158,11,0.08); color: #fbbf24; }
.pay-debt-info i { width: 14px; height: 14px; flex-shrink: 0; }
.pay-debt-info.allowed { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.08); color: #34d399; }
.pay-debt-info.denied  { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.08); color: #f87171; }

/* Split payment */
.split-section { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--pos-bg-input); border: 1px solid var(--pos-card-border); border-radius: 12px; }
.split-section-header { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: var(--pos-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.split-section-header i { width: 13px; height: 13px; }
.split-divider { display: flex; align-items: center; justify-content: center; padding: 2px 0; }
.split-divider span { width: 24px; height: 24px; border-radius: 50%; background: rgba(var(--th-accent-500-rgb),0.15); border: 1px solid rgba(var(--th-accent-500-rgb),0.3); color: var(--th-accent-400); font-size: 14px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.split-amount-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.split-amount-label { font-size: 10.5px; font-weight: 700; color: var(--pos-text-muted); flex-shrink: 0; }
.split-amount-wrap { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(var(--th-accent-500-rgb),0.25); border-radius: 9px; padding: 0 10px; height: 34px; }
[data-theme="light"] .split-amount-wrap { background: rgba(255,255,255,0.7); }
.split-amount-input { width: 80px; background: none; border: none; outline: none; color: var(--pos-text); font-family: 'Cairo', sans-serif; font-size: 13px; font-weight: 800; text-align: center; }
.split-currency { font-size: 10px; font-weight: 700; color: var(--pos-text-muted); }
.split-summary { padding: 8px 12px; background: rgba(var(--th-accent-500-rgb),0.06); border: 1px solid rgba(var(--th-accent-500-rgb),0.18); border-radius: 10px; display: flex; flex-direction: column; gap: 4px; }
.split-sum-row { display: flex; justify-content: space-between; align-items: center; }
.split-sum-lbl { font-size: 11px; font-weight: 700; color: var(--pos-text-muted); }
.split-sum-val { font-size: 12px; font-weight: 900; color: var(--pos-text); }
.remaining-val.exact { color: #34d399; }
.remaining-val.short { color: #f87171; }
.remaining-val.over  { color: #fbbf24; }

/* ══ Checkout button ═══════════════════════════════════════════════ */
.checkout-btn {
    margin: 8px 14px; padding: 11px; border-radius: 12px;
    background: linear-gradient(135deg, var(--pos-accent), var(--pos-accent-2));
    border: none; color: #fff; font-family: 'Cairo', sans-serif; font-size: 14px; font-weight: 900;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: 0 6px 22px rgba(var(--th-accent-500-rgb),0.4); flex-shrink: 0; min-height: 48px; width: calc(100% - 28px);
}
.checkout-btn i { width: 20px; height: 20px; }
.checkout-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(var(--th-accent-500-rgb),0.55); }
.checkout-btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

/* ══ Generic empty state (products area) ═══════════════════════════ */
.pos-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; }
.pos-empty-icon { width: 64px; height: 64px; border-radius: 18px; background: rgba(var(--th-accent-500-rgb),0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.pos-empty-icon i { width: 28px; height: 28px; color: var(--pos-text-muted); }
.pos-empty-title { font-size: 16px; font-weight: 800; color: var(--pos-text); margin-bottom: 6px; }
.pos-empty-sub { font-size: 12px; color: var(--pos-text-muted); }

/* ══ Shift banner ═══════════════════════════════════════════════════ */
.pos-shift-banner { display: flex; align-items: center; gap: 10px; padding: 8px 20px; font-family: 'Cairo', sans-serif; font-size: 12.5px; font-weight: 600; }
.pos-shift-banner.open   { background: rgba(16,185,129,0.08); color: #10b981; border-bottom: 1px solid rgba(16,185,129,0.25); }
.pos-shift-banner.closed { background: rgba(239,68,68,0.1);  color: #ef4444; border-bottom: 1px solid rgba(239,68,68,0.3); }
.psb-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.psb-open { background: #10b981; box-shadow: 0 0 8px #10b981; }
.psb-closed { background: #ef4444; }
.pos-shift-action { margin-right: auto; background: none; border: 1px solid currentColor; color: inherit; border-radius: 8px; padding: 4px 12px; font-family: 'Cairo', sans-serif; font-size: 11.5px; font-weight: 700; cursor: pointer; }

/* ══ Generic modal-body helpers reused by the auxiliary POS modals
   (Product Query, Maintenance Query, Customer Mgmt, Return, Invoice
   Browser, Expense, Waste, Shortages, Item Edit, Add Customer) — these
   modals are Legacy-parity in WORKFLOW, wrapped in this app's existing
   shared <AppModal> chrome rather than Legacy's own bespoke per-file
   modal CSS (not yet ported at this level of pixel detail — flagged
   as a follow-up item, not silently invented). ══ */
.pos-form { display: flex; flex-direction: column; gap: 10px; }
.pos-form-label { font-size: 12px; font-weight: 700; color: var(--pos-text-sub); }
.pos-form-input { background: var(--pos-bg-input); border: 1px solid var(--pos-card-border); border-radius: 10px; padding: 10px 12px; color: var(--pos-text); font-family: 'Cairo', sans-serif; font-size: 13px; outline: none; width: 100%; }
.pos-form-input:focus { border-color: var(--pos-border-focus); }
.pos-form-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--pos-text); font-weight: 600; }
.pos-btn { padding: 9px 16px; border-radius: 10px; border: 1px solid var(--pos-card-border); background: var(--pos-bg-input); color: var(--pos-text); font-family: 'Cairo', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; }
.pos-btn:hover:not(:disabled) { background: var(--pos-bg-hover); }
.pos-btn:disabled { opacity: .5; cursor: not-allowed; }
.pos-btn-primary { background: linear-gradient(135deg, var(--pos-accent), var(--pos-accent-2)); border-color: transparent; color: #fff; }
.pos-btn-ghost { background: none; }
.pos-btn-sm { padding: 6px 10px; font-size: 12px; }
.pos-btn-icon { padding: 9px; }
.pos-iem-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.pos-iem-body { display: flex; flex-direction: column; gap: 10px; }
.pos-iem-name { font-weight: 800; color: var(--pos-text); font-size: 14px; }
.pos-iem-label { font-size: 12px; font-weight: 700; color: var(--pos-text-sub); }
.pos-iem-qty-row { display: flex; align-items: center; gap: 8px; }
.pos-iem-step { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--pos-card-border); background: var(--pos-bg-input); color: var(--pos-text); font-size: 18px; cursor: pointer; }
.pos-iem-input { flex: 1; }
.pos-iem-unit { color: var(--pos-text-muted); font-size: 12px; }
.pos-iem-hint { font-size: 11px; color: var(--pos-text-muted); }
.pos-iem-total { font-weight: 800; color: var(--pos-text); font-size: 14px; margin-top: 4px; }
.pos-pq-body { display: flex; flex-direction: column; gap: 10px; max-height: calc(70 * var(--vh)); }
.pos-pq-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.pos-pq-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--pos-bg-input); cursor: pointer; }
.pos-pq-item:hover, .pos-pq-item.selected { background: var(--pos-bg-hover); }
.pos-pq-item-name { font-weight: 700; color: var(--pos-text); font-size: 13px; }
.pos-pq-item-name small { color: var(--pos-text-muted); font-weight: 500; margin-right: 6px; }
.pos-pq-item-price { font-weight: 800; color: var(--pos-accent); }
.pos-pq-detail { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--pos-bg-card); border: 1px solid var(--pos-card-border); border-radius: 10px; margin: -2px 0 6px; }
.pos-pq-detail > div { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--pos-text-sub); }
.pos-pq-detail strong { color: var(--pos-text); }
.pos-pq-desc { color: var(--pos-text-sub); font-size: 12px; }
/* 2026-10-24 (owner) — the selected item as a price card + the purchase-price reveal */
.pos-pq-scope { font-size: 11.5px; font-weight: 700; color: var(--pos-text-muted); margin-top: -4px; }
.pos-pq-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--pos-bg-card); border: 1px solid rgba(var(--th-accent-500-rgb),0.35); border-radius: 12px; margin: -2px 0 6px; }
.pos-pq-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pq-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 10px; background: var(--pos-bg-input); border: 1px solid var(--pos-border); }
.pq-stat span { font-size: 11px; font-weight: 700; color: var(--pos-text-muted); }
.pq-stat strong { font-size: 20px; font-weight: 900; line-height: 1.2; color: var(--pos-text); font-variant-numeric: tabular-nums; }
.pq-stat em { font-style: normal; font-size: 10.5px; color: var(--pos-text-muted); min-height: 14px; }
.pq-stat.sell strong { color: var(--th-accent-400); }
.pq-stat.ws strong { color: #fbbf24; }
.pq-stat.qty strong { color: #34d399; }
.pq-stat.qty.out strong { color: #f87171; }
.pos-pq-cost { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 9px 12px; border-radius: 10px; border: 1px dashed rgba(var(--th-violet-500-rgb),0.45); background: rgba(var(--th-violet-500-rgb),0.07); }
.pq-cost-label { font-size: 12px; font-weight: 800; color: var(--pos-text-sub); flex: 1; min-width: 110px; }
.pq-cost-value { font-size: 15px; font-weight: 900; color: var(--th-violet-400); font-variant-numeric: tabular-nums; }
.pq-cost-value.masked { letter-spacing: 3px; color: var(--pos-text-muted); }
.pq-cost-last { font-size: 11px; color: var(--pos-text-muted); }
.pq-cost-btn { padding: 6px 14px; font-size: 12px; min-height: 34px; }
.pq-pass { width: 180px; flex: 0 1 180px; padding: 7px 10px; }
.pq-cost-error { flex-basis: 100%; font-size: 11.5px; font-weight: 700; color: #f87171; }
.pos-pq-meta { display: flex; flex-direction: column; gap: 5px; }
.pos-pq-meta > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--pos-text-sub); }
.pos-pq-meta strong { color: var(--pos-text); text-align: left; word-break: break-word; }
@media (max-width: 520px) { .pq-stat strong { font-size: 16px; } .pq-pass { flex: 1 1 100%; width: auto; } }
.pos-mq-card { padding: 10px 12px; border-radius: 10px; background: var(--pos-bg-input); cursor: pointer; margin-bottom: 6px; }
.pos-mq-card.expanded { background: var(--pos-bg-hover); }
.pos-mq-head { display: flex; justify-content: space-between; font-weight: 800; color: var(--pos-text); font-size: 13px; }
.pos-mq-status { font-size: 11px; color: var(--pos-accent); }
.pos-mq-sub { font-size: 11.5px; color: var(--pos-text-muted); }
.pos-mq-detail { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--pos-card-border); display: flex; flex-direction: column; gap: 4px; }
.pos-mq-detail > div { display: flex; justify-content: space-between; font-size: 12px; color: var(--pos-text-muted); }
.pos-mq-detail strong { color: var(--pos-text); }
.pos-mq-problem p { color: var(--pos-text); font-size: 12px; margin: 2px 0 0; }
.pos-cm-toolbar { display: flex; gap: 8px; margin-bottom: 8px; }
.pos-cm-list { display: flex; flex-direction: column; gap: 6px; max-height: calc(50 * var(--vh)); overflow-y: auto; }
.pos-cm-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--pos-bg-input); border-radius: 10px; }
.pos-cm-row-info { flex: 1; display: flex; flex-direction: column; }
.pos-cm-row-info strong { color: var(--pos-text); font-size: 13px; }
.pos-cm-row-info small { color: var(--pos-text-muted); font-size: 11px; }
.pos-cm-debt { font-size: 11.5px; font-weight: 700; padding: 4px 8px; border-radius: 8px; }
.pos-cm-debt.owed { color: #ef4444; background: rgba(239,68,68,.1); }
.pos-cm-debt.credit { color: #10b981; background: rgba(16,185,129,.1); }
.pos-lg-act { width: 30px; height: 30px; border-radius: 8px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pos-lg-act.ab-blue { background: rgba(59,130,246,.12); color: #3b82f6; }
.pos-lg-act.ab-amber { background: rgba(245,158,11,.12); color: #f59e0b; }
.pos-return-header { color: var(--pos-text); font-size: 13px; font-weight: 700; margin: 4px 0; }
.pos-return-pay-label { flex: 1; color: var(--pos-text-sub); font-size: 12.5px; }
.pos-ib-toolbar { display: flex; gap: 8px; margin-bottom: 8px; }
.pos-shortage-rows { display: flex; flex-direction: column; gap: 8px; }
.pos-shortage-row { display: flex; gap: 8px; align-items: center; }
.pos-shortage-name-wrap { flex: 2; position: relative; }
.pos-shortage-qty { flex: 0 0 90px; }
.pos-buyer-dropdown { position: absolute; z-index: 20; margin-top: 4px; background: var(--pos-bg-card); border: 1px solid var(--pos-border); border-radius: 10px; overflow: hidden; max-height: 220px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,.25); left: 0; right: 0; }
.pos-buyer-dropdown button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 8px 12px; background: none; border: none; border-bottom: 1px solid var(--pos-card-border); cursor: pointer; text-align: right; }
.pos-buyer-dropdown button:hover { background: var(--pos-bg-hover); }
.pos-buyer-dropdown span { color: var(--pos-text); font-weight: 700; font-size: 12.5px; }
.pos-buyer-dropdown small { color: var(--pos-text-muted); font-size: 11px; }
.pos-buyer-selected { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: rgba(16,185,129,0.08); border: 1.5px solid rgba(16,185,129,0.25); border-radius: 10px; }
.pos-buyer-selected strong { color: var(--pos-text); font-size: 13px; }
.pos-buyer-selected small { color: var(--pos-text-muted); font-size: 11px; display: block; margin-top: 2px; }
.pos-cl-remove { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; border: none; background: transparent; color: var(--pos-text-muted); cursor: pointer; flex-shrink: 0; }
.pos-cl-remove:hover { background: rgba(239,68,68,0.12); color: #f87171; }
.pos-mq-wo { font-family: 'Cairo', sans-serif; font-weight: 800; color: var(--pos-accent); font-size: 12px; }

/* Generic error banner (all POS modals) */
.error-box { padding: 9px 12px; border-radius: 10px; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #f87171; font-size: 12px; font-weight: 600; }

/* Generic modal-scale tabs/hints (distinct from the pixel-exact .pay-mode-tabs/.pay-source-chip
   used on the main POS screen — these are the smaller-scale equivalents reused across the
   auxiliary modals: Expense/CustomerManagement source & filter toggles). */
.pos-pay-mode-tabs, .pos-pay-method-tabs { display: flex; gap: 4px; background: var(--pos-bg-input); border: 1px solid var(--pos-card-border); border-radius: 10px; padding: 3px; }
.pos-pay-tab, .pos-pay-method { flex: 1; padding: 7px 10px; border-radius: 7px; border: none; background: transparent; color: var(--pos-text-muted); font-family: 'Cairo', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; }
.pos-pay-tab:disabled, .pos-pay-method:disabled { opacity: .45; cursor: not-allowed; }
.pos-pay-tab.active, .pos-pay-method.active { background: rgba(var(--th-accent-500-rgb),0.22); color: var(--th-accent-300); }
[data-theme="light"] .pos-pay-tab.active, [data-theme="light"] .pos-pay-method.active { background: rgba(var(--th-accent-500-rgb),0.12); color: var(--th-accent-600); }
.pos-pay-hint { padding: 8px 11px; border-radius: 9px; background: rgba(var(--th-accent-500-rgb),0.08); border: 1px solid rgba(var(--th-accent-500-rgb),0.18); color: var(--pos-text-sub); font-size: 11.5px; font-weight: 600; }
.pos-pay-hint.pos-ok { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.25); color: #34d399; }
.pos-pay-hint.pos-warn { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.25); color: #fbbf24; }
.pos-pay-hint.pos-error { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.25); color: #f87171; }
.pos-cm-body { display: flex; flex-direction: column; gap: 10px; }
.pos-cm-payment { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--pos-bg-input); border-radius: 10px; }
.pos-cm-form { display: flex; flex-direction: column; gap: 8px; }
.pos-products-table { width: 100%; border-collapse: collapse; }
.pos-products-table th { padding: 8px; font-size: 11px; color: var(--pos-text-muted); text-align: right; border-bottom: 1px solid var(--pos-card-border); }
.pos-products-table td { padding: 8px; font-size: 12.5px; color: var(--pos-text); border-bottom: 1px solid rgba(255,255,255,0.04); }
.pos-totals { padding: 6px 0; display: flex; flex-direction: column; gap: 2px; }
.pos-total-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 12.5px; color: var(--pos-text-sub); font-weight: 700; }
.pos-total-row.pos-total-discount { color: var(--pos-warn); }
.pos-total-row.pos-total-grand { border-top: 1px solid var(--pos-border); margin-top: 4px; padding-top: 6px; font-size: 15px; color: var(--pos-text); }

/* ══ Responsive — verbatim pos-responsive-patch.css breakpoints ═════ */
@media (min-width: 1400px) { .pos-layout { grid-template-columns: 1fr 400px; } .pos-header-title h1 { font-size: 24px; } .products-grid { grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); } }
@media (min-width: 1200px) and (max-width: 1399px) { .pos-layout { grid-template-columns: 1fr 380px; } .products-grid { grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); } }
@media (min-width: 1024px) and (max-width: 1199px) { .pos-layout { grid-template-columns: 1fr 320px; } .hqa-btn span.hqa-label { display: none; } .products-grid { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); } }
@media (min-width: 900px) and (max-width: 1023px) {
    .pos-layout { grid-template-columns: 1fr 290px; }
    .pos-header-title h1 { font-size: 19px; }
    .hqa-btn span.hqa-label { display: none; }
    .products-grid { grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); }
}
@media (min-width: 768px) and (max-width: 899px) {
    .pos-layout { grid-template-columns: 1fr 270px; }
    .pos-header-title h1 { font-size: 18px; }
    .pos-title-subtitle { display: none; }
    .hqa-btn span.hqa-label { display: none; }
    .hqa-btn.product-query { display: none; }
    .products-grid { grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); }
    .product-card-media { height: 100px; }
    .checkout-btn { margin: 0 12px 12px; font-size: 14px; }
}
@media (max-width: 767px) {
    /* Mobile POS already deliberately lets the real `body` scroll (line below, pre-existing) rather
       than clip everything the way desktop's .content-area:has(.pos-root) fix above does — the
       fixed-position cart-as-bottom-sheet approach needs the underlying page scrollable. Undo the
       desktop-only clip here so it doesn't fight that. */
    .content-area:has(.pos-root) { height: auto; min-height: calc(100 * var(--vh)); overflow: visible; padding: 0; }
    body { overflow-y: auto; overflow-x: hidden; }
    .pos-header { height: 56px; padding: 0 10px; position: sticky; top: 0; z-index: 100; }
    .pos-header-title h1 { font-size: 16px; }
    .pos-title-subtitle { display: none; }
    .pos-title-icon { width: 24px; height: 24px; }
    .pos-title-icon i { width: 13px; height: 13px; }
    .pos-action-btn { display: flex; }
    .mobile-close-btn { display: flex; }
    .hqa-btn span.hqa-label { display: none; }
    .hqa-btn { padding: 0 7px; min-width: 30px; justify-content: center; }
    .pos-layout { display: flex; flex-direction: column; height: auto; min-height: calc(calc(100 * var(--vh)) - 56px); overflow: visible; }
    .products-panel { flex: 1; height: auto; min-height: 0; border-left: none; border-bottom: 1px solid var(--pos-border); overflow: visible; }
    .pos-toolbar { padding: 10px 12px 8px; gap: 8px; }
    .toolbar-top { flex-direction: row; gap: 8px; flex-wrap: nowrap; align-items: center; }
    .search-wrap { flex: 1; min-width: 0; }
    .pos-search-input { font-size: 16px !important; }
    .products-area { padding: 8px 10px 80px; }
    .products-grid { grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 8px; }
    .product-card-media { height: 90px; }
    .cart-panel {
        position: fixed !important; right: 0 !important; left: 0 !important; bottom: 0 !important; top: auto !important;
        width: 100% !important; max-width: 100% !important; height: 0;
        border-right: none; border-top: 1px solid var(--pos-border); border-radius: 20px 20px 0 0;
        z-index: 998; transition: height 320ms cubic-bezier(.34,1.2,.64,1), opacity 200ms ease;
        display: flex; flex-direction: column; overflow: hidden; opacity: 0; pointer-events: none;
        box-shadow: 0 -8px 32px rgba(0,0,0,0.35);
    }
    .cart-panel.mobile-visible { height: calc(88 * var(--vh)); opacity: 1; pointer-events: auto; }
    .cart-panel.mobile-visible .cart-items-wrap { flex: 1; min-height: 0; overflow-y: auto; }
    .cart-panel.mobile-visible .payment-methods { max-height: 130px; overflow-y: auto; }
    .cart-panel.mobile-visible .checkout-btn { margin: 0; width: 100%; border-radius: 0; padding: 15px; font-size: 15px; box-shadow: 0 -4px 20px rgba(var(--th-accent-500-rgb),0.3); flex-shrink: 0; }
    .mobile-close-btn { display: flex; }
    .sale-type-bar { padding: 6px 10px; gap: 6px; }
    .stb-tabs { gap: 6px; }
    .stb-tab { padding: 6px 10px; gap: 5px; }
    .stb-tab-sub { display: none; }
    .sale-type-bar.stb-compact { padding: 6px 10px; gap: 6px; }
    .stb-chip { padding: 4px 9px; font-size: 11.5px; }
    .cat-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
}
@media (max-width: 480px) {
    .pos-header { height: 52px; }
    .pos-layout { min-height: calc(calc(100 * var(--vh)) - 52px); }
    .products-grid { grid-template-columns: repeat(2,1fr); gap: 6px; padding: 6px 8px 80px; }
    .product-card-media { height: 80px; }
    .cart-panel.mobile-visible { height: calc(92 * var(--vh)); }
}
@media (max-width: 360px) {
    .products-grid { grid-template-columns: repeat(2,1fr); gap: 5px; }
    .hqa-btn { padding: 0 5px; min-width: 28px; }
}

/* ══════════════════════════════════════════════════════════════════
   Shift open/close modal — verbatim port of Legacy's real
   logs/shifts-log.html .shift-modal-overlay/.shift-modal/.sm-* system
   (2026-09-17, owner screenshot: "مش دا شكل قايمه فتح الورديه اصلا").
   Every value below is copied from Legacy's own CSS, only renamed onto
   this file's existing --pos-* token family (already confirmed
   identical real values, same technique as the rest of this file's
   top-of-file note). Deliberately NOT reusing AppModal.razor — Legacy's
   own shift modal is a bespoke glow/blob/big-icon shell, structurally
   different from AppModal's generic icon+title header, so ShiftModal
   .razor renders this overlay directly instead of nesting inside it.

   Functional deviations from Legacy (owner-approved Shift Management
   decisions, 2026-09-17, already implemented/closed — not a partial
   port): a single cash account per shift, not Legacy's independent
   multi-drawer/wallet toggle list (V2's real reconciliation math is
   keyed to exactly one CashMovement-tracked account); no cashier-name
   input (V2 derives it from the authenticated user, can't be
   mistyped/spoofed like Legacy's free-text field); no close-time
   keep/zero/partial-withdraw cash-handling picker (owner's decision #2
   is a plain physical-count declaration, not a withdrawal workflow).
   The balance-card visual shape below is reused as a single-select
   (radio-like) list instead of Legacy's independent per-card toggle,
   for exactly this reason. ══════════════════════════════════════ */
.shift-modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(2,6,23,.75);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    padding: 10px;
}
.shift-modal {
    width: min(560px,100%); border-radius: 22px; overflow: hidden;
    position: relative;
    box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07);
    max-height: calc(90 * var(--vh)); display: flex; flex-direction: column;
}
.shift-modal.open-type { background: linear-gradient(160deg,var(--th-n-900) 0%,#0a1628 60%,#0d1f3c 100%); }
[data-theme="light"] .shift-modal.open-type { background: linear-gradient(160deg,#ffffff 0%,var(--th-n-50) 60%,var(--th-n-100) 100%); }
.shift-modal.close-type { background: linear-gradient(160deg,var(--th-n-900) 0%,#1a0a0a 60%,#200d0d 100%); }
[data-theme="light"] .shift-modal.close-type { background: linear-gradient(160deg,#ffffff 0%,#fef2f2 60%,#fee2e2 100%); }
.shift-modal-glow { position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2; }
.open-type .shift-modal-glow { background: linear-gradient(90deg,transparent,var(--pos-accent),var(--pos-accent-2),transparent); }
.close-type .shift-modal-glow { background: linear-gradient(90deg,transparent,#ef4444,#dc2626,transparent); }
.shift-modal-blob {
    position: absolute; top: -60px; right: -60px; width: 240px; height: 240px;
    border-radius: 50%; pointer-events: none; opacity: .12; filter: blur(60px); z-index: 0;
}
.open-type .shift-modal-blob { background: radial-gradient(circle,var(--pos-accent),var(--pos-accent-2)); }
.close-type .shift-modal-blob { background: radial-gradient(circle,#ef4444,#b91c1c); }
.shift-modal-header {
    position: relative; z-index: 1; padding: 24px 24px 18px;
    display: flex; align-items: flex-start; justify-content: space-between; flex-shrink: 0;
}
.shift-modal-header-icon-wrap { display: flex; align-items: center; gap: 14px; }
.shift-modal-big-icon {
    width: 50px; height: 50px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.open-type .shift-modal-big-icon { background: linear-gradient(135deg,rgba(var(--th-accent-500-rgb),.25),rgba(var(--th-accent2-500-rgb),.15)); border: 1px solid rgba(var(--th-accent-500-rgb),.35); box-shadow: 0 0 30px rgba(var(--th-accent-500-rgb),.2); }
.close-type .shift-modal-big-icon { background: linear-gradient(135deg,rgba(239,68,68,.25),rgba(185,28,28,.15)); border: 1px solid rgba(239,68,68,.35); box-shadow: 0 0 30px rgba(239,68,68,.2); }
/* Inline-SVG icons (2026-09-17, see ShiftModal.razor's own Icon() comment) sit inside clickable
   cards/buttons throughout this modal — never meant to capture the click themselves, only their
   container is. Lucide's own <i>-to-<svg> swap happened to not intercept clicks; a plain inline
   <svg> does unless told not to (real bug found live via Chromium: clicking a balance-card
   sometimes hit the icon instead of the card). */
.shift-modal svg { pointer-events: none; }
.shift-modal-big-icon i, .shift-modal-big-icon svg { width: 24px; height: 24px; }
.open-type .shift-modal-big-icon i, .open-type .shift-modal-big-icon svg { color: var(--pos-accent); }
.close-type .shift-modal-big-icon i, .close-type .shift-modal-big-icon svg { color: #ef4444; }
.shift-modal-title { font-size: 20px; font-weight: 900; color: var(--pos-text); letter-spacing: -.03em; line-height: 1.2; }
.shift-modal-sub { font-size: 12px; color: var(--pos-text-muted); font-weight: 600; margin-top: 4px; }
.shift-modal-close-btn {
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
    color: var(--pos-text-muted); cursor: pointer; transition: all 170ms; flex-shrink: 0;
}
.shift-modal-close-btn:hover { background: rgba(255,255,255,.1); color: var(--pos-text); }
.shift-modal-close-btn i, .shift-modal-close-btn svg { width: 15px; height: 15px; }
.shift-modal-divider { height: 1px; margin: 0 24px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); position: relative; z-index: 1; flex-shrink: 0; }
.shift-modal-body {
    position: relative; z-index: 1; padding: 18px 24px 0;
    flex: 1; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 16px;
    -webkit-overflow-scrolling: touch;
}
.sm-section-label {
    font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--pos-text-muted); display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.sm-section-label i, .sm-section-label svg { width: 12px; height: 12px; }
.sm-section-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg,rgba(255,255,255,.07),transparent); }
.sm-input-wrap {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.08);
    border-radius: 13px; padding: 0 14px; height: 44px; transition: all 170ms;
}
.sm-input-wrap:focus-within { border-color: rgba(var(--th-accent-500-rgb),.5); background: rgba(var(--th-accent-500-rgb),.04); box-shadow: 0 0 0 4px rgba(var(--th-accent-500-rgb),.1); }
.sm-input-wrap i, .sm-input-wrap svg { width: 15px; height: 15px; color: var(--pos-text-muted); flex-shrink: 0; }
.sm-input { flex: 1; background: none; border: none; outline: none; color: var(--pos-text); font-family: 'Cairo',sans-serif; font-size: 13.5px; font-weight: 600; min-width: 0; }
.sm-input::placeholder { color: var(--pos-text-muted); }
.sm-balance-card {
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
    border-radius: 13px; padding: 12px 14px; display: flex; align-items: center; gap: 12px;
    transition: opacity 170ms;
}
.sm-balance-card.excluded { opacity: .42; }
.sm-balance-card.excluded .sm-balance-input { pointer-events: none; background: rgba(255,255,255,.02); }
.sm-balance-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--pos-warn-bg); color: var(--pos-warn); }
.sm-balance-icon i, .sm-balance-icon svg { width: 15px; height: 15px; }
.sm-balance-name { flex: 1; min-width: 0; }
.sm-balance-name-main { font-size: 13px; font-weight: 700; color: var(--pos-text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sm-balance-detail { font-size: 10.5px; font-weight: 600; color: var(--pos-text-muted); margin-top: 2px; }
.sm-balance-badge { display: inline-flex; align-items: center; padding: 1.5px 7px; border-radius: 99px; font-size: 9.5px; font-weight: 700; background: var(--pos-warn-bg); color: var(--pos-warn); }
.sm-balance-input {
    width: 110px; height: 38px; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.1);
    border-radius: 10px; padding: 0 10px; color: var(--pos-text); font-family: 'Cairo',sans-serif;
    font-size: 13px; font-weight: 700; text-align: left; direction: ltr; outline: none; transition: all 170ms; flex-shrink: 0;
}
.sm-balance-input:focus { border-color: rgba(var(--th-accent-500-rgb),.5); box-shadow: 0 0 0 3px rgba(var(--th-accent-500-rgb),.1); background: rgba(var(--th-accent-500-rgb),.05); }
.sm-balance-input:disabled { opacity: .5; pointer-events: none; }
.sm-balance-toggle {
    width: 36px; height: 20px; border-radius: 10px; cursor: pointer; flex-shrink: 0;
    background: rgba(255,255,255,.1); border: none; position: relative; transition: background 170ms;
    display: flex; align-items: center; padding: 2px;
}
.sm-balance-toggle.on { background: rgba(var(--th-accent-500-rgb),.7); }
.sm-balance-toggle::after {
    content: ''; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3);
    transition: transform 170ms; display: block;
}
.sm-balance-toggle.on::after { transform: translateX(16px); }
html[dir="rtl"] .sm-balance-toggle.on::after { transform: translateX(-16px); }
.sm-balance-currency {
    font-size: 10.5px; font-weight: 700; color: var(--pos-text-muted);
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px; padding: 2px 7px; flex-shrink: 0; align-self: center;
}
/* Live Balance Display — logs/shifts-log.html's own open-shift-modal source-list cards */
.sm-live-balance-box { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; min-width: 90px; }
.sm-live-balance-label { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; color: var(--pos-text-muted); letter-spacing: .03em; }
.sm-live-balance-label .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pos-success); box-shadow: 0 0 5px var(--pos-success); flex-shrink: 0; }
.sm-live-balance-val { font-size: 17px; font-weight: 900; color: var(--pos-success); font-family: 'Cairo',sans-serif; line-height: 1; }
.sm-live-balance-currency { font-size: 10px; font-weight: 700; color: var(--pos-text-muted); }
.sm-no-items {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 22px; text-align: center;
    background: rgba(255,255,255,.02); border: 1px dashed rgba(255,255,255,.08); border-radius: 14px;
}
.sm-no-items i, .sm-no-items svg { width: 26px; height: 26px; color: var(--pos-text-muted); opacity: .4; }
.sm-no-items-title { font-size: 12px; font-weight: 700; color: var(--pos-text-sub); }
.sm-summary { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; overflow: hidden; }
.sm-summary-header { padding: 12px 16px 11px; background: linear-gradient(135deg,rgba(239,68,68,.08),rgba(185,28,28,.04)); border-bottom: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; gap: 9px; }
.sm-summary-header i, .sm-summary-header svg { width: 14px; height: 14px; color: #ef4444; }
.sm-summary-header-title { font-size: 11.5px; font-weight: 800; color: #ef4444; }
.sm-summary-body { padding: 13px 16px; display: flex; flex-direction: column; gap: 9px; }
.sm-summary-row { display: flex; align-items: center; justify-content: space-between; }
.sm-summary-lbl { font-size: 12px; font-weight: 600; color: var(--pos-text-muted); }
.sm-summary-val { font-size: 12.5px; font-weight: 800; color: var(--pos-text); }
.sm-summary-divider { height: 1px; background: rgba(255,255,255,.06); }
.sm-summary-total { background: rgba(255,255,255,.04); border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.sm-summary-total-lbl { font-size: 12.5px; font-weight: 800; color: var(--pos-text); }
.sm-summary-total-val { font-size: 17px; font-weight: 900; color: var(--pos-success); }
.shift-modal-footer {
    position: relative; z-index: 1; padding: 18px 24px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0;
}
.shift-modal-footer-hint { font-size: 11px; color: var(--pos-text-muted); font-weight: 600; flex: 1; }
.shift-modal-btns { display: flex; gap: 10px; }
.sm-btn-cancel {
    height: 42px; padding: 0 18px; border-radius: 12px;
    background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.09);
    color: var(--pos-text-sub); font-family: 'Cairo',sans-serif; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: all 170ms; display: flex; align-items: center; gap: 7px;
}
.sm-btn-cancel:hover { background: rgba(255,255,255,.09); color: var(--pos-text); }
.sm-btn-cancel i, .sm-btn-cancel svg { width: 14px; height: 14px; }
.sm-btn-confirm {
    height: 42px; padding: 0 22px; border-radius: 12px; border: none;
    font-family: 'Cairo',sans-serif; font-size: 13px; font-weight: 800; cursor: pointer;
    transition: all 170ms; display: flex; align-items: center; gap: 8px;
}
.sm-btn-confirm:hover { transform: translateY(-1px); }
.sm-btn-confirm:disabled { opacity: .6; pointer-events: none; }
.sm-btn-confirm i, .sm-btn-confirm svg { width: 15px; height: 15px; }
.sm-btn-confirm.open-btn { background: linear-gradient(135deg,var(--pos-accent),var(--pos-accent-2)); color: #fff; box-shadow: 0 6px 24px rgba(var(--th-accent-500-rgb),.45); }
.sm-btn-confirm.open-btn:hover { box-shadow: 0 8px 32px rgba(var(--th-accent-500-rgb),.6); }
.sm-btn-confirm.close-btn { background: linear-gradient(135deg,#ef4444,#dc2626); color: #fff; box-shadow: 0 6px 24px rgba(239,68,68,.4); }
.sm-btn-confirm.close-btn:hover { box-shadow: 0 8px 32px rgba(239,68,68,.55); }
.sm-textarea {
    width: 100%; min-height: 64px;
    background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.08);
    border-radius: 13px; padding: 12px 14px; color: var(--pos-text); font-family: 'Cairo',sans-serif;
    font-size: 13px; font-weight: 600; outline: none; resize: vertical; transition: all 170ms;
}
.sm-textarea:focus { border-color: rgba(239,68,68,.5); box-shadow: 0 0 0 4px rgba(239,68,68,.1); background: rgba(239,68,68,.03); }
@media (max-width: 480px) {
    .shift-modal { width: 100%; border-radius: 18px; max-height: calc(94 * var(--vh)); }
    .shift-modal-header { padding: 20px 18px 14px; }
    .shift-modal-divider { margin: 0 18px; }
    .shift-modal-body { padding: 16px 18px 0; }
    .shift-modal-footer { padding: 16px 18px 20px; flex-direction: column; align-items: stretch; }
    .shift-modal-btns { width: 100%; }
    .shift-modal-btns button { flex: 1; justify-content: center; }
}

/* Shift detail/report — verbatim port of Legacy's real .srh-card (top meta-row) and
   .modern-stat-card (colored KPI grid), logs/shift-report.js. Base font-sizes for srh-card-* were
   only ever defined in Legacy's separate shared panel stylesheet (not in shifts-log.html itself,
   confirmed by direct search) — sized here to match the surrounding .sm-*/.msc-* scale already
   ported verbatim, not guessed at random. */
.srh-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 4px; }
.srh-card { background: var(--pos-bg-card); border: 1px solid var(--pos-card-border); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.srh-card-label { font-size: 10.5px; font-weight: 700; color: var(--pos-text-muted); display: flex; align-items: center; gap: 5px; }
.srh-card-label i, .srh-card-label svg { width: 11px; height: 11px; }
.srh-card-value { font-size: 15px; font-weight: 800; color: var(--pos-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srh-card-sub { font-size: 10.5px; font-weight: 600; color: var(--pos-text-muted); }
@media (max-width: 700px) { .srh-row { grid-template-columns: 1fr 1fr; } }

.msc-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px) { .msc-row { grid-template-columns: 1fr 1fr; } }
.msc-card { background: var(--pos-bg-card); border: 1px solid var(--pos-card-border); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.msc-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.msc-card.sales::after { background: linear-gradient(90deg, var(--pos-success), #34d399); }
.msc-card.sale-refunds::after { background: linear-gradient(90deg, #f97316, #fb923c); }
.msc-card.repairs::after { background: linear-gradient(90deg, var(--pos-info), #60a5fa); }
.msc-card.repair-refunds::after { background: linear-gradient(90deg, var(--th-accent2-500), var(--th-accent2-400)); }
.msc-card.expenses::after { background: linear-gradient(90deg, var(--pos-danger), #f87171); }
.msc-card.net::after { background: linear-gradient(90deg, var(--pos-accent), var(--pos-accent-2)); }
.msc-label-row { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--pos-text-muted); }
.msc-icon2 { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.msc-icon2 i, .msc-icon2 svg { width: 14px; height: 14px; }
.msc-card.sales .msc-icon2 { background: var(--pos-success-bg); color: var(--pos-success); }
.msc-card.sale-refunds .msc-icon2 { background: rgba(249,115,22,.15); color: #f97316; }
.msc-card.repairs .msc-icon2 { background: var(--pos-info-bg); color: var(--pos-info); }
.msc-card.repair-refunds .msc-icon2 { background: rgba(var(--th-accent2-500-rgb),.15); color: var(--th-accent2-500); }
.msc-card.expenses .msc-icon2 { background: var(--pos-danger-bg); color: var(--pos-danger); }
.msc-card.net .msc-icon2 { background: var(--pos-accent-glow); color: var(--pos-accent); }
.msc-value { font-size: 20px; font-weight: 900; color: var(--pos-text); display: flex; align-items: baseline; gap: 4px; }
.msc-value span { font-size: 11px; font-weight: 700; color: var(--pos-text-muted); }
.msc-value.green { color: var(--pos-success); }
.msc-value.red { color: var(--pos-danger); }

/* Shift detail — "إجمالي النقدية في الوردية" hero card, verbatim port of Legacy's real
   logs/shift-report.js renderCashSourcesSummary() (2026-09-18, owner-authorized multi-source
   rebuild). Legacy hand-writes these as one-off inline styles; ported here as real classes
   (this file's own established convention) using the SAME literal colors Legacy uses
   (#10b981 green / #f59e0b amber-drawers / #60a5fa blue-wallets / #ef4444 red), not remapped to
   this app's general semantic tokens — Legacy specifically color-codes drawers vs wallets, which
   doesn't correspond to any existing --pos-* semantic meaning. */
.shc-total-card { background: linear-gradient(135deg, rgba(16,185,129,.10) 0%, rgba(var(--th-accent-500-rgb),.08) 100%); border: 1px solid rgba(16,185,129,.22); border-radius: 18px; padding: 20px 24px; position: relative; overflow: hidden; }
.shc-total-card::before { content: ''; position: absolute; inset: 0; top: 0; height: 2px; background: linear-gradient(90deg,transparent,rgba(16,185,129,.7),rgba(var(--th-accent-500-rgb),.5),transparent); pointer-events: none; }
.shc-total-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; position: relative; z-index: 1; }
.shc-total-head-left { display: flex; align-items: center; gap: 10px; }
.shc-total-icon { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg,rgba(16,185,129,.25),rgba(var(--th-accent-500-rgb),.2)); border: 1px solid rgba(16,185,129,.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #10b981; }
.shc-total-icon i, .shc-total-icon svg { width: 18px; height: 18px; }
.shc-total-title { font-size: 13px; font-weight: 800; color: var(--pos-text); }
.shc-total-sub { font-size: 10.5px; color: var(--pos-text-muted); margin-top: 2px; font-weight: 600; }
.shc-live-badge { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; padding: 1px 7px; border-radius: 99px; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.25); font-size: 9.5px; font-weight: 700; color: #10b981; }
.shc-live-badge .live-dot { width: 5px; height: 5px; border-radius: 50%; background: #10b981; display: inline-block; }
.shc-total-num { text-align: left; }
.shc-total-val { font-size: 28px; font-weight: 900; color: #10b981; line-height: 1; font-family: 'Cairo',sans-serif; letter-spacing: -.02em; }
.shc-total-cur { font-size: 11px; font-weight: 700; color: var(--pos-text-muted); margin-top: 3px; }
.shc-break-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; position: relative; z-index: 1; }
.shc-break-row.has-diff { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .shc-break-row, .shc-break-row.has-diff { grid-template-columns: 1fr; } }
.shc-break-card { border-radius: 12px; padding: 12px 14px; }
.shc-break-card.drawers { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.18); }
.shc-break-card.wallets { background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.18); }
.shc-break-card.diff-pos { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); }
.shc-break-card.diff-neg { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2); }
.shc-break-label { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; font-size: 10.5px; font-weight: 700; color: var(--pos-text-muted); }
.shc-break-label i, .shc-break-label svg { width: 13px; height: 13px; flex-shrink: 0; }
.shc-break-card.drawers .shc-break-label i, .shc-break-card.drawers .shc-break-label svg { color: #f59e0b; }
.shc-break-card.wallets .shc-break-label i, .shc-break-card.wallets .shc-break-label svg { color: #60a5fa; }
.shc-break-card.diff-pos .shc-break-label i, .shc-break-card.diff-pos .shc-break-label svg { color: #10b981; }
.shc-break-card.diff-neg .shc-break-label i, .shc-break-card.diff-neg .shc-break-label svg { color: #ef4444; }
.shc-break-val { font-size: 18px; font-weight: 900; font-family: 'Cairo',sans-serif; }
.shc-break-card.drawers .shc-break-val { color: #f59e0b; }
.shc-break-card.wallets .shc-break-val { color: #60a5fa; }
.shc-break-card.diff-pos .shc-break-val { color: #10b981; }
.shc-break-card.diff-neg .shc-break-val { color: #ef4444; }
.shc-break-sub { font-size: 10px; font-weight: 700; color: var(--pos-text-muted); margin-top: 2px; }
.shc-src-list { display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; }
.shc-src-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.shc-src-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.shc-src-icon i, .shc-src-icon svg { width: 12px; height: 12px; }
.shc-src-icon.drawer { background: rgba(245,158,11,.15); color: #f59e0b; }
.shc-src-icon.wallet { background: rgba(59,130,246,.15); color: #60a5fa; }
.shc-src-body { flex: 1; min-width: 0; }
.shc-src-name { font-size: 12px; font-weight: 700; color: var(--pos-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shc-src-meta { font-size: 10px; font-weight: 600; color: var(--pos-text-muted); }
.shc-src-num { text-align: left; flex-shrink: 0; }
.shc-src-val { font-size: 14px; font-weight: 900; font-family: 'Cairo',sans-serif; }
.shc-src-val.drawer { color: #f59e0b; }
.shc-src-val.wallet { color: #60a5fa; }
.shc-src-cur { font-size: 9.5px; font-weight: 700; color: var(--pos-text-muted); text-align: left; }
.shc-src-diff { padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 800; flex-shrink: 0; }
.shc-src-diff.pos { background: rgba(16,185,129,.12); color: #10b981; border: 1px solid rgba(16,185,129,.25); }
.shc-src-diff.neg { background: rgba(239,68,68,.12); color: #ef4444; border: 1px solid rgba(239,68,68,.25); }

/* Per-source "modern-cash-card" grid — verbatim port of Legacy's own real
   .modern-cash-card/.mcc-* classes (logs/shifts-log.html's own <style>, not just shift-report.js's
   markup), same class names, mapped onto this file's own --pos-* tokens (2026-09-18, owner asked
   for a full button/tab parity pass after sending a real report screenshot circling these cards).
   Sits BELOW the .shc-total-card hero card — both coexist in Legacy's real DOM. */
.cash-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.modern-cash-card { background: var(--pos-bg-card); border: 1px solid var(--pos-card-border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.modern-cash-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--pos-accent), var(--pos-accent-2)); opacity: .6; }
.mcc-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 12px; position: relative; z-index: 1; }
.mcc-title-wrap { display: flex; align-items: center; gap: 12px; }
.mcc-icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mcc-icon.drawer { background: var(--pos-warn-bg); color: var(--pos-warn); }
.mcc-icon.wallet { background: var(--pos-info-bg); color: var(--pos-info); }
.mcc-icon i, .mcc-icon svg { width: 18px; height: 18px; }
.mcc-name { font-size: 14px; font-weight: 800; color: var(--pos-text); }
.mcc-sub { font-size: 11px; color: var(--pos-text-muted); font-weight: 600; margin-top: 2px; }
.mcc-diff { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 20px; }
.mcc-diff.pos { background: var(--pos-success-bg); color: var(--pos-success); }
.mcc-diff.neg { background: var(--pos-danger-bg); color: var(--pos-danger); }
.mcc-diff i, .mcc-diff svg { width: 13px; height: 13px; }
.mcc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; position: relative; z-index: 1; }
.mcc-stat { display: flex; flex-direction: column; gap: 4px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 10px 12px; text-align: center; }
.mcc-stat-lbl { font-size: 10px; font-weight: 700; color: var(--pos-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.mcc-stat-val { font-size: 14px; font-weight: 900; color: var(--pos-text); }
.mcc-stat-val.opening { color: var(--pos-info); }
.mcc-stat-val.current { color: var(--pos-accent); }
.mcc-stat-val.final { color: var(--pos-success); }
@media (max-width: 480px) {
    .cash-summary-grid { grid-template-columns: 1fr; gap: 10px; }
    .mcc-stats { gap: 8px; }
}

/* Operations-log category tabs — verbatim port of Legacy's real .report-tab/.rtab-count. */
.report-tabs { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }
.report-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--pos-text-muted); font-size: 11.5px; font-weight: 700; cursor: pointer; transition: all 150ms; }
.report-tab i, .report-tab svg { width: 13px; height: 13px; }
.report-tab:hover { background: rgba(255,255,255,.08); color: var(--pos-text); }
.report-tab.active { background: var(--pos-accent); border-color: var(--pos-accent); color: #fff; box-shadow: 0 4px 12px rgba(var(--th-accent-500-rgb),.3); }
.rtab-count { font-size: 10px; font-weight: 800; background: rgba(255,255,255,.2); color: inherit; padding: 2px 7px; border-radius: 99px; }
.report-tab:not(.active) .rtab-count { background: rgba(255,255,255,.08); color: var(--pos-text-muted); }

@media (min-width: 768px) {
    .cart-panel { opacity: 1 !important; pointer-events: auto !important; height: 100% !important; }
}

/* Shift close — withdrawal after the count (2026-10-22, Legacy shifts-log «سحب جزئي / تصفير») */
.sm-withdraw-row { display: flex; align-items: center; gap: 8px; margin: -2px 0 6px; padding: 6px 10px; border-radius: 10px; background: var(--pos-danger-bg, rgba(239,68,68,.08)); }
.sm-withdraw-lbl { font-size: 12px; font-weight: 800; color: var(--pos-danger, #f87171); white-space: nowrap; }
.sm-withdraw-input { max-width: 120px; }
.sm-withdraw-all { border: 1px solid var(--pos-danger, #f87171); background: transparent; color: var(--pos-danger, #f87171); border-radius: 8px; padding: 4px 10px; font-weight: 800; font-size: 12px; cursor: pointer; font-family: inherit; }
.sm-withdraw-left { font-size: 11.5px; color: var(--pos-text-muted); margin-inline-start: auto; white-space: nowrap; }