/* ============================================================================
   صفحة الإحصائيات والتقارير — نظام مكوّنات مستقل (بادئة rp-)
   ----------------------------------------------------------------------------
   لماذا بادئة `rp-` وليس `.card`/`.tabs`/`.btn` العامة؟ لأنّ هذه الأسماء
   العامة مأهولة أصلاً في layout.css/dashboard.css بأنماط صفحات أخرى، وأي
   إعادة استخدام لها هنا كانت ستجرّ حشواتها وظلالها معها. كل قاعدة أدناه
   محصورة داخل #reportsPage فلا تتسرّب لصفحة ثالثة.

   الألوان والزوايا والظلال كلّها من توكنات base.css (--primary، --pane-radius،
   --shadow-sm ...) كي يتبع الوضع الليلي (dark.css) ومخصّص الهوية الحيّ
   (settings-theme.js) هذه الصفحة تلقائياً بلا قيمة مكتوبة يدوياً.
   ============================================================================ */

/* ===== 1. الترويسة: أدوات المدى الزمني والتصدير ===== */
/* الترويسة عمودية: أزرار الفلترة/التصدير/الطباعة محاذاة لبداية السطر
   (اليمين في RTL) — لا صفّ واحد ممتد بعرض الصفحة. */
#reportsPage .rp-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}

#reportsPage .rp-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

/* ===== زر الفلترة (ot-btn-filter) — مرآة زر الطلبات/المخزون/العملاء ===== */
/* الفلترة هنا بنمط shadcn الموحّد: زرّ أيقوني دائري واحد يفتح popover
   (rpFilterPop) للمدى الزمني + المقارنة، وتُعرض الحالة كـ chips (rpActiveChips)
   — بدل شريط أزرار المدى المكشوف السابق. */
#reportsPage .ot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--border-main);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-main) 70%, var(--surface-solid));
    color: var(--text-title);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
    white-space: nowrap;
}
#reportsPage .ot-btn:hover {
    background: var(--nav-bg-hover, #ecf2ff);
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border-main));
}
#reportsPage .ot-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
#reportsPage .ot-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    flex: 0 0 16px;
}
#reportsPage .ot-btn[aria-expanded='true'] {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-main));
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border-main));
    color: var(--primary);
}
#reportsPage .ot-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--primary);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-family: var(--app-mono-family);
}
#reportsPage .ot-btn-filter {
    width: 42px;
    padding: 0;
    flex: 0 0 42px;
    justify-content: center;
    border-radius: 999px;
    position: relative;
}
#reportsPage .ot-btn-filter:hover {
    background: color-mix(in srgb, var(--bg-main) 70%, var(--surface-solid));
    border-color: var(--border-main);
    color: var(--text-title);
}
/* إبقاء الشارة فوق الزر كـ overlay حتى لا تُغيّر عرضه */
#reportsPage .ot-btn-filter .ot-badge {
    position: absolute;
    top: -5px;
    inset-inline-start: -5px;
}

/* ===== محتوى نافذة الفلاتر (rpFilterPop) =====
   ⚠️ محصور بمعرّف النافذة لا بـ #reportsPage: النافذة تُنقل إلى جسم المستند
   عند الفتح (surface/floating-menu.js) فلا تنطبق عليها محدّدات الصفحة. الهيكل
   العام (خلفية/حدّ/ظلّ/عناصر ot-view-item) يأتي من orders-cards.css العام. */
#rpFilterPop .rp-custom-range {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 6px 10px 4px;
}
#rpFilterPop .rp-custom-range.is-open {
    display: flex;
}
#rpFilterPop .rp-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
#rpFilterPop .rp-custom-range label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 700;
    flex: 0 0 auto;
}
#rpFilterPop .rp-custom-range input[type='date'] {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    border-radius: 8px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 12px;
}
#rpFilterPop .rp-compare-item input {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

/* ===== الفلاتر النشطة كـ chips قابلة للتحرير (نفس نمط بقية الأسطح) ===== */
#reportsPage .ot-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}
#reportsPage .ot-chips[hidden] {
    display: none;
}
#reportsPage .ot-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 10px;
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-title);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}
#reportsPage .ot-chip:hover {
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border-main));
}
#reportsPage .ot-chip .ot-chip-ico {
    display: inline-flex;
    color: var(--text-secondary);
}
#reportsPage .ot-chip .ot-chip-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
#reportsPage .ot-chip .ot-chip-type {
    font-weight: 700;
}
#reportsPage .ot-chip .ot-chip-op {
    font-size: 10.5px;
    color: var(--text-secondary);
    background: var(--surface-hover);
    padding: 1px 6px;
    border-radius: 999px;
}
#reportsPage .ot-chip .ot-chip-sum {
    color: var(--text-secondary);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#reportsPage .ot-chip .ot-chip-x {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#reportsPage .ot-chip .ot-chip-x:hover {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    color: var(--danger);
}

/* أزرار الترويسة (تصدير/طباعة/تحديث) — حبّة pill بلغة .btn في components.css
   (نُحتفظ ببادئة rp- لأسباب العزل الموثّقة أعلى الملف، لكنّ الشكل هو الشكل) */
#reportsPage .rp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-main);
    background: var(--surface-solid);
    color: var(--text-title);
    font-family: inherit;
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition:
        color 0.15s ease,
        border-color 0.15s ease;
}

#reportsPage .rp-btn:hover {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border-main));
}

#reportsPage .rp-btn svg {
    width: 14px;
    height: 14px;
    flex: none;
}

#reportsPage .rp-btn-primary {
    background: var(--primary);
    color: var(--text-light);
    border-color: transparent;
    box-shadow: var(--shadow-primary);
}

#reportsPage .rp-btn-primary:hover {
    background: var(--primary-hover);
    color: var(--text-light);
    border-color: transparent;
}

#reportsPage .rp-btn-ghost {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--text-secondary);
}

/* زر أيقوني دائري — مطابق لغة .card-act (components.css): دائرة 34px بحدّ
   شعرة وأيقونة SVG، hover يلوّن بالأساسي */
#reportsPage .rp-icon-btn {
    width: 34px;
    height: 34px;
    flex: none;
    border: 1px solid var(--border-main);
    background: var(--surface-solid);
    color: var(--text-secondary);
    border-radius: 999px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

#reportsPage .rp-icon-btn:hover {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-solid));
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 38%, transparent);
}

#reportsPage .rp-icon-btn svg {
    width: 15px;
    height: 15px;
}

/* شريط ملخّص المدى: يشرح للمستخدم أي فترة يقرأ وبأي فترة تُقارَن */
#reportsPage .rp-range-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

#reportsPage .rp-range-note b {
    color: var(--text-title);
    font-weight: 700;
}

/* ===== 2. شريط التابات ===== */
/* حبّات مسطّحة منفصلة — نفس لغة .stats-tabs في صفحتي المخزون والعملاء
   (لا وعاء بطاقة): كل تاب حبّة pill بحدّ، والفعلي مملوء بالأساسي */
#reportsPage .rp-tabs {
    display: flex;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    flex-wrap: wrap;
    overflow-x: auto;
    scrollbar-width: none;
}

#reportsPage .rp-tabs::-webkit-scrollbar {
    display: none;
}

#reportsPage .rp-tab {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid var(--border-main);
    background: var(--surface-main);
    color: var(--text-main);
    font-family: inherit;
    font-weight: 700;
    font-size: 12.5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        background-color 0.15s ease;
}

#reportsPage .rp-tab:hover {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 38%, transparent);
}

#reportsPage .rp-tab.active {
    background: var(--primary);
    color: var(--text-light);
    border-color: transparent;
}

#reportsPage .rp-tab svg {
    width: 16px;
    height: 16px;
    flex: none;
}

#reportsPage .rp-tab-badge {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface-hover);
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 800;
    font-family: var(--app-mono-family);
}

#reportsPage .rp-tab.active .rp-tab-badge {
    background: color-mix(in srgb, #ffffff 26%, transparent);
    color: var(--text-light);
}

#reportsPage .rp-tab-badge:empty {
    display: none;
}

/* لوحات التابات: واحدة ظاهرة في كل مرّة */
#reportsPage .rp-panel {
    display: none;
    flex-direction: column;
    gap: 16px;
}

#reportsPage .rp-panel.active {
    display: flex;
}

/* ===== 3. شريط مؤشّرات الأداء (KPI hero) =====
   البطاقة هي **نفس بطاقة الرئيسية** (‎.kpi06 في kpi-card.css): بطاقة واحدة
   مقسّمة ٤ خانات بفواصل رأسية، أيقونة دائرية بإطار، قيمة كبيرة، ونص سياق +
   شارة اتجاه. ما هنا خصائص التقارير فقط:
   - لون أيقونة كل خانة عبر ‎--kpi06-ink (الرئيسية تصلّبه بمعدِّلات --orders/…).
   - لاحقة العملة/النسبة داخل القيمة (‎.rp-kpi-unit التي يبثّها JS).
   - قيمة نصّية طويلة (اسم منتج) تُصغَّر وتلتفّ. */
#reportsPage .kpi06__icon {
    color: var(--kpi06-ink, var(--primary));
}

#reportsPage .kpi06__value .rp-kpi-unit {
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 600;
    font-family: inherit;
    margin-inline-start: 4px;
}

#reportsPage .kpi06__value.is-text {
    font-size: 16px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* ===== 4. الشبكة والبطاقات ===== */
#reportsPage .rp-grid {
    display: grid;
    gap: 14px;
}

#reportsPage .rp-grid-2 {
    grid-template-columns: 1.6fr 1fr;
}

#reportsPage .rp-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#reportsPage .rp-grid-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

#reportsPage .rp-col-4 {
    grid-column: span 4;
    min-width: 0;
}
#reportsPage .rp-col-5 {
    grid-column: span 5;
    min-width: 0;
}
#reportsPage .rp-col-6 {
    grid-column: span 6;
    min-width: 0;
}
#reportsPage .rp-col-7 {
    grid-column: span 7;
    min-width: 0;
}
#reportsPage .rp-col-8 {
    grid-column: span 8;
    min-width: 0;
}
#reportsPage .rp-col-12 {
    grid-column: span 12;
    min-width: 0;
}

#reportsPage .rp-card {
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: var(--pane-radius);
    padding: 18px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

#reportsPage .rp-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

#reportsPage .rp-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-title);
    letter-spacing: -0.01em;
}

#reportsPage .rp-card-sub {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

#reportsPage .rp-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* حقل بحث داخل البطاقات — لغة حقل بحث الشريط الموحّد (.ot-search في العملاء/
   المخزون) بلا آلية الطي: خلفية ممزوجة، حدّ رئيسي، أيقونة SVG بـ currentColor،
   وتركيز يلوّن الحدّ بالأساسي (حلّ محل .search-box القديم بأيقونته النقطية) */
#reportsPage .rp-search {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    width: 100%;
    max-width: 260px;
    padding: 0 12px;
    background: color-mix(in srgb, var(--bg-main) 70%, var(--surface-solid));
    border: 1px solid var(--border-main);
    border-radius: 10px;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

#reportsPage .rp-search:focus-within {
    border-color: color-mix(in srgb, var(--primary) 50%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

#reportsPage .rp-search-icon {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--text-secondary);
}

#reportsPage .rp-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--text-title);
    padding: 0;
}

#reportsPage .rp-search input::placeholder {
    color: var(--text-secondary);
}

/* مبدّل صغير داخل البطاقات (يومي/أسبوعي/شهري ...) */
#reportsPage .rp-seg {
    display: inline-flex;
    gap: 2px;
    background: var(--bg-main);
    border: 1px solid var(--border-main);
    border-radius: var(--pane-radius);
    padding: 3px;
}

#reportsPage .rp-seg-btn {
    padding: 5px 11px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: calc(var(--pane-radius) - 2px);
    cursor: pointer;
}

#reportsPage .rp-seg-btn.active {
    background: var(--primary);
    color: var(--text-light);
}

/* دليل ألوان صغير (مقياس الخرائط الحرارية / فئات ABC) */
#reportsPage .rp-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}

#reportsPage .rp-legend-swatches {
    display: flex;
    gap: 2px;
}

#reportsPage .rp-legend-swatches i {
    width: 15px;
    height: 12px;
    border-radius: 3px;
    display: block;
}

#reportsPage .rp-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    display: inline-block;
}

/* ===== 5. أوعية الرسوم ===== */
#reportsPage .rp-chart {
    position: relative;
    width: 100%;
    height: 300px;
}

#reportsPage .rp-chart.is-tall {
    height: 360px;
}
#reportsPage .rp-chart.is-short {
    height: 220px;
}
#reportsPage .rp-chart.is-square {
    height: 230px;
    max-width: 260px;
    margin-inline: auto;
}

#reportsPage .rp-chart canvas {
    display: block;
    width: 100% !important;
}

/* رسالة «لا توجد بيانات» — يتحكّم بإظهارها renderReportChart */
#reportsPage .rp-empty {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    font-size: 12.5px;
    color: var(--text-secondary);
}

/* حالة فارغة داخل قائمة/جدول (لا رسم بياني) */
#reportsPage .rp-empty-block {
    padding: 26px 16px;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-secondary);
}

/* ===== 5ب. مخطط «المبيعات حسب يوم الأسبوع» (Weekly KPI — SVG تفاعلي) =====
   ترجمة vanilla لمكوّن weekly-kpi-chart: أعمدة خطّية + حبّة قيمة لليوم المختار
   + عمود تعلية متدرّج خلفه. الحركة CSS خالصة تعوّض framer-motion؛ حركة
   «الدخول» (رسم الخطوط وتتابع الأسماء) مشروطة بالصنف wk-enter الذي يضعه JS
   مرّة واحدة لكل بيانات جديدة، وحركات الإبراز القصيرة تعمل مع كل اختيار. */
#reportsPage .rp-wk {
    width: 100%;
    height: 100%;
}

/* بطاقة المخطّط الأسبوعي: البطاقة عمود flex — الوعاء ينمو ليملأ أي ارتفاع
   زائد (البطاقة المجاورة rp-col-5 بدائرتها وقائمتها كثيراً ما تكون أطول
   فتتمدّد بطاقتنا بالشبكة وتبقى فجوة أسفل الرسم). الارتفاع الأساسي يبقى
   من قاعدة .rp-chart العامة (300px) فيعمل flex-basis:auto به. */
#reportsPage .rp-chart:has(> .rp-wk) {
    flex: 1 1 auto;
    min-height: 300px;
}

#reportsPage .rp-wk svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible; /* حبّة القيمة فوق أقصر عمود قد تعلو حدّ الرسم قليلاً */
}

#reportsPage .rp-wk text {
    font-family: var(--app-font-family);
    user-select: none;
    pointer-events: none;
}

#reportsPage .rp-wk [data-wk-i] {
    cursor: pointer;
    outline: none;
}

#reportsPage .rp-wk [data-wk-i]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* رسم العمود الخطّي: pathLength=1 فيضعف dashoffset الواحد الخطّ كاملاً */
#reportsPage .rp-wk .wk-line {
    stroke-dasharray: 1;
    pointer-events: none;
}

#reportsPage .rp-wk svg.wk-enter .wk-line {
    animation: rp-wk-draw 0.6s ease-out both;
}

#reportsPage .rp-wk svg.wk-enter .wk-day {
    animation: rp-wk-fade 0.4s ease-out both;
}

#reportsPage .rp-wk .wk-grad {
    transform-box: fill-box;
    transform-origin: bottom center;
    animation: rp-wk-rise 0.3s ease-out both;
    pointer-events: none;
}

#reportsPage .rp-wk .wk-pop {
    transform-box: fill-box;
    transform-origin: center;
    animation: rp-wk-pop 0.3s ease-out both;
    pointer-events: none;
}

#reportsPage .rp-wk .wk-fade {
    animation: rp-wk-fade 0.3s ease-out both;
}

@keyframes rp-wk-draw {
    from {
        stroke-dashoffset: 1;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes rp-wk-rise {
    from {
        transform: scaleY(0);
        opacity: 0;
    }
    to {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes rp-wk-pop {
    from {
        transform: scale(0.4);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes rp-wk-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    #reportsPage .rp-wk .wk-grad,
    #reportsPage .rp-wk .wk-pop,
    #reportsPage .rp-wk .wk-fade,
    #reportsPage .rp-wk .wk-day,
    #reportsPage .rp-wk svg.wk-enter .wk-line {
        animation: none;
    }
}

/* ===== 5ج. دونات مصادر الطلبات (ترجمة vanilla لمكوّن donut-chart) =====
   شرائح قوسية بحواف مدوّرة تبدأ من الساعة ١٢، والتمرير على شريحة أو صفّ
   المفتاح يبرزها بهالة من لونها (متغيّر --dzc-glow يضبطه JS لكل شريحة)
   ويعرض قيمتها في المركز. حركة الدخول CSS خالصة مشروطة بالصنف dzc-enter
   الذي يضعه JS مرّة واحدة لكل بيانات جديدة. */
#reportsPage .rp-dzc {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#reportsPage .rp-dzc svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible; /* الشريحة المبرزة تتضخم قليلاً وتتوهّج فلا تُقصّ */
}

#reportsPage .rp-dzc .dzc-seg {
    /* إبراز الشريحة: توهّج بلونها + رفع طفيف (نظير drop-shadow/brightness
       وscale(1.03) في الأصل). fill-box يجعل مركز التحجيم مركز الشريحة نفسها */
    transform-box: fill-box;
    transform-origin: center;
    transition: filter 0.2s ease-out, transform 0.2s ease-out;
}

#reportsPage .rp-dzc .dzc-seg.is-active {
    filter: drop-shadow(0 0 6px var(--dzc-glow)) brightness(1.1);
    transform: scale(1.03);
}

/* رسم الدخول: pathLength=100 على كل شريحة فقيمة 100 = محيط كامل — يتحرّك
   dashoffset من المحيط الكامل إلى قيمته النهائية (من السطر المضمّن؛ الإطار
   «to» الضمني يقرأ القيمة المحسوبة) فتُسحب كل شريحة من موضعها */
#reportsPage .rp-dzc svg.dzc-enter .dzc-seg {
    animation: rp-dzc-draw 1s ease-out both;
}

@keyframes rp-dzc-draw {
    from {
        stroke-dashoffset: 100;
    }
}

/* مركز الدونات: داخل فجوة الحلقة، ولا يلتقط المؤشّر كي لا يعيق تمرير الشرائح */
#reportsPage .rp-dzc .dzc-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

#reportsPage .rp-dzc .dzc-c-swap {
    /* نظير AnimatePresence: كل إحلال innerHTML يشغّل الحركة على المحتوى الجديد */
    width: 100%;
    animation: rp-dzc-pop 0.2s ease-out both;
}

#reportsPage .rp-dzc .dzc-c-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#reportsPage .rp-dzc .dzc-c-value {
    font-size: 30px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.15;
}

#reportsPage .rp-dzc .dzc-c-pct {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

@keyframes rp-dzc-pop {
    from {
        opacity: 0;
        transform: scale(0.94);
    }
}

/* مفتاح المصادر: صفوف تفاعلية يبرز التمرير عليها الشريحة المقابلة */
#reportsPage .dzc-legend {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid var(--border-main);
}

#reportsPage .dzc-leg-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background-color 0.2s ease-out;
}

#reportsPage .dzc-leg-row.is-active {
    background: var(--surface-hover);
}

#reportsPage .dzc-leg-dot {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

#reportsPage .dzc-leg-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#reportsPage .dzc-leg-val {
    flex: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* تتابع ظهور المفاتيح بعد اكتمال رسم الشرائح (0.9s = مدّة الرسم تقريباً).
   صعود خفيف لا انزلاق جانبي — الانزلاق جهةً ثابتة ينقلب في RTL */
#reportsPage .dzc-legend.dzc-enter .dzc-leg-row {
    animation: rp-dzc-slide 0.4s ease-out both;
}

@keyframes rp-dzc-slide {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    #reportsPage .rp-dzc svg.dzc-enter .dzc-seg,
    #reportsPage .rp-dzc .dzc-c-swap,
    #reportsPage .dzc-legend.dzc-enter .dzc-leg-row {
        animation: none;
    }
}

/* ===== 5د. أفضل الأصناف بالإيراد (ترجمة vanilla لمكوّن bar-chart) =====
   مسطّرة أفقية مدوّرة لكل صنف فوق مدرج خلفي بعرض كامل (primary بشفافية
   ٢٠٪): الاسم في بداية المسطّرة (أبيض فوق العمود ولون النص فوق المدرج —
   نسختان بقصّتين من JS)، والإيراد + النسبة في منطقة محجوزة بطرف المدرج.
   الألوان توكنز حيّة فتتبع الوضع الليلي ومخصّص الهوية فوراً بلا إعادة
   رسم، وحركة الدخول مشروطة بالصنف bc-enter مرّة واحدة لكل بيانات جديدة. */
#reportsPage .rp-bc {
    width: 100%;
    height: 100%;
}

/* البطاقة عمود flex — الوعاء ينمو ليملأ أي ارتفاع زائد (نفس فكرة rp-wk) */
#reportsPage .rp-chart:has(> .rp-bc) {
    flex: 1 1 auto;
    min-height: 300px;
}

#reportsPage .rp-bc svg {
    display: block;
    width: 100%;
    height: 100%;
}

#reportsPage .rp-bc text {
    font-family: var(--app-font-family);
    /* إلزامي: المستند dir=rtl يورّث direction لعناصر SVG text فتقلب دلالة
       text-anchor start/end — الأسماء والأرقام كانت تمتد خارج الـviewBox
       (منطقة مقصوصة) فلا تُرى إطلاقاً. LTR يعيد الإحداثيات لسلوكها المتوقّع،
       والعربية تُعرض سليمة عبر bidi داخل السطر. */
    direction: ltr;
    user-select: none;
    pointer-events: none;
}

#reportsPage .rp-bc .bc-track {
    fill: color-mix(in srgb, var(--primary) 20%, transparent);
}

#reportsPage .rp-bc .bc-bar {
    fill: var(--primary);
    transition: filter 0.2s ease-out;
}

#reportsPage .rp-bc .bc-row:hover .bc-bar {
    filter: brightness(1.1);
}

/* كل نصوص الرسم بلون نصّ واحد (--text-main): القرار صريح — نسختا القصّ
   المتقابلتان (أبيض فوق العمود) بدتا لونين مختلفين داخل رسم واحد */
#reportsPage .rp-bc .bc-txt {
    fill: var(--text-main);
}

/* دخول: المسطّرات تنمو من جهة البداية (اليمين في RTL — transform-origin
   على fill-box) وتليها النصوص بتتابع قصير */
#reportsPage .rp-bc svg.bc-enter .bc-bar {
    transform-box: fill-box;
    transform-origin: 100% 50%;
    animation: rp-bc-grow 0.5s ease-out both;
}

#reportsPage .rp-bc svg.bc-enter .bc-txt {
    animation: rp-bc-fade 0.4s ease-out both;
}

@keyframes rp-bc-grow {
    from {
        transform: scaleX(0.03);
        opacity: 0.4;
    }
}

@keyframes rp-bc-fade {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #reportsPage .rp-bc svg.bc-enter .bc-bar,
    #reportsPage .rp-bc svg.bc-enter .bc-txt {
        animation: none;
    }
    #reportsPage .rp-bc .bc-bar {
        transition: none;
    }
}

/* ===== 5هـ. التكلفة مقابل الإيراد لكل حملة (ترجمة vanilla لمكوّن line-charts-1) =====
   مساحة إيراد متدرّجة + خطّ إيراد صلب بنقاط + خطّ تكلفة متقطّع فوق شبكة
   أفقية، مع تلميح HTML وخطّ إشارة رأسي يتبعان أقرب حملة. ألوان السلاسل
   توكنز حيّة (--reports-profit-text/--reports-cost-text) فتتبع الوضع الليلي
   ومخصّص الهوية فوراً بلا إعادة رسم، وحركة الدخول مشروطة بالصنف ccr-enter
   مرّة واحدة لكل بيانات جديدة (fill-mode backwards لا both: بعد انتهاء
   الحركة تعود العناصر لقواعدها الطبيعية فيظلّ تكبير النقاط عند الإبراز
   نافذاً — both كان سيجمّد transform النهائي فوق قاعدة الإبراز). */
#reportsPage .rp-ccr {
    position: relative; /* شاشة التلميح تتموضع داخل الرسم */
    width: 100%;
    height: 100%;
}

/* البطاقة عمود flex — الوعاء ينمو ليملأ أي ارتفاع زائد (نفس فكرة rp-wk/rp-bc) */
#reportsPage .rp-chart:has(> .rp-ccr) {
    flex: 1 1 auto;
    min-height: 300px;
}

#reportsPage .rp-ccr svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* نفس ملاحظة rp-bc: المستند dir=rtl يورّث direction لعناصر SVG text فتقلب
   دلالة text-anchor start/end — LTR يعيد الإحداثيات لسلوكها المتوقّع،
   والعربية تُعرض سليمة عبر bidi داخل السطر. */
#reportsPage .rp-ccr text {
    font-family: var(--app-font-family);
    direction: ltr;
    user-select: none;
    pointer-events: none;
}

#reportsPage .rp-ccr .ccr-grid {
    stroke: var(--border-light);
    stroke-width: 1;
    pointer-events: none;
}

#reportsPage .rp-ccr .ccr-axis-txt {
    fill: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 500;
}

#reportsPage .rp-ccr .ccr-xlab {
    fill: var(--text-secondary);
    font-size: 10.5px;
    transition: fill 0.15s ease-out;
}

#reportsPage .rp-ccr .ccr-col.is-active .ccr-xlab {
    fill: var(--text-main);
    font-weight: 700;
}

#reportsPage .rp-ccr .ccr-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    pointer-events: none;
}

#reportsPage .rp-ccr .ccr-line-rev {
    stroke: var(--reports-profit-text, var(--ready-text));
    /* pathLength=1 + dasharray 1: يُضعف dashoffset الواحدُ الخطَّ كاملاً (حركة الدخول) */
    stroke-dasharray: 1;
}

#reportsPage .rp-ccr .ccr-line-cost {
    stroke: var(--reports-cost-text, var(--danger));
}

/* ألوان توقّف التدرّج تُعرَّف هنا لا في JS: توكن حيّ يتبع الثيم بلا إعادة رسم */
#reportsPage .rp-ccr .ccr-grad-top,
#reportsPage .rp-ccr .ccr-grad-bottom {
    stop-color: var(--reports-profit-text, var(--ready-text));
}

#reportsPage .rp-ccr .ccr-area {
    pointer-events: none;
}

/* نقطة السلسلة: حشوة خلفية صلبة وحدّ بلون سلسلتها (مرآة dot في الأصل) */
#reportsPage .rp-ccr .ccr-dot {
    fill: var(--surface-solid, #fff);
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.15s ease-out;
    pointer-events: none;
}

#reportsPage .rp-ccr .ccr-dot-rev {
    stroke: var(--reports-profit-text, var(--ready-text));
}

#reportsPage .rp-ccr .ccr-dot-cost {
    stroke: var(--reports-cost-text, var(--danger));
}

#reportsPage .rp-ccr .ccr-col.is-active .ccr-dot {
    transform: scale(1.4);
}

/* خطّ الإشارة الرأسي (نظير tooltip cursor في recharts) */
#reportsPage .rp-ccr .ccr-cursor {
    stroke: var(--border-main);
    stroke-width: 1;
    opacity: 0;
    transition: opacity 0.15s ease-out;
    pointer-events: none;
}

#reportsPage .rp-ccr .ccr-cursor.is-on {
    opacity: 1;
}

/* شاشة التلميح (نظير CustomTooltip في الأصل) */
#reportsPage .rp-ccr .ccr-tip {
    position: absolute;
    z-index: 5;
    min-width: 190px;
    padding: 10px 12px;
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    font-size: 11.5px;
    pointer-events: none; /* لا تحجب مؤشّر المستخدم فلا ترتجف */
}

#reportsPage .rp-ccr .ccr-tip-name {
    margin-bottom: 6px;
    font-weight: 700;
    color: var(--text-main);
}

#reportsPage .rp-ccr .ccr-tip-plat {
    margin-inline-start: 6px;
    font-weight: 500;
    font-size: 10.5px;
    color: var(--text-secondary);
}

#reportsPage .rp-ccr .ccr-tip-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-block: 2px;
    color: var(--text-secondary);
}

#reportsPage .rp-ccr .ccr-tip-dot {
    width: 8px;
    height: 8px;
    border-radius: 3px;
    flex-shrink: 0;
}

#reportsPage .rp-ccr .ccr-tip-val {
    margin-inline-start: auto;
    font-weight: 650;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

#reportsPage .rp-ccr .ccr-tip-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px dashed var(--border-main);
    font-size: 11px;
    color: var(--text-secondary);
}

/* مفتاح السلسلتين في رأس البطاقة (نظير ChartLabel في الأصل) */
#reportsPage .ccr-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: var(--text-secondary);
}

#reportsPage .ccr-leg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#reportsPage .ccr-leg i {
    width: 9px;
    height: 9px;
    border-radius: 3px;
}

/* دخول: الشبكة والمحاور تظهر، المساحة تنهض من الأسفل، خطّ الإيراد يُرسم
   (dashoffset)، خطّ التكلفة يُكشف من جهة المحور (اليمين) عبر قصّ scaleX
   على مستطيل القصّ، والنقاط تنبض بتتابع قصير */
#reportsPage .rp-ccr svg.ccr-enter .ccr-grid,
#reportsPage .rp-ccr svg.ccr-enter .ccr-axis-txt,
#reportsPage .rp-ccr svg.ccr-enter .ccr-xlab {
    animation: rp-ccr-fade 0.5s ease-out backwards;
}

#reportsPage .rp-ccr svg.ccr-enter .ccr-area {
    transform-box: fill-box;
    transform-origin: bottom center;
    animation: rp-ccr-rise 0.6s ease-out backwards;
}

#reportsPage .rp-ccr svg.ccr-enter .ccr-line-rev {
    animation: rp-ccr-draw 0.7s ease-out backwards;
}

#reportsPage .rp-ccr svg.ccr-enter .ccr-clip-rect {
    transform-box: fill-box;
    transform-origin: 100% 50%;
    animation: rp-ccr-grow 0.7s ease-out 0.1s backwards;
}

#reportsPage .rp-ccr svg.ccr-enter .ccr-dot {
    animation: rp-ccr-pop 0.35s ease-out backwards;
}

@keyframes rp-ccr-fade {
    from {
        opacity: 0;
    }
}

@keyframes rp-ccr-rise {
    from {
        transform: scaleY(0);
        opacity: 0;
    }
}

@keyframes rp-ccr-draw {
    from {
        stroke-dashoffset: 1;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes rp-ccr-grow {
    from {
        transform: scaleX(0);
    }
}

@keyframes rp-ccr-pop {
    from {
        transform: scale(0.4);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #reportsPage .rp-ccr svg.ccr-enter .ccr-grid,
    #reportsPage .rp-ccr svg.ccr-enter .ccr-axis-txt,
    #reportsPage .rp-ccr svg.ccr-enter .ccr-xlab,
    #reportsPage .rp-ccr svg.ccr-enter .ccr-area,
    #reportsPage .rp-ccr svg.ccr-enter .ccr-line-rev,
    #reportsPage .rp-ccr svg.ccr-enter .ccr-clip-rect,
    #reportsPage .rp-ccr svg.ccr-enter .ccr-dot {
        animation: none;
    }
    #reportsPage .rp-ccr .ccr-dot,
    #reportsPage .rp-ccr .ccr-cursor,
    #reportsPage .rp-ccr .ccr-xlab {
        transition: none;
    }
}

/* ===== 5و. تحليل ABC/باريتو (ترجمة vanilla على نهج line-charts-1) =====
   أعمدة الإيراد بلون فئتها (A/B/C — جاهز/قيد التوصيل/ملغي) + خطّ النسبة
   التراكمية بنقاط + حدّ A عند ٨٠٪، فوق شبكة أفقية متقطّعة، مع تلميح HTML
   وخطّ إشارة يتبعان أقرب صنف. ألوان الفئات والخطّ توكنز CSS حيّة فتتبع
   الوضع الليلي ومخصّص الهوية فوراً بلا إعادة رسم، وحركة الدخول مشروطة
   بالصنف pab-enter مرّة واحدة لكل بيانات جديدة، وتُعاد استخدام إطارات
   rp-ccr-* (دلالاتها مطابقة: نهوض/رسم/نبض/تلاشٍ — backwards لا both كي
   لا يجمّد transform النهائي تكبيرَ الإبراز). */
#reportsPage .rp-pab {
    position: relative; /* شاشة التلميح تتموضع داخل الرسم */
    width: 100%;
    height: 100%;
}

/* البطاقة عمود flex — الوعاء ينمو ليملأ أي ارتفاع زائد (نفس فكرة rp-wk/rp-bc/rp-ccr) */
#reportsPage .rp-chart:has(> .rp-pab) {
    flex: 1 1 auto;
    min-height: 300px;
}

#reportsPage .rp-pab svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* نفس ملاحظة rp-bc/rp-ccr: المستند dir=rtl يورّث direction لعناصر SVG text
   فتقلب دلالة text-anchor start/end — LTR يعيد الإحداثيات لسلوكها المتوقّع،
   والعربية تُعرض سليمة عبر bidi داخل السطر. */
#reportsPage .rp-pab text {
    font-family: var(--app-font-family);
    direction: ltr;
    user-select: none;
    pointer-events: none;
}

#reportsPage .rp-pab .pab-grid {
    stroke: var(--border-light);
    stroke-width: 1;
    pointer-events: none;
}

#reportsPage .rp-pab .pab-axis-txt {
    fill: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 500;
}

#reportsPage .rp-pab .pab-ref {
    stroke: var(--text-muted);
    stroke-width: 1;
    opacity: 0.75;
    pointer-events: none;
}

#reportsPage .rp-pab .pab-ref-txt {
    fill: var(--text-muted);
    font-size: 9.5px;
}

#reportsPage .rp-pab .pab-xlab {
    fill: var(--text-secondary);
    font-size: 10.5px;
    transition: fill 0.15s ease-out;
}

#reportsPage .rp-pab [data-pab-i].is-active .pab-xlab {
    fill: var(--text-main);
    font-weight: 700;
}

/* لون العمود = فئة صنفه التراكمية (توكنز حيّة تتبع الثيم بلا إعادة رسم) */
#reportsPage .rp-pab .pab-bar {
    transition: filter 0.15s ease-out;
}

#reportsPage .rp-pab .pab-bar-a {
    fill: var(--ready-text);
}

#reportsPage .rp-pab .pab-bar-b {
    fill: var(--delivering-text);
}

#reportsPage .rp-pab .pab-bar-c {
    fill: var(--cancelled-text);
}

#reportsPage .rp-pab [data-pab-i].is-active .pab-bar {
    filter: brightness(1.12);
}

/* خطّ النسبة التراكمية: pathLength=1 + dasharray 1 — dashoffset الواحد
   يُضعف الخطَّ كاملاً (حركة الدخول) */
#reportsPage .rp-pab .pab-line {
    fill: none;
    stroke: var(--primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    pointer-events: none;
}

/* نقطة التراكمي: حشوة خلفية صلبة وحدّ بلون الخطّ (مرآة dot في الأصل) */
#reportsPage .rp-pab .pab-dot {
    fill: var(--surface-solid, #fff);
    stroke: var(--primary);
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.15s ease-out;
    pointer-events: none;
}

#reportsPage .rp-pab .pab-dot.is-active {
    transform: scale(1.45);
}

/* خطّ الإشارة الرأسي (نظير tooltip cursor في recharts) */
#reportsPage .rp-pab .pab-cursor {
    stroke: var(--border-main);
    stroke-width: 1;
    opacity: 0;
    transition: opacity 0.15s ease-out;
    pointer-events: none;
}

#reportsPage .rp-pab .pab-cursor.is-on {
    opacity: 1;
}

/* شاشة التلميح (نظير CustomTooltip في الأصل) — بلا أحداث مؤشّر فلا ترتجف */
#reportsPage .rp-pab .pab-tip {
    position: absolute;
    z-index: 5;
    min-width: 190px;
    padding: 10px 12px;
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    font-size: 11.5px;
    pointer-events: none;
}

#reportsPage .rp-pab .pab-tip-name {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-weight: 700;
    color: var(--text-main);
}

#reportsPage .rp-pab .pab-tip-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-block: 2px;
    color: var(--text-secondary);
}

#reportsPage .rp-pab .pab-tip-dot {
    width: 8px;
    height: 8px;
    border-radius: 3px;
    flex-shrink: 0;
}

#reportsPage .rp-pab .pab-tip-val {
    margin-inline-start: auto;
    font-weight: 650;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

#reportsPage .rp-pab .pab-tip-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px dashed var(--border-main);
    font-size: 11px;
    color: var(--text-secondary);
}

/* دخول: الشبكة والمحاور تظهر، الأعمدة تنهض من خطّ الصفر بتتابع، ثم يُرسم
   الخطّ التراكمي وتنبض نقاطه فوقه */
#reportsPage .rp-pab svg.pab-enter .pab-grid,
#reportsPage .rp-pab svg.pab-enter .pab-axis-txt,
#reportsPage .rp-pab svg.pab-enter .pab-xlab,
#reportsPage .rp-pab svg.pab-enter .pab-ref {
    animation: rp-ccr-fade 0.5s ease-out backwards;
}

#reportsPage .rp-pab svg.pab-enter .pab-bar {
    transform-box: fill-box;
    transform-origin: bottom center;
    animation: rp-ccr-rise 0.5s ease-out backwards;
}

#reportsPage .rp-pab svg.pab-enter .pab-line {
    animation: rp-ccr-draw 0.7s ease-out 0.3s backwards;
}

#reportsPage .rp-pab svg.pab-enter .pab-dot {
    animation: rp-ccr-pop 0.35s ease-out backwards;
}

@media (prefers-reduced-motion: reduce) {
    #reportsPage .rp-pab svg.pab-enter .pab-grid,
    #reportsPage .rp-pab svg.pab-enter .pab-axis-txt,
    #reportsPage .rp-pab svg.pab-enter .pab-xlab,
    #reportsPage .rp-pab svg.pab-enter .pab-ref,
    #reportsPage .rp-pab svg.pab-enter .pab-bar,
    #reportsPage .rp-pab svg.pab-enter .pab-line,
    #reportsPage .rp-pab svg.pab-enter .pab-dot {
        animation: none;
    }
    #reportsPage .rp-pab .pab-bar,
    #reportsPage .rp-pab .pab-dot,
    #reportsPage .rp-pab .pab-cursor,
    #reportsPage .rp-pab .pab-xlab {
        transition: none;
    }
}

/* ===== 5ح. الخط الزمني: تطوّر المبيعات والطلبات (ترجمة vanilla على نهج line-charts-1) =====
   أعمدة المبيعات بقمم مدوّرة + خطّ الطلبات على مقياس ثانٍ + خطّ الفترة السابقة
   متقطّعاً، فوق شبكة أفقية متقطّعة، مع تلميح HTML وخطّ إشارة يتبعان أقرب دلو.
   ألوان السلاسل توكنز CSS حيّة فتتبع الوضع الليلي ومخصّص الهوية فوراً بلا
   إعادة رسم، وحركة الدخول مشروطة بالصنف tml-enter مرّة واحدة لكل بيانات
   جديدة، وتُعاد استخدام إطارات rp-ccr-* (backwards لا both كي لا يجمّد
   transform النهائي تكبيرَ الإبراز). */
#reportsPage .rp-tml {
    position: relative; /* شاشة التلميح تتموضع داخل الرسم */
    width: 100%;
    height: 100%;
}

/* البطاقة عمود flex — الوعاء ينمو ليملأ أي ارتفاع زائد (نفس فكرة rp-wk/rp-bc/rp-ccr/rp-pab) */
#reportsPage .rp-chart:has(> .rp-tml) {
    flex: 1 1 auto;
    min-height: 300px;
}

#reportsPage .rp-tml svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* نفس ملاحظة rp-bc/rp-ccr/rp-pab: المستند dir=rtl يورّث direction لعناصر SVG
   text فتقلب دلالة text-anchor start/end — LTR يعيد الإحداثيات لسلوكها
   المتوقّع، والعربية تُعرض سليمة عبر bidi داخل السطر. */
#reportsPage .rp-tml text {
    font-family: var(--app-font-family);
    direction: ltr;
    user-select: none;
    pointer-events: none;
}

#reportsPage .rp-tml .tml-grid {
    stroke: var(--border-light);
    stroke-width: 1;
    pointer-events: none;
}

#reportsPage .rp-tml .tml-axis-txt {
    fill: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 500;
}

#reportsPage .rp-tml .tml-xlab {
    fill: var(--text-secondary);
    font-size: 10.5px;
    transition: fill 0.15s ease-out;
}

#reportsPage .rp-tml .tml-col.is-active .tml-xlab {
    fill: var(--text-main);
    font-weight: 700;
}

/* عمود المبيعات: توكن حيّ يتبع الثيم بلا إعادة رسم */
#reportsPage .rp-tml .tml-bar {
    fill: var(--primary);
    transition: filter 0.15s ease-out;
}

#reportsPage .rp-tml .tml-col.is-active .tml-bar {
    filter: brightness(1.12);
}

/* خطّ الطلبات (مقياس يسار): pathLength=1 + dasharray 1 — dashoffset الواحد
   يُضعف الخطَّ كاملاً (حركة الدخول) */
#reportsPage .rp-tml .tml-line {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

#reportsPage .rp-tml .tml-line-ord {
    stroke: var(--accent);
    stroke-dasharray: 1;
}

/* خطّ الفترة السابقة: أرفع ومتقطّع (لغة ‎.sc-prev‎ في الرئيسية) */
#reportsPage .rp-tml .tml-line-prev {
    stroke: var(--text-muted);
    stroke-width: 1.75;
}

/* نقطة الطلبات: حشوة خلفية صلبة وحدّ بلون الخطّ (مرآة dot في الأصل) */
#reportsPage .rp-tml .tml-dot {
    fill: var(--surface-solid, #fff);
    stroke: var(--accent);
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.15s ease-out;
    pointer-events: none;
}

#reportsPage .rp-tml .tml-dot.is-active {
    transform: scale(1.45);
}

/* خطّ الإشارة الرأسي (نظير tooltip cursor في recharts) */
#reportsPage .rp-tml .tml-cursor {
    stroke: var(--border-main);
    stroke-width: 1;
    opacity: 0;
    transition: opacity 0.15s ease-out;
    pointer-events: none;
}

#reportsPage .rp-tml .tml-cursor.is-on {
    opacity: 1;
}

/* شاشة التلميح (نظير CustomTooltip في الأصل) — بلا أحداث مؤشّر فلا ترتجف */
#reportsPage .rp-tml .tml-tip {
    position: absolute;
    z-index: 5;
    min-width: 190px;
    padding: 10px 12px;
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    font-size: 11.5px;
    pointer-events: none;
}

#reportsPage .rp-tml .tml-tip-name {
    margin-bottom: 6px;
    font-weight: 700;
    color: var(--text-main);
}

#reportsPage .rp-tml .tml-tip-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-block: 2px;
    color: var(--text-secondary);
}

#reportsPage .rp-tml .tml-tip-dot {
    width: 8px;
    height: 8px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* نقطة سطر الفترة السابقة: مربّع متقطّع الحدود (نظير indicator=dashed) */
#reportsPage .rp-tml .tml-tip-prev {
    background: transparent;
    border: 1.5px dashed var(--text-muted);
    width: 7px;
    height: 7px;
}

#reportsPage .rp-tml .tml-tip-val {
    margin-inline-start: auto;
    font-weight: 650;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

#reportsPage .rp-tml .tml-tip-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px dashed var(--border-main);
    font-size: 11px;
    color: var(--text-secondary);
}

/* دخول: الشبكة والمحاور تظهر، الأعمدة تنهض من خطّ الصفر بتتابع، ثم يُرسم
   خطّ الطلبات وتنبض نقاطه، وخطّ الفترة السابقة يكتمل لونه بالتلاشي (لغة
   ‎.sc-prev‎ — لا ينمو من الأسفل) */
#reportsPage .rp-tml svg.tml-enter .tml-grid,
#reportsPage .rp-tml svg.tml-enter .tml-axis-txt,
#reportsPage .rp-tml svg.tml-enter .tml-xlab {
    animation: rp-ccr-fade 0.5s ease-out backwards;
}

#reportsPage .rp-tml svg.tml-enter .tml-bar {
    transform-box: fill-box;
    transform-origin: bottom center;
    animation: rp-ccr-rise 0.5s ease-out backwards;
}

#reportsPage .rp-tml svg.tml-enter .tml-line-ord {
    animation: rp-ccr-draw 0.7s ease-out 0.25s backwards;
}

#reportsPage .rp-tml svg.tml-enter .tml-line-prev {
    animation: rp-ccr-fade 0.4s ease-out 0.3s backwards;
}

#reportsPage .rp-tml svg.tml-enter .tml-dot {
    animation: rp-ccr-pop 0.35s ease-out backwards;
}

@media (prefers-reduced-motion: reduce) {
    #reportsPage .rp-tml svg.tml-enter .tml-grid,
    #reportsPage .rp-tml svg.tml-enter .tml-axis-txt,
    #reportsPage .rp-tml svg.tml-enter .tml-xlab,
    #reportsPage .rp-tml svg.tml-enter .tml-bar,
    #reportsPage .rp-tml svg.tml-enter .tml-line-ord,
    #reportsPage .rp-tml svg.tml-enter .tml-line-prev,
    #reportsPage .rp-tml svg.tml-enter .tml-dot {
        animation: none;
    }
    #reportsPage .rp-tml .tml-bar,
    #reportsPage .rp-tml .tml-dot,
    #reportsPage .rp-tml .tml-cursor,
    #reportsPage .rp-tml .tml-xlab {
        transition: none;
    }
}

/* ===== 6. الرؤى الذكية ===== */
#reportsPage .rp-insight {
    display: flex;
    gap: 11px;
    padding: 13px;
    border-radius: var(--pane-radius);
    background: var(--bg-main);
    border: 1px solid var(--border-main);
    border-inline-start: 3px solid var(--rp-accent, var(--info));
    align-items: flex-start;
}

#reportsPage .rp-insight-ico {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 999px;
    border: 1px solid var(--border-main);
    background: transparent;
    color: var(--rp-accent, var(--info));
    display: grid;
    place-items: center;
}

#reportsPage .rp-insight-ico svg {
    width: 17px;
    height: 17px;
}

#reportsPage .rp-insight-body {
    flex: 1;
    min-width: 0;
}

#reportsPage .rp-insight-body h4 {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-title);
}

#reportsPage .rp-insight-body p {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.6;
}

#reportsPage .rp-insight-body b {
    color: var(--text-title);
    font-weight: 800;
}

#reportsPage .rp-insight-meta {
    display: flex;
    gap: 7px;
    margin-top: 7px;
    font-size: 11px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

#reportsPage .rp-insight.success {
    --rp-accent: var(--ready-text);
}
#reportsPage .rp-insight.warning {
    --rp-accent: var(--delivering-text);
}
#reportsPage .rp-insight.danger {
    --rp-accent: var(--cancelled-text);
}
#reportsPage .rp-insight.info {
    --rp-accent: var(--primary);
}

/* ===== 7. قوائم الترتيب (Top N) ===== */
#reportsPage .rp-rank {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#reportsPage .rp-rank-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 9px;
    border-radius: calc(var(--pane-radius) + 1px);
    transition: background 0.15s ease;
}

#reportsPage .rp-rank-item:hover {
    background: var(--surface-hover);
}

#reportsPage .rp-rank-num {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: var(--surface-hover);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
}

#reportsPage .rp-rank-item.top-1 .rp-rank-num {
    background: color-mix(in srgb, var(--delivering-text) 18%, transparent);
    color: var(--delivering-text);
}

#reportsPage .rp-rank-item.top-2 .rp-rank-num {
    background: color-mix(in srgb, var(--new-text) 18%, transparent);
    color: var(--new-text);
}

#reportsPage .rp-rank-item.top-3 .rp-rank-num {
    background: color-mix(in srgb, var(--ready-text) 18%, transparent);
    color: var(--ready-text);
}

#reportsPage .rp-rank-name {
    flex: 1 1 40%;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-title);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#reportsPage .rp-rank-bar {
    flex: 1 1 30%;
    height: 6px;
    background: var(--surface-hover);
    border-radius: 999px;
    overflow: hidden;
    min-width: 40px;
}

#reportsPage .rp-rank-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-soft), var(--primary));
}

#reportsPage .rp-rank-val {
    flex: none;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-title);
    min-width: 62px;
    text-align: end;
    font-family: var(--app-font-family);
    font-variant-numeric: tabular-nums;
}

/* ===== 8. الجداول ===== */
#reportsPage .rp-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--pane-radius);
}

#reportsPage table.rp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

/* ترويسة جداول التقارير: مطابقة حرفياً لترويسة جدول الطلبات (نص Title بحجم
   13 ووزن 600 على خلفية الترويسة الموحّدة) — كانت 11.5/800 uppercase ثانوية اللون. */
#reportsPage .rp-table thead th {
    padding: var(--table-header-padding, 12px 14px);
    text-align: start;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-title);
    background: var(--table-header-bg);
    border-bottom: 1px solid var(--table-header-border);
    white-space: nowrap;
}

#reportsPage .rp-table thead th.is-sortable {
    cursor: pointer;
    user-select: none;
}

#reportsPage .rp-table thead th.is-sortable:hover {
    color: var(--primary);
}

#reportsPage .rp-table thead th .rp-sort-ind {
    font-size: 9px;
    margin-inline-start: 4px;
    opacity: 0.45;
}

#reportsPage .rp-table thead th.is-sorted .rp-sort-ind {
    opacity: 1;
    color: var(--primary);
}

#reportsPage .rp-table tbody td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-main);
    white-space: nowrap;
}

#reportsPage .rp-table tbody tr:last-child td {
    border-bottom: 0;
}

#reportsPage .rp-table tbody tr:hover {
    background: var(--surface-hover);
}

#reportsPage .rp-table tbody tr.is-clickable {
    cursor: pointer;
}

#reportsPage .rp-num {
    font-family: var(--app-font-family);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

#reportsPage .rp-ltr {
    direction: ltr;
    text-align: end;
    unicode-bidi: isolate;
}

#reportsPage .rp-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#reportsPage .rp-pill.up {
    background: color-mix(in srgb, var(--ready-text) 14%, transparent);
    color: var(--ready-text);
}

#reportsPage .rp-pill.down {
    background: color-mix(in srgb, var(--cancelled-text) 14%, transparent);
    color: var(--cancelled-text);
}

#reportsPage .rp-pill.warn {
    background: color-mix(in srgb, var(--delivering-text) 15%, transparent);
    color: var(--delivering-text);
}

#reportsPage .rp-pill.flat {
    background: var(--surface-hover);
    color: var(--text-muted);
}

#reportsPage .rp-bar {
    width: 110px;
    height: 6px;
    background: var(--surface-hover);
    border-radius: 999px;
    overflow: hidden;
}

#reportsPage .rp-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-soft), var(--primary));
}

#reportsPage .rp-money-pos {
    color: var(--ready-text);
    font-weight: 800;
}
#reportsPage .rp-money-neg {
    color: var(--cancelled-text);
    font-weight: 800;
}

/* ===== 9. الخريطة الحرارية: ساعة × يوم ===== */
#reportsPage .rp-heat {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 6px;
    align-items: stretch;
}

#reportsPage .rp-heat-rows {
    display: grid;
    gap: 3px;
}

/* أسماء الأيام تُقسَّم على ٧ صفوف متساوية بدل الحجم بالمحتوى — وإلا انزلقت
   عن صفوف الخلايا (التي يحدّد ارتفاعها aspect-ratio). */
#reportsPage .rp-heat-labels {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    gap: 3px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
}

#reportsPage .rp-heat-labels span {
    display: flex;
    align-items: center;
    min-height: 0;
}

#reportsPage .rp-heat-row {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    gap: 3px;
}

#reportsPage .rp-heat-cell {
    aspect-ratio: 1;
    min-height: 12px;
    border-radius: 3px;
    background: var(--surface-hover);
}

#reportsPage .rp-heat-cell[data-level='1'] {
    background: color-mix(in srgb, var(--primary) 20%, transparent);
}
#reportsPage .rp-heat-cell[data-level='2'] {
    background: color-mix(in srgb, var(--primary) 38%, transparent);
}
#reportsPage .rp-heat-cell[data-level='3'] {
    background: color-mix(in srgb, var(--primary) 58%, transparent);
}
#reportsPage .rp-heat-cell[data-level='4'] {
    background: color-mix(in srgb, var(--primary) 78%, transparent);
}
#reportsPage .rp-heat-cell[data-level='5'] {
    background: var(--primary);
}

#reportsPage .rp-heat-hours {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    gap: 3px;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
    margin-top: 2px;
}

/* ===== 10. طبقة القفل (موجودة مسبقاً في dashboard.css — هنا فقط ضبط الطبقة) ===== */
#reportsPage .rp-locked-blur {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}

/* ===== 11. الاستجابة ===== */
/* بطاقة kpi06 لها استجابتها الخاصة في kpi-card.css (صفّان على التابلت وعمود
   على الجوال) فلا تُكرَّر هنا */
@media (max-width: 1200px) {
    #reportsPage .rp-grid-2,
    #reportsPage .rp-grid-3 {
        grid-template-columns: 1fr;
    }
    #reportsPage .rp-col-4,
    #reportsPage .rp-col-5,
    #reportsPage .rp-col-6,
    #reportsPage .rp-col-7,
    #reportsPage .rp-col-8 {
        grid-column: span 12;
    }
}

@media (max-width: 760px) {
    #reportsPage .rp-card {
        padding: 14px;
    }
    #reportsPage .rp-chart {
        height: 260px;
    }
    #reportsPage .rp-chart:has(> .rp-wk) {
        min-height: 240px;
    }
    #reportsPage .rp-chart.is-tall {
        height: 300px;
    }
    #reportsPage .rp-heat {
        grid-template-columns: 34px 1fr;
    }
}

/* ===== 12. الطباعة / تصدير PDF =====
   مشروطة بـ body.rp-printing (يضعها printReportsPage() قبل النداء ويرفعها عند
   afterprint) لا بـ @media print وحدها: هذا الملف يُحمَّل في كل الصفحات، وطباعة
   صفحة أخرى يجب ألّا تُخفي شريطها الجانبي أو تفتح لوحات التقارير المخفيّة. */
@media print {
    body.rp-printing .sidebar,
    body.rp-printing .topbar,
    body.rp-printing .colorFab,
    body.rp-printing #reportsPage .rp-controls,
    body.rp-printing #reportsPage .ot-chips,
    body.rp-printing #reportsPage .rp-tabs,
    body.rp-printing #reportsPage .rp-card-actions {
        display: none !important;
    }
    body.rp-printing .page {
        border: 0;
        box-shadow: none;
        padding: 0;
    }
    /* كل التابات تُطبع، كلٌّ في صفحة */
    body.rp-printing #reportsPage .rp-panel {
        display: flex !important;
        break-before: page;
    }
    body.rp-printing #reportsPage .rp-panel:first-of-type {
        break-before: auto;
    }
    body.rp-printing #reportsPage .rp-card,
    body.rp-printing #reportsPage .kpi06 {
        break-inside: avoid;
        box-shadow: none;
    }
}

/* ===== 13. تعديلات الوضع الليلي ===== */
body.dark-mode #reportsPage .rp-table thead th {
    background: var(--table-header-bg);
}

body.dark-mode #reportsPage .rp-insight {
    background: color-mix(in srgb, var(--surface-hover) 60%, transparent);
}

/* dark.css يقلب ألوان كل <img> داخل #reportsPage (brightness(0) invert(1)).
   أيقونات هذه الصفحة كلّها SVG بـ currentColor، لكن أي صورة منتج في الجداول
   يجب أن تبقى بلونها الأصلي. */
body.dark-mode #reportsPage .rp-thumb {
    filter: none !important;
}

#reportsPage .rp-thumb {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    object-fit: cover;
    flex: none;
    background: var(--surface-hover);
}

#reportsPage .rp-cell-name {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    color: var(--text-title);
    max-width: 260px;
}

#reportsPage .rp-cell-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== 14. مودال «منتجات الحملة» الانتقالي =====
   يُبنى ديناميكياً في reports-products.js ويُلحق بـ body، لذلك بلا حصر
   #reportsPage. الكروم مطابق عائلة مودالات التفاصيل في order-details.css:
   تعتيم ضبابي blur(6px) + بطاقة --radius-xl + زر إغلاق دائري بلغة card-act */
.rp-cmodal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: var(--z-modal, 1001);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.rp-cmodal-card {
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: var(--radius-xl);
    max-width: 680px;
    width: 100%;
    max-height: 82vh;
    overflow: auto;
    box-shadow: var(--shadow-lg);
}

.rp-cmodal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid var(--border-main);
    position: sticky;
    top: 0;
    background: var(--surface-solid);
    z-index: 1;
}

.rp-cmodal-title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--text-title);
}

.rp-cmodal-sub {
    margin: 5px 0 0;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.rp-cmodal-body {
    padding: 16px 20px;
}

.rp-cmodal-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-main);
    border-top: 1px solid var(--border-main);
    font-size: 12.5px;
    color: var(--text-secondary);
    position: sticky;
    bottom: 0;
}

.rp-cmodal-foot b {
    color: var(--text-title);
}

/* زر الإغلاق — نفس لغة .rp-icon-btn/#card-act، مكرّرة هنا لأنّ المودال يُلحق
   بـ body خارج حصر #reportsPage */
.rp-cmodal .rp-icon-btn {
    width: 34px;
    height: 34px;
    flex: none;
    border: 1px solid var(--border-main);
    background: var(--surface-solid);
    color: var(--text-secondary);
    border-radius: 999px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.rp-cmodal .rp-icon-btn:hover {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-solid));
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 38%, transparent);
}

.rp-cmodal .rp-icon-btn svg {
    width: 15px;
    height: 15px;
}