/* سجل النواقص (/reports/shortages) — منقول حرفيًا من <style> بـlogs/navaqs-log.html (Legacy) بتحويل آلي
   (port_legacy_css.py): كل محدِّد مقيَّد بـ.nq-root، :root/html[data-theme=light] → .nq-root/[data-theme=light] .nq-root،
   وأسماء @keyframes بادئة nq-. الإضافات الخاصة بـV2 في آخر الملف. */
/* ══════════════════════════════════════════════════════════
   TOKENS
══════════════════════════════════════════════════════════ */
.nq-root {
    --bg-card:      rgba(var(--th-n-900-rgb),0.52);
    --bg-input:     rgba(255,255,255,0.05);
    --bg-hover:     rgba(255,255,255,0.07);
    --border:       rgba(255,255,255,0.08);
    --border-focus: rgba(245,158,11,0.65);
    --text:         var(--th-n-200);
    --text-muted:   var(--th-n-500);
    --text-sub:     var(--th-n-400);
    --accent:       #f59e0b;
    --accent-2:     #fb923c;
    --accent-glow:  rgba(245,158,11,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);
    --purple:       var(--th-violet-500);
    --purple-bg:    rgba(var(--th-violet-500-rgb),0.12);
    --radius:       14px;
    --card-border:  rgba(255,255,255,0.07);
    --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"] .nq-root {
    --bg-card:      rgba(255,255,255,0.85);
    --bg-input:     rgba(var(--th-n-900-rgb),0.04);
    --bg-hover:     rgba(245,158,11,0.05);
    --border:       rgba(var(--th-n-900-rgb),0.10);
    --border-focus: rgba(245,158,11,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);
    --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);
    --purple-bg:    rgba(var(--th-violet-500-rgb),0.10);
}

/* ══ BASE ══ */
.nq-root *, .nq-root *::before, .nq-root *::after { box-sizing:border-box; margin:0; padding:0; }
.nq-root { height:100%; overflow:hidden; }
.nq-root { font-family:'Cairo',sans-serif; background:transparent; color:var(--text); display:flex; flex-direction:column; height:100%; }

/* ══ PANEL HEADER ══ */
.nq-root .panel-header {
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; padding:13px 16px; border-bottom:1px solid var(--border);
    flex-shrink:0; position:relative; overflow:hidden;
}
.nq-root .panel-header::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(245,158,11,.07) 0%,rgba(251,146,60,.04) 50%,transparent 100%);
    pointer-events:none;
}
.nq-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:.35;
}
.nq-root .panel-header-right {
    display:flex; align-items:center; gap:13px;
    padding-right:50px; position:relative;
}
.nq-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(245,158,11,.42),0 0 0 1px rgba(255,255,255,.14) inset;
    position:relative;
}
.nq-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;
}
.nq-root .panel-icon svg { width:20px; height:20px; color:#fff; }
.nq-root .panel-title { font-size:17px; font-weight:900; color:var(--text); line-height:1.2; letter-spacing:-.02em; }
.nq-root .panel-subtitle {
    font-size:11px; color:var(--text-muted); font-weight:600;
    margin-top:3px; display:flex; align-items:center; gap:5px;
}
.nq-root .panel-subtitle svg { width:11px; height:11px; }
.nq-root .status-dot {
    width:7px; height:7px; border-radius:50%;
    background:var(--accent); box-shadow:0 0 6px var(--accent);
    flex-shrink:0; animation:nq-pulseDot 2.2s ease-in-out infinite;
}
@keyframes nq-pulseDot { 0%,100% {box-shadow:0 0 4px var(--accent)} 50% {box-shadow:0 0 10px var(--accent)} }
.nq-root .panel-header-left { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.nq-root .header-date-badge {
    display:flex; align-items:center; gap:6px;
    background:var(--bg-input); border:1px solid var(--card-border);
    border-radius:10px; padding:6px 12px;
    font-size:11px; font-weight:700; color:var(--text-sub); white-space:nowrap;
}
.nq-root .header-date-badge svg { width:12px; height:12px; color:var(--text-muted); flex-shrink:0; }
.nq-root .header-refresh-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;
}
.nq-root .header-refresh-btn svg { width:14px; height:14px; }
.nq-root .header-refresh-btn:hover { background:var(--bg-hover); color:var(--accent); border-color:var(--border-focus); }
.nq-root .header-refresh-btn.spinning svg { animation:nq-spin .6s linear infinite; }
@keyframes nq-spin { to {transform:rotate(360deg)} }

/* ══ KPI STRIP ══ */
.nq-root .kpi-strip { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; padding:12px 16px 10px; flex-shrink:0; }
.nq-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:nq-kpiIn .5s var(--ease-smooth) both;
}
.nq-root .kpi-card:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.18); }
.nq-root .kpi-card:nth-child(1) {animation-delay:.05s}.nq-root .kpi-card:nth-child(2) {animation-delay:.10s}
.nq-root .kpi-card:nth-child(3) {animation-delay:.15s}.nq-root .kpi-card:nth-child(4) {animation-delay:.20s}
.nq-root .kpi-card:nth-child(5) {animation-delay:.25s}
@keyframes nq-kpiIn {from {opacity:0;transform:translateY(10px)}to {opacity:1;transform:translateY(0)}}
.nq-root .kpi-card::before {content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:99px 99px 0 0;}
.nq-root .kpi-card.c-amber::before {background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.nq-root .kpi-card.c-orange::before {background:linear-gradient(90deg,#fb923c,#fdba74)}
.nq-root .kpi-card.c-blue::before {background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.nq-root .kpi-card.c-green::before {background:linear-gradient(90deg,#10b981,#34d399)}
.nq-root .kpi-card.c-purple::before {background:linear-gradient(90deg,var(--th-violet-500),var(--th-violet-400))}
.nq-root .kpi-header {display:flex;align-items:center;justify-content:space-between;}
.nq-root .kpi-label {font-size:10.5px;font-weight:700;color:var(--text-muted);letter-spacing:.04em;}
.nq-root .kpi-icon {width:27px;height:27px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nq-root .kpi-icon svg {width:13px;height:13px;}
.nq-root .c-amber  .kpi-icon {background:var(--warn-bg);color:var(--warn)}
.nq-root .c-orange .kpi-icon {background:rgba(251,146,60,.12);color:#fb923c}
.nq-root .c-blue   .kpi-icon {background:var(--info-bg);color:var(--info)}
.nq-root .c-green  .kpi-icon {background:var(--success-bg);color:var(--success)}
.nq-root .c-purple .kpi-icon {background:var(--purple-bg);color:var(--purple)}
.nq-root .kpi-value {font-size:18px;font-weight:900;line-height:1.1;letter-spacing:-.02em;}
.nq-root .kpi-sub {font-size:10px;color:var(--text-muted);font-weight:600;}

/* ══ FILTER BAR ══ */
.nq-root .filter-bar {
    display:flex; align-items:center; gap:8px;
    padding:9px 16px;
    border-bottom:1px solid var(--border);
    flex-shrink:0; flex-wrap:wrap;
}
.nq-root .sl-search-wrap {
    width:220px; flex-shrink:0;
    display:flex; align-items:center; gap:7px;
    background:var(--bg-input); border:1px solid var(--card-border);
    border-radius:11px; padding:0 10px; height:36px;
    transition:border-color var(--dur-fast),box-shadow var(--dur-fast),width var(--dur-med);
}
.nq-root .sl-search-wrap:focus-within {
    border-color:var(--border-focus);
    box-shadow:0 0 0 3px var(--accent-glow);
    width:260px;
}
.nq-root .sl-search-wrap svg {width:13px;height:13px;color:var(--text-muted);flex-shrink:0;}
.nq-root .sl-search-input {flex:1;background:none;border:none;outline:none;color:var(--text);font-family:'Cairo',sans-serif;font-size:12.5px;min-width:0;}
.nq-root .sl-search-input::placeholder {color:var(--text-muted);}
.nq-root .sl-search-clear {background:none;border:none;cursor:pointer;color:var(--text-muted);padding:2px;border-radius:5px;display:flex;align-items:center;flex-shrink:0;transition:color var(--dur-fast);}
.nq-root .sl-search-clear svg {width:12px;height:12px;}
.nq-root .sl-search-clear:hover {color:var(--danger);}
.nq-root .filter-divider {width:1px;height:24px;background:var(--border);flex-shrink:0;}
.nq-root .filter-spacer {flex:1;}
.nq-root .filter-group {display:flex;align-items:center;gap:5px;flex-shrink:0;}
.nq-root .filter-label {font-size:11px;font-weight:700;color:var(--text-muted);white-space:nowrap;}
.nq-root .filter-sel {
    background:var(--bg-input); border:1px solid var(--card-border);
    border-radius:9px; padding:0 8px; height:34px;
    color:var(--text); font-family:'Cairo',sans-serif; font-size:12px;
    cursor:pointer; outline:none;
    transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
    appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:left 8px center; background-size:16px;
    padding-right:28px;
}
.nq-root .filter-sel option { background:var(--bg-card); color:var(--text); padding:8px; }
.nq-root .filter-sel:focus {border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-glow);}

/* DateTime Range */
.nq-root .dt-range-wrap {display:flex;align-items:center;gap:6px;flex-shrink:0;}
.nq-root .dt-trigger {
    display:flex; align-items:center; gap:5px; height:34px; padding:0 10px;
    background:var(--bg-input); border:1px solid var(--card-border);
    border-radius:9px; cursor:pointer; color:var(--text-muted);
    font-family:'Cairo',sans-serif; font-size:11.5px; transition:all var(--dur-fast);
}
.nq-root .dt-trigger svg {width:12px;height:12px;flex-shrink:0;}
.nq-root .dt-trigger:hover {border-color:var(--border-focus);color:var(--text);}
.nq-root .dt-trigger.has-value {border-color:var(--border-focus);color:var(--text);}
.nq-root .dt-val {font-weight:700;}
.nq-root .dt-placeholder {color:var(--text-muted)!important;font-weight:400!important;}
.nq-root .dt-sep {font-size:11px;color:var(--text-muted);}

/* DT Popover */
.nq-root .dt-popover-overlay {position:fixed;inset:0;z-index:800;display:none;}
.nq-root .dt-popover-overlay.open {display:block;}
.nq-root .dt-popover {
    position:fixed;z-index:801;
    background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border:1px solid var(--card-border);border-radius:14px;
    padding:14px;min-width:240px;
    box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.nq-root .dt-popover-title {display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:var(--text);margin-bottom:12px;}
.nq-root .dt-popover-title svg {width:14px;height:14px;color:var(--accent);}
.nq-root .dt-picker-grid {display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.nq-root .dt-picker-row {display:flex;align-items:center;gap:8px;}
.nq-root .dt-picker-label {font-size:14px;flex-shrink:0;}
.nq-root .dt-picker-date-input, .nq-root .dt-picker-time-input {
    flex:1;background:var(--bg-input);border:1px solid var(--card-border);
    border-radius:8px;padding:6px 8px;color:var(--text);
    font-family:'Cairo',sans-serif;font-size:12px;outline:none;
    transition:border-color var(--dur-fast);
}
.nq-root .dt-picker-date-input:focus, .nq-root .dt-picker-time-input:focus {border-color:var(--border-focus);}
.nq-root .dt-presets {display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px;}
.nq-root .dt-preset {
    padding:4px 9px;background:var(--bg-input);border:1px solid var(--card-border);
    border-radius:7px;font-family:'Cairo',sans-serif;font-size:11px;font-weight:700;
    color:var(--text-muted);cursor:pointer;transition:all var(--dur-fast);
}
.nq-root .dt-preset:hover {background:var(--bg-hover);border-color:var(--border-focus);color:var(--text);}
.nq-root .dt-popover-actions {display:flex;gap:7px;}
.nq-root .dt-btn-apply {
    flex:1;padding:7px;background:var(--accent);border:none;border-radius:9px;
    color:#fff;font-family:'Cairo',sans-serif;font-size:12px;font-weight:800;
    cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;
    transition:opacity var(--dur-fast);
}
.nq-root .dt-btn-apply:hover {opacity:.88;}
.nq-root .dt-btn-apply svg {width:13px;height:13px;}
.nq-root .dt-btn-clear {
    padding:7px 11px;background:var(--bg-input);border:1px solid var(--card-border);
    border-radius:9px;color:var(--text-muted);font-family:'Cairo',sans-serif;
    font-size:12px;font-weight:700;cursor:pointer;transition:all var(--dur-fast);
}
.nq-root .dt-btn-clear:hover {color:var(--danger);border-color:var(--danger);}

/* Clear filter btn */
.nq-root .clear-filter-btn {
    display:none;align-items:center;gap:5px;
    padding:0 10px;height:34px;
    background:var(--warn-bg);border:1px solid rgba(245,158,11,.3);
    border-radius:9px;cursor:pointer;
    font-family:'Cairo',sans-serif;font-size:12px;font-weight:700;color:var(--accent);
    transition:all var(--dur-fast);
}
.nq-root .clear-filter-btn:hover {background:rgba(245,158,11,.22);}
.nq-root .clear-filter-btn svg {width:13px;height:13px;}

/* ══ TABS ══ */
.nq-root .sl-tabs-bar {
    display:flex;align-items:center;gap:4px;
    padding:6px 16px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.nq-root .sl-tab {
    display:flex;align-items:center;gap:6px;padding:6px 12px;
    background:none;border:1px solid transparent;border-radius:9px;
    cursor:pointer;font-family:'Cairo',sans-serif;
    font-size:12.5px;font-weight:700;color:var(--text-muted);
    transition:all var(--dur-fast);
}
.nq-root .sl-tab svg {width:14px;height:14px;}
.nq-root .sl-tab:hover {background:var(--bg-hover);color:var(--text);}
.nq-root .sl-tab.active {background:var(--warn-bg);border-color:rgba(245,158,11,.3);color:var(--accent);}
.nq-root .tab-count {
    min-width:20px;height:18px;border-radius:99px;padding:0 6px;
    background:rgba(245,158,11,.18);color:var(--accent);
    font-size:10.5px;font-weight:900;display:flex;align-items:center;justify-content:center;
}
.nq-root .tab-spacer {flex:1;}
.nq-root .sl-tabs-export {
    display:flex;align-items:center;gap:6px;padding:6px 12px;height:34px;
    background:var(--success-bg);border:1px solid rgba(16,185,129,.3);
    border-radius:9px;cursor:pointer;
    font-family:'Cairo',sans-serif;font-size:12px;font-weight:800;color:var(--success);
    transition:all var(--dur-fast);
}
.nq-root .sl-tabs-export:hover {background:rgba(16,185,129,.22);}
.nq-root .sl-tabs-export svg {width:14px;height:14px;}

/* ══ TABLE ══ */
.nq-root .sl-table-wrap {flex:1;overflow-y:auto;overflow-x:auto;min-height:0;}
.nq-root .sl-table-wrap::-webkit-scrollbar {width:5px;height:5px;}
.nq-root .sl-table-wrap::-webkit-scrollbar-track {background:transparent;}
.nq-root .sl-table-wrap::-webkit-scrollbar-thumb {background:rgba(245,158,11,.25);border-radius:99px;}
.nq-root .sl-table-wrap::-webkit-scrollbar-thumb:hover {background:rgba(245,158,11,.45);}
/* min-width = مجموع أقل عرض لكل عمود حسب نوع محتواه (نفس معيار
   جداول السجلات الأخرى — راجع expenses-log.html للتفاصيل الكاملة):
   الأعمدة هنا: # 45 + تاريخ+وقت 110 + كاشير 95 + منتجات[نص/قائمة] 155 +
   كمية إجمالية[Badge] 85 + قيمة إجمالية 95 + إجراء 50 = 635 */
.nq-root .sl-table {width:100%;min-width:635px;border-collapse:collapse;font-size:12.5px;}
.nq-root .sl-table thead {position:sticky;top:0;z-index:20;}
.nq-root .sl-table th {
    padding:9px 13px;text-align:right;font-size:10.5px;font-weight:800;
    color:var(--text-muted);letter-spacing:.04em;white-space:nowrap;
    background:rgba(10,15,28,.9);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
}
[data-theme="light"] .nq-root .sl-table th {background:rgba(var(--th-l-1-rgb),.92);}
.nq-root .sl-table td {
    padding:10px 13px;border-bottom:1px solid var(--border);
    vertical-align:middle;
}
.nq-root .sl-table tbody tr {transition:background var(--dur-fast);cursor:pointer;}
.nq-root .sl-table tbody tr:hover {background:rgba(245,158,11,.04);}
[data-theme="light"] .nq-root .sl-table tbody tr:hover {background:rgba(245,158,11,.05);}
.nq-root .sl-table tbody tr:last-child td {border-bottom:none;}

/* skeleton */
.nq-root .sk-row td {padding:10px 13px;border-bottom:1px solid var(--border);}
.nq-root .sk-line {height:12px;border-radius:6px;background:rgba(255,255,255,.06);animation:nq-skPulse 1.4s ease-in-out infinite;}
[data-theme="light"] .nq-root .sk-line {background:rgba(var(--th-n-900-rgb),.07);}
@keyframes nq-skPulse {0%,100% {opacity:.4}50% {opacity:1}}
.nq-root .sk-line.w30 {width:30%}.nq-root .sk-line.w40 {width:40%}.nq-root .sk-line.w50 {width:50%}
.nq-root .sk-line.w60 {width:60%}.nq-root .sk-line.w70 {width:70%}.nq-root .sk-line.w80 {width:80%}
.nq-root .sk-line.pill {width:60px;border-radius:99px;}

/* cells */
.nq-root .cell-id {display:flex;align-items:center;gap:5px;color:var(--accent);font-weight:800;font-size:11.5px;white-space:nowrap;}
.nq-root .cell-id svg {width:11px;height:11px;flex-shrink:0;}
.nq-root .cell-date {white-space:nowrap;color:var(--text-sub);font-size:12px;}
.nq-root .cell-time {display:block;font-size:10.5px;color:var(--text-muted);margin-top:1px;}
.nq-root .cell-cashier {color:var(--text-sub);}
.nq-root .cell-amount {color:#fbbf24;font-weight:900;white-space:nowrap;}
.nq-root .cell-dim {color:var(--text-muted);font-style:italic;}
.nq-root .cell-products {display:flex;align-items:center;gap:5px;}
.nq-root .cell-actions {text-align:center;}

/* badges */
.nq-root .badge {
    display:inline-flex;align-items:center;gap:4px;
    padding:3px 8px;border-radius:7px;
    font-size:10.5px;font-weight:800;font-family:'Cairo',sans-serif;
    white-space:nowrap;
}
.nq-root .badge svg {width:10px;height:10px;}
.nq-root .badge-items {background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.25);color:#fbbf24;}
.nq-root .badge-qty {background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.25);color:#60a5fa;}
.nq-root .badge-val {background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.25);color:#34d399;}
.nq-root .badge-noval {background:rgba(var(--th-n-500-rgb),.10);border:1px solid rgba(var(--th-n-500-rgb),.2);color:var(--th-n-500);}

/* product list mini */
.nq-root .product-list-mini {display:flex;flex-wrap:wrap;gap:4px;max-width:280px;}
.nq-root .product-chip {
    display:inline-flex;align-items:center;gap:3px;
    padding:2px 7px;background:rgba(245,158,11,.08);
    border:1px solid rgba(245,158,11,.18);border-radius:6px;
    font-size:10px;font-weight:700;color:var(--text-sub);white-space:nowrap;
}
.nq-root .product-chip-more {
    display:inline-flex;align-items:center;
    padding:2px 7px;background:var(--bg-input);
    border:1px solid var(--card-border);border-radius:6px;
    font-size:10px;font-weight:700;color:var(--text-muted);
}

/* action btn */
.nq-root .row-action-btn {
    width:28px;height:28px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    background:none;border:1px solid var(--card-border);
    cursor:pointer;color:var(--text-muted);
    transition:all var(--dur-fast);
}
.nq-root .row-action-btn svg {width:13px;height:13px;}
.nq-root .row-action-btn.eye:hover {background:var(--warn-bg);border-color:rgba(245,158,11,.4);color:var(--accent);}

/* empty */
.nq-root .sl-empty {display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:10px;text-align:center;}
.nq-root .sl-empty svg {width:44px;height:44px;color:var(--text-muted);opacity:.3;}
.nq-root .sl-empty-title {font-size:15px;font-weight:900;color:var(--text-muted);}
.nq-root .sl-empty-sub {font-size:12px;color:var(--text-muted);opacity:.7;}

/* ══ FOOTER ══ */
.nq-root .sl-footer {
    display:flex;align-items:center;justify-content:space-between;
    padding:9px 16px;border-top:1px solid var(--border);flex-shrink:0;
}
.nq-root .sl-count {font-size:12px;color:var(--text-muted);font-weight:600;}
.nq-root .sl-count strong {color:var(--text);font-weight:900;}
.nq-root .pagination {display:flex;gap:4px;align-items:center;}
.nq-root .page-btn {
    min-width:30px;height:30px;border-radius:8px;padding:0 8px;
    display:flex;align-items:center;justify-content:center;
    background:var(--bg-input);border:1px solid var(--card-border);
    color:var(--text-muted);font-family:'Cairo',sans-serif;font-size:12px;font-weight:700;
    cursor:pointer;transition:all var(--dur-fast);
}
.nq-root .page-btn svg {width:13px;height:13px;}
.nq-root .page-btn:hover:not(:disabled) {background:var(--bg-hover);color:var(--text);}
.nq-root .page-btn.active {background:var(--warn-bg);border-color:rgba(245,158,11,.4);color:var(--accent);}
.nq-root .page-btn:disabled {opacity:.35;cursor:not-allowed;}

/* ══ MODALS ══ */
.nq-root .modal-overlay {
    position:fixed;inset:0;z-index:1000;
    background:rgba(0,0,0,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    display:none;align-items:center;justify-content:center;padding:16px;
}
.nq-root .modal-overlay.open {display:flex;animation:nq-fadeIn .2s ease;}
.nq-root .modal-overlay.closing {animation:nq-fadeOut .22s ease forwards;}
@keyframes nq-fadeIn {from {opacity:0}to {opacity:1}}
@keyframes nq-fadeOut {from {opacity:1}to {opacity:0}}
.nq-root .modal {
    background:rgba(10,15,28,.98);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border:1px solid var(--card-border);border-radius:18px;
    width:100%;max-width:560px;max-height:calc(90 * var(--vh));
    display:flex;flex-direction:column;
    box-shadow:0 32px 80px rgba(0,0,0,.6);
    animation:nq-slideUp .28s var(--ease-spring) both;
}
[data-theme="light"] .nq-root .modal {background:rgba(255,255,255,.98);}
@keyframes nq-slideUp {from {opacity:0;transform:translateY(20px) scale(.97)}to {opacity:1;transform:none}}
.nq-root .modal-overlay.closing .modal {animation:nq-slideDown .22s ease forwards;}
@keyframes nq-slideDown {from {opacity:1;transform:none}to {opacity:0;transform:translateY(16px) scale(.97)}}

/* wide modal for detail */
.nq-root .modal.wide { max-width: 640px; }

.nq-root .modal-header {
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 18px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.nq-root .modal-title-row {display:flex;align-items:center;gap:10px;}
.nq-root .modal-icon {
    width:38px;height:38px;border-radius:11px;
    background:var(--warn-bg);border:1px solid rgba(245,158,11,.3);
    display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;
}
.nq-root .modal-icon.green {background:var(--success-bg);border-color:rgba(16,185,129,.3);color:var(--success);}
.nq-root .modal-icon svg {width:17px;height:17px;}
.nq-root .modal-title {font-size:15px;font-weight:900;color:var(--text);}
.nq-root .modal-subtitle {font-size:11px;color:var(--text-muted);margin-top:2px;}
.nq-root .modal-close {
    width:32px;height:32px;border-radius:9px;
    background:var(--bg-input);border:1px solid var(--card-border);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;color:var(--text-muted);transition:all var(--dur-fast);
}
.nq-root .modal-close:hover {border-color:rgba(239,68,68,.4);color:var(--danger);}
.nq-root .modal-close svg {width:14px;height:14px;}
.nq-root .modal-body {flex:1;overflow-y:auto;padding:18px;}
.nq-root .modal-body::-webkit-scrollbar {width:4px;}
.nq-root .modal-body::-webkit-scrollbar-thumb {background:var(--border);border-radius:99px;}
.nq-root .modal-footer {
    display:flex;gap:8px;justify-content:flex-end;
    padding:12px 18px;border-top:1px solid var(--border);flex-shrink:0;
}
.nq-root .btn-modal-primary {
    display:inline-flex;align-items:center;gap:6px;
    padding:8px 18px;background:var(--accent);border:none;border-radius:10px;
    color:#fff;font-family:'Cairo',sans-serif;font-size:13px;font-weight:800;
    cursor:pointer;transition:opacity var(--dur-fast);
}
.nq-root .btn-modal-primary:hover {opacity:.88;}
.nq-root .btn-modal-primary svg {width:14px;height:14px;}
.nq-root .btn-modal-secondary {
    display:inline-flex;align-items:center;gap:6px;
    padding:8px 14px;background:var(--bg-input);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);
}
.nq-root .btn-modal-secondary:hover {border-color:var(--border-focus);color:var(--text);}
.nq-root .btn-modal-secondary svg {width:14px;height:14px;}

/* ══ DETAIL MODAL INTERNALS ══ */
.nq-root .detail-section {margin-bottom:18px;}
.nq-root .dsec-title {
    display:flex;align-items:center;gap:7px;
    font-size:12px;font-weight:800;color:var(--text-muted);letter-spacing:.05em;
    margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid var(--border);
}
.nq-root .dsec-title svg {width:13px;height:13px;}
.nq-root .info-grid {display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.nq-root .info-cell {
    background:var(--bg-input);border:1px solid var(--card-border);
    border-radius:10px;padding:10px 12px;
}
.nq-root .info-cell.full {grid-column:1/-1;}
.nq-root .info-cell.c-accent {border-color:rgba(245,158,11,.3);background:var(--warn-bg);}
.nq-root .info-cell-label {font-size:10px;font-weight:700;color:var(--text-muted);letter-spacing:.04em;margin-bottom:3px;}
.nq-root .info-cell-val {font-size:13px;font-weight:800;color:var(--text);}
.nq-root .info-cell-val.accent {color:var(--accent);}
.nq-root .info-cell-val.desc {font-weight:600;color:var(--text-sub);font-size:12px;line-height:1.5;}

/* Products Table inside detail — أسماء منتجات ممكن تكون طويلة
   (مثال: "شاشة Samsung S23 Ultra")، فمحتاجة غلاف تمرير أفقي بدل القص */
.nq-root .products-table-wrap {
    border:1px solid var(--card-border);border-radius:12px;overflow-x:auto;
}
/* اسم منتج[نص متوسط-طويل] 140 + كمية 70 + سعر وحدة 90 + إجمالي 90 = 390 */
.nq-root .products-table {width:100%;min-width:390px;border-collapse:collapse;font-size:12.5px;}
.nq-root .products-table th {
    padding:8px 12px;text-align:right;font-size:10.5px;font-weight:800;
    color:var(--text-muted);letter-spacing:.04em;
    background:rgba(245,158,11,.06);border-bottom:1px solid var(--border);
}
.nq-root .products-table td {
    padding:9px 12px;border-bottom:1px solid var(--border);
    color:var(--text);font-weight:700;
}
.nq-root .products-table tbody tr:last-child td {border-bottom:none;}
.nq-root .products-table tbody tr:hover {background:rgba(245,158,11,.04);}
.nq-root .pt-name {color:var(--text);}
.nq-root .pt-qty {color:#60a5fa;font-weight:900;text-align:center;}
.nq-root .pt-price {color:#fbbf24;font-weight:900;}
.nq-root .pt-total {color:#34d399;font-weight:900;}
.nq-root .pt-noprice {color:var(--text-muted);font-size:11px;}

/* Summary strip */
.nq-root .detail-summary {background:var(--bg-input);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;}
.nq-root .sumrow {
    display:flex;justify-content:space-between;align-items:center;
    padding:10px 14px;border-bottom:1px solid var(--border);
}
.nq-root .sumrow:last-child {border-bottom:none;}
.nq-root .sumrow .lbl {font-size:12px;font-weight:700;color:var(--text-muted);}
.nq-root .sumrow .val {font-size:13px;font-weight:900;color:var(--text);}
.nq-root .sumrow.s-total .val {color:var(--accent);font-size:15px;}

/* ══ EXPORT MODAL ══ */
.nq-root .export-modal-desc {font-size:12.5px;color:var(--text-muted);margin-bottom:14px;line-height:1.6;}
.nq-root .export-stats-bar {
    display:flex;align-items:center;gap:0;
    background:var(--bg-input);border:1px solid var(--card-border);
    border-radius:12px;overflow:hidden;margin-bottom:4px;
}
.nq-root .export-stat {flex:1;text-align:center;padding:10px 8px;}
.nq-root .export-stat-sep {width:1px;background:var(--border);align-self:stretch;}
.nq-root .export-stat-val {font-size:16px;font-weight:900;color:var(--text);}
.nq-root .export-stat-lbl {font-size:10px;color:var(--text-muted);font-weight:700;margin-top:2px;}
.nq-root .export-cards {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.nq-root .export-card {
    border:1.5px solid var(--card-border);border-radius:12px;
    padding:14px;cursor:pointer;position:relative;
    background:var(--bg-input);transition:all var(--dur-fast);text-align:center;
}
.nq-root .export-card:hover {border-color:var(--border-focus);background:var(--bg-hover);}
.nq-root .export-card.sel {border-color:var(--accent);background:var(--warn-bg);}
.nq-root .export-card-check {
    position:absolute;top:8px;left:8px;
    width:18px;height:18px;border-radius:50%;
    background:var(--bg-input);border:1.5px solid var(--card-border);
    display:flex;align-items:center;justify-content:center;
    color:transparent;font-size:10px;transition:all var(--dur-fast);
}
.nq-root .export-card.sel .export-card-check {background:var(--accent);border-color:var(--accent);color:#fff;}
.nq-root .export-card-check svg {width:10px;height:10px;}
.nq-root .export-card-icon {width:36px;height:36px;border-radius:10px;background:var(--bg-hover);display:flex;align-items:center;justify-content:center;color:var(--text-muted);margin:0 auto 8px;}
.nq-root .export-card.sel .export-card-icon {background:rgba(245,158,11,.2);color:var(--accent);}
.nq-root .export-card-icon svg {width:18px;height:18px;}
.nq-root .export-card-title {font-size:13px;font-weight:900;color:var(--text);margin-bottom:4px;}
.nq-root .export-card-sub {font-size:10.5px;color:var(--text-muted);line-height:1.4;}

/* ══ TOAST ══ */
.nq-root .toast-container {position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:2000;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.nq-root .toast {
    display:flex;align-items:center;gap:8px;padding:10px 16px;
    background:rgba(var(--th-n-900-rgb),.95);backdrop-filter:blur(12px);
    border:1px solid var(--card-border);border-radius:12px;
    box-shadow:0 8px 30px rgba(0,0,0,.4);font-size:12.5px;font-weight:700;
    opacity:0;transform:translateY(-12px);transition:all var(--dur-med);
    pointer-events:auto;min-width:220px;max-width:360px;
}
.nq-root .toast.show {opacity:1;transform:translateY(0);}
.nq-root .toast.success {border-color:rgba(16,185,129,.4);color:var(--success);}
.nq-root .toast.error {border-color:rgba(239,68,68,.4);color:var(--danger);}
.nq-root .toast.info {border-color:rgba(59,130,246,.4);color:var(--info);}
.nq-root .toast-icon svg {width:15px;height:15px;}
.nq-root .toast-msg {flex:1;}

/* ══ RESPONSIVE ══ */
@media (max-width:900px) {
    .nq-root .kpi-strip {grid-template-columns:repeat(3,1fr);}
    .nq-root .kpi-card:nth-child(4), .nq-root .kpi-card:nth-child(5) {display:none;}
}
@media (max-width:600px) {
    .nq-root .kpi-strip {grid-template-columns:repeat(2,1fr);}
    .nq-root .kpi-card:nth-child(3) {display:none;}
    .nq-root .filter-bar {gap:6px;}
    .nq-root .sl-search-wrap {width:160px;}
    .nq-root .panel-header-right {padding-right:8px;}
}
@media print {
    .nq-root .panel-header, .nq-root .filter-bar, .nq-root .sl-tabs-bar, .nq-root .sl-footer, .nq-root .modal-header, .nq-root .modal-footer {display:none!important;}
    .nq-root {overflow:auto;}
    .nq-root .sl-table-wrap {overflow:visible;}
}

/* ══════════════════════════════════════════════════════════
   V2 — إضافات خاصة بالتشغيل داخل MainLayout (ليست من Legacy)
══════════════════════════════════════════════════════════ */
.content-area:has(.nq-root) { height: calc(100 * var(--vh)); overflow: hidden; padding: 0; display: flex; flex-direction: column; }
@media (max-width: 480px) { .content-area:has(.nq-root) { padding-top: 60px; } }
.nq-root { flex: 1; min-height: 0; height: auto; position: relative; direction: rtl; }

/* fixed بالـLegacy كان داخل الـiframe — absolute داخل .nq-root يعيد نفس السلوك (النافذة/المنبثقة/الإشعارات). */
.nq-root .modal-overlay, .nq-root .dt-popover-overlay, .nq-root .dt-popover, .nq-root .toast-container { position: absolute; }

/* زر القائمة العام (.mobile-menu-btn، fixed أعلى اليمين 20px+48px): Legacy يحجز 50px داخل الهيدر لزر الـshell؛
   +4px هنا لتطابق عرض زر V2، وعلى الموبايل (Legacy يلغي الحجز ≤600) نُبقيه لأن زر V2 ظاهر بكل المقاسات حتى 480. */
.nq-root .panel-header { padding-right: 20px; }
@media (max-width: 600px) and (min-width: 481px) { .nq-root .panel-header-right { padding-right: 50px; } }