/* جرد المخزون (/inventory/stocktake) — منقول حرفيًا من <style> بـpanels/inventory/inv_stocktake.html
   (Legacy) بتحويل آلي: كل محدِّد مقيَّد بـ.st-root (نفس سابقة website-legacy.css/pos-legacy.css)،
   :root/html[data-theme=light] → .st-root/[data-theme=light] .st-root، وأسماء @keyframes بادئة st-
   حتى لا تتصادم مع شاشات أخرى. reset الـhtml/body العام صار على .st-root نفسه.
   الإضافات الخاصة بـV2 (ارتفاع الشاشة داخل MainLayout، شارة الزيادة +X) في آخر الملف. */
/* ══════════════════════════════════════════════════════════
   TOKENS
══════════════════════════════════════════════════════════ */
.st-root {
    --bg-card:      rgba(var(--th-n-900-rgb),0.52);
    --bg-input:     rgba(255,255,255,0.05);
    --bg-hover:     rgba(var(--th-accent-500-rgb),0.07);
    --border:       rgba(255,255,255,0.08);
    --border-focus: rgba(var(--th-accent-500-rgb),0.65);
    --text:         var(--th-n-200);
    --text-muted:   var(--th-n-500);
    --text-sub:     var(--th-n-400);
    --accent:       var(--th-accent-500);
    --accent-2:     var(--th-accent2-500);
    --accent-glow:  rgba(var(--th-accent-500-rgb),0.20);
    --success:      #10b981;
    --success-bg:   rgba(16,185,129,0.12);
    --danger:       #ef4444;
    --danger-bg:    rgba(239,68,68,0.12);
    --warn:         #f59e0b;
    --warn-bg:      rgba(245,158,11,0.12);
    --info:         #3b82f6;
    --info-bg:      rgba(59,130,246,0.12);
    --amber:        #fbbf24;
    --amber-bg:     rgba(251,191,36,0.12);
    --purple:       var(--th-accent2-500);
    --purple-bg:    rgba(var(--th-accent2-500-rgb),0.12);
    --indigo:       var(--th-accent-400);
    --indigo-bg:    rgba(var(--th-accent-400-rgb),0.12);
    --teal:         #14b8a6;
    --teal-bg:      rgba(20,184,166,0.12);
    --radius:       14px;
    --card-border:  rgba(255,255,255,0.07);
    --card-shadow:  0 0 0 1px rgba(255,255,255,0.04) inset, 0 10px 30px rgba(0,0,0,0.25);
    --ease-smooth:  cubic-bezier(.22,.61,.36,1);
    --ease-spring:  cubic-bezier(.34,1.56,.64,1);
    --dur-fast:     170ms;
    --dur-med:      280ms;
}
[data-theme="light"] .st-root {
    --bg-card:      rgba(255,255,255,0.85);
    --bg-input:     rgba(var(--th-n-900-rgb),0.04);
    --bg-hover:     rgba(var(--th-accent-500-rgb),0.05);
    --border:       rgba(var(--th-n-900-rgb),0.10);
    --border-focus: rgba(var(--th-accent-500-rgb),0.50);
    --text:         var(--th-n-800);
    --text-muted:   var(--th-n-500);
    --text-sub:     var(--th-n-600);
    --card-border:  rgba(var(--th-n-900-rgb),0.08);
    --card-shadow:  0 4px 22px rgba(30,60,120,0.08);
    --success-bg:   rgba(16,185,129,0.10);
    --danger-bg:    rgba(239,68,68,0.10);
    --warn-bg:      rgba(245,158,11,0.10);
    --info-bg:      rgba(59,130,246,0.10);
    --amber-bg:     rgba(251,191,36,0.10);
    --purple-bg:    rgba(var(--th-accent2-500-rgb),0.10);
    --indigo-bg:    rgba(var(--th-accent-400-rgb),0.10);
    --teal-bg:      rgba(20,184,166,0.10);
    --bg-hover:     rgba(var(--th-accent-500-rgb),0.05);
}

/* ══ BASE ══ */
.st-root *, .st-root *::before, .st-root *::after { box-sizing:border-box; margin:0; padding:0; }
.st-root { height:100%; overflow:hidden; }
.st-root {
    font-family:'Cairo',sans-serif;
    background: var(--th-d-1);
    color:var(--text);
    display:flex; flex-direction:column; height:100%;
}
[data-theme="light"] .st-root { background: var(--th-l-0); }

/* ══ PANEL HEADER ══ */
.st-root .panel-header {
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; padding:13px 18px; border-bottom:1px solid var(--border);
    flex-shrink:0; position:relative; overflow:hidden;
}
.st-root .panel-header::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(var(--th-accent-500-rgb),.09) 0%,rgba(var(--th-accent2-500-rgb),.05) 50%,transparent 100%);
    pointer-events:none;
}
.st-root .panel-header::after {
    content:''; position:absolute; bottom:0; right:0; left:0; height:1px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2),transparent);
    opacity:.4;
}
.st-root .panel-header-right {
    display:flex; align-items:center; gap:13px;
    padding-right:0; position:relative;
}
.st-root .panel-icon {
    width:44px; height:44px; border-radius:13px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    box-shadow:0 4px 18px rgba(var(--th-accent-500-rgb),.45),0 0 0 1px rgba(255,255,255,.14) inset;
    position:relative;
}
.st-root .panel-icon::after {
    content:''; position:absolute; inset:-3px; border-radius:16px;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    opacity:.18; filter:blur(6px); z-index:-1;
}
.st-root .panel-icon svg { width:20px; height:20px; color:#fff; }
.st-root .panel-title { font-size:17px; font-weight:900; color:var(--text); line-height:1.2; letter-spacing:-.02em; }
.st-root .panel-subtitle {
    font-size:11px; color:var(--text-muted); font-weight:600;
    margin-top:3px; display:flex; align-items:center; gap:5px;
}
.st-root .panel-subtitle svg { width:11px; height:11px; }
.st-root .status-dot {
    width:7px; height:7px; border-radius:50%;
    background:var(--accent); box-shadow:0 0 6px var(--accent);
    flex-shrink:0; animation:st-pulseDot 2.2s ease-in-out infinite;
}
@keyframes st-pulseDot { 0%,100% {box-shadow:0 0 4px var(--accent)} 50% {box-shadow:0 0 10px var(--accent)} }
.st-root .panel-header-left { display:flex; align-items:center; gap:8px; flex-shrink:0; }

.st-root .header-icon-btn {
    width:34px; height:34px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-input); border:1px solid var(--card-border);
    color:var(--text-muted); cursor:pointer; transition:all var(--dur-fast); flex-shrink:0;
}
.st-root .header-icon-btn svg { width:14px; height:14px; }
.st-root .header-icon-btn:hover { background:var(--bg-hover); color:var(--accent); border-color:var(--border-focus); }

.st-root .start-session-btn {
    display:flex; align-items:center; gap:7px;
    padding:0 16px; height:34px;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    border:none; border-radius:10px;
    color:#fff; font-family:'Cairo',sans-serif; font-size:12.5px; font-weight:800;
    cursor:pointer; transition:all var(--dur-fast);
    box-shadow: 0 3px 12px rgba(var(--th-accent-500-rgb),0.35);
    white-space: nowrap;
}
.st-root .start-session-btn:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 5px 18px rgba(var(--th-accent-500-rgb),0.45); }
.st-root .start-session-btn svg { width:14px; height:14px; }
.st-root .start-session-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }

/* ══ KPI STRIP ══ */
.st-root .kpi-strip { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; padding:12px 16px 10px; flex-shrink:0; }
.st-root .kpi-card {
    background:var(--bg-card); border:1px solid var(--card-border);
    border-radius:var(--radius); padding:11px 13px;
    display:flex; flex-direction:column; gap:4px;
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    position:relative; overflow:hidden;
    transition:border-color var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast);
    animation:st-kpiIn .5s var(--ease-smooth) both;
}
.st-root .kpi-card:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.18); }
.st-root .kpi-card:nth-child(1) {animation-delay:.05s}.st-root .kpi-card:nth-child(2) {animation-delay:.10s}
.st-root .kpi-card:nth-child(3) {animation-delay:.15s}.st-root .kpi-card:nth-child(4) {animation-delay:.20s}
.st-root .kpi-card:nth-child(5) {animation-delay:.25s}.st-root .kpi-card:nth-child(6) {animation-delay:.30s}
@keyframes st-kpiIn {from {opacity:0;transform:translateY(10px)}to {opacity:1;transform:translateY(0)}}
.st-root .kpi-card::before {content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:99px 99px 0 0;}
.st-root .kpi-card.c-indigo::before {background:linear-gradient(90deg,var(--th-accent-500),var(--th-accent-400))}
.st-root .kpi-card.c-amber::before {background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.st-root .kpi-card.c-green::before {background:linear-gradient(90deg,#10b981,#34d399)}
.st-root .kpi-card.c-red::before {background:linear-gradient(90deg,#ef4444,#f87171)}
.st-root .kpi-card.c-purple::before {background:linear-gradient(90deg,var(--th-accent2-500),var(--th-accent2-400))}
.st-root .kpi-card.c-teal::before {background:linear-gradient(90deg,#14b8a6,#2dd4bf)}
.st-root .kpi-icon {
    width:32px; height:32px; border-radius:9px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-bottom:2px;
}
.st-root .kpi-icon svg { width:15px; height:15px; }
.st-root .c-indigo .kpi-icon { background:var(--indigo-bg); color:var(--indigo); }
.st-root .c-amber  .kpi-icon { background:var(--amber-bg);  color:var(--amber);  }
.st-root .c-green  .kpi-icon { background:var(--success-bg);color:var(--success);}
.st-root .c-red    .kpi-icon { background:var(--danger-bg);  color:var(--danger); }
.st-root .c-purple .kpi-icon { background:var(--purple-bg);  color:var(--purple); }
.st-root .c-teal   .kpi-icon { background:var(--teal-bg);    color:var(--teal);   }
.st-root .kpi-val { font-size:20px; font-weight:900; color:var(--text); line-height:1.1; }
.st-root .kpi-lbl { font-size:10px; font-weight:700; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-root .kpi-sub { font-size:10px; color:var(--text-muted); margin-top:1px; }

/* ══ TOOLBAR ══ */
.st-root .toolbar {
    display:flex; align-items:center; gap:10px;
    padding:0 16px 10px; flex-shrink:0; flex-wrap:wrap;
}
.st-root .search-wrap {
    flex:1; min-width:180px; display:flex; align-items:center; gap:10px;
    background:var(--bg-card); border:1px solid var(--card-border);
    border-radius:11px; padding:0 14px; height:40px;
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    box-shadow:var(--card-shadow); transition:border-color .2s,box-shadow .2s;
}
.st-root .search-wrap:focus-within { border-color:var(--border-focus); box-shadow:0 0 0 3px var(--accent-glow); }
.st-root .search-wrap svg { width:14px; height:14px; color:var(--text-muted); flex-shrink:0; }
.st-root .search-input {
    flex:1; background:none; border:none; outline:none;
    color:var(--text); font-family:'Cairo',sans-serif; font-size:13px;
}
.st-root .search-input::placeholder { color:var(--text-muted); }

.st-root .filter-select {
    background:var(--bg-card); border:1px solid var(--card-border);
    border-radius:11px; padding:0 14px; color:var(--text);
    font-family:'Cairo',sans-serif; font-size:12px;
    outline:none; cursor:pointer; height:40px; min-width:130px;
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    box-shadow:var(--card-shadow); transition:border-color .2s;
}
.st-root .filter-select:focus { border-color:var(--border-focus); }
.st-root .filter-select option { background:var(--th-d-4); color:var(--th-n-200); }
[data-theme="light"] .st-root .filter-select option { background:var(--th-n-50); color:var(--th-n-800); }

.st-root .session-badge {
    display:flex; align-items:center; gap:6px; padding:0 12px; height:40px;
    background:var(--success-bg); border:1px solid rgba(16,185,129,0.25);
    border-radius:11px; font-size:12px; font-weight:700; color:var(--success);
    white-space:nowrap; flex-shrink:0;
}
.st-root .session-badge svg { width:13px; height:13px; }
.st-root .session-badge.idle {
    background:var(--bg-input); border-color:var(--card-border); color:var(--text-muted);
}

/* ══ TABLE CARD ══ */
.st-root .table-card {
    background:var(--bg-card); border:1px solid var(--card-border); border-radius:18px;
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    box-shadow:var(--card-shadow); overflow:hidden;
    display:flex; flex-direction:column;
    flex:1; min-height:0;
    margin:0 16px 16px;
}
.st-root .table-head {
    display:grid;
    grid-template-columns: 52px 1.9fr 1fr 105px 105px 80px 110px 130px 100px;
    padding:11px 18px; border-bottom:1px solid var(--border);
    background:rgba(255,255,255,0.02);
    font-size:10px; font-weight:700; color:var(--text-muted);
    letter-spacing:.05em; text-transform:uppercase; align-items:center; gap:8px;
    flex-shrink:0;
}
[data-theme="light"] .st-root .table-head { background:rgba(var(--th-n-900-rgb),0.03); border-bottom-color:rgba(var(--th-n-900-rgb),0.08); }

.st-root #items-body { flex:1; overflow-y:auto; min-height:0; }
.st-root #items-body::-webkit-scrollbar { width:5px; }
.st-root #items-body::-webkit-scrollbar-track { background:rgba(255,255,255,0.03); border-radius:99px; }
.st-root #items-body::-webkit-scrollbar-thumb {
    background:linear-gradient(180deg,rgba(var(--th-accent-500-rgb),0.55) 0%,rgba(var(--th-accent2-500-rgb),0.38) 100%);
    border-radius:99px; border:1px solid rgba(255,255,255,0.06);
}
.st-root #items-body::-webkit-scrollbar-thumb:hover {
    background:linear-gradient(180deg,rgba(var(--th-accent-500-rgb),0.8) 0%,rgba(var(--th-accent2-500-rgb),0.6) 100%);
}

/* ══ ITEM ROW ══ */
.st-root .item-row {
    display:grid;
    grid-template-columns: 52px 1.9fr 1fr 105px 105px 80px 110px 130px 100px;
    padding:10px 18px; gap:8px; align-items:center;
    border-bottom:1px solid rgba(255,255,255,0.04);
    transition:background var(--dur-fast),opacity .35s var(--ease-smooth),transform .35s var(--ease-smooth);
    position:relative;
}
[data-theme="light"] .st-root .item-row { border-bottom-color:rgba(var(--th-n-900-rgb),0.06); }
.st-root .item-row:hover { background:rgba(var(--th-accent-500-rgb),0.04); }
.st-root .item-row:last-child { border-bottom:none; }
.st-root .item-row.active-row {
    background:rgba(var(--th-accent-500-rgb),0.07) !important;
    border-right:3px solid var(--accent);
}
.st-root .item-row.settled {
    opacity:0; pointer-events:none;
    transform:translateX(-12px);
    max-height:0; overflow:hidden; padding:0;
    border:none; margin:0;
}

.st-root .item-thumb {
    width:44px; height:44px; border-radius:10px; object-fit:cover;
    border:1px solid var(--card-border); flex-shrink:0;
}
.st-root .item-thumb-placeholder {
    width:44px; height:44px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(var(--th-accent-500-rgb),0.1); border:1px solid var(--card-border); color:var(--th-accent-400);
}
.st-root .item-thumb-placeholder svg { width:20px; height:20px; }

.st-root .item-name { font-weight:800; font-size:13px; color:var(--text); }
.st-root .item-sub { font-size:10.5px; color:var(--text-muted); margin-top:2px; display:flex; align-items:center; gap:5px; }

.st-root .cat-badge {
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 9px; border-radius:999px;
    font-size:10px; font-weight:700;
    background:rgba(var(--th-accent-500-rgb),0.1); border:1px solid rgba(var(--th-accent-500-rgb),0.2);
    color:var(--th-accent-300); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}

.st-root .price-cost { font-size:12px; font-weight:700; color:var(--text-sub); }
.st-root .price-sell { font-size:13px; font-weight:900; color:var(--th-accent-300); }

.st-root .qty-badge {
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(16,185,129,0.12); border:1px solid rgba(16,185,129,0.2);
    color:#34d399; border-radius:8px; font-size:12px; font-weight:700;
    padding:4px 10px; min-width:44px;
}
.st-root .qty-badge.low { background:rgba(239,68,68,0.12); border-color:rgba(239,68,68,0.2);  color:#f87171; }
.st-root .qty-badge.zero { background:rgba(var(--th-n-500-rgb),0.1); border-color:rgba(var(--th-n-500-rgb),0.2); color:var(--text-muted); }

/* ══ ACTUAL QTY INPUT CELL ══ */
.st-root .actual-cell { display:flex; align-items:center; gap:6px; }
.st-root .actual-input {
    width:80px; height:36px;
    background:var(--bg-input); border:1px solid var(--border);
    border-radius:9px; color:var(--text);
    font-family:'Cairo',sans-serif; font-size:14px; font-weight:800;
    text-align:center; outline:none;
    transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast);
    -moz-appearance:textfield;
}
.st-root .actual-input::-webkit-inner-spin-button, .st-root .actual-input::-webkit-outer-spin-button { -webkit-appearance:none; }
.st-root .actual-input:focus {
    border-color:var(--border-focus); box-shadow:0 0 0 3px var(--accent-glow);
    background:rgba(var(--th-accent-500-rgb),0.06);
}
.st-root .actual-input:disabled {
    opacity:.4; cursor:not-allowed;
}

/* ══ DEFICIT CELL ══ */
.st-root .deficit-cell { display:flex; align-items:center; justify-content:center; }
.st-root .deficit-badge {
    display:inline-flex; align-items:center; gap:4px; padding:4px 9px;
    border-radius:8px; font-size:12px; font-weight:800;
}
.st-root .deficit-badge.none { background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.2); color:#34d399; }
.st-root .deficit-badge.has { background:rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.25); color:#f87171; }
.st-root .deficit-badge.empty { background:transparent; color:var(--text-muted); font-size:11px; border:1px dashed rgba(255,255,255,0.08); }
.st-root .deficit-badge svg { width:10px; height:10px; }

/* ══ TABLE FOOTER (pagination info) ══ */
.st-root .table-footer {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 18px 12px; border-top:1px solid var(--border);
    background:rgba(255,255,255,0.01); flex-shrink:0; gap:10px;
}
.st-root .tf-info { font-size:11px; font-weight:700; color:var(--text-muted); }
.st-root .tf-info strong { color:var(--text-sub); }
.st-root .tf-progress {
    flex:1; max-width:240px; height:6px; border-radius:99px;
    background:rgba(255,255,255,0.06); overflow:hidden;
}
.st-root .tf-progress-bar {
    height:100%; border-radius:99px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    transition:width .4s var(--ease-smooth);
}

/* ══ SKELETON ══ */
@keyframes st-shimmer { 0% {background-position:-200% 0} 100% {background-position:200% 0} }
.st-root .sk {
    background:linear-gradient(90deg,rgba(255,255,255,0.03) 25%,rgba(255,255,255,0.07) 50%,rgba(255,255,255,0.03) 75%);
    background-size:200% 100%; animation:st-shimmer 1.6s infinite; border-radius:6px; height:14px;
}
[data-theme="light"] .st-root .sk {
    background:linear-gradient(90deg,rgba(var(--th-n-900-rgb),0.05) 25%,rgba(var(--th-n-900-rgb),0.09) 50%,rgba(var(--th-n-900-rgb),0.05) 75%);
    background-size:200% 100%;
}
.st-root .sk-sm { width:44px; height:44px; border-radius:10px; }
.st-root .sk-row {
    display:grid;
    grid-template-columns: 52px 1.9fr 1fr 105px 105px 80px 110px 130px 100px;
    padding:14px 18px; gap:8px; align-items:center;
    border-bottom:1px solid rgba(255,255,255,0.04);
}

/* ══ EMPTY STATE ══ */
.st-root .empty-state {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:80px 20px; gap:14px; color:var(--text-muted);
}
.st-root .empty-icon {
    width:72px; height:72px; border-radius:20px;
    background:rgba(var(--th-accent-500-rgb),0.08); border:1px solid rgba(var(--th-accent-500-rgb),0.15);
    display:flex; align-items:center; justify-content:center;
}
.st-root .empty-icon svg { width:32px; height:32px; color:var(--th-accent-400); }
.st-root .empty-title { font-size:16px; font-weight:900; color:var(--text); }
.st-root .empty-sub { font-size:13px; color:var(--text-muted); text-align:center; max-width:280px; line-height:1.7; }

/* ══════════════════════════════════════════════════
   HISTORY OVERLAY
══════════════════════════════════════════════════ */

.st-root .history-overlay {
    position:fixed; inset:0; z-index:1100;
    background:rgba(var(--th-d-7-rgb),0.88); backdrop-filter:blur(16px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none;
    transition:opacity .28s cubic-bezier(.22,.61,.36,1);
}
.st-root .history-overlay.open { opacity:1; pointer-events:all; }

.st-root .history-modal {
    width:calc(75 * var(--vw)); height:calc(75 * var(--vh));
    background:linear-gradient(160deg,var(--th-d-5) 0%,var(--th-d-2) 100%);
    border:1px solid rgba(var(--th-accent-500-rgb),0.28); border-radius:24px;
    box-shadow:0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06) inset;
    transform:scale(.94) translateY(18px);
    transition:transform .35s cubic-bezier(.34,1.56,.64,1),
               width .3s cubic-bezier(.22,.61,.36,1),
               height .3s cubic-bezier(.22,.61,.36,1),
               border-radius .3s cubic-bezier(.22,.61,.36,1);
    display:flex; flex-direction:column; overflow:hidden; direction:rtl;
}
.st-root .history-modal.fullscreen {
    width:calc(100 * var(--vw)) !important; height:calc(100 * var(--vh)) !important;
    border-radius:0 !important; position:fixed; inset:0; z-index:1101;
}
.st-root .history-overlay.open .history-modal { transform:scale(1) translateY(0); }
[data-theme="light"] .st-root .history-modal {
    background:linear-gradient(160deg,var(--th-l-3) 0%,var(--th-accent-50) 100%);
    border-color:rgba(var(--th-accent-500-rgb),0.18);
}

/* Top bar */
.st-root .hist-topbar {
    display:flex; align-items:center; gap:10px;
    padding:13px 20px 11px; border-bottom:1px solid var(--border);
    flex-shrink:0; position:relative; overflow:hidden; direction:rtl;
}
.st-root .hist-topbar::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(var(--th-accent-500-rgb),.08) 0%,rgba(var(--th-accent2-500-rgb),.04) 100%);
    pointer-events:none;
}
.st-root .hist-topbar::after {
    content:''; position:absolute; bottom:0; right:0; left:0; height:1px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2),transparent); opacity:.35;
}
.st-root .hist-topbar-icon {
    width:38px; height:38px; border-radius:11px; flex-shrink:0;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(var(--th-accent-500-rgb),.4); position:relative; z-index:1;
}
.st-root .hist-topbar-icon svg { width:18px; height:18px; color:#fff; }
.st-root .hist-topbar-text { flex:1; min-width:0; position:relative; z-index:1; }
.st-root .hist-topbar-text .ttl { font-size:15px; font-weight:900; color:var(--text); direction:rtl; }
.st-root .hist-topbar-text .sub { font-size:11px; color:var(--text-muted); font-weight:600; direction:rtl; }
.st-root .hist-topbar-actions { display:flex; align-items:center; gap:6px; position:relative; z-index:1; }

/* Two-pane layout */
.st-root .hist-body {
    flex:1; display:grid; grid-template-columns:300px 1fr;
    min-height:0; overflow:hidden;
}
.st-root .hist-list-pane {
    border-left:1px solid var(--border); display:flex; flex-direction:column;
    min-height:0; overflow:hidden;
}
[data-theme="light"] .st-root .hist-list-pane { border-left-color:rgba(var(--th-n-900-rgb),.1); }
.st-root .hist-list-search {
    padding:12px 14px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.st-root .hist-search-wrap {
    display:flex; align-items:center; gap:8px;
    background:var(--bg-input); border:1px solid var(--border);
    border-radius:10px; padding:0 12px; height:36px;
    transition:border-color .2s, box-shadow .2s;
}
.st-root .hist-search-wrap:focus-within { border-color:var(--border-focus); box-shadow:0 0 0 3px var(--accent-glow); }
.st-root .hist-search-wrap svg { width:13px; height:13px; color:var(--text-muted); flex-shrink:0; }
.st-root .hist-search-wrap input {
    flex:1; background:none; border:none; outline:none;
    color:var(--text); font-family:'Cairo',sans-serif; font-size:12px;
}
.st-root .hist-search-wrap input::placeholder { color:var(--text-muted); }

.st-root .hist-list-scroll { flex:1; overflow-y:auto; }
.st-root .hist-list-scroll::-webkit-scrollbar { width:4px; }
.st-root .hist-list-scroll::-webkit-scrollbar-thumb { background:rgba(var(--th-accent-500-rgb),.35); border-radius:99px; }

/* Session card in list */
.st-root .hist-session-card {
    padding:12px 16px; border-bottom:1px solid var(--border);
    cursor:pointer; transition:background var(--dur-fast);
    display:flex; flex-direction:column; gap:5px; direction:rtl;
    position:relative;
}
.st-root .hist-session-card:hover { background:var(--bg-hover); }
.st-root .hist-session-card.active {
    background:rgba(var(--th-accent-500-rgb),0.09);
    border-right:3px solid var(--accent);
}
[data-theme="light"] .st-root .hist-session-card { border-bottom-color:rgba(var(--th-n-900-rgb),.07); }
.st-root .hsc-date { font-size:12px; font-weight:800; color:var(--text); }
.st-root .hsc-user { font-size:11px; color:var(--text-muted); display:flex; align-items:center; gap:5px; }
.st-root .hsc-user svg { width:11px; height:11px; }
.st-root .hsc-chips { display:flex; gap:5px; flex-wrap:wrap; margin-top:2px; }
.st-root .hsc-chip {
    font-size:10px; font-weight:700; padding:2px 7px; border-radius:5px;
}
.st-root .hsc-chip.ok { background:rgba(16,185,129,.12); color:#34d399; border:1px solid rgba(16,185,129,.2); }
.st-root .hsc-chip.def { background:rgba(239,68,68,.12);  color:#f87171; border:1px solid rgba(239,68,68,.2); }
.st-root .hsc-chip.sur { background:rgba(var(--th-accent-500-rgb),.12); color:var(--th-accent-300); border:1px solid rgba(var(--th-accent-500-rgb),.2); }

/* Detail pane */
.st-root .hist-detail-pane {
    display:flex; flex-direction:column; min-height:0; overflow:hidden;
}
.st-root .hist-detail-topbar {
    display:flex; align-items:center; gap:8px;
    padding:11px 18px 10px; border-bottom:1px solid var(--border);
    flex-shrink:0; direction:rtl; flex-wrap:wrap;
}
.st-root .hist-detail-title { flex:1; min-width:0; }
.st-root .hist-detail-title .dt { font-size:13px; font-weight:900; color:var(--text); }
.st-root .hist-detail-title .ds { font-size:11px; color:var(--text-muted); }
.st-root .hist-detail-export { display:flex; align-items:center; gap:5px; }

.st-root .hist-detail-body {
    flex:1; overflow-y:auto; padding:18px 22px; direction:rtl;
}
.st-root .hist-detail-body::-webkit-scrollbar { width:4px; }
.st-root .hist-detail-body::-webkit-scrollbar-thumb { background:rgba(var(--th-accent-500-rgb),.3); border-radius:99px; }

/* Detail KPI mini grid */
.st-root .hist-kpi-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px;
}
@media (max-width:900px) { .st-root .hist-kpi-grid { grid-template-columns:repeat(2,1fr); } }
.st-root .hkpi {
    background:rgba(255,255,255,.03); border:1px solid var(--card-border);
    border-radius:12px; padding:12px 14px; position:relative; overflow:hidden;
    direction:rtl;
}
[data-theme="light"] .st-root .hkpi { background:rgba(var(--th-n-900-rgb),.03); }
.st-root .hkpi::before { content:''; position:absolute; top:0; right:0; left:0; height:2px; border-radius:99px; }
.st-root .hkpi.hk-ind::before { background:linear-gradient(90deg,var(--th-accent-500),var(--th-accent-400)); }
.st-root .hkpi.hk-grn::before { background:linear-gradient(90deg,#10b981,#34d399); }
.st-root .hkpi.hk-red::before { background:linear-gradient(90deg,#ef4444,#f87171); }
.st-root .hkpi.hk-amb::before { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
.st-root .hkpi.hk-pur::before { background:linear-gradient(90deg,var(--th-accent2-500),var(--th-accent2-400)); }
.st-root .hkpi.hk-tea::before { background:linear-gradient(90deg,#14b8a6,#2dd4bf); }
.st-root .hkpi-val { font-size:20px; font-weight:900; color:var(--text); line-height:1.1; }
.st-root .hkpi-lbl { font-size:10px; font-weight:700; color:var(--text-muted); margin-top:3px; }

/* Items table inside detail */
.st-root .hist-items-table {
    width:100%; border-collapse:collapse; font-size:12px;
    background:rgba(255,255,255,.02); border-radius:12px; overflow:hidden;
    border:1px solid var(--card-border);
    direction:rtl;
}
[data-theme="light"] .st-root .hist-items-table { background:rgba(var(--th-n-900-rgb),.02); }
.st-root .hist-items-table th {
    padding:9px 14px; text-align:right; font-size:10px; font-weight:700;
    color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em;
    background:rgba(255,255,255,.02); border-bottom:1px solid var(--border);
}
.st-root .hist-items-table td {
    padding:9px 14px; border-bottom:1px solid rgba(255,255,255,.04);
    color:var(--text-sub);
}
[data-theme="light"] .st-root .hist-items-table td { border-bottom-color:rgba(var(--th-n-900-rgb),.06); }
.st-root .hist-items-table tr:last-child td { border-bottom:none; }
.st-root .hist-items-table tr:hover td { background:rgba(var(--th-accent-500-rgb),.04); }

/* Empty / loading states */
.st-root .hist-empty {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:12px; height:100%; color:var(--text-muted); padding:40px;
}
.st-root .hist-empty-icon {
    width:64px; height:64px; border-radius:18px;
    background:rgba(var(--th-accent-500-rgb),.08); border:1px solid rgba(var(--th-accent-500-rgb),.15);
    display:flex; align-items:center; justify-content:center;
}
.st-root .hist-empty-icon svg { width:28px; height:28px; color:var(--th-accent-400); }
.st-root .hist-loading {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; height:100%; color:var(--text-muted);
}
.st-root .hist-no-select {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:12px; height:100%; color:var(--text-muted); text-align:center; padding:30px;
}

/* ══ SESSION SUMMARY OVERLAY ══ */

.st-root .summary-overlay {
    position:fixed; inset:0; z-index:1000;
    background:rgba(var(--th-d-7-rgb),0.85); backdrop-filter:blur(14px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none;
    transition:opacity .3s var(--ease-smooth);
}
.st-root .summary-overlay.open { opacity:1; pointer-events:all; }
[data-theme="light"] .st-root .summary-overlay { background:rgba(220,230,255,0.75); }

.st-root .summary-modal {
    background:linear-gradient(160deg,var(--th-d-5) 0%,var(--th-d-2) 100%);
    border:1px solid rgba(var(--th-accent-500-rgb),0.25); border-radius:24px;
    padding:0;
    width:calc(75 * var(--vw)); height:calc(75 * var(--vh));
    box-shadow:0 24px 80px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.06) inset;
    transform:scale(.94) translateY(18px);
    transition:transform .35s var(--ease-spring), width .3s var(--ease-smooth), height .3s var(--ease-smooth), border-radius .3s var(--ease-smooth);
    position:relative; display:flex; flex-direction:column;
    overflow:hidden;
    direction: rtl;
}
.st-root .summary-modal.fullscreen {
    width:calc(100 * var(--vw)) !important; height:calc(100 * var(--vh)) !important;
    border-radius:0 !important;
    position:fixed; inset:0; z-index:1001;
}
.st-root .summary-overlay.open .summary-modal { transform:scale(1) translateY(0); }
[data-theme="light"] .st-root .summary-modal {
    background:linear-gradient(160deg,var(--th-l-3) 0%,var(--th-accent-50) 100%);
    border-color:rgba(var(--th-accent-500-rgb),0.18);
    box-shadow:0 24px 60px rgba(30,60,120,0.16),0 0 0 1px rgba(var(--th-accent-500-rgb),0.08) inset;
}

/* Modal top bar with export buttons */
.st-root .summary-topbar {
    display:flex; align-items:center; gap:8px;
    padding:12px 20px 10px;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
    background:rgba(255,255,255,0.02);
    direction:rtl;
    flex-wrap:wrap;
    position:relative;
}
[data-theme="light"] .st-root .summary-topbar { background:rgba(var(--th-n-900-rgb),0.02); }
.st-root .summary-topbar::after {
    content:''; position:absolute; bottom:0; right:0; left:0; height:1px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2),transparent);
    opacity:.3;
}
.st-root .summary-topbar-title {
    display:flex; align-items:center; gap:10px; flex:1; min-width:0;
}
.st-root .summary-topbar-icon {
    width:36px; height:36px; border-radius:11px; flex-shrink:0;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(var(--th-accent-500-rgb),0.4);
}
.st-root .summary-topbar-icon svg { width:17px; height:17px; color:#fff; }
.st-root .summary-topbar-text { display:flex; flex-direction:column; }
.st-root .summary-topbar-text .ttl { font-size:15px; font-weight:900; color:var(--text); line-height:1.2; white-space:nowrap; direction:rtl; text-align:right; }
.st-root .summary-topbar-text .sub { font-size:11px; color:var(--text-muted); font-weight:600; margin-top:1px; direction:rtl; text-align:right; }
.st-root .summary-topbar-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.st-root .win-btn {
    width:32px; height:32px; border-radius:9px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-input); border:1px solid var(--card-border);
    color:var(--text-muted); cursor:pointer; transition:all var(--dur-fast);
}
.st-root .win-btn svg { width:14px; height:14px; }
.st-root .win-btn:hover { background:var(--bg-hover); color:var(--accent); border-color:var(--border-focus); }
.st-root .win-btn.close-btn:hover { background:rgba(239,68,68,0.1); border-color:rgba(239,68,68,0.25); color:#f87171; }
.st-root .summary-modal-body {
    flex:1; overflow-y:auto; padding:22px 28px;
    direction:rtl;
}
.st-root .summary-modal-body::-webkit-scrollbar { width:5px; }
.st-root .summary-modal-body::-webkit-scrollbar-track { background:rgba(255,255,255,0.03); border-radius:99px; }
.st-root .summary-modal-body::-webkit-scrollbar-thumb {
    background:rgba(var(--th-accent-500-rgb),0.35); border-radius:99px;
}
.st-root .smkpi, .st-root .summary-section-title, .st-root .deficit-item, .st-root .adjust-approval-box { direction:rtl; text-align:right; }
.st-root .smkpi-val { direction:ltr; display:block; }
.st-root .di-name { text-align:right; }
.st-root .summary-header { display:flex; align-items:flex-start; gap:16px; margin-bottom:20px; direction:rtl; }

.st-root .summary-header {
    display:flex; align-items:flex-start; gap:16px; margin-bottom:28px;
}
.st-root .summary-icon {
    width:56px; height:56px; border-radius:16px; flex-shrink:0;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(var(--th-accent-500-rgb),0.4);
}
.st-root .summary-icon svg { width:26px; height:26px; color:#fff; }
.st-root .summary-title { font-size:22px; font-weight:900; color:var(--text); margin-bottom:4px; }
.st-root .summary-date { font-size:12px; color:var(--text-muted); font-weight:600; }
.st-root .summary-close {
    margin-right:auto; width:34px; height:34px; border-radius:10px; flex-shrink:0;
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
    color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:all var(--dur-fast);
}
.st-root .summary-close:hover { background:rgba(239,68,68,0.1); border-color:rgba(239,68,68,0.25); color:#f87171; }
.st-root .summary-close svg { width:16px; height:16px; }

.st-root .summary-kpis {
    display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px;
}
@media (max-width: 700px) { .st-root .summary-kpis { grid-template-columns:repeat(2,1fr); } }

/* ══════════════════════════════════════════════════
   RESPONSIVE — جدول الجرد وشريط الإحصائيات ونافذة السجل
   (نفس الأعمدة الجوهرية للمهمة — الاسم/الكمية الفعلية/العجز/الاعتماد —
   تبقى ظاهرة دايمًا؛ الأعمدة المرجعية فقط (الفئة/الأسعار) تختفي تدريجيًا)
══════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .st-root .kpi-strip { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 900px) {
    .st-root .table-head, .st-root .item-row { grid-template-columns: 44px 1.6fr 90px 120px 130px 90px; }
    .st-root .table-head > div:nth-child(3), .st-root .table-head > div:nth-child(4), .st-root .table-head > div:nth-child(5), .st-root .item-row   > div:nth-child(3), .st-root .item-row   > div:nth-child(4), .st-root .item-row   > div:nth-child(5) { display:none; }

    .st-root .hist-body { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
    .st-root .hist-list-pane { border-left:none; border-bottom:1px solid var(--border); max-height:240px; }
    [data-theme="light"] .st-root .hist-list-pane { border-bottom-color:rgba(var(--th-n-900-rgb),.1); }

/* خط 16px عشان الآيفون ميكبّرش تلقائي عند الدخول لخانة العدّ الفعلي */

    
    .st-root .actual-input { font-size:16px; }
}
@media (max-width: 560px) {
    .st-root .kpi-strip { grid-template-columns:repeat(2,1fr); }
    .st-root .table-head, .st-root .item-row { grid-template-columns: 36px 1.3fr 84px 96px 80px; gap:6px; padding:8px 10px; }
    .st-root .table-head > div:nth-child(6), .st-root .item-row   > div:nth-child(6) { display:none; }
}

/* شبكة أمان: لو محتوى صف تجاوز أضيق الأعمدة أعلاه (اسم طويل جدًا مثلاً)،
   يظهر تمرير أفقي داخل جسم الجدول بدل قطع المحتوى بصمت */

.st-root #items-body { overflow-x:auto; }
.st-root .smkpi {
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07);
    border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:6px;
    position:relative; overflow:hidden;
}
.st-root .smkpi::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; border-radius:99px; }
.st-root .smkpi.sk-ind::before { background:linear-gradient(90deg,var(--th-accent-500),var(--th-accent-400)); }
.st-root .smkpi.sk-grn::before { background:linear-gradient(90deg,#10b981,#34d399); }
.st-root .smkpi.sk-red::before { background:linear-gradient(90deg,#ef4444,#f87171); }
.st-root .smkpi.sk-amb::before { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
.st-root .smkpi.sk-pur::before { background:linear-gradient(90deg,var(--th-accent2-500),var(--th-accent2-400)); }
.st-root .smkpi.sk-tea::before { background:linear-gradient(90deg,#14b8a6,#2dd4bf); }
[data-theme="light"] .st-root .smkpi { background:rgba(var(--th-n-900-rgb),0.03); border-color:rgba(var(--th-n-900-rgb),0.08); }
.st-root .smkpi-icon { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.st-root .smkpi-icon svg { width:14px; height:14px; }
.st-root .sk-ind .smkpi-icon { background:var(--indigo-bg); color:var(--indigo); }
.st-root .sk-grn .smkpi-icon { background:var(--success-bg); color:var(--success); }
.st-root .sk-red .smkpi-icon { background:var(--danger-bg); color:var(--danger); }
.st-root .sk-amb .smkpi-icon { background:var(--amber-bg); color:var(--amber); }
.st-root .sk-pur .smkpi-icon { background:var(--purple-bg); color:var(--purple); }
.st-root .sk-tea .smkpi-icon { background:var(--teal-bg); color:var(--teal); }
.st-root .smkpi-val { font-size:24px; font-weight:900; color:var(--text); line-height:1; }
.st-root .smkpi-lbl { font-size:11px; font-weight:700; color:var(--text-muted); }

.st-root .summary-section-title {
    font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase;
    letter-spacing:.07em; margin-bottom:10px; display:flex; align-items:center; gap:6px;
}
.st-root .summary-section-title::after {
    content:''; flex:1; height:1px; background:var(--border);
}

/* deficit items list in summary */
.st-root .deficit-list { display:flex; flex-direction:column; gap:6px; margin-bottom:24px; }
.st-root .deficit-item {
    display:flex; align-items:center; gap:10px;
    background:rgba(239,68,68,0.05); border:1px solid rgba(239,68,68,0.14);
    border-radius:10px; padding:10px 14px;
}
[data-theme="light"] .st-root .deficit-item { background:rgba(239,68,68,0.04); }
.st-root .di-name { flex:1; font-size:13px; font-weight:700; color:var(--text); }
.st-root .di-sys { font-size:12px; color:var(--text-muted); font-weight:600; }
.st-root .di-arrow { color:var(--text-muted); }
.st-root .di-arrow svg { width:12px; height:12px; }
.st-root .di-actual { font-size:12px; color:#f87171; font-weight:700; }
.st-root .di-def { padding:3px 8px; border-radius:6px; background:rgba(239,68,68,0.15); color:#f87171; font-size:11px; font-weight:800; }

.st-root .summary-actions {
    display:flex; align-items:center; gap:10px; justify-content:flex-end; margin-top:8px;
    padding-top:18px; border-top:1px solid var(--border);
}

/* ══ EXPORT BUTTONS ══ */
.st-root .export-btns-group {
    display:flex; align-items:center; gap:6px;
}
.st-root .btn-export {
    display:flex; align-items:center; gap:5px;
    padding:0 13px; height:36px; border-radius:10px;
    font-family:'Cairo',sans-serif; font-size:12px; font-weight:800;
    cursor:pointer; transition:all var(--dur-fast); white-space:nowrap; border:none;
}
.st-root .btn-export svg { width:13px; height:13px; }
.st-root .btn-export-img {
    background:rgba(var(--th-accent-500-rgb),0.12); color:var(--indigo);
    border:1px solid rgba(var(--th-accent-500-rgb),0.25);
}
.st-root .btn-export-img:hover { background:rgba(var(--th-accent-500-rgb),0.22); transform:translateY(-1px); }
.st-root .btn-export-pdf {
    background:rgba(239,68,68,0.10); color:#f87171;
    border:1px solid rgba(239,68,68,0.22);
}
.st-root .btn-export-pdf:hover { background:rgba(239,68,68,0.20); transform:translateY(-1px); }
.st-root .btn-export-wa {
    background:rgba(37,211,102,0.12); color:#25d366;
    border:1px solid rgba(37,211,102,0.28);
}
.st-root .btn-export-wa:hover { background:rgba(37,211,102,0.22); transform:translateY(-1px); }
.st-root .btn-export:disabled { opacity:.45; cursor:not-allowed; transform:none !important; }

/* ══ WHATSAPP MODAL ══ */
.st-root .wa-overlay {
    position:fixed; inset:0; z-index:1300;
    background:rgba(var(--th-d-7-rgb),0.88); backdrop-filter:blur(16px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease-smooth);
}
.st-root .wa-overlay.open { opacity:1; pointer-events:all; }
.st-root .wa-modal {
    background:linear-gradient(160deg,var(--th-d-5) 0%,var(--th-d-2) 100%);
    border:1px solid rgba(37,211,102,0.25); border-radius:20px;
    padding:28px; width:min(400px,calc(92 * var(--vw)));
    box-shadow:0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05) inset;
    transform:scale(.94) translateY(18px);
    transition:transform .32s var(--ease-spring);
}
.st-root .wa-overlay.open .wa-modal { transform:scale(1) translateY(0); }
[data-theme="light"] .st-root .wa-modal {
    background:linear-gradient(160deg,var(--th-l-3) 0%,var(--th-accent-50) 100%);
    border-color:rgba(37,211,102,0.3);
}
.st-root .wa-modal-header {
    display:flex; align-items:flex-start; gap:14px; margin-bottom:22px;
}
.st-root .wa-icon {
    width:46px; height:46px; border-radius:13px; flex-shrink:0;
    background:rgba(37,211,102,0.12); border:1px solid rgba(37,211,102,0.25);
    display:flex; align-items:center; justify-content:center; color:#25d366;
}
.st-root .wa-icon svg { width:20px; height:20px; }
.st-root .wa-title { font-size:15px; font-weight:900; color:var(--text); margin-bottom:3px; }
.st-root .wa-sub { font-size:11.5px; color:var(--text-muted); }
.st-root .wa-phone-wrap {
    display:flex; align-items:center; gap:0;
    background:var(--bg-input); border:1px solid var(--border);
    border-radius:11px; overflow:hidden; margin-bottom:8px;
    transition:border-color .2s, box-shadow .2s;
}
.st-root .wa-phone-wrap:focus-within {
    border-color:rgba(37,211,102,0.5);
    box-shadow:0 0 0 3px rgba(37,211,102,0.12);
}
.st-root .wa-flag { padding:0 10px; font-size:18px; line-height:1; }
.st-root .wa-country-code {/* LTR side */
    padding:0 10px 0 0; font-size:13px; font-weight:800;
    color:#25d366; border-left:1px solid var(--border); 
    height:44px; display:flex; align-items:center;
}
.st-root .wa-phone-inp {
    flex:1; height:44px; background:none; border:none; outline:none;
    color:var(--text); font-family:'Cairo',sans-serif; font-size:14px; font-weight:700;
    padding:0 12px; direction:ltr; text-align:left;
}
.st-root .wa-hint { font-size:11px; color:var(--text-muted); margin-bottom:20px; padding-right:4px; }
.st-root .wa-actions { display:flex; gap:10px; }
.st-root .btn-wa-send {
    flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
    height:42px; border:none; border-radius:11px;
    background:linear-gradient(135deg,#25d366,#128c7e);
    color:#fff; font-family:'Cairo',sans-serif; font-size:13px; font-weight:800;
    cursor:pointer; transition:all var(--dur-fast);
    box-shadow:0 4px 18px rgba(37,211,102,0.35);
}
.st-root .btn-wa-send:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 6px 24px rgba(37,211,102,0.45); }
.st-root .btn-wa-send svg { width:14px; height:14px; }
.st-root .adjust-approval-box {
    background: rgba(var(--th-accent-500-rgb),0.06);
    border: 1px solid rgba(var(--th-accent-500-rgb),0.22);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
    display: flex; align-items: center; gap: 14px;
}
.st-root .adjust-approval-box.approved {
    background: rgba(16,185,129,0.07);
    border-color: rgba(16,185,129,0.25);
}
.st-root .adjust-approval-icon {
    width: 42px; height: 42px; border-radius: 11px; flex-shrink:0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--th-accent-500-rgb),0.12); color: var(--indigo);
}
.st-root .adjust-approval-box.approved .adjust-approval-icon {
    background: rgba(16,185,129,0.12); color: var(--success);
}
.st-root .adjust-approval-icon svg { width:18px; height:18px; }
.st-root .adjust-approval-text { flex:1; }
.st-root .adjust-approval-text strong { font-size:13px; font-weight:800; color:var(--text); display:block; margin-bottom:3px; }
.st-root .adjust-approval-text span { font-size:11.5px; color:var(--text-muted); line-height:1.5; }
.st-root .btn-approve {
    display:flex; align-items:center; gap:7px; padding:0 18px; height:38px;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    border:none; border-radius:10px; color:#fff;
    font-family:'Cairo',sans-serif; font-size:12.5px; font-weight:800;
    cursor:pointer; transition:all var(--dur-fast); white-space:nowrap;
    box-shadow:0 4px 16px rgba(var(--th-accent-500-rgb),0.35); flex-shrink:0;
}
.st-root .btn-approve:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 6px 22px rgba(var(--th-accent-500-rgb),0.48); }
.st-root .btn-approve:disabled { opacity:.4; cursor:not-allowed; transform:none; }
.st-root .btn-approve svg { width:13px; height:13px; }
.st-root .approved-badge-sm {
    display:inline-flex; align-items:center; gap:5px; padding:5px 12px;
    background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.25);
    border-radius:8px; color:var(--success); font-size:12px; font-weight:800; white-space:nowrap;
}
.st-root .approved-badge-sm svg { width:12px; height:12px; }

/* deficit/surplus item row — approved state */
.st-root .deficit-item.adj-approved {
    border-color: rgba(16,185,129,0.3);
    background: rgba(16,185,129,0.05);
}
.st-root .deficit-item.adj-approved .di-def { background:rgba(16,185,129,0.12); color:#34d399; }
.st-root .di-approved-tag {
    display:inline-flex; align-items:center; gap:4px;
    padding:2px 8px; border-radius:6px;
    background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.2);
    color:var(--success); font-size:10px; font-weight:800;
}
.st-root .di-approved-tag svg { width:9px; height:9px; }

/* ══ APPLY CONFIRM OVERLAY ══ */
.st-root .adj-confirm-overlay {
    position: fixed; inset:0; z-index:1200;
    background: rgba(var(--th-d-7-rgb),0.88); backdrop-filter:blur(16px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease-smooth);
}
.st-root .adj-confirm-overlay.open { opacity:1; pointer-events:all; }
.st-root .adj-confirm-modal {
    background:linear-gradient(160deg,var(--th-d-5) 0%,var(--th-d-2) 100%);
    border:1px solid rgba(var(--th-accent-500-rgb),0.28); border-radius:20px;
    padding:28px; width:min(460px,calc(92 * var(--vw)));
    box-shadow:0 24px 80px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.06) inset;
    transform:scale(.94) translateY(18px);
    transition:transform .32s var(--ease-spring);
}
.st-root .adj-confirm-overlay.open .adj-confirm-modal { transform:scale(1) translateY(0); }
[data-theme="light"] .st-root .adj-confirm-modal {
    background:linear-gradient(160deg,var(--th-l-3) 0%,var(--th-accent-50) 100%);
    border-color:rgba(var(--th-accent-500-rgb),0.18);
}
.st-root .adj-confirm-icon {
    width:54px; height:54px; border-radius:15px; margin:0 auto 18px;
    background:linear-gradient(135deg,rgba(var(--th-accent-500-rgb),0.15),rgba(var(--th-accent2-500-rgb),0.12));
    border:1px solid rgba(var(--th-accent-500-rgb),0.25);
    display:flex; align-items:center; justify-content:center;
}
.st-root .adj-confirm-icon svg { width:26px; height:26px; color:var(--indigo); }
.st-root .adj-confirm-title { font-size:17px; font-weight:900; color:var(--text); text-align:center; margin-bottom:10px; }
.st-root .adj-confirm-sub { font-size:12.5px; color:var(--text-muted); line-height:1.65; text-align:center; margin-bottom:20px; }
.st-root .adj-stats-row {
    display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:22px;
}
.st-root .adj-stat {
    background:rgba(255,255,255,0.03); border:1px solid var(--border);
    border-radius:11px; padding:12px; text-align:center;
}
.st-root .adj-stat-val { font-size:20px; font-weight:900; color:var(--text); }
.st-root .adj-stat-lbl { font-size:10px; font-weight:700; color:var(--text-muted); margin-top:3px; }
.st-root .adj-stat.s-red .adj-stat-val { color:#f87171; }
.st-root .adj-stat.s-grn .adj-stat-val { color:#34d399; }
.st-root .adj-confirm-actions { display:flex; gap:10px; }
.st-root .btn-outline {
    display:flex; align-items:center; gap:7px; padding:0 18px; height:40px;
    background:transparent; border:1px solid var(--card-border); border-radius:10px;
    color:var(--text-muted); font-family:'Cairo',sans-serif; font-size:13px; font-weight:700;
    cursor:pointer; transition:all var(--dur-fast);
}
.st-root .btn-outline:hover { border-color:rgba(255,255,255,0.15); color:var(--text); }
.st-root .btn-outline svg { width:14px; height:14px; }
.st-root .btn-primary {
    display:flex; align-items:center; gap:7px; padding:0 22px; height:40px;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    border:none; border-radius:10px;
    color:#fff; font-family:'Cairo',sans-serif; font-size:13px; font-weight:800;
    cursor:pointer; transition:all var(--dur-fast);
    box-shadow:0 4px 16px rgba(var(--th-accent-500-rgb),0.4);
}
.st-root .btn-primary:hover { opacity:.9; transform:translateY(-1px); }
.st-root .btn-primary svg { width:14px; height:14px; }

/* ══ TOAST ══ */
.st-root #toast-container {
    position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; gap:8px; z-index:9999; pointer-events:none;
    align-items:center;
}
.st-root .toast {
    display:flex; align-items:center; gap:10px;
    padding:10px 18px; border-radius:12px; font-size:13px; font-weight:700;
    box-shadow:0 8px 28px rgba(0,0,0,0.35); backdrop-filter:blur(20px);
    animation:st-toastIn .3s var(--ease-spring) both;
    pointer-events:all; white-space:nowrap;
}
@keyframes st-toastIn { from {opacity:0;transform:translateY(14px) scale(.95)} to {opacity:1;transform:none} }
@keyframes st-toastOut { to {opacity:0;transform:translateY(-8px) scale(.95)} }
.st-root .toast svg { width:16px; height:16px; flex-shrink:0; }
.st-root .toast.success { background:rgba(16,185,129,0.92); color:#fff; }
.st-root .toast.error { background:rgba(239,68,68,0.92);  color:#fff; }
.st-root .toast.info { background:rgba(var(--th-accent-500-rgb),0.92);  color:#fff; }
.st-root .toast.warn { background:rgba(245,158,11,0.92);  color:#fff; }

/* ══ CONFIRM MODAL ══ */
.st-root .confirm-overlay {
    position:fixed; inset:0; z-index:2000;
    background:rgba(var(--th-d-7-rgb),0.8); backdrop-filter:blur(10px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .25s;
}
.st-root .confirm-overlay.open { opacity:1; pointer-events:all; }
.st-root .confirm-modal {
    background:linear-gradient(160deg,var(--th-d-5) 0%,var(--th-d-2) 100%);
    border:1px solid rgba(239,68,68,0.25); border-radius:20px; padding:28px;
    width:min(420px,calc(90 * var(--vw))); text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
    transform:scale(.93); transition:transform .3s var(--ease-spring);
}
.st-root .confirm-overlay.open .confirm-modal { transform:scale(1); }
[data-theme="light"] .st-root .confirm-modal { background:linear-gradient(160deg,var(--th-l-3) 0%,var(--th-accent-50) 100%); border-color:rgba(239,68,68,0.2); }
.st-root .confirm-icon-wrap { width:64px; height:64px; border-radius:18px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.2); }
.st-root .confirm-icon-wrap svg { width:30px; height:30px; color:#f87171; }
.st-root .confirm-title { font-size:18px; font-weight:900; color:var(--text); margin-bottom:8px; }
.st-root .confirm-sub { font-size:13px; color:var(--text-muted); line-height:1.6; margin-bottom:24px; }
.st-root .confirm-actions { display:flex; gap:10px; justify-content:center; }
.st-root .btn-danger {
    display:flex; align-items:center; gap:7px; padding:0 22px; height:40px;
    background:linear-gradient(135deg,#ef4444,#dc2626); border:none; border-radius:10px;
    color:#fff; font-family:'Cairo',sans-serif; font-size:13px; font-weight:800;
    cursor:pointer; transition:all var(--dur-fast); box-shadow:0 4px 16px rgba(239,68,68,0.4);
}
.st-root .btn-danger:hover { opacity:.9; transform:translateY(-1px); }

/* ══ LOADING SCREEN ══ */
.st-root #loading-screen {
    position:fixed; inset:0; z-index:500; display:flex;
    align-items:center; justify-content:center; flex-direction:column; gap:18px;
    background:var(--th-d-1); transition:opacity .3s;
}
[data-theme="light"] .st-root #loading-screen { background:var(--th-l-0); }
.st-root .loader-ring {
    width:48px; height:48px; border-radius:50%;
    border:3px solid rgba(var(--th-accent-500-rgb),0.15);
    border-top-color:var(--accent);
    animation:st-spin .8s linear infinite;
}
@keyframes st-spin { to {transform:rotate(360deg)} }
.st-root .loader-text { font-size:13px; font-weight:700; color:var(--text-muted); }

/* ══ MISC ══ */
.st-root .no-session-banner {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:14px; padding:60px 20px; flex:1;
}
.st-root .nsb-icon {
    width:80px; height:80px; border-radius:22px;
    background:linear-gradient(135deg,rgba(var(--th-accent-500-rgb),0.1),rgba(var(--th-accent2-500-rgb),0.1));
    border:1px solid rgba(var(--th-accent-500-rgb),0.15);
    display:flex; align-items:center; justify-content:center;
}
.st-root .nsb-icon svg { width:38px; height:38px; color:var(--th-accent-400); }
.st-root .nsb-title { font-size:19px; font-weight:900; color:var(--text); }
.st-root .nsb-sub { font-size:13px; color:var(--text-muted); text-align:center; max-width:340px; line-height:1.7; }
.st-root .nsb-btn {
    display:flex; align-items:center; gap:8px;
    padding:0 24px; height:44px;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    border:none; border-radius:12px; color:#fff;
    font-family:'Cairo',sans-serif; font-size:14px; font-weight:800;
    cursor:pointer; transition:all var(--dur-fast);
    box-shadow:0 6px 22px rgba(var(--th-accent-500-rgb),0.4); margin-top:4px;
}
.st-root .nsb-btn:hover { opacity:.9; transform:translateY(-2px); box-shadow:0 8px 28px rgba(var(--th-accent-500-rgb),0.5); }
.st-root .nsb-btn svg { width:16px; height:16px; }

.st-root .panel-body { flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden; }

/* ══ زر فتح الكاميرا (النافذة نفسها بقت CameraScannerDialog المشترك) ══ */
.st-root .cam-open-btn {
    display:flex; align-items:center; justify-content:center; gap:7px;
    width:42px; height:42px; flex-shrink:0;
    background:linear-gradient(135deg,rgba(var(--th-accent-500-rgb),0.18),rgba(var(--th-accent2-500-rgb),0.14));
    border:1px solid rgba(var(--th-accent-500-rgb),0.35); border-radius:11px;
    color:var(--indigo); cursor:pointer; transition:all var(--dur-fast);
    box-shadow:0 2px 10px rgba(var(--th-accent-500-rgb),0.15);
}
.st-root .cam-open-btn svg { width:18px; height:18px; }
.st-root .cam-open-btn:hover {
    background:linear-gradient(135deg,rgba(var(--th-accent-500-rgb),0.28),rgba(var(--th-accent2-500-rgb),0.22));
    border-color:var(--accent); color:#fff;
    box-shadow:0 4px 18px rgba(var(--th-accent-500-rgb),0.35);
    transform:translateY(-1px);
}
.st-root .cam-open-btn:active { transform:scale(.95); }

/* ══ BARCODE SCANNER BAR ══ */
.st-root .barcode-scan-bar {
    display:flex; align-items:center; gap:12px;
    padding:10px 16px 8px; flex-shrink:0;
    background:linear-gradient(135deg,rgba(var(--th-accent-500-rgb),0.06) 0%,rgba(var(--th-accent2-500-rgb),0.04) 100%);
    border-bottom:1px solid rgba(var(--th-accent-500-rgb),0.12);
    position:relative;
}
.st-root .barcode-scan-bar::before {
    content:''; position:absolute; bottom:0; right:0; left:0; height:1px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2),transparent);
    opacity:.25;
}
.st-root .barcode-scan-icon {
    width:38px; height:38px; border-radius:11px; flex-shrink:0;
    background:linear-gradient(135deg,rgba(var(--th-accent-500-rgb),0.15),rgba(var(--th-accent2-500-rgb),0.12));
    border:1px solid rgba(var(--th-accent-500-rgb),0.25);
    display:flex; align-items:center; justify-content:center; color:var(--indigo);
    animation:st-scanPulse 2.4s ease-in-out infinite;
}
@keyframes st-scanPulse {
    0%,100% {box-shadow:0 0 0 0 rgba(var(--th-accent-500-rgb),0)} 
    50% {box-shadow:0 0 0 5px rgba(var(--th-accent-500-rgb),0.15)}
}
.st-root .barcode-scan-icon svg { width:18px; height:18px; }
.st-root .barcode-scan-label { font-size:11px; font-weight:700; color:var(--text-muted); white-space:nowrap; }
.st-root .barcode-scan-label span { display:block; font-size:10px; color:var(--text-muted); opacity:.7; font-weight:500; margin-top:1px; }
.st-root .barcode-input-wrap {
    flex:1; display:flex; align-items:center; gap:10px;
    background:var(--bg-card); border:1px solid rgba(var(--th-accent-500-rgb),0.22);
    border-radius:11px; padding:0 14px; height:42px;
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    box-shadow:0 2px 12px rgba(var(--th-accent-500-rgb),0.1);
    transition:border-color .2s,box-shadow .2s;
}
.st-root .barcode-input-wrap:focus-within {
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-glow), 0 2px 12px rgba(var(--th-accent-500-rgb),0.15);
}
.st-root .barcode-input-wrap svg { width:15px; height:15px; color:var(--accent); flex-shrink:0; }
.st-root .barcode-scan-input {
    flex:1; background:none; border:none; outline:none;
    color:var(--text); font-family:'Cairo',sans-serif; font-size:14px; font-weight:700;
    direction:ltr; text-align:left;
}
.st-root .barcode-scan-input::placeholder { color:var(--text-muted); font-weight:400; font-size:13px; direction:rtl; text-align:right; }
.st-root .barcode-scan-hint {
    display:flex; align-items:center; gap:6px;
    font-size:11px; color:var(--text-muted); white-space:nowrap; flex-shrink:0;
}
.st-root .barcode-scan-hint kbd {
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12);
    border-radius:5px; padding:2px 7px; font-size:10px; font-weight:700;
    color:var(--text-sub); font-family:'Cairo',sans-serif;
}
[data-theme="light"] .st-root .barcode-scan-hint kbd { background:rgba(0,0,0,0.06); border-color:rgba(0,0,0,0.12); }

/* ══ BARCODE SETTLE MODAL ══ */
.st-root .bsc-overlay {
    position:fixed; inset:0; z-index:1500;
    background:rgba(var(--th-d-7-rgb),0.88); backdrop-filter:blur(16px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease-smooth);
}
.st-root .bsc-overlay.open { opacity:1; pointer-events:all; }
.st-root .bsc-modal {
    background:linear-gradient(160deg,var(--th-d-5) 0%,var(--th-d-2) 100%);
    border:1px solid rgba(var(--th-accent-500-rgb),0.3); border-radius:22px;
    width:min(500px,calc(94 * var(--vw)));
    box-shadow:0 28px 90px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06) inset;
    transform:scale(.93) translateY(20px);
    transition:transform .32s var(--ease-spring);
    overflow:hidden; direction:rtl;
}
.st-root .bsc-overlay.open .bsc-modal { transform:scale(1) translateY(0); }
[data-theme="light"] .st-root .bsc-modal {
    background:linear-gradient(160deg,var(--th-l-3) 0%,var(--th-accent-50) 100%);
    border-color:rgba(var(--th-accent-500-rgb),0.2);
}

/* Modal header */

.st-root .bsc-header {
    display:flex; align-items:center; gap:12px; padding:16px 20px 14px;
    border-bottom:1px solid var(--border); position:relative; overflow:hidden;
}
.st-root .bsc-header::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(var(--th-accent-500-rgb),0.08) 0%,rgba(var(--th-accent2-500-rgb),0.05) 100%);
    pointer-events:none;
}
.st-root .bsc-header::after {
    content:''; position:absolute; bottom:0; right:0; left:0; height:1px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2),transparent); opacity:.4;
}
.st-root .bsc-header-icon {
    width:42px; height:42px; border-radius:12px; flex-shrink:0;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 16px rgba(var(--th-accent-500-rgb),0.4); position:relative; z-index:1;
}
.st-root .bsc-header-icon svg { width:19px; height:19px; color:#fff; }
.st-root .bsc-header-text { flex:1; min-width:0; position:relative; z-index:1; }
.st-root .bsc-header-text .ttl { font-size:14px; font-weight:900; color:var(--text); }
.st-root .bsc-header-text .sub { font-size:11px; color:var(--text-muted); font-weight:600; margin-top:2px; }
.st-root .bsc-close-btn {
    width:32px; height:32px; border-radius:9px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-input); border:1px solid var(--card-border);
    color:var(--text-muted); cursor:pointer; transition:all var(--dur-fast);
    position:relative; z-index:1;
}
.st-root .bsc-close-btn svg { width:14px; height:14px; }
.st-root .bsc-close-btn:hover { background:rgba(239,68,68,0.1); border-color:rgba(239,68,68,0.25); color:#f87171; }

/* Item info */

.st-root .bsc-item-info {
    display:flex; align-items:flex-start; gap:14px;
    padding:16px 20px 0;
}
.st-root .bsc-thumb {
    width:70px; height:70px; border-radius:13px; object-fit:cover;
    border:1px solid var(--card-border); flex-shrink:0;
}
.st-root .bsc-thumb-placeholder {
    width:70px; height:70px; border-radius:13px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(var(--th-accent-500-rgb),0.1); border:1px solid var(--card-border); color:var(--th-accent-400);
}
.st-root .bsc-thumb-placeholder svg { width:28px; height:28px; }
.st-root .bsc-item-details { flex:1; min-width:0; }
.st-root .bsc-item-name { font-size:16px; font-weight:900; color:var(--text); margin-bottom:4px; line-height:1.3; }
.st-root .bsc-item-barcode {
    display:inline-flex; align-items:center; gap:5px;
    font-size:11px; color:var(--text-muted); font-weight:600; margin-bottom:6px;
    direction:ltr;
}
.st-root .bsc-item-barcode svg { width:12px; height:12px; }
.st-root .bsc-item-cat {
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 9px; border-radius:999px;
    font-size:10px; font-weight:700;
    background:rgba(var(--th-accent-500-rgb),0.1); border:1px solid rgba(var(--th-accent-500-rgb),0.2);
    color:var(--th-accent-300);
}

/* Stats grid */

.st-root .bsc-stats {
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
    padding:14px 20px;
}
.st-root .bsc-stat {
    background:rgba(255,255,255,0.03); border:1px solid var(--card-border);
    border-radius:11px; padding:11px 13px; text-align:center;
    position:relative; overflow:hidden;
}
[data-theme="light"] .st-root .bsc-stat { background:rgba(var(--th-n-900-rgb),0.03); }
.st-root .bsc-stat::before { content:''; position:absolute; top:0; right:0; left:0; height:2px; border-radius:99px; }
.st-root .bsc-stat.s-ind::before { background:linear-gradient(90deg,var(--th-accent-500),var(--th-accent-400)); }
.st-root .bsc-stat.s-amb::before { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
.st-root .bsc-stat.s-grn::before { background:linear-gradient(90deg,#10b981,#34d399); }
.st-root .bsc-stat.s-red::before { background:linear-gradient(90deg,#ef4444,#f87171); }
.st-root .bsc-stat-val { font-size:18px; font-weight:900; color:var(--text); line-height:1.1; }
.st-root .bsc-stat-lbl { font-size:9.5px; font-weight:700; color:var(--text-muted); margin-top:3px; }

/* Qty input section */

.st-root .bsc-qty-section {
    padding:0 20px 18px;
}
.st-root .bsc-qty-label { font-size:12px; font-weight:700; color:var(--text-sub); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.st-root .bsc-qty-label svg { width:13px; height:13px; color:var(--accent); }
.st-root .bsc-qty-row { display:flex; align-items:center; gap:10px; }
.st-root .bsc-qty-input {
    flex:1; height:50px;
    background:var(--bg-input); border:1px solid rgba(var(--th-accent-500-rgb),0.3);
    border-radius:12px; color:var(--text);
    font-family:'Cairo',sans-serif; font-size:22px; font-weight:900;
    text-align:center; outline:none; direction:ltr;
    transition:border-color .2s, box-shadow .2s;
    -moz-appearance:textfield;
}
.st-root .bsc-qty-input::-webkit-inner-spin-button, .st-root .bsc-qty-input::-webkit-outer-spin-button { -webkit-appearance:none; }
.st-root .bsc-qty-input:focus {
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-glow);
    background:rgba(var(--th-accent-500-rgb),0.06);
}
.st-root .bsc-settle-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:0 22px; height:50px; flex-shrink:0;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    border:none; border-radius:12px; color:#fff;
    font-family:'Cairo',sans-serif; font-size:14px; font-weight:800;
    cursor:pointer; transition:all var(--dur-fast); white-space:nowrap;
    box-shadow:0 4px 18px rgba(var(--th-accent-500-rgb),0.4);
}
.st-root .bsc-settle-btn:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 6px 26px rgba(var(--th-accent-500-rgb),0.5); }
.st-root .bsc-settle-btn:active { transform:scale(.97); }
.st-root .bsc-settle-btn svg { width:16px; height:16px; }

/* Preview deficit */

.st-root .bsc-preview {
    margin:0 20px 16px;
    border-radius:11px; padding:11px 14px;
    display:flex; align-items:center; gap:10px;
    font-size:13px; font-weight:700;
    transition:all .2s;
    display:none;
}
.st-root .bsc-preview.deficit { background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.22); color:#f87171; }
.st-root .bsc-preview.surplus { background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.22); color:#34d399; }
.st-root .bsc-preview.ok { background:rgba(16,185,129,0.08); border:1px solid rgba(16,185,129,0.2); color:#34d399; }
.st-root .bsc-preview svg { width:15px; height:15px; flex-shrink:0; }

/* Already settled state */

.st-root .bsc-settled-badge {
    margin:0 20px 18px;
    background:rgba(16,185,129,0.08); border:1px solid rgba(16,185,129,0.22);
    border-radius:11px; padding:12px 16px;
    display:flex; align-items:center; gap:10px;
    font-size:13px; font-weight:700; color:var(--success);
}
.st-root .bsc-settled-badge svg { width:16px; height:16px; }

/* ══════════════════════════════════════════════════════════
   V2 — إضافات خاصة بالتشغيل داخل MainLayout (ليست من Legacy)
══════════════════════════════════════════════════════════ */
/* Legacy صفحة مستقلة داخل iframe بـhtml,body{height:100%;overflow:hidden}؛ هنا الشاشة داخل .content-area
   المشترك (height:calc(100 * var(--vh));overflow-y:auto;padding:24px) — نفس حل pos-legacy.css لـ.pos-root، مقيَّد بهذه
   الشاشة فقط عبر :has(). */
.content-area:has(.st-root) { height: calc(100 * var(--vh)); overflow: hidden; padding: 0; display: flex; flex-direction: column; }
@media (max-width: 480px) { .content-area:has(.st-root) { padding-top: 60px; } }
.st-root { flex: 1; min-height: 0; height: auto; position: relative; direction: rtl; }

/* في Legacy كل النوافذ position:fixed لكن داخل الـiframe — يعني بتغطي مساحة اللوحة فقط لا القائمة
   الجانبية. absolute داخل .st-root (position:relative) يعيد نفس السلوك بالظبط. */
.st-root #loading-screen,
.st-root .summary-overlay, .st-root .history-overlay, .st-root .wa-overlay,
.st-root .adj-confirm-overlay, .st-root .confirm-overlay, .st-root .bsc-overlay,
.st-root .summary-modal.fullscreen, .st-root .history-modal.fullscreen,
.st-root #toast-container { position: absolute; }
.st-root #loading-screen.hidden { opacity: 0; pointer-events: none; transition: opacity .3s; }

/* قرار المالك (2026-10-01): الزيادة تظهر صراحة +X بالأخضر — Legacy كان يعرضها "لا عجز". نفس ألوان
   .deficit-badge.none ونفس ألوان شارة "زيادة +X" بقائمة التقرير (.di-def بالأخضر). */
.st-root .deficit-badge.surplus { background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.25); color: #34d399; }

/* اختيار نوع الجرد (منتجات/قطع غيار) — قرار المالك؛ نفس شكل أزرار الهيدر (header-icon-btn). */
.st-root .st-type-switch { display: flex; align-items: center; gap: 4px; padding: 3px; height: 34px; border-radius: 10px; background: var(--bg-input); border: 1px solid var(--card-border); }
.st-root .st-type-btn {
    height: 26px; padding: 0 11px; border-radius: 8px; border: none; background: transparent; cursor: pointer;
    font-family: 'Cairo', sans-serif; font-size: 11.5px; font-weight: 800; color: var(--text-muted); white-space: nowrap;
    transition: all var(--dur-fast);
}
.st-root .st-type-btn:hover { color: var(--accent); }
.st-root .st-type-btn.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 2px 8px rgba(var(--th-accent-500-rgb),.35); }

/* صفوف أصناف مُسوّاة تظهر تحت فلتر "بها عجز"/"بدون عجز" — في Legacy كانت مخفية بـ.settled فالفلتران
   يعرضان جدولًا فارغًا (عطل)؛ ظهورها لازم لعرض +X المعتمد. */
.st-root .item-row.settled-visible .actual-input { opacity: .7; }
.st-root .item-row.leaving { opacity: 0; transform: translateX(-16px); }
/* مفتاح النوع (إضافة V2) يزيد عرض مجموعة الأزرار — على الموبايل تنزل المجموعة لسطر كامل بدل ما تتقص
   (Legacy: .panel-header-left{flex-shrink:0} كان مناسبًا لثلاثة أزرار فقط). وُجد بمقارنة 390px. */
@media (max-width: 560px) {
    .st-root .panel-header { flex-wrap: wrap; }
    .st-root .panel-header-left { flex-wrap: wrap; flex-shrink: 1; min-width: 0; width: 100%; }
    .st-root .st-type-btn { padding: 0 9px; }
}

/* زر القائمة العام (.mobile-menu-btn، fixed أعلى اليمين 20px + 48px) — مساحة محجوزة له بالهيدر فقط،
   نفس سابقة website-legacy.css (.ws-header padding-right). */
.st-root .panel-header { padding-right: 80px; min-height: 70px; }

/* بعد حذف زر "صورة" (قرار المالك) زرّا PDF/واتساب يكفيهم مكان جنب العنوان على الموبايل فيتراكب التاريخ تحتهما؛
   في Legacy الأزرار الثلاثة كانت تنزل لسطر مستقل — نفس الشكل هنا. وُجد بمقارنة 390px. */
@media (max-width: 560px) {
    .st-root .summary-topbar, .st-root .hist-detail-topbar { flex-wrap: wrap; }
    .st-root .summary-topbar .summary-topbar-title { flex-basis: 100%; }
    .st-root .summary-topbar .export-btns-group { flex: 1; }
}