/* تقرير الموردين (/suppliers/reports) — منقول حرفيًا من <style> بـpanels/purchases/suppliers-report.html (Legacy) بتحويل آلي
   (port_legacy_css.py): كل محدِّد مقيَّد بـ.sr-root، :root/html[data-theme=light] → .sr-root/[data-theme=light] .sr-root.
   الإضافات الخاصة بـV2 في آخر الملف. */
.sr-root {
    --bg-card:      rgba(var(--th-n-900-rgb),0.52);
    --bg-input:     rgba(255,255,255,0.05);
    --bg-hover:     rgba(16,185,129,0.07);
    --border:       rgba(255,255,255,0.08);
    --border-focus: rgba(16,185,129,0.65);
    --text:         var(--th-n-200);
    --text-muted:   var(--th-n-500);
    --text-sub:     var(--th-n-400);
    --accent:       #10b981;
    --accent-2:     #059669;
    --accent-3:     #34d399;
    --accent-glow:  rgba(16,185,129,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);
    --radius:       14px;
    --card-border:  rgba(255,255,255,0.07);
    --card-shadow:  0 0 0 1px rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.25);
    --ease-smooth:  cubic-bezier(.22,.61,.36,1);
    --page-bg:      #070d18;
    --cat-1: #059669; --cat-2: #2563eb; --cat-3: #d97706; --cat-4: #0f9b8e; --cat-5: #dc2626;
}
[data-theme="light"] .sr-root {
    --bg-card:      rgba(255,255,255,0.88);
    --bg-input:     rgba(var(--th-n-900-rgb),0.04);
    --bg-hover:     rgba(16,185,129,0.06);
    --border:       rgba(var(--th-n-900-rgb),0.10);
    --border-focus: rgba(16,185,129,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);
    --page-bg:      var(--th-l-2);
}
.sr-root * {box-sizing:border-box;}
.sr-root {margin:0;background:var(--page-bg);color:var(--text);font-family:'Cairo',sans-serif;min-height:calc(100 * var(--vh));transition:background var(--ease-smooth) 200ms,color var(--ease-smooth) 200ms;}
.sr-root .wrap {max-width:1400px;margin:0 auto;padding:20px 22px 60px;}

.sr-root .page-header {display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--bg-card);border:1px solid var(--card-border);border-radius:var(--radius);padding:18px 22px;margin-bottom:16px;box-shadow:var(--card-shadow);backdrop-filter:blur(20px);}
.sr-root .page-header-left {display:flex;align-items:center;gap:14px;}
.sr-root .page-icon {width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;flex-shrink:0;box-shadow:0 8px 20px var(--accent-glow);}
.sr-root .page-title {font-size:17px;font-weight:900;}
.sr-root .page-subtitle {font-size:12px;color:var(--text-muted);margin-top:3px;}
.sr-root .header-actions {display:flex;align-items:center;gap:8px;}
.sr-root .icon-btn {width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--bg-input);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;}
.sr-root .icon-btn:hover {color:var(--text);border-color:var(--border-focus);}
.sr-root .btn-export {display:flex;align-items:center;gap:7px;padding:10px 18px;border-radius:11px;border:none;cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:12.5px;font-weight:800;font-family:inherit;box-shadow:0 8px 20px var(--accent-glow);}
.sr-root .btn-export i {width:15px;height:15px;}

.sr-root .filter-bar {display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg-card);border:1px solid var(--card-border);border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;box-shadow:var(--card-shadow);}
.sr-root .search-wrap {position:relative;flex:1;min-width:200px;}
.sr-root .search-wrap i {position:absolute;top:50%;right:12px;transform:translateY(-50%);width:15px;height:15px;color:var(--text-muted);}
.sr-root .search-inp {width:100%;padding:9px 36px 9px 12px;border-radius:10px;background:var(--bg-input);border:1px solid var(--border);color:var(--text);font-family:inherit;font-size:12.5px;}
.sr-root .filter-select {padding:9px 12px;border-radius:10px;background:var(--bg-input);border:1px solid var(--border);color:var(--text);font-size:12.5px;font-family:inherit;cursor:pointer;min-width:140px;color-scheme:dark;}
[data-theme="light"] .sr-root .filter-select {color-scheme:light;}
.sr-root .filter-select option {background:var(--th-d-6);color:var(--text);}
[data-theme="light"] .sr-root .filter-select option {background:#fff;color:var(--th-n-800);}
.sr-root .chip-toggle {display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;background:var(--bg-input);border:1px solid var(--border);color:var(--text-muted);font-size:12px;font-weight:700;cursor:pointer;}
.sr-root .chip-toggle.active {color:var(--accent);border-color:var(--border-focus);background:var(--accent-glow);}
.sr-root .chip-toggle i {width:14px;height:14px;}

.sr-root .kpi-strip {display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px;}
@media(max-width:1200px) {.sr-root .kpi-strip {grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px) {.sr-root .kpi-strip {grid-template-columns:repeat(2,1fr);}}
.sr-root .kpi-card {position:relative;overflow:hidden;background:var(--bg-card);border:1px solid var(--card-border);border-radius:var(--radius);padding:14px;box-shadow:var(--card-shadow);}
.sr-root .kpi-card::before {content:'';position:absolute;top:0;right:0;left:0;height:3px;background:var(--kc);}
.sr-root .kpi-card.c-green {--kc:#10b981;} .sr-root .kpi-card.c-amber {--kc:#f59e0b;} .sr-root .kpi-card.c-red {--kc:#ef4444;}
.sr-root .kpi-card.c-blue {--kc:#3b82f6;} .sr-root .kpi-card.c-teal {--kc:#2dd4bf;} .sr-root .kpi-card.c-purple {--kc:var(--th-accent2-500);}
.sr-root .kpi-header {display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.sr-root .kpi-label {font-size:10.5px;color:var(--text-muted);font-weight:700;}
.sr-root .kpi-icon {width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--kc) 15%, transparent);color:var(--kc);}
.sr-root .kpi-icon svg {width:14px;height:14px;}
.sr-root .kpi-value {font-size:20px;font-weight:900;}

.sr-root .charts-row {display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
@media(max-width:1000px) {.sr-root .charts-row {grid-template-columns:1fr;}}
.sr-root .chart-card {background:var(--bg-card);border:1px solid var(--card-border);border-radius:var(--radius);padding:18px;box-shadow:var(--card-shadow);}
.sr-root .chart-title {font-size:13px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.sr-root .chart-title i {width:15px;height:15px;color:var(--accent);}

.sr-root .rank-list {display:flex;flex-direction:column;gap:8px;}
.sr-root .rank-item {display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;background:var(--bg-input);}
.sr-root .rank-badge {width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;flex-shrink:0;}
.sr-root .rank-badge.r1 {background:linear-gradient(135deg,#fbbf24,#d97706);color:#fff;}
.sr-root .rank-badge.r2 {background:linear-gradient(135deg,var(--th-n-300),var(--th-n-400));color:var(--th-n-800);}
.sr-root .rank-badge.r3 {background:linear-gradient(135deg,#d97706,#92400e);color:#fff;}
.sr-root .rank-badge.rn {background:var(--bg-hover);color:var(--text-muted);}
.sr-root .rank-name {font-size:12.5px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sr-root .rank-val {font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;}
.sr-root .rank-val.danger {color:var(--danger);}

.sr-root .split-row {display:flex;height:14px;border-radius:100px;overflow:hidden;margin-bottom:14px;background:var(--bg-input);}
.sr-root .split-seg {height:100%;transition:width 500ms var(--ease-smooth);}
.sr-root .split-legend {display:flex;flex-direction:column;gap:9px;}
.sr-root .split-legend-item {display:flex;align-items:center;gap:8px;font-size:12px;}
.sr-root .split-dot {width:9px;height:9px;border-radius:3px;flex-shrink:0;}
.sr-root .split-legend-item b {margin-inline-start:auto;font-variant-numeric:tabular-nums;}

.sr-root .trend-chart {display:flex;align-items:flex-end;gap:4px;height:150px;padding-top:10px;}
.sr-root .trend-bar-wrap {flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative;}
.sr-root .trend-bar {width:100%;max-width:26px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--accent-3),var(--accent-2));transition:height 500ms var(--ease-smooth);cursor:pointer;}
.sr-root .trend-bar:hover {filter:brightness(1.15);}
.sr-root .trend-lbl {font-size:9px;color:var(--text-muted);margin-top:6px;white-space:nowrap;}
.sr-root .trend-tip {position:absolute;bottom:100%;margin-bottom:6px;background:var(--th-d-3);color:#fff;border:1px solid rgba(255,255,255,.12);padding:5px 9px;border-radius:8px;font-size:10.5px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 150ms;box-shadow:0 8px 20px rgba(0,0,0,.4);z-index:5;}
.sr-root .trend-bar-wrap:hover .trend-tip {opacity:1;}

.sr-root .table-card {background:var(--bg-card);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--card-shadow);overflow:hidden;}
.sr-root .table-toolbar {display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);}
.sr-root .table-count {font-size:11.5px;color:var(--text-muted);white-space:nowrap;margin-inline-start:auto;}
.sr-root table {width:100%;border-collapse:collapse;font-size:12.5px;}
.sr-root thead th {position:sticky;top:0;background:var(--bg-card);text-align:right;padding:10px 12px;font-size:10.5px;font-weight:800;color:var(--text-muted);border-bottom:1px solid var(--border);cursor:pointer;user-select:none;white-space:nowrap;}
.sr-root thead th:hover {color:var(--text);}
.sr-root tbody td {padding:10px 12px;border-bottom:1px solid var(--border);}
.sr-root tbody tr {cursor:pointer;}
.sr-root tbody tr:hover {background:var(--bg-hover);}
.sr-root .table-scroll {max-height:560px;overflow:auto;}
.sr-root .empty-state {padding:50px 16px;text-align:center;color:var(--text-muted);font-size:12.5px;}
.sr-root .type-pill {display:inline-flex;align-items:center;padding:4px 10px;border-radius:100px;font-size:10.5px;font-weight:800;}
.sr-root .type-pill.local {background:var(--info-bg);color:var(--info);}
.sr-root .type-pill.import {background:color-mix(in srgb, var(--cat-3) 15%, transparent);color:var(--cat-3);}
.sr-root .trusted-badge {display:inline-flex;align-items:center;gap:4px;color:var(--success);font-size:11px;font-weight:800;}
.sr-root .trusted-badge i {width:13px;height:13px;}
.sr-root .stars {display:inline-flex;gap:1px;}
.sr-root .stars i {width:13px;height:13px;color:var(--th-n-700);}
.sr-root .stars i.filled {color:#fbbf24;fill:#fbbf24;}
.sr-root .debt-val {font-weight:800;}
.sr-root .debt-val.has-debt {color:var(--danger);}

/* ── مودال ملخص مورد ── */
.sr-root .modal-overlay {position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;padding:16px;}
.sr-root .modal-overlay.open {display:flex;}
.sr-root .modal-box {background:var(--page-bg);border:1px solid var(--card-border);border-radius:18px;width:100%;max-width:560px;max-height:calc(85 * var(--vh));overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.5);}
.sr-root .modal-header {display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border);}
.sr-root .modal-title {font-size:15px;font-weight:900;}
.sr-root .modal-sub {font-size:11.5px;color:var(--text-muted);margin-top:3px;}
.sr-root .modal-close {width:32px;height:32px;border-radius:9px;background:var(--bg-input);border:1px solid var(--border);color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.sr-root .modal-body {padding:18px 20px;}
.sr-root .bento {display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px;}
.sr-root .bento-tile {background:var(--bg-input);border:1px solid var(--border);border-radius:12px;padding:12px;}
.sr-root .bento-icon {width:28px;height:28px;border-radius:8px;background:var(--accent-glow);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:8px;}
.sr-root .bento-icon i {width:14px;height:14px;}
.sr-root .bento-val {font-size:16px;font-weight:900;}
.sr-root .bento-lbl {font-size:10px;color:var(--text-muted);margin-top:2px;}
.sr-root .mini-list {display:flex;flex-direction:column;gap:6px;}
.sr-root .mini-list-title {font-size:11.5px;font-weight:800;color:var(--text-muted);margin-bottom:8px;}
.sr-root .mini-item {display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:var(--bg-input);border-radius:9px;font-size:12px;}

@media(max-width:900px) {
    .sr-root .wrap {padding:14px;}
    .sr-root .page-header {flex-direction:column;align-items:stretch;}
    .sr-root .header-actions {justify-content:stretch;}
    .sr-root .btn-export {flex:1;justify-content:center;}
    .sr-root .bento {grid-template-columns:1fr 1fr;}
}

/* ══════════════════════════════════════════════════════════
   V2 — إضافات خاصة بالتشغيل داخل MainLayout (ليست من Legacy)
══════════════════════════════════════════════════════════ */
.content-area:has(.sr-root) { padding: 0; }
@media (max-width: 480px) { .content-area:has(.sr-root) { padding-top: 60px; } }
.sr-root { min-height: calc(100 * var(--vh)); direction: rtl; }
.sr-root .page-header { padding-right: 70px; }
@media (max-width: 480px) { .sr-root .page-header { padding-right: 22px; } }
/* نافذة التفاصيل تبقى fixed زي Legacy: القائمة الجانبية بـV2 درج منزلق بكل المقاسات، فالـviewport = مساحة اللوحة نفسها
   (absolute كان سيوسّطها داخل صفحة طويلة قابلة للتمرير). */
/* عطل Legacy مُصلَح (مُفصَح عنه): ".stars i.filled" لا تنطبق أبدًا لأن lucide يستبدل <i> بـ<svg> — فكل النجوم
   بنفس اللون والتقييم غير مقروء. نفس الألوان المقصودة بالـLegacy على الـsvg. */
.sr-root .stars svg { width: 13px; height: 13px; color: var(--th-n-700); }
.sr-root .stars svg.filled { color: #fbbf24; fill: #fbbf24; }
.sr-root tbody tr { cursor: pointer; }