/* تقرير المشتريات والمرتجعات (/purchases/report) — منقول حرفيًا من <style> بـpanels/purchases/purchases-returns-report.html
   (Legacy) بتحويل آلي (port_legacy_css.py): كل محدِّد مقيَّد بـ.pr-root، :root/html[data-theme=light] → .pr-root/
   [data-theme=light] .pr-root. الإضافات الخاصة بـV2 في آخر الملف. */
.pr-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;
    /* ألوان تصنيفية مُتحقَّق منها عبر dataviz skill (scripts/validate_palette.js) —
       PASS كامل ضوء وظلام: أسباب المرتجعات (5) وطريقة الاسترداد (أول 3) */
    --cat-1: #059669; --cat-2: #2563eb; --cat-3: #d97706; --cat-4: #0f9b8e; --cat-5: #dc2626;
}
[data-theme="light"] .pr-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);
}
.pr-root * {box-sizing:border-box;}
.pr-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;
}
.pr-root .wrap {max-width:1400px;margin:0 auto;padding:20px 22px 60px;}

/* ── هيدر الصفحة ── */
.pr-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);
}
.pr-root .page-header-left {display:flex;align-items:center;gap:14px;}
.pr-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);
}
.pr-root .page-title {font-size:17px;font-weight:900;}
.pr-root .page-subtitle {font-size:12px;color:var(--text-muted);margin-top:3px;}
.pr-root .header-actions {display:flex;align-items:center;gap:8px;}
.pr-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;
}
.pr-root .icon-btn:hover {color:var(--text);border-color:var(--border-focus);}
.pr-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);
}
.pr-root .btn-export i {width:15px;height:15px;}

/* ── شريط الفلاتر ── */
.pr-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);
}
.pr-root .chip-range {display:flex;gap:4px;padding:3px;border-radius:100px;background:var(--bg-input);border:1px solid var(--border);}
.pr-root .chip {padding:7px 14px;border-radius:100px;border:none;background:transparent;color:var(--text-muted);font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;}
.pr-root .chip.active {background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;}
.pr-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"] .pr-root .filter-select {color-scheme:light;}
.pr-root .filter-select option {background:var(--th-d-6);color:var(--text);}
[data-theme="light"] .pr-root .filter-select option {background:#fff;color:var(--th-n-800);}

/* ── KPI ── */
.pr-root .kpi-strip {display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-bottom:16px;}
@media(max-width:1300px) {.pr-root .kpi-strip {grid-template-columns:repeat(4,1fr);}}
@media(max-width:760px) {.pr-root .kpi-strip {grid-template-columns:repeat(2,1fr);}}
.pr-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);
}
.pr-root .kpi-card::before {content:'';position:absolute;top:0;right:0;left:0;height:3px;background:var(--kc);}
.pr-root .kpi-card.c-green {--kc:#10b981;} .pr-root .kpi-card.c-amber {--kc:#f59e0b;} .pr-root .kpi-card.c-red {--kc:#ef4444;}
.pr-root .kpi-card.c-blue {--kc:#3b82f6;} .pr-root .kpi-card.c-teal {--kc:#2dd4bf;} .pr-root .kpi-card.c-purple {--kc:var(--th-accent2-500);}
.pr-root .kpi-header {display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.pr-root .kpi-label {font-size:10.5px;color:var(--text-muted);font-weight:700;}
.pr-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);}
.pr-root .kpi-icon svg {width:14px;height:14px;}
.pr-root .kpi-value {font-size:20px;font-weight:900;}
.pr-root .kpi-sub {font-size:10px;color:var(--text-muted);margin-top:3px;}

/* ── صفوف الرسوم ── */
.pr-root .charts-row {display:grid;grid-template-columns:1.3fr 1fr;gap:14px;margin-bottom:14px;}
@media(max-width:1000px) {.pr-root .charts-row {grid-template-columns:1fr;}}
.pr-root .chart-card {background:var(--bg-card);border:1px solid var(--card-border);border-radius:var(--radius);padding:18px;box-shadow:var(--card-shadow);}
.pr-root .chart-title {font-size:13px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.pr-root .chart-title i {width:15px;height:15px;color:var(--accent);}

.pr-root .trend-chart {display:flex;align-items:flex-end;gap:4px;height:150px;padding-top:10px;}
.pr-root .trend-bar-wrap {flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative;}
.pr-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;}
.pr-root .trend-bar:hover {filter:brightness(1.15);}
.pr-root .trend-lbl {font-size:9px;color:var(--text-muted);margin-top:6px;white-space:nowrap;}
.pr-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;
}
.pr-root .trend-bar-wrap:hover .trend-tip {opacity:1;}

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

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

/* ── جدول ── */
.pr-root .table-card {background:var(--bg-card);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--card-shadow);overflow:hidden;}
.pr-root .table-tabs {display:flex;gap:4px;padding:12px 16px 0;}
.pr-root .table-tab {padding:9px 16px;border-radius:10px 10px 0 0;background:transparent;border:none;color:var(--text-muted);font-size:12.5px;font-weight:800;cursor:pointer;font-family:inherit;}
.pr-root .table-tab.active {background:var(--bg-input);color:var(--accent);}
.pr-root .table-toolbar {display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);}
.pr-root .search-inp {flex:1;padding:9px 12px;border-radius:10px;background:var(--bg-input);border:1px solid var(--border);color:var(--text);font-family:inherit;font-size:12.5px;}
.pr-root .table-count {font-size:11.5px;color:var(--text-muted);white-space:nowrap;}
.pr-root table {width:100%;border-collapse:collapse;font-size:12.5px;}
.pr-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;}
.pr-root thead th:hover {color:var(--text);}
.pr-root tbody td {padding:9px 12px;border-bottom:1px solid var(--border);}
.pr-root tbody tr:hover {background:var(--bg-hover);}
.pr-root .status-pill {display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:100px;font-size:10.5px;font-weight:800;}
.pr-root .status-pill.paid {background:var(--success-bg);color:var(--success);}
.pr-root .status-pill.partial {background:var(--warn-bg);color:var(--warn);}
.pr-root .status-pill.unpaid {background:var(--danger-bg);color:var(--danger);}
.pr-root .status-pill i {width:11px;height:11px;}
.pr-root .table-scroll {max-height:520px;overflow:auto;}
.pr-root .empty-state {padding:50px 16px;text-align:center;color:var(--text-muted);font-size:12.5px;}

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

/* ══════════════════════════════════════════════════════════
   V2 — إضافات خاصة بالتشغيل داخل MainLayout (ليست من Legacy)
══════════════════════════════════════════════════════════ */
.content-area:has(.pr-root) { padding: 0; }
@media (max-width: 480px) { .content-area:has(.pr-root) { padding-top: 60px; } }
.pr-root { min-height: calc(100 * var(--vh)); direction: rtl; }
/* زر القائمة العام (.mobile-menu-btn، fixed أعلى اليمين) — مساحة محجوزة له داخل بطاقة الهيدر (نفس purchase-ops-log). */
.pr-root .page-header { padding-right: 70px; }
@media (max-width: 480px) { .pr-root .page-header { padding-right: 22px; } }