/* ==========================================================================
   Salam BI — الأسلوب السينمائي ثلاثي الأبعاد (Cinematic UI) v5.2
   مستوحى من حزمة OdooReportWeb_v5.0.0_Cinematic_UI، لكنه مبني فوق نظام الثيمات الحالي:
   - كل الألوان تُقرأ من متغيرات الثيم المختار (--theme-primary / --theme-accent / --card ...)
     فيتبع أي ثيم ألوان يختاره المستخدم، ولا يفرض ألوانًا ثابتة.
   - يُفعَّل بإضافة الصنف cin-on على <html> (يتحكم فيه cinematic.js وزر "الأسلوب السينمائي"
     في قائمة الثيمات)، وبإزالته تعود الواجهة كما كانت تمامًا.
   - الثيم السينمائي الأحمر/البرتقالي/الأزرق نفسه أُضيف كثيم ألوان رقم 11.
   ========================================================================== */

/* ---------- ثيم الألوان 11: السينمائي (أحمر · برتقالي · أزرق فوق كحلي) ---------- */
html.dark[data-color-theme="11_Cinematic"] {
  --brand-50: 255 245 240;  --brand-100: 255 228 214; --brand-200: 255 200 172; --brand-300: 255 166 121;
  --brand-400: 255 133 78;  --brand-500: 255 107 44;  --brand-600: 240 90 30;   --brand-700: 196 70 21;
  --brand-800: 150 55 18;   --brand-900: 112 44 17;   --brand-950: 58 24 10;
  --slate-50: 248 250 252;  --slate-100: 238 242 247; --slate-200: 220 227 236;  --slate-300: 196 207 220;
  --slate-400: 152 166 186; --slate-500: 122 137 158; --slate-600: 92 107 128;   --slate-700: 60 74 96;
  --slate-800: 33 45 66;    --slate-900: 15 22 36;    --slate-950: 7 10 18;
  --surface-dark: 7 10 18;  --surface-darkcard: 15 22 36; --surface-darkborder: 33 45 66;
  --bg: #070A12; --panel: #0C121E; --card: #111827; --line: #1E2A3F; --text: #F8FAFC; --muted: #AAB7C8;
  --navy: #FF6B2C; --navy-2: #F05A1E; --navy-3: #FF854E; --danger: #FF3B30;
  --palette-accent: #FF6B2C; --palette-accent-hover: #F05A1E; --palette-accent-shadow: rgba(255, 91, 44, 0.38);
  --palette-pill-bg: rgba(255, 107, 44, 0.16); --palette-focus-ring: rgba(255, 107, 44, 0.28); --palette-tint: rgba(255, 107, 44, 0.06);
  --palette-table-th: #070A12; --palette-table-border: #FF6B2C;
  --palette-accent-grad: linear-gradient(135deg,#FF3B30,#FF8A00);
  --theme-primary: #FF6B2C; --theme-secondary: #FF3B30; --theme-accent: #00B7FF;
  --theme-gradient: linear-gradient(135deg,#FF3B30,#FF8A00);
  --on-primary: #0B0B12;
  --row-alt: rgba(15, 22, 36, 0.55); --row-hover: rgba(255, 107, 44, 0.14);
  --chart-muted: #AAB7C8; --chart-grid: #1E2A3F; --chart-text: #F8FAFC; --chart-text-soft: #C4CFDC;
}
html:not(.dark)[data-color-theme="11_Cinematic"] {
  --brand-50: 255 245 240;  --brand-100: 255 228 214; --brand-200: 255 200 172; --brand-300: 255 166 121;
  --brand-400: 255 133 78;  --brand-500: 255 107 44;  --brand-600: 214 74 18;   --brand-700: 176 58 14;
  --brand-800: 138 46 12;   --brand-900: 104 36 10;   --brand-950: 60 28 16;
  --navy: #B03A0E; --navy-2: #D64A12; --navy-3: #FF6B2C;
  --palette-accent: #D64A12; --palette-accent-hover: #B03A0E; --palette-accent-shadow: rgba(214, 74, 18, 0.35);
  --palette-pill-bg: rgba(214, 74, 18, 0.1); --palette-focus-ring: rgba(214, 74, 18, 0.2); --palette-tint: rgba(214, 74, 18, 0.04);
  --palette-table-border: #D64A12;
  --palette-accent-grad: linear-gradient(135deg, #E23A2C 0%, #E6790A 100%);
  --theme-primary: #D64A12; --theme-secondary: #E23A2C; --theme-accent: #0090D0;
  --theme-gradient: linear-gradient(135deg, #E23A2C, #F08A0A);
  --on-primary: #FFFFFF;
  --row-hover: rgba(214, 74, 18, 0.08);
}
html[data-color-theme="11_Cinematic"] {
  --login-panel: linear-gradient(145deg, #070A12 0%, #0C121E 35%, #4A1A14 70%, #070A12 100%);
  --login-panel-shadow: rgba(7, 10, 18, 0.5);
  --login-accent: #FF8A00; --login-accent-soft: #FFD9A8;
  --login-glow: rgba(255, 138, 0, 0.3); --login-glow-2: rgba(0, 183, 255, 0.18);
  --login-slice: linear-gradient(135deg, #8A1F12 0%, #FF5A36 50%, #C73A1E 100%);
  --login-page-light: linear-gradient(135deg, #FFF1EA 0%, #F1F5F9 50%, #F8FAFC 100%);
}

/* ---------- الأسلوب السينمائي: يعمل فقط عند وجود html.cin-on ---------- */
html.cin-on {
  --cin-a: var(--theme-primary, #3B82F6);
  --cin-b: var(--theme-accent, #6366F1);
  --cin-c: var(--theme-secondary, var(--theme-primary, #3B82F6));
  --cin-panel: color-mix(in srgb, var(--card, #111827) 66%, transparent);
  --cin-edge: rgba(255, 255, 255, .13);
  --cin-shadow: 0 18px 45px rgba(0, 0, 0, .32), 0 2px 10px rgba(0, 0, 0, .22);
}
html.cin-on:not(.dark) {
  --cin-panel: rgba(255, 255, 255, .72);
  --cin-edge: rgba(255, 255, 255, .95);
  --cin-shadow: 0 18px 42px rgba(15, 23, 42, .10), 0 2px 8px rgba(15, 23, 42, .05);
}

/* الخلفية: كحلي عميق بإضاءة محيطية تتبع ألوان الثيم، ووهج خفيف يتبع المؤشر */
html.cin-on.dark body {
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--cin-c) 15%, transparent), transparent 30%),
    radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--cin-b) 14%, transparent), transparent 30%),
    radial-gradient(circle at 62% 86%, color-mix(in srgb, var(--cin-a) 10%, transparent), transparent 32%),
    linear-gradient(135deg, rgb(var(--surface-dark)) 0%, color-mix(in srgb, rgb(var(--surface-dark)) 86%, var(--cin-b)) 50%, rgb(var(--surface-dark)) 100%) !important;
  background-attachment: fixed !important;
}
html.cin-on:not(.dark) body {
  background:
    radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--cin-c) 11%, transparent), transparent 26%),
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--cin-b) 12%, transparent), transparent 26%),
    radial-gradient(circle at 60% 92%, color-mix(in srgb, var(--cin-a) 9%, transparent), transparent 28%),
    linear-gradient(135deg, #F9FBFF 0%, #EEF3F8 50%, #FFF9F4 100%) !important;
  background-attachment: fixed !important;
}
html.cin-on body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 40%), rgba(255, 255, 255, .05), transparent 22%);
  transition: background .25s ease;
}
/* الشريط العلوي والقائمة الجانبية: زجاج معتم */
html.cin-on body > header,
html.cin-on #appSidebar {
  background: linear-gradient(145deg, color-mix(in srgb, var(--card, #111827) 82%, transparent), color-mix(in srgb, var(--card, #111827) 56%, transparent)) !important;
  border-color: var(--cin-edge) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .09);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}
html.cin-on:not(.dark) body > header,
html.cin-on:not(.dark) #appSidebar {
  background: linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(244, 248, 252, .72)) !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .95);
}

/* البطاقات (تُضاف لها الأصناف تلقائيًا في اللوحتين): زجاج عاكس + لمعان + وهج يتبع المؤشر */
html.cin-on .cin-panel {
  position: relative;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .025) 42%, rgba(0, 0, 0, .10)),
    var(--cin-panel) !important;
  border: 1px solid var(--cin-edge) !important;
  box-shadow: var(--cin-shadow), inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(0, 0, 0, .18) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  overflow: hidden;
}
html.cin-on:not(.dark) .cin-panel {
  background: linear-gradient(145deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .64)) !important;
  box-shadow: var(--cin-shadow), inset 0 1px 0 #fff !important;
}
html.cin-on .cin-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(110deg, transparent 18%, rgba(255, 255, 255, .08) 46%, transparent 58%);
  transform: translateX(-115%); animation: cinShine 8s ease-in-out infinite;
}
html.cin-on:not(.dark) .cin-panel::before { background: linear-gradient(110deg, transparent 18%, rgba(255, 255, 255, .70) 46%, transparent 58%); }
html.cin-on .cin-panel::after {
  content: ""; position: absolute; width: 45%; height: 45%; left: var(--mx, 50%); top: var(--my, 50%);
  transform: translate(-50%, -50%); pointer-events: none; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cin-a) 22%, transparent), transparent 68%);
  filter: blur(18px); opacity: .5;
}
/* محتوى البطاقة فوق اللمعان والوهج، دون المساس بالعناصر الزخرفية المطلقة (absolute) */
html.cin-on .cin-panel > :not(.absolute) { position: relative; z-index: 1; }
@keyframes cinShine { 0%, 55% { transform: translateX(-115%); } 78%, 100% { transform: translateX(115%); } }

/* بطاقات المؤشرات: ميل ثلاثي الأبعاد خفيف عند مرور المؤشر */
html.cin-on .cin-tilt { transform-style: preserve-3d; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform; }
html.cin-on .cin-tilt:hover {
  box-shadow: 0 24px 55px rgba(0, 0, 0, .36), 0 0 28px color-mix(in srgb, var(--cin-a) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, .20) !important;
}

/* الأزرار الأساسية: تدرّج الثيم مع توهج (بدل لون واحد) */
html.cin-on button.bg-brand-600,
html.cin-on a.bg-brand-600 {
  background-image: var(--theme-gradient, linear-gradient(135deg, var(--cin-a), var(--cin-b))) !important;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--cin-a) 30%, transparent), 0 0 18px color-mix(in srgb, var(--cin-b) 16%, transparent);
}

/* الجداول داخل البطاقات */
html.cin-on .cin-panel table thead tr { background: rgba(255, 255, 255, .035); }
html.cin-on .cin-panel table tbody tr { transition: background .18s ease; }
html.cin-on .cin-panel table tbody tr:hover { background: rgba(255, 255, 255, .05) !important; }

/* الرسوم البيانية */
html.cin-on .apexcharts-canvas,
html.cin-on .apexcharts-svg { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .14)); }
html.cin-on .apexcharts-tooltip { border: 1px solid var(--cin-edge) !important; backdrop-filter: blur(14px); }

/* زر تبديل الأسلوب داخل قائمة الثيمات */
.cin-toggle-row { border-top: 1px solid rgba(148, 163, 184, .25); margin-top: 6px; padding-top: 6px; }
.cin-toggle-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.cin-toggle-btn:hover { background: rgba(148, 163, 184, .15); }
.cin-switch { position: relative; width: 34px; height: 18px; border-radius: 999px; background: rgba(148, 163, 184, .45); transition: background .2s; flex-shrink: 0; }
.cin-switch::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: inset-inline-start .2s; }
html.cin-on .cin-switch { background: var(--theme-primary, #3B82F6); }
html.cin-on .cin-switch::after { inset-inline-start: 18px; }

@media (max-width: 1024px) { html.cin-on .cin-tilt:hover { transform: none !important; } }
@media (prefers-reduced-motion: reduce) {
  html.cin-on .cin-panel::before { animation: none; }
  html.cin-on .cin-tilt { transition: none; }
}