html[data-product="banderp"] .kpi-detail-label {display:block; color:var(--primary); font-size:12px; margin-top:10px;}
html[data-product="banderp"] [data-kpidetail]:focus-visible,
html[data-product="banderp"] [data-missing-attach]:focus-visible {outline:3px solid #60a5fa; outline-offset:3px;}
.search-result-row {display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:12px 0; border-bottom:1px solid var(--border); overflow-wrap:anywhere;}
.search-result-group {margin-top:14px;}
:root {
  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --text: #101828;
  --text-dim: #667085;
  --border: #e4e7ec;
  --primary: #1d4ed8;
  --primary-dark: #1e40af;
  --primary-soft: #e8effe;
  --danger: #dc2626;
  --danger-soft: #fdeaea;
  --warning: #d97706;
  --warning-soft: #fef3e2;
  --success: #16a34a;
  --success-soft: #e9f9ee;
  --gray-soft: #eef1f5;
  --radius: 14px;
  --radius-sm: 10px;
  --sidebar-w: 240px;
  --topbar-h: 60px;
  --maincat-bar-h: 48px;
  --shadow: 0 2px 10px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.18);
  font-size: 15px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Tahoma, "Cairo", system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }

#app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- شريط الأقسام الرئيسية (أفقي، أعلى الصفحة بالكامل) ---------- */
/* #تنقل جديد: بديل القائمة الجانبية المسطّحة القديمة -- الأقسام الرئيسية
   بتظهر هنا أفقيًا، والقائمة الجانبية العمودية (.sidebar تحت) بتعرض بس
   عناصر/تبويبات القسم المختار. sticky بنفس منطق .sidebar/.topbar تحت. */
.maincat-bar-wrap {
  /* #FIX-stickyscroll: sticky بيتحط على الغلاف الخارجي ده لوحده (مش على
     العنصر اللي بيتمرر أفقيًا نفسه). لما نفس العنصر يكون sticky ومعاه
     overflow-x:auto مع بعض، بعض متصفحات الموبايل (خصوصًا Android WebView)
     بتصفّر scrollLeft بتاعه لوحدها كل ما يحصل أي إعادة حساب لموضعه
     الـsticky (زي أي إعادة رسم/تغيير ارتفاع محتوى تحته) -- وده هو السبب
     الحقيقي وراء "الشريط بيرجع لأوله بمجرد ما تدوس على أي حاجة" اللي
     المستخدم أكّدها، مش مشكلة في حفظ/استرجاع القيمة في الجافاسكريبت (اللي
     كان شغال صح فعليًا). الفصل ده بيمنع المشكلة من أصلها بدل ما نحاول
     نلاحق إعادة الضبط بعد ما تحصل.
  */
  height: var(--maincat-bar-h);
  flex-shrink: 0;
  background: #0f1b3d;
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky;
  top: 0;
  z-index: 50;
}
.maincat-bar {
  height: 100%;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 10px;
  overflow-x: auto;
  /* #FIX-desktopscroll: شريط الاسكرول المرئي ده متعمّد يفضل ظاهر هنا (في
     الديسكتوب/الشاشات العريضة) -- لأنه في الوضع ده هو الوسيلة الوحيدة
     للمستخدم إنه يعرف أصلًا إن فيه أقسام تانية متقطّعة برة العرض الظاهر
     ويوصلها بالماوس (زي "الحسابات")؛ من غيره الأقسام دي بتبقى مقطوعة
     ومفيش أي طريقة تانية توصلها من غير تاتش. إخفاء الشريط (تحت) مقصور بس
     على شاشات الموبايل الصغيرة اللي فيها سحب بالإصبع أصلًا. */
}
.maincat-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 0 14px; white-space: nowrap; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #97a3c9;
  border-bottom: 2px solid transparent;
}
.maincat-btn .ic { font-size: 15px; }
.maincat-btn:hover { color: #cdd6f0; }
.maincat-btn.active { color: #fff; border-bottom-color: var(--primary); }

/* ---------- Sidebar ---------- */
.app-row { display: flex; flex: 1; min-height: 0; }
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: #0f1b3d;
  color: #cdd6f0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--maincat-bar-h);
  height: calc(100vh - var(--maincat-bar-h));
  z-index: 40;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 18px; font-weight: 800; font-size: 16px; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand .logo { font-size: 22px; }
/* اللوجو كان 32px ومفصّل بشكل بيبقى صعب يتوضح بالحجم ده على الموبايل --
   كُبِّر مع خلفية بيضاء خفيفة ودائرية عشان يبان بوضوح فوق خلفية القائمة
   الجانبية الغامقة. */
.sidebar-brand .logo-img {
  width: 42px; height: 42px; object-fit: contain; flex-shrink: 0;
  background: #fff; border-radius: 10px; padding: 3px;
}
.sidebar-brand-text { flex: 1; min-width: 0; }
/* زرار إغلاق القائمة الجانبية من جوه القائمة نفسها -- بيظهر بس على
   الموبايل (نفس breakpoint بتاع menu-toggle) عشان المستخدم ميحتاجش
   يدور على الهامبرجر اللي ممكن يكون اتغطى بالقائمة المفتوحة. */
.sidebar-close { display: none; background: rgba(255,255,255,.1); border: none; color: #fff; font-size: 18px; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; flex-shrink: 0; }
/* #285 follow-up: بانر المدة المتبقية من التجربة اتنقل من القائمة الجانبية
   لأعلى الشاشة (الشريط العلوي، أول عنصر داخل topbar-actions اللي بيظهر يسار
   الشاشة في الـ RTL) -- شكل مضغوط بخط واحد عشان يتماشى مع ارتفاع الشريط
   العلوي الثابت (--topbar-h). */
.sub-banner {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,.16);
  white-space: nowrap;
}
.sub-banner-icon { font-size: 14px; }
.sub-banner-title { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.85); text-transform: uppercase; letter-spacing: .03em; }
.sub-banner-days { font-size: 12.5px; font-weight: 800; color: #fff; }
.sub-banner-track { display: inline-block; width: 46px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.28); overflow: hidden; }
.sub-banner-fill { display: block; height: 100%; border-radius: 999px; background: #fff; transition: width .3s ease; }
.sub-banner-ok { background: linear-gradient(135deg, #1d4ed8, #1e3a8a); }
.sub-banner-warning { background: linear-gradient(135deg, #d97706, #92400e); }
.sub-banner-urgent { background: linear-gradient(135deg, #dc2626, #7f1d1d); }
@media (max-width: 1024px) {
  .sub-banner-title, .sub-banner-track { display: none; }
}
/* #294: بانر تثبيت التطبيق -- شريط كامل العرض أعلى محتوى الصفحة (شوف
   installBannerHtml() في app.js)، بس مش جوه topbar-actions المضغوطة زي
   sub-banner فوق، لأنه محتاج مساحة لنص + زرار فعل + زرار إغلاق. */
.install-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; margin: 0 0 14px;
  background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
  border-radius: 12px; box-shadow: 0 3px 10px rgba(0,0,0,.12);
}
.install-banner-icon { font-size: 18px; flex-shrink: 0; }
.install-banner-text { flex: 1; font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.5; }
.install-banner .btn.sm { flex-shrink: 0; }
.install-banner .btn-icon { color: rgba(255,255,255,.85); flex-shrink: 0; }
@media (max-width: 1024px) {
  .install-banner { flex-wrap: wrap; }
  .install-banner-text { flex-basis: 100%; }
}
.sidebar-nav { flex: 1; padding: 14px 10px; overflow-y: auto; }
/* #تنقل جديد: كل فئة رئيسية عندها مجموعة عناصر جوه القائمة الجانبية دايمًا
   موجودة في الـ DOM -- بس المجموعة النشطة (اللي بتطابق زرار الشريط الأفقي
   المختار) هي اللي بتظهر. */
.sidebar-cat-group { display: none; }
.sidebar-cat-group.active { display: block; }
.sidebar-section { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #7684ad; padding: 14px 10px 6px; }
.side-link {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: 10px; margin-bottom: 2px;
  font-size: 13.5px; font-weight: 600; cursor: pointer; color: #cdd6f0;
}
.side-link .ic { font-size: 16px; width: 20px; text-align: center; }
.side-link:hover { background: rgba(255,255,255,.06); }
.side-link.active { background: var(--primary); color: #fff; }
.side-link .count {
  margin-inline-start: auto; background: rgba(255,255,255,.15); font-size: 10.5px;
  padding: 2px 7px; border-radius: 999px; font-weight: 700;
}
.side-link.active .count { background: rgba(255,255,255,.25); }
.sidebar-footer { padding: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.lang-switch { display: flex; background: rgba(255,255,255,.08); border-radius: 999px; padding: 3px; }
.lang-switch button {
  flex: 1; border: none; background: transparent; padding: 7px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: #97a3c9; cursor: pointer;
}
.lang-switch button.active { background: var(--primary); color: #fff; }

/* ---------- Main ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px;
  position: sticky; top: var(--maincat-bar-h); z-index: 30;
}
/* #EPW-mobile: قسم العنوان (زرار القائمة + h1 + العنوان الفرعي) هو أول
   div جوه .topbar بدون كلاس مخصص -- min-width:0 هنا ضروري عشان يسمح له
   يضيق ويقصّ العنوان الطويل بدل ما يدفع أزرار .topbar-actions برّا الشاشة
   (سبب "الزرارات مختفية/متداخلة" اللي اتبلّغ عنه على EPW بعد إضافة زرار
   طباعة القائمة الرابع في topbar-actions). */
.topbar > div:first-child { min-width: 0; flex: 1 1 auto; }
.topbar h1 {
  font-size: 18px; margin: 0; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar .sub { font-size: 12px; color: var(--text-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.menu-toggle { display: none; background: none; border: none; font-size: 20px; cursor: pointer; flex-shrink: 0; }

.content { padding: 22px; flex: 1; }

.btn {
  border: none; border-radius: var(--radius-sm); padding: 10px 16px;
  font-size: 13.5px; font-weight: 700; cursor: pointer; background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:active { background: var(--primary-dark); }
.btn.secondary { background: var(--gray-soft); color: var(--text); }
.btn.danger { background: var(--danger-soft); color: var(--danger); }
.btn.sm { padding: 7px 12px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-icon { background:none; border:none; cursor:pointer; font-size:15px; padding:6px; border-radius:8px; color: var(--text-dim); }
.btn-icon:hover { background: var(--gray-soft); }

/* ---------- KPI Cards ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.kpi-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
}
.kpi-card .top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kpi-card .ic { width: 36px; height: 36px; border-radius: 10px; display:flex; align-items:center; justify-content:center; font-size: 17px; }
.kpi-card .num { font-size: 26px; font-weight: 800; display: block; }
.kpi-card .lbl { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.kpi-card.blue .ic { background: var(--primary-soft); }
.kpi-card.orange .ic { background: var(--warning-soft); }
.kpi-card.green .ic { background: var(--success-soft); }
.kpi-card.red .ic { background: var(--danger-soft); }
.kpi-card.clickable { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.kpi-card.clickable:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); transform: translateY(-1px); }
.legend-item.clickable, .bar-col.clickable { cursor: pointer; }
.legend-item.clickable:hover, .bar-col.clickable:hover .bar-fill { filter: brightness(1.12); }

.section-title { font-size: 14px; font-weight: 800; margin: 4px 0 10px; color: var(--text); }

.mini-stat { min-width: 110px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); text-align: center; }
.mini-stat.clickable { cursor: pointer; transition: box-shadow .15s; }
.mini-stat.clickable:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.mini-stat-num { display: block; font-size: 20px; font-weight: 800; }
.mini-stat-lbl { display: block; font-size: 11.5px; color: var(--text-dim); font-weight: 600; margin-top: 2px; }

/* ---------- Grid layout ---------- */
.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: start; }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 16px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.panel-head h3 { margin: 0; font-size: 14.5px; font-weight: 800; }
.panel-body { padding: 16px 18px; }
.panel-body.no-pad { padding: 0; }
.link-btn { background:none;border:none;color:var(--primary);font-size:12.5px;font-weight:700;cursor:pointer; }

/* ---------- Bars (simple chart) ---------- */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 140px; padding-top: 10px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bar-track { width: 100%; max-width: 34px; height: 110px; background: var(--gray-soft); border-radius: 6px; display: flex; align-items: flex-end; overflow:hidden; }
.bar-fill { width: 100%; background: linear-gradient(180deg, var(--primary), var(--primary-dark)); border-radius: 6px 6px 0 0; }
.bar-lbl { font-size: 10.5px; color: var(--text-dim); font-weight: 700; }
.bar-val { font-size: 10.5px; color: var(--text); font-weight: 700; }

.donut-wrap { display: flex; align-items: center; gap: 18px; }
.donut-legend { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.legend-item .lv { margin-inline-start: auto; font-weight: 700; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: start; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); font-weight: 700; padding: 10px 18px; border-bottom: 1px solid var(--border);
  background: var(--surface-2); white-space: nowrap;
}
tbody td { padding: 12px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--surface-2); }
.cell-strong { font-weight: 700; }
.cell-dim { color: var(--text-dim); font-size: 12px; }
/* مؤشر مدة الاشتراك (لوحة المنصة): تلوين تلميح الأيام المتبقية حسب الإلحاح. */
.danger-text { color: #dc2626; font-weight: 700; }
.warn-text { color: #d97706; font-weight: 700; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.badge-active { background: var(--success-soft); color: var(--success); }
.badge-maintenance { background: var(--warning-soft); color: var(--warning); }
.badge-outofservice { background: var(--danger-soft); color: var(--danger); }
.badge-new { background: var(--primary-soft); color: var(--primary-dark); }
.badge-progress { background: var(--warning-soft); color: var(--warning); }
.badge-resolved { background: var(--success-soft); color: var(--success); }
.badge-normal { background: var(--gray-soft); color: var(--text-dim); }
.badge-urgent { background: var(--warning-soft); color: var(--warning); }
.badge-critical { background: var(--danger-soft); color: var(--danger); }
.badge-ok { background: var(--success-soft); color: var(--success); }
.badge-soon { background: var(--warning-soft); color: var(--warning); }
.badge-overdue { background: var(--danger-soft); color: var(--danger); }

/* ---------- Filters / toolbar ---------- */
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.search-input {
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm);
  padding: 9px 14px; font-size: 13px; min-width: 220px; flex: 1;
}
.select-input {
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: 13px; color: var(--text);
}
.tab-row { display: flex; gap: 6px; overflow-x: auto; }
.tab { border: none; background: var(--gray-soft); color: var(--text-dim); padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.tab.active { background: var(--primary); color: #fff; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 50px 20px; color: var(--text-dim); }
.empty .emoji { font-size: 38px; display: block; margin-bottom: 10px; }
.empty p { margin: 2px 0; font-size: 13px; }

/* ---------- Forms / Modal ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(16,24,40,.55); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: var(--surface); border-radius: 16px; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); position: sticky; top:0; background: var(--surface); }
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 800; }
.modal-body { padding: 20px; }
.modal-foot { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; position: sticky; bottom:0; background: var(--surface); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { margin-bottom: 14px; }
.form-label { font-size: 12.5px; font-weight: 700; margin-bottom: 6px; display: block; color: var(--text); }
.form-label .req { color: var(--danger); }
.input, .textarea, .select {
  width: 100%; border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13.5px; color: var(--text); outline: none;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--primary); }
.multiselect-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  cursor: pointer; background: var(--surface); text-align: start; font-family: inherit;
}
.multiselect-btn .chevron { color: var(--text-dim); font-size: 11px; }
.multiselect-panel {
  position: absolute; top: calc(100% + 4px); inset-inline: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 8px; max-height: 240px; overflow-y: auto;
}
.multiselect-option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.multiselect-option:hover { background: var(--gray-soft); }
.multiselect-option input { cursor: pointer; }
.vehicle-combobox-option { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.vehicle-combobox-option:hover { background: var(--gray-soft); }
.textarea { resize: vertical; min-height: 70px; }
.hint { font-size: 11px; color: var(--text-dim); margin-top: 4px; }

/* ---------- Detail page ---------- */
.detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.detail-title-row { display: flex; align-items: center; gap: 12px; }
.detail-avatar { width: 46px; height: 46px; border-radius: 12px; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.info-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.info-row .k { color: var(--text-dim); }
.info-row .v { font-weight: 700; }

.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.subtab { background: none; border: none; padding: 10px 16px; font-size: 13px; font-weight: 700; color: var(--text-dim); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subtab.active { color: var(--primary); border-color: var(--primary); }

.progress-bar { height: 8px; border-radius: 999px; background: var(--gray-soft); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #101828; color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 13px; font-weight: 600;
  z-index: 200; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; box-shadow: var(--shadow-lg);
  max-width: 90%; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  /* شريط الأقسام على الموبايل بقى أطول (اسم القسم بقى ظاهر تحت الأيقونة
     مش مختفي) -- var(--maincat-bar-h) نفسها بتتغيّر هنا عشان أي حاجة
     بتحسب عليها (ارتفاع القائمة الجانبية وموضعها) تتزامن تلقائيًا. */
  :root { --maincat-bar-h: 56px; }
  .sidebar { position: fixed; inset-inline-start: 0; top: var(--maincat-bar-h); height: calc(100vh - var(--maincat-bar-h)); transform: translateX(-100%); transition: transform .2s; }
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  .sidebar.open { transform: translateX(0); }
  .menu-toggle { display: inline-flex; }
  .sidebar-close { display: inline-flex; align-items: center; justify-content: center; }
  .content { padding: 14px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .topbar { padding: 0 12px; }
  .maincat-bar {
    gap: 4px;
    -webkit-overflow-scrolling: touch;
    /* شاشات الموبايل الصغيرة بس: بيتمرر بالسحب باللمس، فمفيش داعي لشريط
       اسكرول مرئي -- تلاشي الحواف تحت كافي كإشارة بصرية إنه بيتمرر.
       (على الديسكتوب الشريط فاضل ظاهر عمدًا -- شوف #FIX-desktopscroll فوق). */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* #FIX-smoothscroll: شلنا scroll-behavior:smooth من هنا -- السحب
       بالإصبع نفسه فيه inertia طبيعي من غير الخاصية دي أصلًا، وهي كانت
       بتخلي أي ضبط برمجي لـscrollLeft (زي استرجاع موضع التمرير بعد
       التنقل) يتحول لأنيميشن بطيء بدل قفزة فورية -- وده كان يبان للمستخدم
       إن الشريط "بيرجع لأوله" لحظة قبل ما يوصل تدريجيًا لمكانه الصح. */
    /* تلاشي خفيف عند الحواف يوحي إن الشريط بيتمرر لجنب، لأن عدد
       الأقسام بيكون أكتر من ما يتحمّله عرض الموبايل غالبًا. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  .maincat-bar::-webkit-scrollbar { display: none; }
  /* عرض أدنى 44px (حجم لمسة مريحة) وتوسيط الأيقونة والاسم تحتها عمودي --
     كانت الأزرار ضيقة جدًا ومتلاصقة فبيحصل لمس غلط للزرار المجاور بسهولة،
     والاسم كان مختفي خالص فمش واضح كل أيقونة بتفتح إيه. */
  .maincat-btn { flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 5px 6px; min-width: 50px; }
  .maincat-btn span:last-child {
    display: block; font-size: 9.5px; font-weight: 700; line-height: 1.1;
    max-width: 58px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* #EPW-mobile: على شاشة موبايل .topbar-actions ممكن يحمل لغاية 4 عناصر
     (بانر الاشتراك + زرار طباعة القائمة + زرار البحث + ويدجت الحضور)،
     أوسع من ما يستحمله سطر واحد فوق موبايل ضيق -- بيلف لسطر تاني بدل ما
     يتقص/يختفي، و.topbar بيبقى ارتفاعه تلقائي (مش ثابت) عشان يستوعب السطرين. */
  .topbar { height: auto; min-height: var(--topbar-h); flex-wrap: wrap; gap: 8px 0; padding-block: 8px; }
  .topbar-actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .topbar h1 { font-size: 15.5px; }
  .self-attendance-checkedin-label { display: none; }
  .maincat-btn .ic { font-size: 17px; }
  /* أهداف لمس أريح على الموبايل والتابلت (زي الآيباد) -- الحد الأدنى
     المتعارف عليه لعنصر قابل للمس حوالي 44px، فبنضمن ارتفاع أدنى
     للأزرار وحقول الإدخال وعناصر القائمة الجانبية من غير ما نغيّر
     شكلهم على الشاشات الكبيرة (القاعدة دي جوه هذا الـ media query بس). */
  .btn { min-height: 42px; }
  .side-link { min-height: 44px; }
  .search-input, .select-input, .input, .select { min-height: 42px; }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 999px; }

/* ---------- Reports / Print ---------- */
.report-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 14px; }
.report-toolbar .form-group { margin: 0; min-width: 150px; }
.report-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.report-tabs .tab { white-space: nowrap; }
.report-summary-row { display: flex; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.report-summary-chip { background: var(--gray-soft); border-radius: 10px; padding: 10px 16px; }
.report-summary-chip .num { font-size: 17px; font-weight: 800; display: block; }
.report-summary-chip .lbl { font-size: 11.5px; color: var(--text-dim); }

/* ---------- Fleet screen (tabs/filters/table redesign) ---------- */
.fleet-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--gray-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex: 0 0 auto; }
.fleet-status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: 4px; vertical-align: middle; }
.fleet-status-dropdown-wrap { position: relative; }
.fleet-status-dropdown-panel { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 30; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 10px; min-width: 200px; }
.fleet-status-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 13px; cursor: pointer; }
.fleet-status-dropdown-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.fleet-bulk-bar { background: var(--gray-soft); border-radius: 10px; align-items: center; }
.fleet-pagination { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--border); }

/* ---------- أداة الإكسل التفاعلية (#410) -- جدول Excel-like قابل للتحديد ---------- */
.exsh-grid-wrap { max-height: 420px; overflow: auto; }
.exsh-grid { border-collapse: collapse; }
.exsh-grid th, .exsh-grid td { border: 1px solid var(--border); padding: 4px 8px; font-size: 12.5px; white-space: nowrap; }
.exsh-grid thead th { position: sticky; top: 0; background: var(--gray-soft); z-index: 1; }
.exsh-grid td.cell-dim:first-child { position: sticky; inset-inline-start: 0; background: var(--gray-soft); text-align: center; }
.exsh-cell { cursor: pointer; user-select: none; }
.exsh-cell:hover { background: var(--gray-soft); }
.exsh-cell-selected { background: rgba(29, 78, 216, 0.15) !important; outline: 1px solid var(--primary, #1d4ed8); }
.exsh-cell-edit-input { width: 100%; min-width: 60px; border: 1px solid var(--primary, #1d4ed8); border-radius: 2px; padding: 2px 4px; font-size: 12.5px; box-sizing: border-box; font-family: inherit; }
.exsh-grid thead th.exsh-cell:hover, .exsh-grid td.cell-dim.exsh-cell:hover { background: rgba(29, 78, 216, 0.12); }
.exsh-grid td.exsh-cell { position: relative; }
.exsh-fill-handle { position: absolute; inset-inline-end: -3px; bottom: -3px; width: 7px; height: 7px; background: var(--primary, #1d4ed8); border: 1px solid #fff; cursor: crosshair; z-index: 2; }

@media print {
  .sidebar, .topbar, .maincat-bar-wrap, .no-print { display: none !important; }
  .content { padding: 0 !important; }
  .panel { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
  body { background: #fff !important; }
}

/* ---------- ترويسة الطباعة الموحّدة (شوف printHeaderHtml في app.js) ---------- */
/* إطار حول بيانات الشركة + عنوان المستند + السريال، يظهر أعلى كل شاشة/سند
   قابل للطباعة (شاشات قوائم كمان، مش بس السندات الفردية). */
.print-header-frame {
  border: 2px solid #1d1d2e; border-radius: 10px; padding: 14px 18px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 14px; break-inside: avoid;
}
.print-header-frame .ph-logo { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
.print-header-frame .ph-main { flex: 1; text-align: center; }
.print-header-frame .ph-company-name { font-size: 17px; font-weight: 800; }
.print-header-frame .ph-company-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; line-height: 1.6; }
.print-header-frame .ph-doc-title { font-size: 14px; font-weight: 700; margin-top: 8px; }
.print-header-frame .ph-doc-meta { font-size: 12px; color: var(--text-dim); margin-top: 4px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.print-header-frame .ph-approval-line { font-size: 11.5px; color: var(--text-dim); margin-top: 6px; }
@media print {
  .print-header-frame { border-color: #000 !important; }
}

/* ---------- Auth pages ---------- */
.auth-page {
  min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #0f1b3d 0%, #16234a 45%, #1d4ed8 130%);
  padding: 20px;
}
.auth-card {
  width: 100%; max-width: 420px; background: var(--surface); border-radius: 20px;
  padding: 30px 26px; box-shadow: var(--shadow-lg);
}
.auth-logo { text-align: center; font-size: 30px; margin-bottom: 6px; }
.auth-logo-img { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto 10px; }
.auth-title { text-align: center; font-size: 19px; font-weight: 800; margin: 0 0 4px; }
.auth-subtitle { text-align: center; font-size: 12.5px; color: var(--text-dim); margin: 0 0 22px; }
.auth-tabs { display: flex; background: var(--gray-soft); border-radius: 999px; padding: 3px; margin-bottom: 20px; }
.auth-tabs button {
  flex: 1; border: none; background: transparent; padding: 9px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: var(--text-dim); cursor: pointer;
}
.auth-tabs button.active { background: var(--primary); color: #fff; }
.auth-error {
  background: var(--danger-soft); color: var(--danger); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 12.5px; font-weight: 600; margin-bottom: 16px; text-align: center;
}
.auth-footer { text-align: center; font-size: 12.5px; color: var(--text-dim); margin-top: 16px; }
.auth-footer a, .auth-link { color: var(--primary); font-weight: 700; cursor: pointer; background: none; border: none; font-size: inherit; padding: 0; }
.auth-admin-link { text-align: center; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.auth-admin-link button { background: none; border: none; color: var(--text-dim); font-size: 12px; cursor: pointer; font-weight: 600; }
.auth-hint {
  background: var(--primary-soft); border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: 11.5px; color: var(--primary-dark); margin-top: 18px; line-height: 1.8;
}
.auth-hint b { font-weight: 800; }
.auth-lang-switch {
  position: fixed; top: 18px; right: 18px; z-index: 5;
  display: flex; align-items: center; gap: 8px;
}
.auth-lang-switch .lang-switch { background: #e58c24; }
.auth-lang-switch .lang-switch button { color: rgba(255,255,255,.85); }
/* #294: زرار تنزيل/تثبيت التطبيق جنب زرار تبديل اللغة فوق شاشة الدخول --
   نفس لون .lang-switch البرتقالي هنا عشان يبان واضح فوق خلفية .auth-page
   الغامقة (زي .btn-icon العادي لونه هيبقى باهت جدًا فوق الخلفية دي). أيقونة
   فوق ونص "تنزيل" تحتها -- بطلب المستخدم صراحةً، عشان الزرار يبقى واضح
   المعنى مش أيقونة مجردة بس. */
.auth-download-btn {
  min-width: 46px; padding: 5px 8px 6px; border: none; border-radius: 12px; cursor: pointer;
  background: #e58c24; color: #fff; line-height: 1.3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  flex-shrink: 0;
}
.auth-download-btn:hover { background: #d47d1a; }
.auth-download-btn-icon { font-size: 15px; }
.auth-download-btn-label { font-size: 10px; font-weight: 700; white-space: nowrap; }
.auth-copyright {
  position: fixed; bottom: 10px; left: 0; right: 0; z-index: 5;
  text-align: center; font-size: 11px; color: rgba(255,255,255,.55);
  padding: 0 16px; direction: ltr;
}
.auth-lang-switch .lang-switch button.active { background: rgba(255,255,255,.28); color: #fff; }
/* On phones the fixed language/download/WhatsApp bar sat on top of the
   card's icon and title (public support request, admin login). Start the
   card below it, and keep clear of the fixed copyright line at the bottom. */
@media (max-width: 640px) {
  .auth-page { align-items: flex-start; padding-top: 80px; padding-bottom: 56px; }
}

/* ---------- Blocked screen ---------- */
.blocked-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 20px; }
.blocked-card { width: 100%; max-width: 440px; background: var(--surface); border-radius: 20px; padding: 36px 28px; text-align: center; box-shadow: var(--shadow-lg); }
.blocked-icon { font-size: 44px; margin-bottom: 14px; }
.blocked-title { font-size: 18px; font-weight: 800; margin: 0 0 10px; color: var(--danger); }
.blocked-msg { font-size: 13.5px; color: var(--text-dim); line-height: 1.8; margin: 0 0 18px; }
.blocked-contact { font-size: 12.5px; color: var(--text-dim); margin-bottom: 22px; }

/* ---------- Platform admin ---------- */
.platform-shell { min-height: 100vh; }
.platform-header {
  height: var(--topbar-h); background: #0f1b3d; color: #fff; display: flex; align-items: center;
  justify-content: space-between; padding: 0 22px; position: sticky; top: 0; z-index: 30;
}
.platform-header .brand { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.platform-content { padding: 22px; max-width: 1200px; margin: 0 auto; }
.plan-select { border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; font-size: 12px; background: var(--surface); }
.badge-plan-trial { background: var(--primary-soft); color: var(--primary-dark); }
.badge-plan-basic { background: var(--gray-soft); color: var(--text-dim); }
.badge-plan-pro { background: var(--success-soft); color: var(--success); }

/* ---------- #314 مرحلة 2 (إضافي بطلب المستخدم): شاشة الكاشير باللمس ----------
   شريط تصنيفات أفقي + شبكة أصناف على جنب، وفاتورة/سلة ثابتة على الجنب التاني
   (الطلب سمح بيمين أو شمال -- هنا على يمين الشاشة، أول عنصر بترتيب flex في
   لغة RTL الافتراضية للتطبيق يبان على يمين الشاشة). مصمّمة لتبقى مريحة على
   شاشة لمس: أزرار كبيرة، مسافات واسعة. */
.pos-terminal { display: flex; gap: 16px; align-items: flex-start; }
.pos-terminal-catalog {
  flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; display: flex; flex-direction: column;
}
.pos-terminal-cart {
  width: 340px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column;
  position: sticky; top: calc(var(--topbar-h) + 14px); max-height: calc(100vh - var(--topbar-h) - 28px);
}
.pos-term-cart-head {
  padding: 16px 16px 10px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.pos-term-cart-head h3 { margin: 0; font-size: 15.5px; }
.pos-term-cart-head-icons { display: flex; align-items: center; gap: 6px; }
.pos-term-cart-head-icon {
  width: 30px; height: 30px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.pos-term-cart-fields { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px; }
.pos-term-payment-toggle { display: flex; gap: 6px; }
.pos-term-payment-toggle .btn { flex: 1; }
.pos-term-cart-lines { flex: 1; overflow-y: auto; padding: 6px 12px; min-height: 60px; }
.pos-term-cart-line {
  display: flex; align-items: center; gap: 8px; padding: 10px 8px; border-radius: 10px;
  flex-wrap: wrap; transition: background .12s;
}
.pos-term-cart-line:hover { background: var(--gray-soft); }
.pos-term-cart-line + .pos-term-cart-line { border-top: 1px dashed var(--border); }
.pos-term-cart-line-name { flex: 1; min-width: 90px; font-weight: 700; font-size: 13.5px; }
.pos-term-cart-line-qty {
  display: flex; align-items: center; gap: 6px; font-size: 13px; background: var(--gray-soft);
  border-radius: 999px; padding: 2px 6px;
}
.pos-term-cart-line-price { font-weight: 800; font-size: 13.5px; min-width: 60px; text-align: end; color: var(--primary-dark); }
.pos-term-cart-totals { padding: 12px 16px; border-top: 1px solid var(--border); background: var(--gray-soft); }
.pos-term-cart-total-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; color: var(--text-dim); }
.pos-term-cart-total-grand { font-size: 17px; font-weight: 800; color: var(--text); }
.pos-term-cart-actions { display: flex; gap: 8px; padding: 14px 16px 16px; }
.pos-term-cart-actions .btn { flex: 1; padding-block: 13px; border-radius: 12px; font-size: 14px; }
.pos-terminal-grid-wrap { order: 1; }
.pos-terminal-catbar {
  order: 2; display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 2px; margin-top: 10px;
  border-top: 1px solid var(--border); -webkit-overflow-scrolling: touch;
}
.pos-term-cat-btn {
  flex-shrink: 0; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-dim); font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.pos-term-cat-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pos-term-group { margin-bottom: 16px; }
.pos-term-group-title { font-size: 12.5px; font-weight: 700; color: var(--text-dim); margin-bottom: 8px; }
.pos-terminal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.pos-term-item-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 108px; padding: 14px 8px 12px; border-radius: 16px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; text-align: center; box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: transform .08s, box-shadow .08s, border-color .08s;
}
.pos-term-item-btn:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); }
.pos-term-item-btn:active { transform: translateY(0); }
.pos-term-item-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.pos-term-item-icon {
  width: 44px; height: 44px; border-radius: 50%; background: var(--primary-soft);
  display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.pos-term-item-name { font-weight: 700; font-size: 12.5px; line-height: 1.3; }
.pos-term-item-price { font-size: 12px; color: var(--primary-dark); font-weight: 700; }
@media (max-width: 860px) {
  .pos-terminal { flex-direction: column; }
  .pos-terminal-cart { width: 100%; position: static; max-height: none; }
}

/* فاتورة قابلة للطباعة: مخفية دايمًا على الشاشة، بتظهر لوحدها عند الطباعة
   (window.print() -- posterm-print زرار في app.js). #pos-print-receipt
   متداخل جوه شجرة #app العادية (مش ابن مباشر لـbody)، فـ"display:none" على
   عناصر body مباشرة كانت هتخفيه هو نفسه بره أي إمكانية تراجع (عنصر جوه أب
   display:none بيفضل مخفي مهما كان الـoverride عليه هو بالذات). الحل
   المعتمد: visibility بدل display -- بيتوارث لكن قابل للتراجع على مستوى
   العنصر نفسه، فنقدر نعيد إظهار #pos-print-receipt وأولاده بس. */
/* إصلاح: القاعدة دي كانت شاملة (body *) بدون أي تحديد، فكانت بتخفي محتوى
   أي شاشة طباعة تانية في السيستم كله (وثائق/فواتير/سندات...) مش بس إيصال
   الكاشير -- المستخدم اتفاجئ إن كل نماذج الطباعة بتطلع فاضية. الحل: تقييد
   القاعدة بكلاس body.pos-print-mode بيتضاف بس لحظة طباعة إيصال الكاشير
   (شوف زرار posterm-print) وبيتشال فورًا بعدها، فباقي شاشات الطباعة في
   السيستم مبتتأثرش. */
@media print {
  body.pos-print-mode * { visibility: hidden; }
  body.pos-print-mode #pos-print-receipt,
  body.pos-print-mode #pos-print-receipt * { visibility: visible; }
  body.pos-print-mode #pos-print-receipt {
    display: block !important; position: absolute; inset: 0; direction: rtl; font-family: inherit; padding: 20px;
  }
  #pos-print-receipt table { width: 100%; border-collapse: collapse; }
  #pos-print-receipt th, #pos-print-receipt td { border-bottom: 1px solid #ccc; padding: 4px 6px; font-size: 12px; }
}

/* ---------- الهيكل الإداري: عرض فلوشارت (شركة -> إدارة -> قسم -> وظيفة) ----------
   نفس تقنية CSS-only org chart (اتصالات بـ:before/:after + :has()) اللي كانت
   مستخدمة في صفحة organization.html القديمة (شوف organization.css -- بقت
   ملف يتيم مش متحمّل دلوقتي بعد توحيد الهيكل الوظيفي جوه الـSPA)، بس متبنّاة
   هنا بمتغيرات الثيم الأساسية (var(--border) إلخ) بدل الألوان الثابتة القديمة،
   وبكلاسات موسومة org- عشان متتعارضش مع أي حاجة تانية. */
.org-chart-toolbar { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.org-chart { overflow-x: auto; padding: 22px 8px 6px; }
.org-tree { display: flex; list-style: none; margin: 0; padding: 26px 0 0; gap: 22px; justify-content: center; position: relative; }
.org-tree.org-tree-root { padding-top: 0; }
.org-tree li { text-align: center; position: relative; min-width: 168px; }
.org-tree .org-tree:before { content: ""; position: absolute; top: 0; left: 50%; height: 26px; border-left: 2px solid var(--border); }
.org-tree li > .org-tree { border-top: 2px solid var(--border); margin-top: 26px; }
.org-tree li:has(> .org-tree) > .org-node { position: relative; }
.org-tree li:has(> .org-tree) > .org-node:after { content: ""; height: 26px; border-left: 2px solid var(--border); position: absolute; bottom: -27px; left: 50%; }
.org-node {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  min-width: 168px; max-width: 236px; display: inline-flex; flex-direction: column; gap: 5px;
  padding: 10px 14px; border-radius: var(--radius-sm); box-shadow: var(--shadow); position: relative;
}
.org-node strong { font-size: 13.5px; }
.org-node span { font-size: 11.5px; color: var(--text-dim); }
.org-node-actions { display: flex; gap: 4px; justify-content: center; margin-top: 2px; }
.org-node-actions .btn-icon { padding: 3px; font-size: 12.5px; }
.org-node-company { background: var(--gray-soft); }
.org-node-department { background: var(--primary-soft); border-color: var(--primary); }
.org-node-department strong { color: var(--primary-dark); }
.org-node-section { background: var(--success-soft); border-color: var(--success); }
.org-node-position { }
.org-node-position.org-node-vacant { border-style: dashed; }
@media print {
  .org-chart { overflow: visible; padding: 12px 0 0; }
  .org-node { box-shadow: none !important; break-inside: avoid; }
  .org-node-actions { display: none !important; }
}
@media (max-width: 650px) {
  .org-tree { gap: 14px; }
  .org-node { min-width: 140px; }
}

/* ================= المساعد الذكي (AI Assistant) ================= */
.ai-chat-fab {
  position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; font-size: 24px; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
}
.ai-chat-fab:hover { transform: scale(1.06); }
.ai-chat-panel {
  position: fixed; inset-inline-end: 20px; bottom: 86px; z-index: 90;
  width: 340px; max-width: calc(100vw - 32px); height: 440px; max-height: calc(100vh - 140px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;
}
.ai-chat-panel-head {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-weight: 700; font-size: 14px;
}
.ai-chat-panel-head .btn-icon { color: #fff; }
.ai-chat-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ai-chat-empty { color: var(--text-dim); font-size: 12.5px; line-height: 1.8; padding: 8px 2px; }
.ai-chat-msg { max-width: 85%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.7; word-break: break-word; white-space: pre-wrap; }
.ai-chat-msg-user { align-self: flex-end; background: var(--primary); color: #fff; border-end-end-radius: 3px; }
.ai-chat-msg-bot { align-self: flex-start; background: var(--surface-2); color: var(--text); border-end-start-radius: 3px; }
.ai-chat-typing { display: flex; align-items: center; gap: 4px; padding: 10px 12px; }
.ai-chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); animation: ai-chat-typing-bounce 1.2s infinite ease-in-out; }
.ai-chat-typing span:nth-child(2) { animation-delay: .15s; }
.ai-chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ai-chat-typing-bounce { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.ai-chat-error { align-self: center; color: var(--danger); background: var(--danger-soft); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 12px; text-align: center; }
.ai-chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.ai-chat-form .input { flex: 1; }
.ai-chat-form .btn { padding: 10px 14px; }
/* بطاقة الرسم البياني اللي بترجعها أداة render_chart -- نفس منطق زرار تبديل
   نوع الرسم في تقارير التحليلات (analytics builder)، بس مصغّرة عشان تتناسب
   مع عرض نافذة الشات. */
.ai-chat-chart-card { align-self: flex-start; max-width: 95%; width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; }
.ai-chat-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.ai-chat-chart-title { font-size: 12px; font-weight: 600; color: var(--text); }
.ai-chat-chart-toggle { display: flex; gap: 2px; }
.ai-chat-chart-type-btn { width: 24px; height: 24px; font-size: 12px; opacity: .55; }
.ai-chat-chart-type-btn.active { opacity: 1; background: var(--surface); }
.ai-chat-chart-canvas-wrap { position: relative; height: 160px; }
@media (max-width: 480px) {
  .ai-chat-panel { inset-inline-end: 12px; bottom: 78px; width: calc(100vw - 24px); }
  .ai-chat-fab { inset-inline-end: 14px; bottom: 14px; }
}