/* ==========================================================================
   Salam BI — ثيم "قوس قزح السينمائي التحريري" (Editorial Rainbow Cinematic)
   id: editorial-rainbow-cinematic — نهاري + ليلي
   - خلفيات محايدة 70% · ألوان باردة 20% · لمسات دافئة 10%
   - طيف الألوان يُستخدم فقط في الخطوط/التحديد/شريط التقدم/العنصر النشط، وليس كخلفية كاملة
   - كل القواعد مقيدة بـ [data-color-theme="editorial-rainbow-cinematic"] فلا تمس أي ثيم آخر
   ========================================================================== */

html[data-color-theme="editorial-rainbow-cinematic"] {
  --er-red: #FF3B30; --er-orange: #FF7A00; --er-yellow: #FFC533; --er-green: #20D878;
  --er-cyan: #18D9FF; --er-blue: #287BFF; --er-purple: #7A5CFF; --er-magenta: #F23DFF;
  --er-spectrum: linear-gradient(90deg,#FF3B30 0%,#FF7A00 15%,#FFC533 30%,#20D878 45%,#18D9FF 60%,#287BFF 73%,#7A5CFF 86%,#F23DFF 100%);
  --er-btn-primary: linear-gradient(135deg,#287BFF,#18D9FF);
  --er-btn-premium: linear-gradient(135deg,#7A5CFF,#F23DFF);
  --er-btn-attention: linear-gradient(135deg,#FF7A00,#FFC533);
  --er-glow-blue: 0 0 14px rgba(24,217,255,0.45), 0 0 34px rgba(40,123,255,0.16);
  --er-glow-purple: 0 0 14px rgba(122,92,255,0.45), 0 0 34px rgba(242,61,255,0.16);
  --er-glow-orange: 0 0 14px rgba(255,122,0,0.45), 0 0 34px rgba(255,197,51,0.16);
  --er-radius: 16px;
  /* شاشة الدخول */
  --login-panel: linear-gradient(145deg, #090B12 0%, #10182B 35%, #163C57 55%, #3B1D5A 78%, #5A173E 100%);
  --login-panel-shadow: rgba(9, 11, 18, 0.5);
  --login-accent: #18D9FF; --login-accent-soft: #B8F3FF;
  --login-glow: rgba(24, 217, 255, 0.30); --login-glow-2: rgba(122, 92, 255, 0.20);
  --login-slice: linear-gradient(135deg, #287BFF 0%, #7A5CFF 55%, #F23DFF 100%);
  --login-page-light: linear-gradient(135deg, #F5F7FB 0%, #E8F7FC 35%, #EEF0FF 62%, #FFF0E8 100%);
}

/* ---------------- الوضع الليلي ---------------- */
html.dark[data-color-theme="editorial-rainbow-cinematic"] {
  --brand-50: 234 242 255;  --brand-100: 212 228 255; --brand-200: 169 202 255; --brand-300: 126 176 255;
  --brand-400: 83 150 255;  --brand-500: 40 123 255;  --brand-600: 32 104 222;  --brand-700: 26 84 184;
  --brand-800: 21 66 145;   --brand-900: 17 50 110;   --brand-950: 12 27 58;
  --slate-50: 247 249 252;  --slate-100: 236 240 246; --slate-200: 218 224 234; --slate-300: 184 192 207;
  --slate-400: 151 160 177; --slate-500: 127 137 154; --slate-600: 96 105 122;  --slate-700: 62 70 88;
  --slate-800: 38 45 61;    --slate-900: 21 26 39;    --slate-950: 9 11 18;
  --surface-dark: 9 11 18; --surface-darkcard: 21 26 39; --surface-darkborder: 38 45 61;
  --bg: #090B12; --panel: #111522; --card: #151A27; --line: rgba(255,255,255,0.10);
  --text: #F7F9FC; --muted: #B8C0CF;
  --navy: #287BFF; --navy-2: #2068DE; --navy-3: #18D9FF; --danger: #FF3B30;
  --palette-accent: #287BFF; --palette-accent-hover: #2068DE; --palette-accent-shadow: rgba(40, 123, 255, 0.38);
  --palette-pill-bg: rgba(40, 123, 255, 0.16); --palette-focus-ring: rgba(24, 217, 255, 0.35); --palette-tint: rgba(40, 123, 255, 0.06);
  --palette-table-th: #111522; --palette-table-border: #287BFF;
  --palette-accent-grad: linear-gradient(135deg,#287BFF,#18D9FF);
  --theme-primary: #287BFF; --theme-secondary: #7A5CFF; --theme-accent: #18D9FF;
  --theme-gradient: linear-gradient(135deg,#287BFF,#18D9FF);
  --on-primary: #FFFFFF;
  --row-alt: rgba(27, 33, 48, 0.55); --row-hover: rgba(24, 217, 255, 0.10);
  --chart-muted: #7F899A; --chart-grid: rgba(255,255,255,0.08); --chart-text: #F7F9FC; --chart-text-soft: #B8C0CF;
  --er-bg2: #111522; --er-surface-alt: #1B2130; --er-text-soft: #7F899A;
  --er-glass: rgba(21, 26, 39, 0.72);
  --er-border: rgba(255, 255, 255, 0.10);
  --er-shadow: 0 18px 55px rgba(0, 0, 0, 0.34);
  --er-hero: linear-gradient(135deg,#090B12 0%,#10182B 35%,#163C57 55%,#3B1D5A 78%,#5A173E 100%);
}

/* ---------------- الوضع النهاري ---------------- */
html:not(.dark)[data-color-theme="editorial-rainbow-cinematic"] {
  --brand-50: 234 242 255;  --brand-100: 212 228 255; --brand-200: 169 202 255; --brand-300: 126 176 255;
  --brand-400: 83 150 255;  --brand-500: 40 123 255;  --brand-600: 29 100 224;  --brand-700: 22 80 190;
  --brand-800: 18 63 150;   --brand-900: 15 48 112;   --brand-950: 10 28 66;
  --bg: #F5F7FB; --panel: #EAF0F6; --card: #FFFFFF; --line: rgba(23, 32, 51, 0.10);
  --text: #172033; --muted: #526176;
  --navy: #1650BE; --navy-2: #1D64E0; --navy-3: #287BFF; --danger: #E5302A;
  --palette-accent: #1D64E0; --palette-accent-hover: #1650BE; --palette-accent-shadow: rgba(40, 123, 255, 0.30);
  --palette-pill-bg: rgba(40, 123, 255, 0.10); --palette-focus-ring: rgba(40, 123, 255, 0.28); --palette-tint: rgba(40, 123, 255, 0.04);
  --palette-table-th: #EAF0F6; --palette-table-border: #287BFF;
  --palette-accent-grad: linear-gradient(135deg,#287BFF,#18D9FF);
  --theme-primary: #1D64E0; --theme-secondary: #7A5CFF; --theme-accent: #0FB6D8;
  --theme-gradient: linear-gradient(135deg,#287BFF,#18D9FF);
  --on-primary: #FFFFFF;
  --row-alt: rgba(248, 250, 252, 0.9); --row-hover: rgba(40, 123, 255, 0.07);
  --chart-muted: #8490A3; --chart-grid: rgba(23,32,51,0.08); --chart-text: #172033; --chart-text-soft: #526176;
  --er-bg2: #EAF0F6; --er-surface-alt: #F8FAFC; --er-text-soft: #8490A3;
  --er-glass: rgba(255, 255, 255, 0.72);
  --er-border: rgba(23, 32, 51, 0.10);
  --er-shadow: 0 16px 45px rgba(23, 32, 51, 0.12);
  --er-hero: linear-gradient(135deg,#F5F7FB 0%,#E8F7FC 35%,#EEF0FF 62%,#FFF0E8 100%);
}

/* ---------------- الخلفية (تدرج هادئ ثابت) ---------------- */
html[data-color-theme="editorial-rainbow-cinematic"] body {
  background: var(--er-hero) fixed !important;
  color: var(--text);
}

/* ---------------- شريط الطيف أعلى الهيدر ---------------- */
html[data-color-theme="editorial-rainbow-cinematic"] header.sticky.top-0 {
  background: var(--er-glass) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  border-bottom-color: var(--er-border) !important;
  box-shadow: inset 0 -1px 0 var(--er-border);
  position: sticky;
}
html[data-color-theme="editorial-rainbow-cinematic"] header.sticky.top-0::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
  background: var(--er-spectrum); opacity: .85; pointer-events: none;
}

/* ---------------- الشريط الجانبي والعنصر النشط ---------------- */
html[data-color-theme="editorial-rainbow-cinematic"] #appSidebar {
  background: var(--er-glass) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  border-color: var(--er-border) !important;
}
html[data-color-theme="editorial-rainbow-cinematic"] #appSidebar .nav-link.font-semibold {
  position: relative;
  background: rgba(40, 123, 255, 0.10) !important;
  border-color: rgba(24, 217, 255, 0.35) !important;
  box-shadow: var(--er-glow-blue);
}
html:not(.dark)[data-color-theme="editorial-rainbow-cinematic"] #appSidebar .nav-link.font-semibold {
  box-shadow: 0 6px 18px rgba(40, 123, 255, 0.14);
}
html[data-color-theme="editorial-rainbow-cinematic"] #appSidebar .nav-link.font-semibold::before {
  content: ""; position: absolute; top: 8px; bottom: 8px; right: 0; width: 3px;
  border-radius: 3px; background: linear-gradient(180deg,#FF3B30,#FF7A00,#FFC533,#20D878,#18D9FF,#287BFF,#7A5CFF,#F23DFF);
}

/* ---------------- البطاقات الزجاجية ---------------- */
html[data-color-theme="editorial-rainbow-cinematic"] .results-card,
html[data-color-theme="editorial-rainbow-cinematic"] .sidebar-card,
html[data-color-theme="editorial-rainbow-cinematic"] .filter-panel-card,
html[data-color-theme="editorial-rainbow-cinematic"] .actions-stack,
html[data-color-theme="editorial-rainbow-cinematic"] .palette-option-card,
html[data-color-theme="editorial-rainbow-cinematic"] .kpi-card,
html[data-color-theme="editorial-rainbow-cinematic"] .cin-panel {
  background: var(--er-glass) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  border: 1px solid var(--er-border) !important;
  border-radius: var(--er-radius);
  box-shadow: var(--er-shadow);
}
html[data-color-theme="editorial-rainbow-cinematic"] .palette-option-card.selected {
  border-color: transparent !important;
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--er-spectrum) border-box !important;
  border: 2px solid transparent !important;
}

/* ---------------- الأزرار ---------------- */
html[data-color-theme="editorial-rainbow-cinematic"] .run-action-btn {
  background: var(--er-btn-primary) !important;
  color: #FFFFFF !important;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(40, 123, 255, 0.28);
}
html[data-color-theme="editorial-rainbow-cinematic"] .run-action-btn:hover { box-shadow: var(--er-glow-blue); }

/* ---------------- الجداول ---------------- */
html[data-color-theme="editorial-rainbow-cinematic"] table thead th {
  border-bottom: 2px solid transparent !important;
  border-image: var(--er-spectrum) 1;
}

/* ---------------- شريط التقدم والتحديد ---------------- */
html[data-color-theme="editorial-rainbow-cinematic"] progress::-webkit-progress-value { background: var(--er-spectrum); }
html[data-color-theme="editorial-rainbow-cinematic"] progress::-moz-progress-bar { background: var(--er-spectrum); }
html[data-color-theme="editorial-rainbow-cinematic"] .progress-bar,
html[data-color-theme="editorial-rainbow-cinematic"] [role="progressbar"] > div { background: var(--er-spectrum) !important; }
html[data-color-theme="editorial-rainbow-cinematic"] ::selection { background: rgba(122, 92, 255, 0.35); color: inherit; }
html[data-color-theme="editorial-rainbow-cinematic"] input[type="checkbox"],
html[data-color-theme="editorial-rainbow-cinematic"] input[type="radio"] { accent-color: #287BFF; }

/* ---------------- تركيز واضح دائمًا ---------------- */
html[data-color-theme="editorial-rainbow-cinematic"] :focus-visible {
  outline: 2px solid #18D9FF !important;
  outline-offset: 2px;
}

/* ---------------- حركة خفيفة (تُلغى مع تقليل الحركة) ---------------- */
@media (prefers-reduced-motion: no-preference) {
  html[data-color-theme="editorial-rainbow-cinematic"] .kpi-card,
  html[data-color-theme="editorial-rainbow-cinematic"] .palette-option-card,
  html[data-color-theme="editorial-rainbow-cinematic"] .run-action-btn {
    transition: transform .18s ease, box-shadow .18s ease;
  }
  html[data-color-theme="editorial-rainbow-cinematic"] .kpi-card:hover,
  html[data-color-theme="editorial-rainbow-cinematic"] .palette-option-card:hover { transform: translateY(-3px); }
  html[data-color-theme="editorial-rainbow-cinematic"] .run-action-btn:hover { transform: translateY(-2px); }
}

/* ---------------- الطباعة: بدون زجاج أو تدرجات ---------------- */
@media print {
  html[data-color-theme="editorial-rainbow-cinematic"] body { background: #FFFFFF !important; }
  html[data-color-theme="editorial-rainbow-cinematic"] .results-card { box-shadow: none; backdrop-filter: none; background: #FFFFFF !important; }
}

/* ---------------- v6: الواجهة الجديدة (شريط الوحدات + القائمة الجانبية + قائمة التقارير) ---------------- */
html[data-color-theme="editorial-rainbow-cinematic"] .v6-main { background: transparent; }
html[data-color-theme="editorial-rainbow-cinematic"] .v6-crumbs { background: var(--er-glass); }
html[data-color-theme="editorial-rainbow-cinematic"] .v6-mod.is-active::after { background: var(--er-spectrum); }
html[data-color-theme="editorial-rainbow-cinematic"] .v6-item.is-active {
  box-shadow: inset -3px 0 0 #18D9FF;
  background: rgba(40, 123, 255, 0.12);
}
html[data-color-theme="editorial-rainbow-cinematic"] .v6-mega {
  background: var(--er-glass);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  border-color: var(--er-border);
  box-shadow: var(--er-shadow);
}
html[data-color-theme="editorial-rainbow-cinematic"] .v6-mega-title { position: relative; }
html[data-color-theme="editorial-rainbow-cinematic"] .v6-mega-title::after {
  content: ""; position: absolute; inset: auto 10px 0 10px; height: 1px;
  background: var(--er-spectrum); opacity: .55;
}
html[data-color-theme="editorial-rainbow-cinematic"] .v6-runbar { background: var(--er-glass) !important; }
html[data-color-theme="editorial-rainbow-cinematic"] .v6-runbar::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--er-spectrum); opacity: .8;
}