/* app.css — نظام تصميم موحّد، عصري، يدعم RTL (عربي) و LTR (إنجليزي) تلقائياً
   عبر خصائص CSS المنطقية (logical properties) دون أي إطار عمل خارجي. */

:root {
  --primary: #0ea5a4;
  --primary-dark: #0b8483;
  --primary-light: #e6fbfa;
  --ink: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --bg: #f4f6f9;
  --surface: #ffffff;
  --danger: #dc2626;
  --danger-light: #fef2f2;
  --success: #16a34a;
  --success-light: #f0fdf4;
  --warning: #d97706;
  --warning-light: #fffbeb;
  --info: #2563eb;
  --info-light: #eff6ff;
  --sidebar-w: 250px;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.10);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Segoe UI', 'Cairo', 'Tahoma', system-ui, -apple-system, sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
}
/* حماية إضافية ضد أي انزلاق أفقي غير متوقَّع لكامل الصفحة على شاشات ضيقة
   (كل جدول عريض معالَج أصلاً بلفّ .table-wrap { overflow-x:auto } الخاص به،
   فهذا لا يمنع أي عنصر من التمرير أفقياً داخلياً — فقط يمنع الصفحة بأكملها
   من الانزلاق يميناً/يساراً بسبب عنصر واحد تجاوز العرض بالخطأ).
   على html وحدها فقط — وليس body أيضاً كما كانت سابقاً — عمداً: وضع
   overflow-x:hidden على body يجعل body نفسها تُنشئ صندوق تمرير خاصاً بها
   بدل أن تبقى html هي العنصر الوحيد المسؤول عن تمرير الصفحة، وهذا بالضبط ما
   يكسر .sidebar { position: fixed } في متصفحات كثيرة (وتحديداً عبر اللمس/
   السحب على الجوال) فيبدأ "ينجرّ" مع تمرير الصفحة بدل أن يبقى مثبَّتاً على
   الشاشة كما هو متوقَّع من position:fixed. إبقاء html وحدها كعنصر التمرير
   الجذري يحل هذا نهائياً في كل المتصفحات، مع نفس الحماية الأفقية تماماً. */
html { overflow-x: hidden; }

html[dir="rtl"] body { font-family: 'Cairo', 'Segoe UI', 'Tahoma', system-ui, sans-serif; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: 14px; }

/* ---------------- Layout ---------------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: linear-gradient(180deg, #0f172a 0%, #131c31 100%);
  color: #cbd5e1;
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  z-index: 40;
  transition: width 0.15s ease;
}

.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 18px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 14px;
}
.sidebar-brand img { width: 36px; height: 36px; border-radius: 8px; object-fit: contain; background: #fff; padding: 3px; }
.sidebar-brand .logo-fallback {
  width: 36px; height: 36px; border-radius: 8px; background: var(--primary);
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; font-size: 16px;
}
.sidebar-brand-text { overflow: hidden; }
.sidebar-brand-text .name { font-weight: 700; font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-brand-text .tag { font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* .nav-group هنا هو حاوية <nav> الكاملة لكل عناصر الشريط الجانبي (وليست
   الفئة الواحدة Operations/Staff/Admin — تلك أصبحت .nav-category قابلة
   للطي، انظر أدناه). هذا التمرير المستقل بقي كشبكة أمان: حتى مع الطي، إن
   فتح المستخدم كل الفئات معاً على شاشة قصيرة جداً فلن تُقطع العناصر
   السفلية (الفوتر/قائمة الحساب) بلا وسيلة للوصول إليها — flex:1 يأخذ كل
   المساحة المتبقية بين الشعار والفوتر، min-height:0 يسمح لـ overflow
   بالعمل داخل flex column، overflow-y:auto يضيف شريط تمرير عند الحاجة فقط،
   ويبقى الشعار في الأعلى وقائمة الحساب في الأسفل ثابتين دوماً. */
.nav-group {
  margin-bottom: 4px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.nav-group::-webkit-scrollbar { width: 6px; }
.nav-group::-webkit-scrollbar-track { background: transparent; }
.nav-group::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }
.nav-group::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }
.nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; margin-bottom: 2px;
  color: #cbd5e1; font-size: 13.5px; font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.nav-link .ic { width: 20px; text-align: center; font-size: 15px; flex-shrink: 0; }
.nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-link.active { background: var(--primary); color: #fff; }
/* .sidebar-collapse-toggle هو <button> يحمل كلاس .nav-link ليطابق بصرياً
   (حشوة/hover) بقية عناصر القائمة تماماً — لكن الأزرار (بخلاف <a>) تحتاج
   إعادة ضبط صريحة لخصائص المتصفح الافتراضية (حدود/خلفية/محاذاة نص/خط) كي
   لا تظهر بمظهر "عنصر تحكم" افتراضي مختلف عن باقي الروابط. */
.sidebar-collapse-toggle { width: 100%; border: none; background: none; cursor: pointer; text-align: start; font: inherit; }

/* فئات الشريط الجانبي القابلة للطي (Operations/Staff/Admin) — details/summary
   أصليان (نفس آلية .collapsible المستخدمة في بروفايل العميل أعلى الملف).
   أكورديون حصري: فتح فئة يُغلق أي فئة أخرى تلقائياً، فتبقى فئة واحدة مفتوحة
   على الأكثر (انظر initShell في app.js لمنطق الإغلاق المتبادل والحفظ في
   localStorage والفتح القسري للفئة النشطة). العنوان بنفس لون الوسم الباهت
   "muted" لكن على خلفية داكنة. */
.nav-category { margin-bottom: 2px; }
.nav-category-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px;
  cursor: pointer; list-style: none; user-select: none;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: #64748b;
}
.nav-category-toggle::-webkit-details-marker { display: none; }
.nav-category-toggle::marker { content: ''; }
.nav-category-toggle:hover { color: #94a3b8; }
.nav-category-toggle .collapsible-chevron { color: #64748b; }
.nav-category[open] > .nav-category-toggle .collapsible-chevron { transform: rotate(90deg); }
.nav-category-items { padding-top: 2px; }

.sidebar-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.sidebar-user, .user-menu-trigger { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; }
.sidebar-user .avatar, .user-menu-trigger .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size: 13px; flex-shrink:0; }
.sidebar-user .info, .user-menu-trigger .info { overflow: hidden; flex: 1; }
.sidebar-user .info .n, .user-menu-trigger .info .n { font-size: 12.5px; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .info .r, .user-menu-trigger .info .r { font-size: 11px; color: #94a3b8; }
.logout-btn { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 15px; padding: 4px; }
.logout-btn:hover { color: #fff; }

/* ---------------- قائمة حساب المستخدم (user-menu) ----------------
   تحل محل أيقونتَي "حسابي"/"تسجيل الخروج" المتجاورتين سابقاً بلا تسمية —
   نفس فلسفة .dropdown/.dropdown-menu (سبق شرحها أعلاه) لكن bottom بدل top
   لأن هذا الصف يعيش في أسفل الشريط الجانبي فتفتح القائمة للأعلى بدل الأسفل
   حتى لا تخرج عن حدود الشاشة. الزر المُشغِّل (.user-menu-trigger) بلا خلفية/
   حدود خاصة به فيبدو مطابقاً بصرياً للصف الثابت القديم (.sidebar-user)،
   والفرق فقط أنه الآن button قابل للنقر بالكامل. */
.user-menu { position: relative; }
.user-menu-trigger { width: 100%; background: none; border: none; cursor: pointer; text-align: start; font: inherit; }
.user-menu-trigger:hover { background: rgba(255,255,255,0.06); }
.user-menu-popup {
  position: absolute; bottom: calc(100% + 6px); inset-inline: 0; z-index: 70;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg); padding: 6px; display: none;
}
.user-menu.open .user-menu-popup { display: block; }
.user-menu-popup a, .user-menu-popup button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: start;
  padding: 9px 12px; border: none; background: none; border-radius: 7px;
  font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--ink); cursor: pointer;
  text-decoration: none; box-sizing: border-box;
}
.user-menu-popup a:hover, .user-menu-popup button:hover { background: #f8fafc; }
/* .ic هنا نفس مقاس أيقونات روابط الشريط الجانبي (.nav-link .ic) تماماً —
   صندوق ثابت 20px بلا اعتماد على مقاس الرمز التعبيري (emoji) نفسه، لأن رمزَي
   "الدرع" و"الباب" (المستخدَمين هنا) قد يختلف حجمهما الفعلي المُقدَّم من
   الخط بلا هذا الصندوق، فيبدوان غير متناسقين رغم تطابق font-size المحيط. */
.user-menu-popup .ic { display: inline-flex; align-items: center; justify-content: center; width: 20px; font-size: 15px; flex-shrink: 0; }
.user-menu-popup-divider { height: 1px; background: var(--border); margin: 4px 6px; }

.main-area {
  flex: 1;
  margin-inline-start: var(--sidebar-w);
  min-width: 0;
  transition: margin-inline-start 0.15s ease;
}

/* ---------------- طي الشريط الجانبي لأيقونات فقط ----------------
   مقيَّد بـ @media (min-width: 881px) عمداً — نفس نقطة تحوّل الجوال/التابلت
   المستخدمة في @media (max-width: 880px) أدناه (بحيث لا تتداخل القاعدتان
   أبداً)، لأن الشريط هناك أصلاً drawer مخفي بالكامل افتراضياً (position:
   fixed خارج الشاشة)، فطيّه لأيقونات فقط لا معنى له ولا فائدة عملية منه؛
   ولأن دون هذا التقييد، لو طوى المستخدم الشريط على شاشة واسعة ثم ضيّق
   النافذة (أو دار جهازه اللوحي)، كانت قاعدة margin-inline-start:72px هنا
   (تخصيصها أعلى من قاعدة الجوال العادية بفعل كلاس body إضافي) ستتغلّب خطأً
   على margin-inline-start:0 الخاصة بوضع الجوال، فيظهر هامش فارغ 72px بلا
   أي شريط ظاهر أصلاً هناك (الشريط نفسه inset-inline-start:-280px مخفي).
   الكلاس sidebar-collapsed على body (لا على #sidebar) — انظر تعليق JS في
   initShell لسبب هذا الاختيار (main-area شقيق لـ#sidebar، لا ابن له). */
@media (min-width: 881px) {
  body.sidebar-collapsed .sidebar { width: 72px; }
  body.sidebar-collapsed .main-area { margin-inline-start: 72px; }
  body.sidebar-collapsed .sidebar-brand { justify-content: center; }
  body.sidebar-collapsed .sidebar-brand-text { display: none; }
  /* إخفاء نص كل رابط/زر (span.lbl) وتوسيط الأيقونة المتبقية في الصف بدل
     تركها بمحاذاة البداية كما كانت مع النص المجاور لها. */
  body.sidebar-collapsed .nav-link,
  body.sidebar-collapsed .sidebar-collapse-toggle {
    justify-content: center; padding-inline: 0; gap: 0;
  }
  body.sidebar-collapsed .nav-link .lbl,
  body.sidebar-collapsed .sidebar-collapse-toggle .lbl {
    display: none;
  }
  /* عناوين الفئات (Operations/Staff/Admin) تُخفى بالكامل — لا معنى لتصنيف
     نصّي حين لا مساحة لعرض أي نص أصلاً — وتُجبر عناصرها (روابطها) على
     الظهور دوماً بصرف النظر عن حالة [open] الفعلية المخزَّنة (!important
     ضروري هنا فعلاً، وليس فقط للراحة: هو الوسيلة الوحيدة لتجاوز قاعدة
     المتصفح الداخلية التي تُخفي محتوى <details> حين [open] غائبة، لأن CSS
     العادي لا يمكنه "إجبار" فتح عنصر تفاعلي أصلاً بلا هذا التجاوز). فتتحول
     القائمة بالكامل لعمود أيقونات مسطّح، بلا أي أكورديون أو تصنيف ظاهر.
     الحالة الأصلية ([open] الحقيقية على كل <details>) تبقى محفوظة بلا أي
     تعديل خلف الكواليس، فتعود القائمة لشكلها الطبيعي فوراً عند إلغاء الطي. */
  body.sidebar-collapsed .nav-category-toggle { display: none; }
  body.sidebar-collapsed .nav-category-items { display: block !important; }
  /* صف حساب المستخدم: إخفاء الاسم/الدور، إبقاء الصورة الرمزية فقط (title
     على الزر نفسه — أُضيف في app.js — يعرض الاسم كتلميح عند المرور). */
  body.sidebar-collapsed .user-menu-trigger { justify-content: center; padding-inline: 0; gap: 0; }
  body.sidebar-collapsed .user-menu-trigger .info { display: none; }
  /* قائمة "حسابي/تسجيل الخروج" المنبثقة يجب ألا تتقلّص لعرض 72px الضيق مع
     الزر المُشغِّل — inset-inline:0 الأصلية تُمدِّدها لتطابق عرض الحاوية
     الأب (.user-menu) بالضبط؛ هنا نُلغي ذلك (inset-inline-end:auto) ونثبّت
     البداية فقط مع min-width صريح، فتفيض القائمة خارج الشريط الضيق بعرضها
     الطبيعي بدل الانضغاط إلى 72px غير كافية لعرض "حسابي وإعدادات الأمان". */
  body.sidebar-collapsed .user-menu-popup { inset-inline-end: auto; min-width: 220px; }
}

.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(244,246,249,0.85);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  padding: 14px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.topbar-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar h1 { font-size: 19px; margin: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* زر القائمة (☰) — يفتح/يغلق الشريط الجانبي على الشاشات الصغيرة (تابلت/جوال)
   حيث يكون الشريط مخفياً افتراضياً خارج حدود الشاشة (انظر @media أدناه).
   مخفي تماماً على الشاشات الواسعة لأن الشريط يبقى ظاهراً بشكل دائم هناك. */
.menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--border);
  background: #fff; color: var(--ink); font-size: 18px; cursor: pointer; flex-shrink: 0;
}
.menu-toggle:hover { background: #f8fafc; }

/* زر البحث السريع الشامل (Quick Jump) في الشريط العلوي — ظاهر دائماً (بخلاف
   .menu-toggle المخفي على الشاشات الواسعة)، نفس المقاس والمظهر بالضبط
   لثبات بصري بينهما. */
.topbar-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--border);
  background: #fff; color: var(--ink); font-size: 16px; cursor: pointer; flex-shrink: 0;
}
.topbar-icon-btn:hover { background: #f8fafc; }

/* طبقة خلفية شفافة تظهر خلف الشريط الجانبي المفتوح على الشاشات الصغيرة —
   النقر عليها يُغلق الشريط، بنفس سلوك أي قائمة جانبية (drawer) معتادة في
   تطبيقات الجوال. */
.sidebar-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 35;
}
.sidebar-backdrop.show { display: block; }

.lang-switch {
  display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff;
}
.lang-switch button { border: none; background: transparent; padding: 6px 12px; font-size: 12.5px; cursor: pointer; color: var(--muted); font-weight: 600; }
.lang-switch button.active { background: var(--primary); color: #fff; }

.page-content { padding: 22px 26px 60px 26px; max-width: 1400px; }

/* ---------------- Cards ---------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-body { padding: 18px 20px; }
.card-header {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  /* flex-wrap:wrap دائماً (وليس فقط ضمن استعلامات @media أضيق أدناه) — بلا أي
     أثر على الشاشات الواسعة حيث يتّسع المحتوى في سطر واحد أصلاً، لكنه يمنع
     فيضاً أفقياً (overflow) في أي رأس بطاقة يحوي عدة أزرار (مثال: كشف الحساب
     بأزرار طباعة/إيميل/واتساب/تحميل الأربعة) على عرض التابلت (٥٦١-٨٨٠px)
     الذي كان بلا أي قاعدة flex-wrap مخصَّصة له سابقاً. */
  flex-wrap: wrap;
}
.card-header h2, .card-header h3 { margin: 0; font-size: 15.5px; font-weight: 700; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
/* أعمدة مخصَّصة لبعض الصفحات (تقارير/مدفوعات/كشف حساب/ملف عميل) تحتاج عدد
   بطاقات مختلفاً عن الافتراضي (4) على الشاشات الواسعة — كانت هذه الصفحات
   تُمرِّر grid-template-columns كـ inline style مباشرة على العنصر، ما يجعله
   يتفوّق في التخصيص (specificity) على أي قاعدة @media هنا فيبقى العدد نفسه
   ثابتاً حتى على شاشة جوال ضيقة (مثال: 5 أعمدة على عرض 375px). الحل: كلاسات
   مخصَّصة تحمل استجابتها الخاصة بدل inline style، بلا حاجة لأي !important. */
.kpi-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.kpi-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) {
  .kpi-grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
  .kpi-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .kpi-grid, .kpi-grid.cols-5, .kpi-grid.cols-3, .kpi-grid.cols-2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .kpi-grid, .kpi-grid.cols-5, .kpi-grid.cols-3, .kpi-grid.cols-2 { grid-template-columns: 1fr; }
}
.kpi-card { padding: 18px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.kpi-card .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kpi-card .icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.kpi-card .label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.kpi-card .value { font-size: 25px; font-weight: 800; margin-top: 2px; }
.kpi-card .delta { font-size: 11.5px; margin-top: 6px; color: var(--muted); }

.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
@media (max-width: 1000px) { .grid-2 { grid-template-columns: 1fr; } }
/* بطاقتا grid-2 تتمدَّدان افتراضياً لتطابقا ارتفاع أطول بطاقة في الصف (بطاقة
   "أحدث بطاقات العمل" غالباً أطول من بطاقة الرسم البياني القصيرة) — بدون هذا
   القسم يبقى الرسم بارتفاعه الثابت فيترك فراغاً فارغاً أسفله داخل البطاقة
   الممتدة. نجعل كل بطاقة عموداً مرناً (flex column) بحيث يملأ محتواها
   الداخلي (تحديداً #chart-holder) كامل المساحة المتاحة بدل ترك فراغ. */
.grid-2 > .card { display: flex; flex-direction: column; }
.grid-2 > .card > .card-body { flex: 1; display: flex; flex-direction: column; }
#chart-holder { flex: 1; display: flex; flex-direction: column; }
#chart-holder > * { flex: 1; min-height: 220px; }

/* ---------------- Tables ---------------- */
.table-wrap { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; }
table.data-table th {
  text-align: start; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; vertical-align: middle; }
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tbody tr { cursor: pointer; transition: background 0.1s; }
table.data-table tbody tr:hover { background: #f8fafc; }
.table-empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* ---------------- Badges ---------------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.badge-slate { background: #f1f5f9; color: #475569; }
.badge-blue { background: var(--info-light); color: var(--info); }
.badge-amber { background: var(--warning-light); color: var(--warning); }
.badge-green { background: var(--success-light); color: var(--success); }
.badge-red { background: var(--danger-light); color: var(--danger); }
.badge-teal { background: var(--primary-light); color: var(--primary-dark); }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: 9px; border: 1px solid transparent;
  font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { background: #fff; border-color: var(--border); color: var(--ink); }
.btn-outline:hover { background: #f8fafc; }
.btn-danger { background: var(--danger-light); color: var(--danger); }
.btn-danger:hover { background: #fee2e2; }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: #f1f5f9; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.icon-btn { width: 34px; height: 34px; padding: 0; border-radius: 8px; }

/* ---------------- Dropdown (مثال: زر "معاملة جديدة" في بروفايل العميل) ----------------
   مكوّن بسيط بلا أي مكتبة خارجية: .dropdown-menu مخفية افتراضياً، وتظهر فقط
   عند إضافة كلاس .open على الحاوية الأب (.dropdown) — يُضاف/يُزال عبر JS في
   الصفحة المستخدِمة (انظر customer-detail.html). inset-inline-end بدل right
   لتعمل بشكل صحيح تلقائياً في الاتجاهين RTL/LTR بلا أي منطق شرطي إضافي. */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 60;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg); min-width: 200px; padding: 6px; display: none;
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown-menu button, .dropdown-menu a {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: start;
  padding: 9px 12px; border: none; background: none; border-radius: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer;
  text-decoration: none; box-sizing: border-box;
}
.dropdown-menu button:hover, .dropdown-menu a:hover { background: #f8fafc; }
/* أيقونة ثابتة العرض داخل عناصر القائمة — نفس مقياس .nav-link .ic و
   .user-menu-popup .ic بالضبط، لثبات بصري عبر كل قوائم التطبيق المنبثقة. */
.dropdown-menu .ic { display: inline-flex; align-items: center; justify-content: center; width: 20px; font-size: 15px; flex-shrink: 0; }

/* ---------------- Row actions menu (زر ⋮ لكل صف جدول) ----------------
   بديل لتكديس عدة أيقونات منفصلة (طباعة/تحميل/إيميل/واتساب/حذف) في عمود
   ضيق — مستخدَم في: صفحة الفاتورة، بروفايل العميل (المدفوعات وسجل الرصيد)،
   وصفحة "المدفوعات المستلمة". بخلاف .dropdown/.dropdown-menu أعلاه (التي
   تعتمد position:absolute بالنسبة لأصل موضعه position:relative)، هذه
   القائمة تستخدم position:fixed بإحداثيات محسوبة عبر JS في
   initRowActionDropdowns بملف app.js. السبب: هذه القوائم تعيش داخل جداول
   ملفوفة بـ .table-wrap (overflow-x:auto) — ووفق مواصفة CSS Overflow، مجرد
   ضبط overflow-x يجعل overflow-y المحسوب 'auto' ضمنياً حتى لو تُرك بلا ضبط
   صريح، فتُقطَع أي قائمة absolute تحاول الفتح أسفل الصفوف القريبة من نهاية
   الجدول. position:fixed يُفلت من مشكلة القطع هذه تماماً بصرف النظر عن أي
   عنصر أصل وسيط، لأن إحداثياته تُحسَب بالنسبة للنافذة (viewport) مباشرة. */
.row-actions-menu {
  position: fixed; z-index: 200;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg); min-width: 190px; padding: 6px; display: none;
}
.row-actions-menu.open { display: block; }
.row-actions-menu button, .row-actions-menu a {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: start;
  padding: 9px 12px; border: none; background: none; border-radius: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer;
  text-decoration: none; box-sizing: border-box;
}
.row-actions-menu button:hover, .row-actions-menu a:hover { background: #f8fafc; }
.row-actions-menu button.text-danger, .row-actions-menu a.text-danger { color: var(--danger); }
.row-actions-trigger { font-size: 16px; line-height: 1; }

/* ---------------- Collapsible sections (details/summary) ----------------
   مثال: أقسام بروفايل العميل (سيارات/بطاقات عمل/عروض أسعار/فواتير/مدفوعات/
   سجل رصيد) — details/summary أصليان في HTML، بلا أي جافاسكريبت إضافي
   (فتح/إغلاق، دعم لوحة المفاتيح، يعملان في كل المتصفحات مباشرة). summary
   يُعاد تنسيقه ليطابق .card-header تماماً (نفس الحشوة/التخطيط)، مع إخفاء
   السهم الافتراضي للمتصفح (::marker) واستبداله بسهم ▸ مخصَّص يدور 90 درجة
   عند إضافة المتصفح تلقائياً للخاصية [open] على details. */
details.collapsible { padding: 0; }
details.collapsible > summary.card-header {
  cursor: pointer; list-style: none; user-select: none;
}
details.collapsible > summary.card-header::-webkit-details-marker { display: none; }
details.collapsible > summary.card-header::marker { content: ''; }
details.collapsible:not([open]) > summary.card-header { border-bottom: none; }
.collapsible-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none; color: var(--muted); font-size: 12px;
  transition: transform 0.15s ease;
}
details.collapsible[open] > summary.card-header .collapsible-chevron { transform: rotate(90deg); }
.summary-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.summary-title h3 { margin: 0; }
.summary-meta { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }

/* ---------------- Forms ---------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.field .hint { font-size: 11.5px; color: var(--muted); }
/* نسخة عامة من .hint تعمل خارج .field أيضاً (مثال: ملاحظة أسفل صندوق اختيار
   "مدير" في نافذة المستخدم، أو ملخص الصلاحيات داخل خلية جدول) — القاعدة
   السابقة أعلاه مقصورة على .field فقط فلا تُطبَّق تلقائياً خارجه. */
.hint { font-size: 11.5px; color: var(--muted); }
.field input, .field select, .field textarea {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--ink);
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.field textarea { resize: vertical; min-height: 70px; }
/* استثناء صناديق الاختيار (checkbox) من تنسيق width:100%/padding/border
   العام للحقول أعلاه — بدونه يتمدد الصندوق ليملأ العرض كاملاً ويضغط نص
   التسمية المجاورة له (داخل label بنمط flex) إلى عمود ضيق جداً فيتكسّر
   حرفاً حرفاً (كما ظهر في تبويبات عروض الأسعار/الفواتير/بطاقات العمل). */
.field input[type="checkbox"] { width: auto; flex: 0 0 auto; padding: 0; border: none; border-radius: 0; }
.input-group { display: flex; gap: 8px; }

/* ---------------- Customer picker (بحث حي بدل select طويل) ----------------
   بديل عن <select> يحمّل كل العملاء دفعة واحدة — انظر initCustomerPicker في
   app.js. نفس فلسفة .dropdown-menu أعلاه (absolute بالنسبة لأصل موضعه
   relative) لأن هذا المكوّن يعيش داخل نوافذ منبثقة (.modal-box) وليس داخل
   جدول ملفوف بـ overflow-x مثل .row-actions-menu، فلا حاجة لـ position:fixed. */
.cust-picker { position: relative; }
.cust-picker-menu {
  position: absolute; top: calc(100% + 4px); inset-inline: 0; z-index: 70;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg); max-height: 260px; overflow-y: auto; padding: 6px;
}
.cust-picker-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: start; padding: 8px 10px; border: none; background: none;
  border-radius: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.cust-picker-item:hover, .cust-picker-item.active { background: #f8fafc; }
.cust-picker-empty { padding: 10px; font-size: 12.5px; color: var(--muted); text-align: center; }

/* ---------------- Login ---------------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0f172a, #0ea5a4); padding: 20px; }
.login-card { width: 100%; max-width: 400px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); padding: 34px 30px; }
.login-logo { text-align: center; margin-bottom: 18px; }
.login-logo .mark { width: 56px; height: 56px; border-radius: 14px; background: var(--primary); color: #fff; font-weight: 800; font-size: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px auto; }
.login-title { text-align: center; font-size: 18px; font-weight: 800; margin-bottom: 2px; }
.login-sub { text-align: center; font-size: 12.5px; color: var(--muted); margin-bottom: 24px; }

/* ---------------- Misc ---------------- */
.muted { color: var(--muted); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }

.tabs-bar { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; flex-wrap: wrap; }
.tab-btn {
  padding: 10px 16px; border: none; background: transparent; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--primary, var(--info)); border-bottom-color: var(--primary, var(--info)); }

.data-table tr.grand td { border-top: 2px solid var(--ink); font-weight: 800; }

.period-chip {
  border: 1px solid var(--border); background: #fff; color: var(--muted);
  font-size: 11px; padding: 3px 9px; border-radius: 999px; cursor: pointer; font-weight: 600;
}
.period-chip.active { background: var(--success); color: #fff; border-color: var(--success); }
.chart-group-btn.active { background: var(--ink); color: #fff; }
/* تبديل "الكل / صيانة مستحقة قريباً" في صفحة السيارات (public/vehicles.html)
   — نفس مقاس ولون التفعيل المستخدَمين في chart-group-btn بالضبط لثبات
   بصري بين كل أزرار التبديل الحصري (exclusive toggle) في التطبيق. */
.veh-filter-btn.active { background: var(--ink); color: #fff; }

/* ---- الرسم البياني (أعمدة) ---- */
.chart-wrap { position: relative; display: flex; flex-direction: column; }
.chart-empty {
  display: flex; align-items: center; justify-content: center; color: var(--muted);
  font-size: 13px; border: 1px dashed var(--border); border-radius: 10px;
}
.chart-gridlines {
  position: absolute; inset-inline: 0; top: 0; bottom: 34px; pointer-events: none;
}
.chart-gridline {
  position: absolute; inset-inline: 0; border-top: 1px dashed var(--border);
  display: flex; align-items: flex-end;
}
.chart-gridline:first-child { border-top: none; }
.chart-gridline-label {
  position: absolute; inset-inline-start: 0; transform: translateY(-100%);
  font-size: 10px; color: var(--muted); background: var(--surface); padding-inline-end: 6px;
}
.chart-bars {
  position: relative; z-index: 1; flex: 1; display: flex; align-items: flex-end;
  gap: 6px; padding-inline-start: 34px; padding-block-end: 0; overflow-x: auto;
}
.chart-bar-col {
  flex: 1 1 26px; min-width: 26px; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 4px; cursor: default;
}
.chart-bar-value {
  font-size: 10px; font-weight: 700; color: var(--ink); white-space: nowrap;
  opacity: 0; transition: opacity .12s;
}
.chart-bar-col:hover .chart-bar-value { opacity: 1; }
.chart-bar-track {
  width: 100%; max-width: 34px; height: calc(100% - 34px); display: flex;
  align-items: flex-end; border-radius: 6px 6px 0 0; overflow: hidden;
}
.chart-bar-fill {
  width: 100%; background: linear-gradient(180deg, var(--chart-color, #14b8a6), var(--chart-color-2, #0d9488));
  border-radius: 6px 6px 0 0; min-height: 2px; transition: height .25s ease;
}
.chart-bar-col:hover .chart-bar-fill { filter: brightness(1.08); }
.chart-bar-label {
  font-size: 10.5px; color: var(--muted); height: 34px; display: flex;
  align-items: flex-start; justify-content: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-gap { display: flex; align-items: center; gap: 10px; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; }
.section-title { font-size: 13px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 24px 0 12px 0; }
.divider { height: 1px; background: var(--border); margin: 16px 0; }
.empty-state { text-align: center; padding: 50px 20px; color: var(--muted); }
.empty-state .ic { font-size: 34px; margin-bottom: 10px; opacity: 0.5; }
.tag-pill { display: inline-block; padding: 2px 9px; border-radius: 6px; background: #f1f5f9; font-size: 11px; font-weight: 700; color: var(--muted); }
.link-btn { color: var(--primary); font-weight: 700; cursor: pointer; font-size: 13px; }
.link-btn:hover { text-decoration: underline; }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- Modal ---------------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto;
}
.modal-box { background: #fff; border-radius: 14px; width: 100%; max-width: 560px; box-shadow: var(--shadow-lg); animation: modalIn 0.15s ease-out; }
.modal-box.wide { max-width: 780px; }
.modal-box.xwide { max-width: 1060px; }
@keyframes modalIn { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-header { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-header h3 { margin: 0; font-size: 16px; font-weight: 800; }
.modal-close { background: none; border: none; font-size: 20px; color: var(--muted); cursor: pointer; line-height: 1; }
.modal-body { padding: 20px 22px; max-height: 70vh; overflow-y: auto; }
.modal-footer { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

/* ---------------- البحث السريع الشامل (Quick Jump) ----------------
   .qj-modal تُلغي حشوة/تخطيط header-body-footer المعتاد لـ.modal-box (انظر
   initQuickJump في app.js) — حقل البحث ملتصق بأعلى الصندوق مباشرة (نفس نمط
   command palette معروف: Spotlight/Notion/Linear)، والنتائج تحته مباشرة بلا
   أي فاصل بصري إضافي غير الخط الفاصل تحت حقل البحث. */
.modal-box.qj-modal { max-width: 560px; }
.qj-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.qj-input-ic { font-size: 16px; color: var(--muted); flex-shrink: 0; }
.qj-input { flex: 1; border: none; outline: none; background: none; font: inherit; font-size: 15px; color: var(--ink); }
.qj-results { max-height: 60vh; overflow-y: auto; padding: 8px; }
.qj-group-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 4px; }
.qj-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
  cursor: pointer; text-decoration: none; color: var(--ink);
}
.qj-item .ic { width: 20px; text-align: center; font-size: 15px; flex-shrink: 0; color: var(--muted); }
.qj-item .main { min-width: 0; flex: 1; }
.qj-item .title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qj-item .sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qj-item:hover, .qj-item.active { background: var(--primary-light); }
.qj-empty { padding: 34px 20px; text-align: center; color: var(--muted); font-size: 13px; }

/* ---------------- Toast ---------------- */
#toast-root { position: fixed; top: 20px; inset-inline-end: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast { padding: 12px 18px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 13px; box-shadow: var(--shadow-lg); min-width: 220px; animation: toastIn 0.2s ease-out; }
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
@keyframes toastIn { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---------------- Line items editor ---------------- */
.items-editor { width: 100%; border-collapse: collapse; }
.items-editor th { text-align: start; font-size: 11px; color: var(--muted); text-transform: uppercase; padding: 6px 8px; }
.items-editor td { padding: 6px 8px; }
.items-editor input, .items-editor select { padding: 7px 9px; }
.items-editor .qty-col { width: 80px; }
.items-editor .price-col { width: 120px; }
.items-editor .total-col { width: 110px; font-weight: 700; }
.items-editor .type-col { width: 110px; }
.items-editor .del-col { width: 40px; }

.totals-panel { max-width: 320px; margin-inline-start: auto; }
.totals-panel .row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13.5px; }
.totals-panel .row.grand { border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 10px; font-size: 16px; font-weight: 800; }
.totals-panel .row .lbl { color: var(--muted); }

/* ==================== الاستجابة للشاشات الصغيرة (تابلت/جوال) ====================
   نقطتا الكسر: 880px (تابلت — الشريط الجانبي يتحوّل من "ثابت دائماً" إلى
   "قائمة منسدلة (drawer) يفتحها زر ☰")، و560px (هاتف — تكثيف إضافي للحشوات
   والخطوط وأحجام العناصر التفاعلية لتناسب لمس الإصبع بدل دقة الماوس). */
@media (max-width: 880px) {
  .sidebar { inset-inline-start: -280px; transition: inset-inline-start 0.2s; box-shadow: var(--shadow-lg); }
  .sidebar.open { inset-inline-start: 0; }
  .main-area { margin-inline-start: 0; }
  .menu-toggle { display: flex; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  /* زر طي الشريط لأيقونات فقط مخصَّص للشاشات الواسعة حصراً (انظر التعليق
     المطوَّل عند @media (min-width: 881px) أعلى الملف) — الشريط هنا drawer
     مخفي بالكامل افتراضياً، فلا فائدة عملية من طيّه لأيقونات فقط أيضاً. */
  .sidebar-collapse-toggle { display: none; }

  /* أهداف لمس أكبر (توصية Apple/Google: 44px حداً أدنى) — الأحجام الحالية
     مضبوطة لدقة الماوس على شاشات واسعة، أصغر من المريح للمس بالإصبع. */
  .nav-link { padding: 13px 12px; font-size: 14.5px; }
  .btn { padding: 11px 16px; font-size: 14px; }
  .btn-sm { padding: 9px 13px; }
  .icon-btn { width: 40px; height: 40px; }
  table.data-table td { padding: 13px 14px; }
  .tab-btn { padding: 12px 14px; }
}

@media (max-width: 560px) {
  .topbar { padding: 12px 14px; gap: 10px; }
  .topbar h1 { font-size: 16.5px; }
  .page-content { padding: 16px 14px 50px 14px; }
  .card-header { padding: 14px 16px; flex-wrap: wrap; }
  .card-body { padding: 16px; }
  .modal-overlay { padding: 0; align-items: stretch; }
  /* .wide/.xwide مذكورتان صراحةً هنا: بدونهما، تخصيص .modal-box.wide الأعلى
     (صنفان) يتغلّب على .modal-box العادي (صنف واحد) بحكم الخصوصية (specificity)
     بصرف النظر عن @media، فتبقى نوافذ "wide/xwide" بعرضها الثابت (780/1060px)
     حتى على أضيق الهواتف بدل أن تمتد لعرض الشاشة كالمفروض. */
  .modal-box, .modal-box.wide, .modal-box.xwide { max-width: 100%; min-height: 100%; border-radius: 0; }
  .modal-header { padding: 16px; }
  .modal-body { padding: 16px; max-height: none; }
  .modal-footer { padding: 14px 16px; flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 auto; }
  .totals-panel { max-width: 100%; }
  /* أزرار الإجراءات في رأس البطاقة (مثال: "+ بطاقة عمل جديدة") تمتد لعرض
     الشاشة كاملاً بدل الانضغاط بجانب العنوان على عرض ضيق جداً. مجموعة الأزرار
     نفسها (.flex-gap) يجب أن تلتف (wrap) أيضاً وإلا يحاول الفليكس ضغط كل
     الأزرار في سطر واحد بعرض متساوٍ صغير بدل تكديسها عمودياً كما هو مقصود
     من width:100% أعلاه (مثال حرج: أربعة أزرار طباعة/إيميل/واتساب/تحميل في
     رأس صفحة كشف الحساب). */
  .card-header .btn { width: 100%; justify-content: center; }
  .card-header .flex-gap { flex-wrap: wrap; width: 100%; }
}

/* ---------------- Vehicle intake inspection (car diagram) ---------------- */
.insp-layout { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.insp-diagram-col { flex: 1 1 380px; min-width: 300px; }
.insp-table-col { flex: 1 1 380px; min-width: 300px; }
.insp-diagram-wrap { background: #f8fafc; border: 1px solid var(--border); border-radius: 12px; padding: 18px; display: flex; justify-content: center; }
.insp-zone { cursor: pointer; transition: fill 0.15s ease, fill-opacity 0.15s ease, stroke 0.15s ease; }
.insp-zone:not(.damaged):hover { fill: #fbbf24; fill-opacity: 0.3; stroke: #f59e0b; }
.insp-badge { background: var(--ink); color: #fff; border-radius: 8px; padding: 3px 12px; font-size: 13px; font-weight: 800; }
.insp-remarks-input {
  width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px;
  font-size: 12.5px; font-family: inherit; resize: vertical; min-height: 38px; background: #fff;
}
.insp-remarks-input:focus { outline: none; border-color: var(--primary); }
.insp-table-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.insp-readonly-svg .insp-diagram { max-width: 300px; }

/* على أضيق الهواتف (٣٢٠-٣٦٠px)، min-width:300px الثابت على عمودي المخطط
   والجدول (معاً 380px flex-basis) يتجاوز عرض المحتوى المتاح بعد الحشوة،
   فيُسبِّب انزلاقاً أفقياً خفيفاً لكامل الصفحة. نُصغِّر الحد الأدنى هنا فقط
   على هذا المقاس تحديداً، بلا أي أثر على التابلت أو الشاشات الأوسع. */
@media (max-width: 380px) {
  .insp-diagram-col, .insp-table-col { min-width: 0; flex-basis: 100%; }
}