@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

/* ════════════════════════════════════════════════════════════
   HUB UNIFIED THEME — Air Care Projects  (v6 · 2026-07-24)
   عناية الهواء · نظام تصميم موحّد لمنصّة HUB
   مطابِق لنظام المشاريع /HUB/projects.php:
     برتقالي الهوية #FF9C00 + تركوازي بترولي #0F6E86 · خلفية فاتحة مسطّحة
     خط المتن IBM Plex Sans Arabic · خط العناوين والأزرار Tajawal.

   يربط بصفحة عبر <link> فيعيد تعريف متغيّرات CSS لقيم نظام المشاريع
   فتتوحّد الصفحة بالكامل.

   ⚠ الانتقائية (specificity): كتلة المتغيّرات تستعمل ‎:root:root‎ عمداً
   (0,2,0) لتغلب على ‎:root‎ (0,1,0) في hub-ui.css **مهما كان ترتيب
   التحميل** — صفحات CRM تحمّل hub-theme قبل hub-ui، وغيرها بالعكس.
   لذلك تُعرَّف هنا تسميتا النظامين معاً (‎--primary/--text/--border‎
   و ‎--emerald/--ink/--line‎) حتى يتوحّد الطرفان.

   سلف: v5 (تركوازي #258EA7 · Cairo) — النسخة محفوظة على الخادم
   باسم hub-theme.css.bak-v5-20260724 وللتراجع أعِد تسميتها.
   ════════════════════════════════════════════════════════════ */

:root:root,
html[data-theme]:root,
html[data-theme="dark"]:root,
html[data-theme="light"]:root {
  /* ── العلامة / accent (تركواز بترولي — من نظام المشاريع) ── */
  --primary:        #0F6E86;   /* تركواز عناية الهواء الأساسي */
  --primary-2:      #1E93B0;   /* تركواز ساطع — accent/hover */
  --primary-3:      #0B5567;   /* تركواز غامق — رؤوس/تركيز */
  --accent:         #0F6E86;
  --teal:           #0F6E86;
  --teal-br:        #1E93B0;
  --teal-bg:        #E7F1F4;

  /* ── البرتقالي: لون الفعل الأساسي في نظام المشاريع ── */
  --orange:         #FF9C00;
  --orange-d:       #E58900;
  --gold:           #FF9C00;   /* اسم قديم — يشير للبرتقالي الآن */
  --gold-dark:      #E58900;
  --gold-d:         #E58900;
  --gold-l:         #FFC15C;
  --gold-bg:        #FFF2DC;

  /* ── الحالات ── */
  --success:        #159A6C;
  --green:          #159A6C;
  --green-bg:       #E3F5EE;
  --warn:           #E8912A;
  --amber:          #E8912A;
  --amber-d:        #B96F16;
  --amber-bg:       #FDF0E0;
  --danger:         #E5484D;
  --red:            #E5484D;
  --red-bg:         #FCE9E9;
  --info:           #1E93B0;
  --info-bg:        #E7F1F4;
  --purple:         #7C3AED;
  --purple-bg:      #EDE6F5;
  --pink:           #DB2777;
  --gray:           #6E828C;

  /* ── الأسطح (فاتحة مسطّحة كنظام المشاريع) ── */
  --bg-gradient:    linear-gradient(135deg, #EEF3F7 0%, #F3F7FA 50%, #EAF1F6 100%);
  --bg:             #EEF3F7;
  --surface:        #FFFFFF;
  --surface-2:      #F6F9FB;
  --surface-3:      #F1F5F9;
  --panel:          #FFFFFF;
  --panel-2:        #F6F9FB;

  /* ── النص ── */
  --text:           #15272E;
  --text-2:         #4A5F6A;
  --text-3:         #6E828C;
  --ink:            #15272E;
  --ink-2:          #4A5F6A;
  --ink-3:          #6E828C;
  --muted:          #6E828C;

  /* ── الحدود ── */
  --border:         #E2EAF0;
  --border-strong:  #D6E1EA;
  --line:           #E2EAF0;
  --line-2:         #EDF2F6;

  /* ── الزوايا (كبطاقات المشاريع) ── */
  --radius:         16px;
  --radius-sm:      10px;
  --radius-pill:    999px;

  /* ── الظلال (مطابقة --sh في نظام المشاريع) ── */
  --shadow-sm:      0 1px 2px rgba(20,45,60,.05);
  --shadow:         0 1px 2px rgba(20,45,60,.05), 0 6px 20px rgba(20,45,60,.06);
  --shadow-md:      0 1px 2px rgba(20,45,60,.05), 0 6px 20px rgba(20,45,60,.06);
  --shadow-lg:      0 10px 26px rgba(20,45,60,.12);

  /* ── الخطوط (تسميات hub-ui) ── */
  --font-d:         'Tajawal','IBM Plex Sans Arabic',system-ui,Tahoma,sans-serif;
  --font-b:         'IBM Plex Sans Arabic','Tajawal',system-ui,Tahoma,sans-serif;

  /* ── فضاء التسمية القديم (لوحات التواصل/الشكاوى/المكالمات) ──
     صفحات مثل contact-dashboard.php و complaints-dashboard.php تعرّف
     ‎:root‎ خاصاً بأسماء ‎--navy/--ok/--err/--r/--sh‎. انتقائية ‎:root:root‎
     تغلبها، فيكفي ربط هذا الملف لتتوحّد دون لمس ستايلها الداخلي. */
  --navy:           #0F6E86;   /* كان #006881 */
  --navy-2:         #0B5567;   /* كان #13366f أزرق داكن — خارج الهوية */
  --navy-mid:       #0F6E86;
  --navy-soft:      #1E93B0;
  --ok:             #159A6C;
  --err:            #E5484D;
  --grey:           #6E828C;
  --r:              16px;      /* كان 14px */
  --sh:             0 1px 2px rgba(20,45,60,.05), 0 6px 20px rgba(20,45,60,.06);
  --sh-sm:          0 1px 2px rgba(20,45,60,.05);
}

/* ── الخط: متن IBM Plex Sans Arabic (كنظام المشاريع)، ثم النظام ── */
body, body * {
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', 'Segoe UI', system-ui, Tahoma, Arial, sans-serif;
}
/* العناوين والأزرار والشعار: Tajawal (الخط العرضي في المشاريع) */
h1, h2, h3, h4,
.dsp, .eyebrow,
.btn, button,
.brand h1, .brand-text h1,
.hero .big, .stat .val, .kpi-num {
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', system-ui, Tahoma, sans-serif;
}

/* ════════════════════════════════════════════════════════════
   تحييد الوضع الداكن — المنصّة فاتحة فقط (مطابقة المشاريع).
   لو متصفّح المستخدم محتفظ بتفضيل dark، الصفحة تطبّق data-theme="dark"
   فتعطي نص فاتح/هيرو داكن بينما hub-theme يجبر أسطح بيضاء → هجين مكسور.
   هنا نعيد تعريف متغيّرات النص/السطح الشائعة + نلغي الكتل الداكنة المخبوزة.
   ════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --ink:#15272E;   --ink-2:#4A5F6A;  --ink-3:#6E828C;
  --frost:#15272E; --haze:#6E828C;   --faint:#8B98A5;
  --text:#15272E;  --text-2:#4A5F6A; --text-3:#6E828C;
  --fg:#15272E;    --on-surface:#15272E; --foreground:#15272E;
  --bg:#EEF3F7;    --surface:#FFFFFF; --surface-2:#F6F9FB; --surface-3:#F1F5F9;
  --panel:#FFFFFF; --panel-2:#F6F9FB; --card:#FFFFFF; --paper:#FFFFFF;
  --line:#E2EAF0;  --line-2:#EDF2F6;  --border:#E2EAF0;
  --navy:#0B5567;  --navy-mid:#0F6E86; --navy-soft:#1E93B0;
}
html[data-theme="dark"] body {
  background: var(--bg) !important;
  color: #15272E !important;
}
/* كتل داكنة مخبوزة شائعة (هيرو/شريط) → تركواز الهوية */
html[data-theme="dark"] .hero,
html[data-theme="dark"] .masthead,
html[data-theme="dark"] .page-hero {
  background: linear-gradient(158deg, #0F6E86 0%, #0B5567 100%) !important;
}
html[data-theme="dark"] .card, html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .panel, html[data-theme="dark"] .box,
html[data-theme="dark"] .surface { background: #FFFFFF !important; }
html[data-theme="dark"] .card-title, html[data-theme="dark"] .title,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3 { color: #15272E !important; }

/* ── خلفية الجسم الموحّدة: فاتحة مسطّحة كنظام المشاريع ──
   تطغى على الصفحات التي حوّلت خلفية جسمها للون السطح (تباين ضعيف). */
body {
  background: var(--bg) !important;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ── أرقام جدولية على المؤشّرات (طابع control-room) ── */
.num, .stat-card .num, .stat-tile .num, [class*="stat"] .num,
.metric, .kpi-num, .value, td.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── أشرطة تمرير دقيقة ── */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: rgba(15,110,134,0.22);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(15,110,134,0.38); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── تحديد + تركيز ── */
::selection { background: rgba(30,147,176,0.18); color: #0B3543; }
:focus-visible { outline: 2px solid var(--primary-2); outline-offset: 2px; border-radius: 6px; }

/* ════════════════════════════════════════════════════════════
   مكوّنات أساسية موحّدة (للصفحات الجديدة — اختيارية)
   استعملها بالبادئة hub- حتى لا تتعارض مع كلاسات الصفحة.
   ════════════════════════════════════════════════════════════ */
.hub-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.hub-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.hub-stat .num { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.1; }
.hub-stat .lbl { font-size: 12.5px; color: var(--text-2); margin-top: 4px; }
.hub-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); color: var(--primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 16px; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .15s; text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.hub-btn:hover { border-color: var(--primary-2); color: var(--primary); background: var(--surface); }
.hub-btn-accent {
  background: linear-gradient(135deg, var(--orange), var(--orange-d));
  color: #241300; border-color: transparent;
  box-shadow: 0 2px 8px rgba(255,156,0,.28);
}
.hub-btn-accent:hover { color: #241300; box-shadow: 0 6px 18px rgba(255,156,0,.36); }
.hub-btn-danger { background: transparent; color: var(--danger); border-color: rgba(229,72,77,.35); }
.hub-btn-danger:hover { background: rgba(229,72,77,.08); }
.hub-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 700;
  background: var(--teal-bg); color: var(--primary);
}
.hub-badge.ok     { background: var(--green-bg); color: var(--success); }
.hub-badge.warn   { background: var(--amber-bg); color: var(--amber-d); }
.hub-badge.danger { background: var(--red-bg);   color: var(--danger); }
.hub-input, .hub-select {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: 13px; width: 100%;
  box-shadow: var(--shadow-sm);
}
.hub-input:focus, .hub-select:focus { border-color: var(--primary-2); outline: none; box-shadow: 0 0 0 3px rgba(30,147,176,.14); }
.hub-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hub-table th {
  text-align: right; color: var(--text-2); font-weight: 700;
  padding: 10px 12px; border-bottom: 1px solid var(--border-strong);
  font-size: 12px; text-transform: none;
}
.hub-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); color: var(--text); }
.hub-table tr:hover td { background: var(--surface-2); }

/* ════════════════════════════════════════════════════════════
   تخصيصات توحيد — عناصر تستخدم اللون كخلفية كاملة
   ════════════════════════════════════════════════════════════ */
/* الشريط العلوي: تدرّج تركوازي بترولي + نص أبيض */
.top-bar {
  background: linear-gradient(180deg, #0B5567 0%, #0F6E86 100%) !important;
  border-bottom: 1px solid rgba(11,85,103,0.30);
  color: #FFFFFF !important;
  box-shadow: var(--shadow-sm);
}
.top-bar .brand .logo { box-shadow: 0 0 0 1px rgba(255,255,255,.35); background:#fff; }
.top-bar .brand-text h1 { color: #FFFFFF; }
.top-bar .brand-text p  { color: rgba(255,255,255,0.78); opacity: 1; }
.top-bar .icon-btn { color: rgba(255,255,255,0.85); }
.top-bar .icon-btn:hover { color: #FFFFFF; }
/* نص أبيض على عناصر بخلفية accent تركوازية (تباين AA) */
.view-presets button.active, .cal-day.today,
.approval-actions .view:hover, .toast { color: #FFFFFF !important; }

/* شريط CRM العلوي (.hubnav) — تركواز بترولي موحّد */
.hubnav { background: linear-gradient(180deg, #0B5567 0%, #0F6E86 100%) !important; border-bottom: 2px solid rgba(11,85,103,0.35) !important; }
.hubnav a, .hubnav button, .hubnav .hubnav-link { color: #FFFFFF !important; }

/* ── هيرو hub-ui: تركواز الهوية + شريط برتقالي علوي ── */
.hero { background: linear-gradient(158deg, #0F6E86 0%, #0B5567 100%) !important; }
.hero::before { background: linear-gradient(90deg, var(--orange), var(--orange-d)) !important; }
.hero .ey { color: #FFD79A !important; }

/* ── أزرار hub-ui: الفعل الأساسي برتقالي كنظام المشاريع ── */
.btn.primary, .btn.gold, button.primary, .modal-footer button.primary {
  background: linear-gradient(135deg, var(--orange), var(--orange-d)) !important;
  border-color: transparent !important;
  color: #241300 !important;
  box-shadow: 0 2px 8px rgba(255,156,0,.28);
}
.btn.primary:hover, .btn.gold:hover, button.primary:hover {
  box-shadow: 0 6px 18px rgba(255,156,0,.36);
  color: #241300 !important;
}

/* ════════════════════════════════════════════════════════════
   شعار الشركة — حضور موحّد في كل صفحات HUB
   صفحات hub-ui ترسم مربّع تدرّج ‎.brand .mark‎ بداخله أيقونة SVG عامة.
   نستبدله بعلامة عناية الهواء نفسها دون تعديل الـ 39 صفحة واحدةً واحدة:
   نُخفي محتواه ونضع العلامة خلفية. الصفحات التي تضع وسم صورة صريحاً
   (كنظام المشاريع وصفحات CRM) لا تتأثّر — لا ‎.mark‎ فيها.
   ════════════════════════════════════════════════════════════ */
/* ── ترويسة الصفحة: الشعار بالتنسيق العمودي (قرار المالك 2026-07-24) ──
   المصدر هو الشعار العمودي، لكن **بعد اقتطاع نصّ الاسم أسفله**: النصّ يشغل
   ~6% من ارتفاع الملف فيصير لطخة (~4px) عند أي ارتفاع معقول للترويسة.
   العلامة وحدها (aircare-emblem-160.png?v=2) تُقرأ نظيفة، وعنوان الصفحة المجاور
   يحمل الكلمات. الشريط الضيّق يبقى بالشعار الأفقي الكامل.
   الشريط الضيّق يبقى بالشعار الأفقي (انظر ‎.hub-logo‎ أدناه). */
.brand .mark {
  width: 56px !important;
  height: 68px !important;
  background: #FFFFFF url('/HUB/assets/aircare-emblem-160.png?v=2') center / contain no-repeat !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-sm) !important;
  /* بعض الصفحات تضع الحروف الأولى نصّاً داخل ‎.mark‎ (مثل «عب») — النصّ ليس
     عنصراً فلا يكفي إخفاء الأبناء، وكان يظهر فوق الشعار. */
  color: transparent !important;
  font-size: 0 !important;
}
.brand .mark > * { display: none !important; }

/* شعار على خلفية داكنة (شريط التنقّل): شارة بيضاء عريضة تضمن القراءة */
.hub-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 118px; height: 30px; flex: 0 0 auto;
  background: #FFFFFF url('/HUB/assets/logo_20260609185621.png') center / 88% auto no-repeat;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
@media (max-width: 700px) { .hub-logo { width: 96px; height: 26px; } }
/* شعار ترويسة الصفحة (وسم صورة صريح في صفحات نواة CRM) — تنسيق عمودي.
   الالتفاف يبقى مطلوباً: الترويسة = شعار + فاصل + عنوان + بطاقة المستخدم،
   و‎.topbar‎ في hub-ui لا يلتفّ افتراضياً فيفيض على الشاشات الضيّقة. */
.hub-logo-full { height: 68px; width: auto; display: block; }
.brand { min-width: 0; }
/* الالتفاف مقصور على الترويسة التي تحمل الشعار العريض فعلاً — لوحات
   التواصل/الشكاوى لها ‎.topbar‎ شريط لاصق بارتفاع ثابت 60px، والالتفاف
   فيه يقصّ المحتوى. */
.topbar:has(.hub-logo-full) { flex-wrap: wrap; }

/* شعار الشركة داخل الشريط اللاصق للوحات القديمة (‎.topbar .brand .logo‎
   مربّع شفّاف بداخله إيموجي) → شارة بيضاء بعلامة عناية الهواء. */
.topbar .brand .logo {
  width: 112px !important;
  height: 30px !important;
  background: #FFFFFF url('/HUB/assets/logo_20260609185621.png') center / 90% auto no-repeat !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  color: transparent !important;
  font-size: 0 !important;
}
@media (max-width: 640px) {
  .hub-logo-full { height: 54px; }
  .brand { gap: 9px; }
  .brand .bt { padding-inline-start: 10px; }
}

/* ترويسة على نسق المشاريع: شعار ‖ فاصل ‖ عنوان + وصف.
   ‎.bt‎ لا يوجد إلا في الصفحات التي تعتمد هذا النسق، فلا يمسّ بقية HUB. */
.brand .bt {
  display: flex; flex-direction: column; gap: 1px;
  border-inline-start: 1px solid var(--border);
  padding-inline-start: 13px;
}
.brand .bt h1 { font-size: 21px; font-weight: 700; color: var(--primary); margin: 0; }
.brand .bt .sub { color: var(--text-3); font-size: 12px; margin-top: 1px; }
@media (max-width: 640px) { .brand .bt h1 { font-size: 17px; } }

/* بطاقة السعودة: فاتحة بلمسة خضراء سعودية */
.saudi-card {
  background: linear-gradient(135deg, rgba(0,108,53,0.08), var(--surface)) !important;
  border: 1px solid rgba(21,154,108,0.22);
  color: var(--text) !important;
}
.saudi-card .saudi-percent { color: #0F7A55; }
.saudi-card .saudi-title { color: var(--text-2); opacity: 1; }

/* رؤوس الجداول: تطبيع فاتح — يلغي التدرّجات المخبوزة */
table th, thead th {
  background: var(--surface-2) !important;
  background-image: none !important;
  color: var(--text-2) !important;
  font-weight: 700;
  border-bottom: 1px solid var(--border-strong) !important;
  text-shadow: none !important;
}
table thead, table thead tr { background: var(--surface-2) !important; }

/* عناصر «بانر» → تينت تركوازي فاتح موحّد */
.banner {
  background: linear-gradient(135deg, rgba(30,147,176,0.10), var(--surface)) !important;
  border: 1px solid var(--border);
  color: var(--text) !important;
}
.banner * { color: var(--text); }
.pins-section { background: var(--surface) !important; border: 1px solid var(--border); }

/* حقول إدخال غير منسّقة → فاتحة موحّدة */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
select, textarea {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
select option { background: var(--surface); color: var(--text); }
input[type=checkbox], input[type=radio] { accent-color: var(--primary-2); }