/**
 * Copyright © 2026 Abdo Ibn Egypt. All rights reserved.
 * Unauthorized copying, modification, distribution, or use of this software,
 * via any medium, is strictly prohibited without prior written permission.
 * Owner Contact (WhatsApp): +201098251005
 */

/**
 * components.css — Speedo Group Design System v2 — Components
 * =====================================================================
 * Built entirely on tokens.css custom properties. No hardcoded colors or
 * sizes here — every value must trace back to a token. Every selector name
 * from v1 is preserved (JS across app.js/workspace.js targets these classes
 * directly) — only the values and a handful of additive rules changed.
 */

/* كل صفحات النظام قوالب SPA بشريط جانبي/رأس ثابتين وDiv داخلي هو اللي
   بيعمل Scroll فعليًا — الصفحة نفسها (html/body) لا تتحرك أبدًا. بلا هذا
   السطر، متصفح الموبايل (كروم خصوصًا) يعتبر نفسه "دايمًا فوق الصفحة" فيخطف
   أي سحب لأسفل كإيماءة "اسحب للتحديث" الأصلية بتاعته، حتى لو المستخدم بيحاول
   يرجع لأعلى محتوى داخلي لسه فيه محتوى فوقه — راجع بلاغ "بيعمل ريفريش لما
   أطلع فوق" (ينطبق على كل صفحة، مش شات/جروب بعينه). contain بيمنع "تسريب"
   حركة الـScroll لسلوك المتصفح الأصلي بلا ما يعطّل أي Scroll داخلي حقيقي.
   الجزء المقابل داخل تطبيق الأندرويد (SwipeRefreshLayout) يحتاج إصلاحًا
   منفصلًا على مستوى الكود الأصلي (Kotlin) — هذا السطر يغطي الموقع/المتصفح فقط. */
html { overscroll-behavior-y: contain; }

/* ============================== Buttons ============================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 10px 18px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-weight: 700; font-size: var(--text-sm); font-family: var(--font-ui);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:hover { background: var(--surface-hover); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-spin { display: inline-flex; animation: icon-spin-rotate .8s linear infinite; }
@keyframes icon-spin-rotate { to { transform: rotate(360deg); } }

.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-brand); }
.btn-primary:hover { background: var(--primary-hover); box-shadow: none; }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-outline { background: transparent; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-hover); }
.btn-sm { padding: 6px 12px; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn-lg { padding: 13px 26px; font-size: var(--text-md); border-radius: var(--radius-lg); }
.btn-icon { padding: 9px; width: 38px; height: 38px; border-radius: var(--radius-md); }
.btn-block { width: 100%; }

/* Generic small icon-only button used inline in headers/rows (new — same
   sizing family as .btn-icon but for non-.btn contexts like table row actions). */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-sm); border: none;
  background: transparent; color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.icon-btn.fab-icon-choice { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.icon-btn.fab-icon-choice svg { width: 18px; height: 18px; }
.icon-btn.fab-icon-choice.active { background: var(--brand-gradient); color: #fff; border-color: transparent; }
.icon-btn.fab-icon-choice:disabled { opacity: .4; cursor: not-allowed; }

/* مفتاح تبديل عام (checkbox أصلي بمظهر Switch) — قابل لإعادة الاستخدام في
   أي نموذج إعدادات؛ نفس منطق .extra-phone-toggle (JS-driven) لكن كـ
   checkbox أصلي بالكامل: قابل للتنقّل بالـTab ووصوله عبر لوحة المفاتيح
   بلا أي جافاسكربت إضافي. */
.toggle-row { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; font-size: var(--text-sm); }
.toggle-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; width: 36px; height: 20px; border-radius: var(--radius-full);
  background: var(--border-strong); position: relative; cursor: pointer; flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out);
}
.toggle-row input[type="checkbox"]::before {
  content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-xs); transition: inset-inline-start var(--dur-fast) var(--ease-spring);
}
.toggle-row input[type="checkbox"]:checked { background: var(--success); }
.toggle-row input[type="checkbox"]:checked::before { inset-inline-start: 18px; }
.toggle-row input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 3px var(--primary-soft); }

/* ============================== Inputs ============================== */
.form-group { margin-bottom: var(--space-4); }
.form-group label { display: block; margin-bottom: var(--space-2); font-weight: 700; font-size: var(--text-sm); color: var(--text-muted); }
.form-control {
  width: 100%; padding: 11px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-size: var(--text-base); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-control:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-focus); background: var(--surface); }
/* زر اختيار الملف الأصلي للمتصفح (input[type=file]) بلا هذا التنسيق يظهر
   بألوان النظام الافتراضية (رمادي فاتح دائمًا) بغض النظر عن الوضع الداكن —
   ::file-selector-button هو المعيار الحديث، والبادئة webkit احتياط للمتصفحات
   الأقدم المبنية على Chromium. */
.form-control[type="file"] { padding: 8px 10px; }
.form-control[type="file"]::file-selector-button,
.form-control[type="file"]::-webkit-file-upload-button {
  font-family: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer;
  padding: 7px 14px; margin-inline-end: 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.form-control[type="file"]::file-selector-button:hover,
.form-control[type="file"]::-webkit-file-upload-button:hover { background: var(--surface-2); border-color: var(--primary); }
.form-hint { font-size: var(--text-xs); color: var(--text-faint); margin-top: var(--space-1); }
.input-search { position: relative; }
.input-search input { padding-inline-start: 40px; }
.input-search .icon { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); display: flex; }
.input-search .icon svg { width: 16px; height: 16px; }

/* استبدال سهم الـ <select> الافتراضي (يختلف شكله وموضعه بين المتصفحات
   وينكسر في RTL) بسهم SVG موحّد بنفس هوية النظام، مع مساحة كافية حوله */
select.form-control {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-inline-end: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 15px;
}
[dir="ltr"] select.form-control { background-position: right 14px center; }
/* صف من عمودين متساويين لأزواج حقول قصيرة داخل نموذج (نوع+ماركة،
   نظام إيجار+سعر...) — اسم مستقل عن .grid-2 (المعرَّف في admin-shell.css
   بنسبة 2fr/1fr غير متماثلة، ومحمَّل في تطبيقات أخرى) تفاديًا لأي تعارض. */
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .form-row-2 { grid-template-columns: 1fr; } }

/* ============================== Chips قابلة للاختيار (Toggle) ==============================
   بديل الـ checkbox+label الظاهر بشكله الافتراضي — مستخدَم في أي مجموعة
   اختيارات متعددة (مناطق، شروط، وثائق مطلوبة...) حيث الشكل المطلوب "chip"
   نظيف بلا صندوق اختيار ظاهر، والحالة المُختارة تُقرأ من التلوين فقط. */
.form-chip-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* .form-chip-group .form-chip (لا .form-chip وحدها) عمدًا: هذه الرقاقات
   دائمًا <label> متداخلة داخل .form-group (راجع مثلًا "المناطق المتاحة
   للإيجار" في نموذج المركبة)، وقاعدة .form-group label { display:block }
   الأعم (خصوصية class+element) كانت تتغلّب على display:inline-flex هنا
   (خصوصية class واحدة فقط) رغم أنها قاعدة أضيق وأحدث في الملف — الرقاقة
   كانت تتحوّل لصندوق block يُعصَر شبه مربّع، وborder-radius:full يجعله
   يبدو دائرة بنص متكدّس على حوافها. رفع الخصوصية هنا يضمن الفوز دائمًا
   بغضّ النظر عن أي حاوية .form-group تُستخدَم بداخلها مستقبلًا. */
.form-chip-group .form-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-full); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); user-select: none; white-space: nowrap; }
.form-chip-group .form-chip:hover { border-color: rgba(var(--primary-rgb), .4); color: var(--text); }
.form-chip-group .form-chip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.form-chip-group .form-chip.selected { background: rgba(var(--primary-rgb), .14); border-color: var(--primary); color: var(--primary); }
.form-chip-group .form-chip .form-chip-check { width: 14px; height: 14px; flex-shrink: 0; opacity: 0; transform: scale(.5); transition: all var(--dur-fast) var(--ease-out); margin-inline-start: -4px; }
.form-chip-group .form-chip.selected .form-chip-check { opacity: 1; transform: scale(1); margin-inline-start: 0; }
.form-chip-add-row { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.form-chip-add-row .form-control { flex: 1; }
.form-chip-selected-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.form-chip-selected { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; border-radius: var(--radius-full); background: rgba(var(--primary-rgb), .12); border: 1px solid rgba(var(--primary-rgb), .3); color: var(--primary); font-size: 13px; font-weight: 600; }
[dir="rtl"] .form-chip-selected { padding: 7px 14px 7px 8px; }
.form-chip-selected button { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(var(--primary-rgb), .18); border: none; color: var(--primary); cursor: pointer; flex-shrink: 0; }
.form-chip-selected button:hover { background: var(--primary); color: #fff; }
.form-chip-selected button svg { width: 11px; height: 11px; }

/* ============================== أزرار اختيار (Choice) — بطاقات محسوسة بديل radio/checkbox خام ==============================
   منقولة أصلًا من public.css لأن لوحة مزوّد الخدمة (وأي لوحة تحمّل
   components.css فقط بدون public.css) كانت تعرض هذا العنصر بلا أي تنسيق —
   نص عادي بلا حدود ولا خلفية، فيبدو كأنه مش قابل للاختيار إطلاقًا. */
.wizard-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wizard-choice-grid.cols-1 { grid-template-columns: 1fr; }
.wizard-choice { border: 1.5px solid var(--border); background: var(--surface-2); border-radius: var(--radius-lg); padding: 14px 10px; text-align: center; font-size: 13px; font-weight: 700; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.wizard-choice-icon { display: flex; align-items: center; justify-content: center; margin: 0 auto 6px; color: var(--primary); }
.wizard-choice-icon svg { width: 24px; height: 24px; }
.wizard-choice-illustrated { padding-top: 12px; }
.wizard-choice-icon-img { width: 44px; height: 44px; margin: 0 auto 8px; }
.wizard-choice-icon-img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); display: block; }
.wizard-choice-company { display: flex; align-items: center; gap: 10px; text-align: start; padding: 12px 14px; }
.wizard-choice-company .wizard-choice-icon { margin: 0; flex-shrink: 0; }
.wizard-choice-company .wizard-choice-icon svg { width: 18px; height: 18px; }
.wizard-choice:hover { border-color: var(--primary); }
.wizard-choice.selected { border-color: var(--primary); background: rgba(var(--primary-rgb), .08); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); }

/* ============================== منطقة سحب-وإفلات لرفع صورة ============================== */
.mf-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: var(--space-8) var(--space-4); border: 2px dashed var(--border); border-radius: var(--radius-lg); background: var(--surface-2); cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.mf-dropzone:hover, .mf-dropzone.is-dragover { border-color: var(--primary); background: rgba(var(--primary-rgb), .06); }
.mf-dropzone-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--primary-rgb), .12); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.mf-dropzone-icon svg { width: 20px; height: 20px; }
.mf-dropzone b { font-size: 14px; color: var(--text); }
.mf-dropzone > span { font-size: 12.5px; color: var(--text-muted); }
.mf-dropzone-hint { font-size: 11px !important; color: var(--text-faint) !important; margin-top: 4px; }

/* ============================== Cards ============================== */
/* --elevation-inset-highlight (a subtle inset top-edge highlight token
   defined in tokens.css since v2 but never actually consumed anywhere)
   is layered onto every card's shadow for a more premium, glass-like depth —
   a real, system-wide, one-line depth upgrade rather than a per-page tweak. */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm), var(--elevation-inset-highlight);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  /* شبكات/عناصر flex بتحدّ من انكماش عناصرها الفرعية لمحتواها الطبيعي
     افتراضيًا (min-width: auto) — ده اللي بيخلّي نص طويل بلا مسافات (رابط،
     مفتاح، كلمة طويلة) يطلع برّه حدود البطاقة بدل ما يلف. إصلاح جذري واحد
     هنا يغطي كل بطاقة بالنظام بدل ترقيع كل مكان لوحده. */
  min-width: 0; overflow-wrap: break-word;
}
.card-interactive { cursor: pointer; }
.card-interactive:hover { box-shadow: var(--shadow-md), var(--elevation-inset-highlight); transform: translateY(-2px); border-color: var(--border-strong); }
.card-interactive:active { transform: translateY(-1px) scale(.995); }
.card-body { padding: var(--space-6); }
.card-header { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.card-header h3 { font-size: var(--text-md); }

/* Elements that expose numeric/chart data as a drill-down entry point (new —
   Dashboard KPIs, funnel cells, chart segments). Same interaction language as
   .card-interactive but tagged separately so it's easy to grep for "what in
   this system opens a drill-down panel". */
.stat-drill-trigger { position: relative; }
.stat-drill-trigger::after {
  content: ''; position: absolute; top: var(--space-4); inset-inline-end: var(--space-4);
  width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2);
  opacity: 0; transform: scale(.7); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 14px;
}
.stat-drill-trigger:hover::after { opacity: 1; transform: scale(1); }

/* Canonical card/section title — use instead of ad-hoc inline h3 styles so
   spacing below a title is identical everywhere (was previously 4/6/8/12/16px
   inconsistently across pages). display:flex here (harmless for plain-text
   titles) so any title that prefixes an Icons.svg() call lays the icon out
   beside the text instead of above it — svg is display:block globally
   (see tokens.css), so without a flex parent the icon stacks on its own line. */
.card-title, .card-title-flush, .card-title-tight, .card-title-sub { display: flex; align-items: center; gap: 8px; }
.card-title { font-size: var(--text-md); margin-bottom: var(--space-4); }
.card-title-flush { font-size: var(--text-md); }
.card-title-tight { font-size: var(--text-md); margin-bottom: var(--space-1); }
.card-title-sub { font-size: var(--text-md); margin: var(--space-5) 0 var(--space-2); }

/* Entrance animation for cards/rows appearing on page load — a small dose of
   life that reads as "SaaS product" rather than a static admin template.
   Respects prefers-reduced-motion via the global override in tokens.css. */
@keyframes fade-up-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kpi-row > .card { animation: fade-up-in var(--dur-slow) var(--ease-out) both; }
.kpi-row > .card:nth-child(1) { animation-delay: 0ms; }
.kpi-row > .card:nth-child(2) { animation-delay: 40ms; }
.kpi-row > .card:nth-child(3) { animation-delay: 80ms; }
.kpi-row > .card:nth-child(4) { animation-delay: 120ms; }
.data-table tbody tr { animation: fade-up-in var(--dur-base) var(--ease-out) both; }
/* تتابع بصري لأول ٨ صفوف بس (نفس مبدأ الـ٤٠ms على بطاقات KPI أعلاه) — أكتر
   من كده على جدول طويل بيبقى تأخير محسوس بلا فايدة بصرية إضافية. */
.data-table tbody tr:nth-child(1) { animation-delay: 0ms; }
.data-table tbody tr:nth-child(2) { animation-delay: 30ms; }
.data-table tbody tr:nth-child(3) { animation-delay: 60ms; }
.data-table tbody tr:nth-child(4) { animation-delay: 90ms; }
.data-table tbody tr:nth-child(5) { animation-delay: 120ms; }
.data-table tbody tr:nth-child(6) { animation-delay: 150ms; }
.data-table tbody tr:nth-child(7) { animation-delay: 180ms; }
.data-table tbody tr:nth-child(8) { animation-delay: 210ms; }

/* تتابع دخول عام لأي شبكة كروت (مجموعات، شركات، عروض، إلخ) — نفس مبدأ
   .kpi-row > .card لكن بدون الاقتصار على سياق لوحة التحكم، ومدى أوسع
   (١٢ عنصر) لأن شبكات الكروت دي عادة أكبر من صف KPI الأربعة. أضف class
   "stagger-grid" على أي حاوية شبكة عشان تورث الحركة لأبنائها من .card. */
.stagger-grid > .card { animation: fade-up-in var(--dur-slow) var(--ease-out) both; }
.stagger-grid > .card:nth-child(1) { animation-delay: 0ms; }
.stagger-grid > .card:nth-child(2) { animation-delay: 30ms; }
.stagger-grid > .card:nth-child(3) { animation-delay: 60ms; }
.stagger-grid > .card:nth-child(4) { animation-delay: 90ms; }
.stagger-grid > .card:nth-child(5) { animation-delay: 120ms; }
.stagger-grid > .card:nth-child(6) { animation-delay: 150ms; }
.stagger-grid > .card:nth-child(7) { animation-delay: 180ms; }
.stagger-grid > .card:nth-child(8) { animation-delay: 210ms; }
.stagger-grid > .card:nth-child(9) { animation-delay: 240ms; }
.stagger-grid > .card:nth-child(10) { animation-delay: 260ms; }
.stagger-grid > .card:nth-child(11) { animation-delay: 280ms; }
.stagger-grid > .card:nth-child(12) { animation-delay: 300ms; }

/* KPI stat card — position:relative + overflow:hidden host a top accent bar
   (::before) tinted per-card via the --kpi-color custom property set inline
   by the page module (falls back to --primary when absent, e.g. on non-KPI
   .card-interactive elements that never set it). The colored hover glow is
   layered on top of (not a replacement for) the shared .card-interactive
   lift so every other interactive card keeps its existing plain hover. */
.kpi-card { position: relative; overflow: hidden; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.kpi-card::before {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: var(--kpi-color, var(--primary)); opacity: .9;
  transform: scaleX(.94); transform-origin: center; transition: transform var(--dur-base) var(--ease-out);
}
.kpi-card:hover::before { transform: scaleX(1); }
.kpi-card.card-interactive:hover {
  box-shadow: var(--shadow-md), var(--elevation-inset-highlight), 0 10px 28px -12px var(--kpi-color, var(--primary));
  border-color: var(--kpi-color, var(--border-strong));
}
.kpi-card .kpi-top { display: flex; align-items: center; justify-content: space-between; }
.kpi-card .kpi-label { font-size: var(--text-sm); color: var(--text-muted); font-weight: 700; }
.kpi-card .kpi-icon {
  width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
  background: var(--brand-glow); color: #fff;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primary) 55%, transparent);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
}
.kpi-card:hover .kpi-icon { box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--primary) 70%, transparent); }
.kpi-card:hover .kpi-icon { transform: scale(1.08) rotate(-4deg); }
.kpi-card .kpi-icon svg { width: 20px; height: 20px; }
.kpi-card .kpi-value { font-family: var(--font-num); font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.02em; }
/* Bottom row lays the value/trend stack next to an optional real sparkline
   (only rendered when the KPI has an actual non-zero 7-day series — see
   Dashboard.load()'s sparkline() helper, never a fabricated flat line). */
.kpi-card .kpi-bottom-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2); }
.kpi-card .kpi-sparkline-wrap { flex-shrink: 0; opacity: .85; }
.kpi-card .kpi-sparkline { width: 72px; height: 24px; display: block; }
.kpi-card .kpi-trend { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 700; }
.kpi-card .kpi-trend svg { width: 12px; height: 12px; }
.kpi-trend.up { color: var(--success); }
.kpi-trend.down { color: var(--danger); }

/* ============================== Badges ============================== */
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: 700;
  padding: 3px 10px; border-radius: var(--radius-full); line-height: 1.6;
}
.badge svg { width: 11px; height: 11px; }
.badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-neutral { background: var(--neutral-soft); color: var(--slate-600); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger  { background: var(--danger-soft); color: var(--danger); }
.badge-info    { background: var(--info-soft); color: var(--info); }
.badge-outline { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.badge-count { background: var(--danger); color: #fff; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 10.5px; display: inline-flex; align-items: center; justify-content: center; }
.badge-count.badge-count-pop { animation: badge-pop .5s var(--ease-spring); }
@keyframes badge-pop { 0% { transform: scale(.4); } 55% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .badge-count.badge-count-pop { animation: none; } }

/* ============================== ربط واتساب الرسمي (Meta Cloud API) ============================== */
.wa-connect-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.wa-status-badge { font-size: var(--text-sm); padding: 4px 12px; }
.wa-step-row { display: flex; align-items: flex-start; gap: 10px; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.wa-step-row:last-child { border-bottom: none; }
.wa-step-icon { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.wa-step-icon svg { width: 16px; height: 16px; }
.wa-step-ok .wa-step-icon { color: var(--success); }
.wa-step-fail .wa-step-icon { color: var(--danger); }
.wa-step-pending .wa-step-icon { color: var(--text-faint); }

/* ============================== Tables ============================== */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
table.data-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.data-table thead th {
  text-align: start; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); font-weight: 800; background: var(--surface-2); padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.data-table tbody td { padding: var(--space-4); font-size: var(--text-sm); border-bottom: 1px solid var(--border); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.data-table tbody tr:hover { background: var(--surface-hover); }

/* Generic reusable Table component (shared/js/table.js, Part Three Phase 1) —
   sortable header + sticky header variant on top of the same .table-wrap/.data-table base. */
.data-table thead th.tbl-sortable { cursor: pointer; user-select: none; }
.data-table thead th.tbl-sortable:hover { color: var(--text); }
.tbl-sort-arrow { font-size: 9px; color: var(--primary); }
.table-wrap-sticky { max-height: 70vh; overflow-y: auto; }
.table-wrap-sticky thead.sticky th { position: sticky; top: 0; z-index: 5; box-shadow: 0 1px 0 var(--border); }

/* ============================== Avatar ============================== */
.avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--brand-gradient); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--text-sm); flex-shrink: 0;
  position: relative; box-shadow: var(--elevation-inset-highlight);
}
.avatar-status { position: absolute; bottom: -1px; inset-inline-end: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--surface); }
.avatar-status.online { background: var(--accent); box-shadow: 0 0 0 0 rgba(14,165,160,.5); animation: status-pulse 2.2s infinite; }
.avatar-status.offline { background: var(--slate-400); }
@keyframes status-pulse { 0% { box-shadow: 0 0 0 0 rgba(14,165,160,.45); } 70% { box-shadow: 0 0 0 5px rgba(14,165,160,0); } 100% { box-shadow: 0 0 0 0 rgba(14,165,160,0); } }
/* مؤشر "هذه الصفحة تُحدَّث تلقائيًا" (RealtimeSync) — نقطة ثابتة هادئة،
   تومض نبضة واحدة فقط عند كل تحديث فعلي يصل من الخادم (وليس Loop دائم)
   حتى يشعر المستخدم أن البيانات حيّة دون أي إزعاج بصري متكرر. */
.live-indicator { display: inline-flex; width: 8px; height: 8px; border-radius: 50%; background: var(--success); margin-inline-start: 8px; flex-shrink: 0; position: relative; top: 1px; }
.live-indicator.live-indicator-flash { animation: live-pulse .9s var(--ease-out); }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); } 70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }
@media (prefers-reduced-motion: reduce) { .live-indicator.live-indicator-flash { animation: none; } }
/* حلقة انتظار حول رمز QR أثناء انتظار المسح — تُبقي الشاشة "حيّة بصريًا" بدل
   ثبات كامل بلا أي إشارة إنها لسه بتنتظر */
.qr-wait-ring { position: relative; display: inline-block; border-radius: var(--radius-lg); }
.qr-wait-ring::before { content: ''; position: absolute; inset: -6px; border-radius: calc(var(--radius-lg) + 6px); border: 2px solid var(--primary); opacity: .5; animation: qr-ring-pulse 2s ease-out infinite; }
@keyframes qr-ring-pulse { 0% { transform: scale(.98); opacity: .55; } 100% { transform: scale(1.03); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .qr-wait-ring::before { animation: none; opacity: .3; } }

/* بطاقة عنوان + أيقونة موحّدة (مثال: "شحن فوري" مقابل "شحن يدوي" في صفحة
   محفظة مزوّد الخدمة) — أيقونة دائرية + عنوان/وصف بجانبها عبر flex+gap بدل
   margin سالب لضبط التباعد، فيبقى العنوانان مختلفَين بصريًا بوضوح (شارة لونية
   + أيقونة مميِّزة) لا مجرد نصين متتاليين يبانوا مكرَّرين. */
.gw-card-header { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-5); }
.gw-card-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gw-card-icon svg { width: 18px; height: 18px; }
.gw-card-title { margin: 0 0 4px; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gw-card-desc { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

/* ============================== Gateway Payment Wait / Success (Speedo Motion) ============================== */
/* شاشة انتظار تأكيد دفع فوري (شحناوي جيت وأي بوابة مستقبلية مشابهة) — حلقة
   عدّاد تنازلي حقيقية (SVG stroke-dashoffset مُتحكَّم به من JS كل ثانية، نفس
   أسلوب flow-edge-draw-in أدناه في هذا الملف) بدل Spinner عام، لأن العميل
   بيكون بالفعل بيتابع عدّاد حقيقي على موبايله (مهلة *9*1# مثلاً) فيستحق نفس
   الوضوح هنا. */
.gw-wait-panel { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-6) var(--space-4); animation: fade-up-in var(--dur-base) var(--ease-out); }
.gw-wait-ring-wrap { position: relative; width: 116px; height: 116px; margin-bottom: var(--space-5); }
.gw-wait-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.gw-wait-ring-bg { fill: none; stroke: var(--border); stroke-width: 6; }
.gw-wait-ring-progress { fill: none; stroke: var(--primary); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.gw-wait-ring-progress.gw-ring-urgent { stroke: var(--warning); }
.gw-wait-seconds { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.gw-wait-method-icon { position: absolute; bottom: -4px; inset-inline-start: 50%; transform: translateX(50%); width: 30px; height: 30px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); }
.gw-wait-method-icon svg { width: 15px; height: 15px; }
.gw-wait-instruction { font-size: 15px; font-weight: 700; margin-bottom: var(--space-1); max-width: 320px; line-height: 1.6; }
/* أي كود USSD (نمط *أرقام#) داخل رسالة شحناوي جيت الحقيقية — مصدر الحقيقة
   الوحيد الآن (راجع تعليق _gatewayMethodMeta في provider.js)، فيستحق إبرازًا
   بصريًا واضحًا لا لبس فيه بدل الاختلاط بباقي جملة التعليمات */
.gw-wait-code { display: inline-block; font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--primary); background: var(--primary-soft); padding: 1px 8px; border-radius: var(--radius-sm); margin: 0 2px; }
.gw-wait-hint { font-size: 12px; color: var(--text-muted); }
.gw-wait-hint .icon-spin { width: 12px; height: 12px; display: inline-flex; vertical-align: -1px; margin-inline-end: 3px; }
@media (prefers-reduced-motion: reduce) { .gw-wait-ring-progress { transition: none; } }

/* نجاح الدفع — دائرة + علامة صح تُرسَمان (Draw-in) بدل ظهور فوري جامد، ثم
   ارتداد خفيف (--ease-spring) للحاوية كلها يمنحها إحساس "إنجاز" حقيقي */
.gw-success-panel { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-6) var(--space-4); animation: pop-in var(--dur-slow) var(--ease-spring); }
.gw-success-check { width: 88px; height: 88px; margin-bottom: var(--space-4); }
.gw-success-circle { fill: none; stroke: var(--success); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 227; stroke-dashoffset: 227; animation: gw-circle-draw var(--dur-slow) var(--ease-out) forwards; }
.gw-success-tick { fill: none; stroke: var(--success); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; animation: gw-tick-draw var(--dur-slow) var(--ease-out) 260ms forwards; }
@keyframes gw-circle-draw { to { stroke-dashoffset: 0; } }
@keyframes gw-tick-draw { to { stroke-dashoffset: 0; } }
.gw-success-title { font-size: 17px; font-weight: 800; color: var(--success); margin-bottom: 4px; }
.gw-success-amount { font-size: 14px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .gw-success-panel, .gw-success-circle, .gw-success-tick { animation: none; stroke-dashoffset: 0; } }

/* فشل/انتهاء مهلة — نفس بنية النجاح بصريًا (تناسق) لكن بلون التحذير/الخطر وأيقونة ثابتة بلا رسم متحرك */
.gw-fail-panel { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-6) var(--space-4); animation: fade-up-in var(--dur-base) var(--ease-out); }
.gw-fail-icon { width: 60px; height: 60px; border-radius: 50%; background: var(--danger-soft); color: var(--danger); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.gw-fail-icon svg { width: 28px; height: 28px; }
.gw-fail-title { font-size: 14.5px; font-weight: 700; color: var(--text); max-width: 300px; margin-bottom: var(--space-4); }

/* ============================== Modal / Toast ============================== */
.modal-overlay { position: fixed; inset: 0; background: rgba(10,14,23,.55); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; z-index: 100; }
.modal-overlay.open { display: flex; animation: fade-in var(--dur-base) var(--ease-out); }
/* أي نافذة منبثقة بمحتوى طويل (قائمة أعضاء منطقة/جروب كبيرة مثلاً) كانت
   تكبر بلا حد أقصى وتفيض خارج حدود الشاشة، فيختفي زرّا الإغلاق/الحفظ في
   الرأس والتذييل عن حدود الشاشة تمامًا — الحل هنا عام على مستوى المكوّن
   نفسه (modal-box كعمود مرن بارتفاع أقصى + جسم قابل للتمرير الداخلي وحده)
   فيصلح كل نافذة منبثقة بالموقع دفعة واحدة، لا كل استخدام على حدة. */
.modal-box { background: var(--surface); border: var(--elevation-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); width: 420px; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; animation: pop-in var(--dur-base) var(--ease-spring); }
.modal-header { flex-shrink: 0; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-weight: 800; }
.modal-body { padding: var(--space-6); overflow-y: auto; min-height: 0; }
.modal-footer { flex-shrink: 0; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: var(--space-2); }

.toast-stack { position: fixed; bottom: 20px; inset-inline-start: 20px; z-index: 200; display: flex; flex-direction: column; gap: var(--space-2); }
.toast {
  background: var(--surface); border: var(--elevation-border); padding: 13px 18px; border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); font-size: var(--text-sm); font-weight: 700; animation: slide-up var(--dur-base) var(--ease-spring);
  border-inline-start: 4px solid var(--border); display: flex; align-items: center; gap: var(--space-2);
}
.toast svg { width: 17px; height: 17px; flex-shrink: 0; }
.toast.success { border-inline-start-color: var(--success); }
.toast.success svg { color: var(--success); }
.toast.error { border-inline-start-color: var(--danger); }
.toast.warning { border-inline-start-color: var(--warning); }
.toast.warning svg { color: var(--warning); }
.toast.info { border-inline-start-color: var(--info); }
.toast.info svg { color: var(--info); }
.toast.toast-leaving { animation: toast-out var(--dur-fast) var(--ease-out) forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(.96); } }
/* توست "منجز/ثقيل" — لإتمام عمليات ذات وزن حقيقي (نسخ احتياطي، استيراد،
   استعادة) بدل نفس التوست العام المستخدَم لأي حفظ عادي */
.toast.toast-strong { padding: 15px 20px; border-inline-start-width: 5px; }
.toast.toast-strong svg { width: 22px; height: 22px; }
.toast.toast-strong span { font-size: var(--text-md); }
@media (prefers-reduced-motion: reduce) { .toast, .toast.toast-leaving { animation: none; } }
.toast.error svg { color: var(--danger); }

/* ============================== Empty / Loading / Error states ============================== */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-10) var(--space-6); text-align: center; color: var(--text-muted); }
.empty-state .es-icon { width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--surface-2); color: var(--text-faint); display: flex; align-items: center; justify-content: center; }
.empty-state .es-icon svg { width: 26px; height: 26px; }
.empty-state h3 { font-size: var(--text-md); color: var(--text); }
.empty-state p { font-size: var(--text-sm); max-width: 320px; margin: 0; }

.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-hover) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: skeleton-pulse 1.4s ease infinite; border-radius: var(--radius-sm); }
@keyframes skeleton-pulse { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.error-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-8) var(--space-6); text-align: center; }
.error-state .es-icon { width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--danger-soft); color: var(--danger); display: flex; align-items: center; justify-content: center; }
.error-state .es-icon svg { width: 26px; height: 26px; }
.error-state h3 { font-size: var(--text-md); color: var(--danger); }
.error-state p { font-size: var(--text-sm); color: var(--text-muted); max-width: 320px; margin: 0; }

/* ============================== Live Presence ============================== */
.presence-bar { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 6px 12px; border-radius: var(--radius-full); }
.presence-bar .p-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s infinite; }

/* ============================== Duplicate Detection Warning ============================== */
/* Non-blocking warning shown when a new record's identifiers (phone/national ID/etc.)
   match an existing one. Never prevents submission by itself — the "proceed anyway"
   action is shown/hidden by the caller based on the current user's permissions. */
.duplicate-alert { display: none; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-md); background: var(--warning-soft); border: 1px solid #FDE9BE; margin-bottom: var(--space-4); animation: pop-in var(--dur-fast) var(--ease-out); }
.duplicate-alert.show { display: flex; }
.duplicate-alert .da-icon { flex-shrink: 0; color: #92600A; }
.duplicate-alert .da-icon svg { width: 20px; height: 20px; }
.duplicate-alert .da-title { font-weight: 800; font-size: var(--text-sm); color: #92600A; }
.duplicate-alert .da-match { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; background: var(--surface); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.duplicate-alert .da-match .lr-sub { font-size: 11px; color: var(--text-muted); }
.duplicate-alert .da-actions { display: flex; gap: var(--space-2); margin-top: 10px; }
.duplicate-alert .da-locked { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-faint); margin-top: 8px; }

/* ملاحظة الموظف الأولية عند إضافة الطيار — تظهر في بطاقته وصفحة التفاصيل */
.lead-initial-note { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: var(--info-soft); border: 1px solid rgba(2,132,199,.18); }
.lead-initial-note .lin-label { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12px; color: var(--info); text-transform: uppercase; letter-spacing: .03em; }
.lead-initial-note .lin-label svg { width: 14px; height: 14px; }
.lead-initial-note p { margin: 6px 0 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text); white-space: pre-line; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================== Workflow Stage Tracker ============================== */
/* A horizontal pipeline across 3 phases (Recruitment / Onboarding / Operations), each
   phase getting its own color family, current stage highlighted, past stages checked-off,
   future stages dimmed. Collapsed variant = compact badge for list rows. */

.workflow-tracker { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding: var(--space-2) 0; }
.wf-phase { display: flex; flex-direction: column; gap: var(--space-3); min-width: 220px; padding-inline-end: var(--space-6); position: relative; }
.wf-phase:not(:last-child)::after {
  content: ''; position: absolute; top: 13px; inset-inline-end: 0; width: var(--space-6); height: 2px; background: var(--border);
}
.wf-phase-title { font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.wf-phase-title .dot { width: 8px; height: 8px; border-radius: 50%; }
.wf-phase.recruitment .dot { background: var(--phase-recruitment); }
.wf-phase.onboarding .dot { background: var(--phase-onboarding); }
.wf-phase.operations .dot { background: var(--phase-operations); }

.wf-stage { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.wf-stage-node { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; color: var(--text-faint); transition: all var(--dur-base) var(--ease-out); }
.wf-stage-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-faint); }
.wf-stage-meta { font-size: 11px; color: var(--text-faint); }

.wf-stage.done .wf-stage-node { background: var(--success); border-color: var(--success); color: #fff; }
.wf-stage.done .wf-stage-label { color: var(--text); }

.wf-stage.current { background: var(--primary-soft); }
.wf-stage.current .wf-stage-node { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 4px var(--primary-soft-strong); }
.wf-stage.current .wf-stage-label { color: var(--primary); font-weight: 800; }

.wf-stage.delayed .wf-stage-node { border-color: var(--danger); color: var(--danger); }
.wf-stage.delayed .wf-stage-meta { color: var(--danger); font-weight: 700; }

/* Enhanced stage row: icon + progress ring + duration + delay pill, used on Lead Detail / rich Workflow views */
.wf-stage-rich { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid transparent; }
.wf-stage-rich.current { background: var(--primary-soft); border-color: var(--primary-soft-strong); }
.wf-stage-rich .wf-ring { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; position: relative; }
/* دائرة أيقونة ثابتة (بدون حلقة تقدّم دائرية) — تُستخدم في نظرة عامة عن
   الطيار؛ منفصلة عن .wf-ring لتفادي تعارضها مع تنسيق svg الخاص بحلقة
   التقدّم (position:absolute + rotate) في العناصر الأخرى. */
.wf-stage-icon-circle { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.wf-stage-icon-circle svg { width: 18px; height: 18px; }
.wf-stage-rich .wf-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.wf-stage-rich .wf-ring circle.track { stroke: var(--border); fill: none; stroke-width: 3; }
.wf-stage-rich .wf-ring circle.progress { stroke: var(--primary); fill: none; stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset var(--dur-slow) var(--ease-out); }
.wf-stage-rich .wf-info { flex: 1; min-width: 0; }
.wf-stage-rich .wf-title-row { display: flex; align-items: center; gap: 8px; }
.wf-stage-rich .wf-title { font-weight: 700; font-size: var(--text-sm); }
.wf-stage-rich .wf-duration { font-size: 11px; color: var(--text-faint); font-family: var(--font-num); }

/* أزرار الانتقال للمرحلة القادمة — تعرض اسم المرحلة الهدف بجانب كل إجراء بدل الاكتفاء باسم الإجراء وحده */
.ld-next-stage-label { display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .03em; margin: var(--space-4) 0 var(--space-2); }
.ld-next-stage-label svg { width: 12px; height: 12px; }
.ld-next-stage-btn { display: inline-flex; align-items: center; gap: 8px; }
.ld-next-stage-target { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-full); }
.wf-delay-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; color: var(--danger); background: var(--danger-soft); padding: 2px 8px; border-radius: var(--radius-full); }
.wf-delay-pill svg { width: 11px; height: 11px; }

/* ============================== Verification Badge (Premium) ============================== */
/* Generic — usable on any entity (supervisor, group, future entity types). A subtle
   brand-gradient disc with a soft glow ring and a crisp checkmark, styled to read as an
   intentional trust signal (à la verified-account badges) rather than a plain status dot. */
.verify-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  border-radius: 50%; flex-shrink: 0; font-size: 10px; font-weight: 800; color: #fff;
  background: #1877F2;
  box-shadow: 0 0 0 2px var(--surface), 0 1px 3px rgba(15,23,42,.18);
  position: relative; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.verify-badge svg { width: 10px; height: 10px; stroke-width: 3; }
.verify-badge:hover { transform: scale(1.15); }
.verify-badge::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  background: #1877F2; opacity: .18; z-index: -1;
}
.verify-badge.pending { background: linear-gradient(135deg, var(--warning), #FBBF24); }
.verify-badge.pending::after { background: linear-gradient(135deg, var(--warning), #FBBF24); }
.verify-badge.expired { background: var(--slate-400); box-shadow: 0 0 0 2px var(--surface); }
.verify-badge.expired::after { display: none; }

.verify-tooltip {
  position: fixed; z-index: 400; width: 320px; background: var(--surface); border: var(--elevation-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); overflow: visible;
  opacity: 0; transform: translateY(-4px) scale(.98); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.verify-tooltip.open { opacity: 1; transform: translateY(0) scale(1); }
.verify-tooltip .vt-arrow {
  position: absolute; top: -6px; width: 12px; height: 12px; background: var(--brand-gradient-soft);
  border-top: var(--elevation-border); border-left: var(--elevation-border);
  transform: rotate(45deg); border-radius: 2px 0 0 0;
}
.verify-tooltip .vt-head { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.verify-tooltip .vt-head {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4);
  background: var(--brand-gradient-soft);
}
.verify-tooltip .vt-head .verify-badge { width: 30px; height: 30px; flex-shrink: 0; }
.verify-tooltip .vt-head .verify-badge svg { width: 16px; height: 16px; }
.verify-tooltip .vt-head-text { min-width: 0; }
.verify-tooltip .vt-head-text b { display: block; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verify-tooltip .vt-head-sub { font-size: 11px; color: var(--text-muted); font-weight: 700; margin-top: 1px; }
.verify-tooltip .vt-body { padding: var(--space-2) var(--space-4) var(--space-4); }
.verify-tooltip .vt-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 9px 0; border-bottom: 1px solid var(--border); }
.verify-tooltip .vt-row:last-child { border-bottom: none; }
.verify-tooltip .vt-row-label { font-size: 11.5px; color: var(--text-faint); font-weight: 700; flex-shrink: 0; }
.verify-tooltip .vt-row-value { font-size: 12.5px; font-weight: 700; color: var(--text); text-align: end; }
.verify-tooltip .vt-status-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; padding: 2px 10px; border-radius: var(--radius-full); }
.verify-tooltip .vt-status-pill.active { background: var(--success-soft); color: var(--success); }
.verify-tooltip .vt-status-pill.expiring { background: var(--warning-soft); color: var(--warning); }
.verify-tooltip .vt-status-pill.expired { background: var(--danger-soft); color: var(--danger); }
.verify-tooltip .vt-footnote { font-size: 10.5px; color: var(--text-faint); padding: 0 var(--space-4) var(--space-4); line-height: var(--leading-normal); }
.name-verified { display: inline-flex; align-items: center; gap: 4px; }
.verify-panel { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); background: var(--surface); }
.verify-panel .vp-row { display: flex; justify-content: space-between; font-size: var(--text-sm); padding: 6px 0; border-bottom: 1px solid var(--border); }
.verify-panel .vp-row:last-child { border-bottom: none; }
.verify-panel .vp-label { color: var(--text-muted); }

/* بطاقات مصغَّرة (معاينة + عرض مكبَّر + تحميل مباشر) لمستندات مسار "أسرع بداية" — مشتركة بين لوحة الإدارة ومساحة عمل المشرف (LeadDetail._docCardsHtml) */
.doc-card-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.doc-card { width: 110px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.doc-card-thumb { width: 100%; height: 80px; cursor: pointer; background: var(--surface-2); }
.doc-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 6px 8px; }
.doc-card-label { font-size: 11px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-card-download-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-muted); }
.doc-card-download-btn:hover { color: var(--primary); }
.doc-card-download-btn svg { width: 14px; height: 14px; }

/* ============================== Notification Center ============================== */
.notif-panel { position: absolute; top: 60px; inset-inline-end: 20px; width: 380px; max-height: 520px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; z-index: 40; animation: pop-in var(--dur-base) var(--ease-out); }
.notif-header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.notif-tabs { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-5) 0; overflow-x: auto; scrollbar-width: none; }
.notif-tabs::-webkit-scrollbar { display: none; }
.notif-tab { font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); padding: 6px 12px; border-radius: var(--radius-full); white-space: nowrap; flex-shrink: 0; }
.notif-tab.active { background: var(--primary-soft); color: var(--primary); }
.notif-list { flex: 1; overflow-y: auto; padding: var(--space-2) 0; }
.notif-item { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); position: relative; }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: var(--primary-soft); }
.notif-item.unread::before { content: ''; position: absolute; inset-inline-start: 6px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.notif-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-icon svg { width: 16px; height: 16px; }
.notif-text { font-size: var(--text-sm); }
.notif-time { font-size: 11px; color: var(--text-faint); margin-top: 2px; }

/* ============================== Global Search (command palette) ============================== */
.search-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(2px); display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 150; }
.search-overlay.open { display: flex; animation: fade-in var(--dur-base) var(--ease-out); }
.search-palette { width: 600px; max-width: 92vw; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; animation: pop-in var(--dur-base) var(--ease-out); }
.search-input-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.search-input-row input { flex: 1; border: none; background: transparent; font-size: var(--text-md); outline: none; font-family: inherit; color: var(--text); }
.search-kbd { font-size: 10.5px; font-weight: 700; color: var(--text-faint); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; }
.search-results { max-height: 400px; overflow-y: auto; padding: var(--space-2); }
.search-group-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); padding: var(--space-3) var(--space-3) var(--space-1); }
.search-result-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.search-result-item svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.search-result-item:hover, .search-result-item.active { background: var(--surface-hover); }
.search-result-item .sr-meta { margin-inline-start: auto; font-size: 11px; color: var(--text-faint); }

/* ============================== Variable Picker (إدراج متغير) ============================== */
.var-picker-popover { position: fixed; width: 300px; max-height: 360px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 200; display: flex; flex-direction: column; animation: pop-in var(--dur-base) var(--ease-out); }
.var-picker-search { padding: var(--space-3); border-bottom: 1px solid var(--border); }
.var-picker-search input { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; font-size: var(--text-sm); font-family: inherit; background: var(--surface-2); color: var(--text); }
.var-picker-list { flex: 1; overflow-y: auto; padding: var(--space-2); }
.var-picker-item { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.var-picker-item:hover { background: var(--surface-hover); }
.var-picker-item .vpi-key { font-size: 11.5px; font-weight: 700; color: var(--primary); direction: ltr; text-align: right; }
.var-picker-item .vpi-desc { font-size: 11px; color: var(--text-muted); }
.var-picker-empty { padding: var(--space-4); text-align: center; color: var(--text-faint); font-size: var(--text-sm); }

/* ============================== Flow Builder (Canvas) — إعادة تصميم كاملة ضمن موجة Speedo Motion ============================== */
.flow-shell { display: flex; flex-direction: column; height: calc(100vh - 160px); min-height: 480px; border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm), var(--elevation-inset-highlight); }
/* شريط علوي بلمسة --brand-glow (نفس لغة .dash-header) بدل حدّ سفلي مسطّح عادي */
.flow-toolbar { position: relative; display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); gap: var(--space-3); flex-wrap: wrap; }
.flow-toolbar::after { content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--brand-glow); }
.flow-toolbar-left, .flow-toolbar-right { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.flow-name-input { font-size: var(--text-md); font-weight: 800; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 6px 10px; background: transparent; color: var(--text); font-family: inherit; min-width: 160px; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.flow-name-input:hover { border-color: var(--border); background: var(--surface-2); }
.flow-name-input:focus { border-color: var(--primary); background: var(--surface-2); outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.flow-body { flex: 1; display: flex; min-height: 0; }

.flow-palette { width: 200px; flex-shrink: 0; border-inline-end: 1px solid var(--border); overflow-y: auto; padding: var(--space-3); background: var(--surface-2); }
/* --cat-color مُمرَّر inline لكل تصنيف (راجع flow-builder.js CATEGORY_COLOR) —
   شريط لوني رفيع يجعل تصفّح لوحة الـ25 نوع عقدة أسرع بصريًا من قراءة نص فقط. */
.flow-palette-group-label { position: relative; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); padding: var(--space-3) var(--space-2) var(--space-1) 14px; }
.flow-palette-group-label::before { content: ''; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 12px; border-radius: 2px; background: var(--cat-color, var(--primary)); }
.flow-palette-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: grab; font-size: 12.5px; font-weight: 600; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.flow-palette-item:hover { background: var(--surface-hover); transform: translateX(-2px); }
[dir="rtl"] .flow-palette-item:hover { transform: translateX(2px); }
.flow-palette-item-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--cat-soft, var(--primary-soft)); color: var(--cat-color, var(--primary)); flex-shrink: 0; }
.flow-palette-item-icon svg { width: 14px; height: 14px; }

.flow-canvas-wrap { position: relative; flex: 1; overflow: hidden; background-color: var(--surface-2); background-image: radial-gradient(var(--border) 1.5px, transparent 1.5px); background-size: 22px 22px; cursor: grab; }
.flow-canvas-wrap.panning { cursor: grabbing; }
.flow-canvas-inner { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.flow-edges-svg { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.flow-edges-svg .flow-edge-path { fill: none; stroke: var(--text-faint); stroke-width: 2; }
.flow-edges-svg .flow-edge-path.selected { stroke: var(--primary); stroke-width: 2.5; }
.flow-edges-svg .flow-edge-path.flow-edge-temp { stroke: var(--primary); stroke-dasharray: 5 4; }
.flow-edges-svg .flow-edge-hit { stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
/* رسم "خط يتوصّل" فوري عند تأكيد اتصال جديد فقط (pathLength=1 يجعل الخط
   يرسم نفسه بصريًا من بداية الحافة لنهايتها بغضّ النظر عن طولها الفعلي
   بالبكسل) — مُطبَّقة عبر كلاس صريح على تلك الحافة بالذات فقط (راجع
   flow-builder.js: _justAddedEdgeIndex)، وليست قاعدة عامة على كل حافة؛
   حافات أخرى تُعاد رسمها أثناء سحب عقدة (عشرات المرات بالثانية) لا تُعيد
   تشغيل أي Animation إطلاقًا — بلا أي أثر على الأداء. */
.flow-edges-svg .flow-edge-path.flow-edge-draw { animation: flow-edge-draw-in .45s var(--ease-out) forwards; }
@keyframes flow-edge-draw-in { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .flow-edges-svg .flow-edge-path.flow-edge-draw { animation: none; } }

/* --cat-color/--cat-soft مُمرَّرين inline لكل عقدة (راجع flow-builder.js
   _catVars) — شريط علوي ملوّن حسب التصنيف بدل لون --primary واحد لكل الـ25
   نوع عقدة، فيبقى تمييز نوع العقدة (رسالة/منطق/تكامل/نظام...) ممكنًا من
   نظرة سريعة على الـcanvas كله. */
.flow-node { position: relative; overflow: hidden; transition: box-shadow var(--dur-fast) var(--ease-out); width: 188px; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); user-select: none; }
.flow-node::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--cat-color, var(--primary)); }
.flow-node:hover { box-shadow: var(--shadow-md); }
/* pop-in عند الإضافة فقط (كلاس صريح، وليس قاعدة عامة) — Flow Builder يعيد
   بناء innerHTML لكل العقد عند أي تغيير (سحب/حذف/تحديد)، فقاعدة عامة كانت
   تُعيد تشغيل الأنيميشن على كل عقدة موجودة أصلاً في كل مرة (فليكر مزعج
   ومكرر)؛ الآن فقط العقدة المُضافة فعليًا تحصل عليه، مرة واحدة. */
.flow-node.flow-node-enter { animation: pop-in var(--dur-fast) var(--ease-spring); }
@media (prefers-reduced-motion: reduce) { .flow-node.flow-node-enter { animation: none; } }
.flow-node.selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.flow-node-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; cursor: grab; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.flow-node-icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-sm); background: var(--cat-soft, var(--primary-soft)); color: var(--cat-color, var(--primary)); flex-shrink: 0; }
.flow-node-icon svg { width: 13px; height: 13px; }
/* .flow-node-label كان بلا أي overflow handling (بعكس .flow-node-body
   المجاور له) — تسمية العقدة نص حر قابل للتعديل بالكامل من المستخدم
   (fbNodeLabel)، فأي اسم طويل كان يفيض فعليًا خارج عرض البطاقة الثابت
   188px بلا أي احتواء. */
.flow-node-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-node-body { padding: 8px 10px; font-size: 11px; color: var(--text-muted); min-height: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-node-port-in { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary); cursor: crosshair; inset-inline-start: -7px; top: 22px; }
.flow-node-ports-out { position: absolute; inset-inline-end: -7px; top: 22px; display: flex; flex-direction: column; gap: 6px; }
.flow-node-port-out { width: 13px; height: 13px; border-radius: 50%; background: var(--primary); border: 2px solid var(--surface); cursor: crosshair; box-shadow: 0 0 0 1px var(--border); }
.flow-node-port-out[data-port="true"] { background: var(--success); }
.flow-node-port-out[data-port="false"] { background: var(--danger); }
.flow-node-port-label { position: absolute; inset-inline-end: 14px; font-size: 9.5px; font-weight: 700; color: var(--text-faint); white-space: nowrap; transform: translateY(-1px); }

.flow-zoom-controls { position: absolute; bottom: var(--space-4); inset-inline-start: var(--space-4); display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px; box-shadow: var(--shadow-sm); z-index: 5; }
.flow-zoom-controls button { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.flow-zoom-controls button:hover { background: var(--surface-hover); }
.flow-minimap { position: absolute; bottom: var(--space-4); inset-inline-end: var(--space-4); width: 170px; height: 110px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); z-index: 5; overflow: hidden; cursor: pointer; }
.flow-minimap-node { position: absolute; width: 8px; height: 6px; border-radius: 2px; background: var(--text-faint); }
.flow-minimap-viewport { position: absolute; border: 1.5px solid var(--primary); background: var(--primary-soft); pointer-events: none; }

.flow-inspector { width: 270px; flex-shrink: 0; border-inline-start: 1px solid var(--border); overflow-y: auto; padding: var(--space-4); background: var(--surface-2); }
.flow-inspector-empty { color: var(--text-faint); font-size: var(--text-sm); text-align: center; padding: var(--space-6) var(--space-3); }
.flow-var-btn { width: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-size: 11px; font-weight: 800; color: var(--primary); }
.flow-var-btn:hover { background: var(--surface-hover); }

/* لم يكن هناك أي معالجة استجابة للشاشات الأصغر من اللابتوب إطلاقًا (٠ قواعد
   @media على أي .flow-* في الملف كله) — لوحة السحب/الإفلات وقماش الرسم
   والـMinimap تحتاج مساحة أفقية حقيقية لتكون قابلة للاستخدام أصلاً، فالحل
   الصادق هنا (نفس نهج أدوات الأتمتة المماثلة كـZapier/n8n) هو تنبيه واضح
   بدل واجهة مكسورة/مضغوطة بلا فائدة تفاعلية حقيقية تحتها. */
.flow-mobile-notice { display: none; }
@media (max-width: 1023px) {
  .flow-palette, .flow-inspector { display: none; }
  .flow-mobile-notice {
    display: flex; align-items: center; gap: var(--space-3); position: absolute; z-index: 6;
    top: var(--space-4); inset-inline: var(--space-4); padding: var(--space-3) var(--space-4);
    background: var(--warning-soft); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
    border-radius: var(--radius-md); font-size: 12.5px; font-weight: 700; box-shadow: var(--shadow-sm);
  }
  .flow-mobile-notice svg { width: 18px; height: 18px; flex-shrink: 0; }
}

/* ============================== Settings: card/section layout ============================== */
.settings-grid { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-6); align-items: start; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--space-6); }
.settings-nav a { padding: 9px 14px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 700; color: var(--text-muted); }
.settings-nav a.active { background: var(--primary-soft); color: var(--primary); }
.settings-nav a:hover { background: var(--surface-hover); }
.settings-section-title { font-size: var(--text-lg); font-weight: 800; margin-bottom: var(--space-1); }
.settings-section-desc { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-5); }
.integration-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); transition: background var(--dur-fast) var(--ease-out); }
.integration-card:hover { background: var(--surface-hover); }
.integration-card .ic-logo { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.integration-card .ic-logo svg { width: 21px; height: 21px; }
.integration-card .ic-body { flex: 1; }
.integration-card .ic-title { font-weight: 700; font-size: var(--text-sm); display: flex; align-items: center; gap: 8px; }
.integration-card .ic-desc { font-size: 12px; color: var(--text-muted); }

/* ============================== Notification Center: sounds, read-receipts, compose ============================== */
.sound-row { display: flex; align-items: center; gap: var(--space-3); }
.sound-row select { max-width: 180px; }
.read-receipt-link { font-size: 11px; color: var(--text-muted); margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; }
.read-receipt-link:hover { color: var(--primary); }
.receipt-avatars { display: flex; }
.receipt-avatars .avatar { width: 20px; height: 20px; font-size: 8.5px; border: 2px solid var(--surface); margin-inline-start: -6px; }
.receipt-avatars .avatar:first-child { margin-inline-start: 0; }
.receipt-panel { position: fixed; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); width: 220px; z-index: 130; display: none; overflow: hidden; }
.receipt-panel.open { display: block; animation: pop-in var(--dur-fast) var(--ease-out); }
.receipt-panel .rp-tab-row { display: flex; border-bottom: 1px solid var(--border); }
.receipt-panel .rp-tab { flex: 1; text-align: center; padding: 8px; font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.receipt-panel .rp-tab.active { color: var(--primary); border-bottom: 2px solid var(--primary); }
.receipt-panel .rp-user { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; font-weight: 600; }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: var(--slate-300); border-radius: var(--radius-full); transition: background var(--dur-fast) var(--ease-out); cursor: pointer; }
.switch .slider::before { content: ''; position: absolute; width: 18px; height: 18px; inset-inline-start: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform var(--dur-fast) var(--ease-out); box-shadow: var(--shadow-xs); }
.switch input:checked + .slider { background: var(--primary); }
[dir="rtl"] .switch input:checked + .slider::before { transform: translateX(-18px); }

/* ============================== Avatar upload overlay ============================== */
.avatar-edit { position: relative; width: 84px; height: 84px; }
.avatar-edit .avatar { width: 100%; height: 100%; font-size: var(--text-lg); }
.avatar-edit .avatar-edit-btn { position: absolute; bottom: -2px; inset-inline-end: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; border: 3px solid var(--surface); }

/* Compact collapsed badge for table rows / cards — white-space:nowrap إلزامي
   هنا: بدونه كان النص الطويل (مثل "تم الإرسال للجروب") يلف سطرين داخل
   الشكل الدائري (radius-full) فيتشوّه الشكل، والأيقونة (بلا flex-shrink:0)
   كانت تنكمش/تتحرّك مع الضغط بدل الثبات جنب أول سطر. */
.wf-collapsed { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 800; white-space: nowrap; max-width: 100%; }
.wf-collapsed .wf-collapsed-icon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.wf-collapsed .wf-collapsed-icon svg { width: 12px; height: 12px; }
.il-value svg { width: 13px; height: 13px; vertical-align: -2px; }
.wf-collapsed.phase-recruitment { background: var(--phase-recruitment-soft); color: var(--phase-recruitment-deep); }
.wf-collapsed.phase-recruitment .wf-collapsed-icon { background: var(--phase-recruitment); color: #fff; }
.wf-collapsed.phase-onboarding { background: var(--phase-onboarding-soft); color: var(--phase-onboarding-deep); }
.wf-collapsed.phase-onboarding .wf-collapsed-icon { background: var(--phase-onboarding); color: #fff; }
.wf-collapsed.phase-operations { background: var(--phase-operations-soft); color: var(--phase-operations); }
.wf-collapsed.phase-operations .wf-collapsed-icon { background: var(--phase-operations); color: #fff; }

/* ============================== Captain Card (Supervisor Workspace) ============================== */
/* Three privacy states — enforced server-side, this is only the visual layer:
   1) unclaimed:      full data + claim action
   2) owned-by-me:    full data + full action set
   3) owned-by-other: redacted summary only, no PII, no actions */

.captain-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; max-width: 380px; }
.captain-card-head { padding: var(--space-4) var(--space-5); display: flex; align-items: center; gap: var(--space-3); background: var(--surface-2); }
.captain-card-head .cc-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--primary-soft-strong); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.captain-card-head .cc-name { font-weight: 800; font-size: var(--text-md); }
.captain-card-head .cc-region { font-size: var(--text-xs); color: var(--text-muted); }
.cc-worktype-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; padding: 2px 9px; border-radius: var(--radius-full); margin-top: 4px; }
.cc-worktype-badge.wt-owns { background: var(--info-soft); color: var(--info); }
.cc-worktype-badge.wt-installment { background: var(--warning-soft); color: var(--warning); }
.cc-worktype-badge.wt-rent { background: var(--primary-soft); color: var(--primary); }
.captain-card-body { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.cc-field { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); }
.cc-field .cc-field-label { color: var(--text-muted); }
.cc-field .cc-field-value { font-weight: 700; font-family: var(--font-num); }
.captain-card-actions { padding: var(--space-3) var(--space-5) var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.captain-card-actions .btn { flex: 1 1 auto; }

/* Unclaimed variant — neutral border, prominent claim CTA */
.captain-card.unclaimed { border-color: var(--border-strong); border-style: dashed; }

/* Owned-by-me variant — accent border, live "mine" ribbon */
.captain-card.owned-mine { border-color: var(--accent); }
.captain-card.owned-mine .captain-card-head { background: var(--accent-soft); }
.cc-ribbon { position: absolute; top: 10px; inset-inline-end: -32px; transform: rotate(45deg); background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 800; padding: 3px 34px; }

/* Post-claim communication section — appears once a supervisor owns the captain */
.cc-comm-section { border-top: 1px dashed var(--border); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.cc-comm-section .cc-comm-title { font-size: 11.5px; font-weight: 800; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
.cc-comm-message { background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--space-3); font-size: 12.5px; line-height: var(--leading-normal); white-space: pre-line; color: var(--text-muted); }
.cc-comm-actions { display: flex; gap: var(--space-2); }
.cc-comm-actions .btn { flex: 1; }
.captain-card.owned-mine { position: relative; overflow: visible; }

/* Owned-by-other variant — fully redacted, muted, no actionable UI */
.captain-card.owned-other { opacity: .85; }
.captain-card.owned-other .captain-card-head { background: var(--neutral-soft); }
.captain-card.owned-other .cc-avatar { background: var(--slate-200); color: var(--slate-500); }
.captain-card.owned-other .cc-locked { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5);
  color: var(--text-faint); font-size: var(--text-sm); font-weight: 700; }
.captain-card.owned-other .cc-locked .lock-icon { font-size: 16px; }

/* ============================== Chat bubbles (Supervisor Workspace) ============================== */
.chat-bubble { max-width: 70%; padding: 10px 14px; border-radius: var(--radius-md); font-size: var(--text-sm); box-shadow: var(--shadow-xs); }
.chat-bubble.in { background: var(--surface); border: 1px solid var(--border); border-start-start-radius: 4px; align-self: flex-start; }
.chat-bubble.out { background: var(--primary); color: #fff; border-start-end-radius: 4px; align-self: flex-end; }
.chat-meta { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
.chat-bubble.out + .chat-meta { color: rgba(255,255,255,.7); }

/* ============================== Chat: mentions, replies, pins, voice, favorites ============================== */
.msg-actions { display: flex; gap: 4px; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); margin-bottom: 3px; }
.msg-row:hover .msg-actions, .msg-row:focus-within .msg-actions { opacity: 1; }
.msg-row.out .msg-actions { align-self: flex-end; }
.msg-action-btn { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); font-size: 11px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.msg-action-btn.active { color: var(--warning); border-color: var(--warning); background: var(--warning-soft); }

.reply-quote { display: block; border-inline-start: 3px solid var(--primary); background: rgba(0,0,0,.04); padding: 4px 8px; border-radius: 6px; font-size: 11.5px; margin-bottom: 6px; color: var(--text-muted); }
.chat-bubble.out .reply-quote { background: rgba(255,255,255,.15); color: rgba(255,255,255,.85); }
.reply-quote b { display: block; color: inherit; font-weight: 800; }

.composer-reply-bar, .composer-attach-bar { display: flex; align-items: center; gap: 8px; padding: 8px var(--space-4); background: var(--surface-2); border-top: 1px solid var(--border); font-size: 12px; }
.composer-reply-bar .crb-close { margin-inline-start: auto; }

.mention { color: var(--primary); font-weight: 800; }
.mention-popup { position: absolute; bottom: 100%; inset-inline-start: var(--space-4); inset-inline-end: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); display: none; z-index: 20; margin-bottom: 6px; overflow: hidden; }
.mention-popup.show { display: block; animation: pop-in var(--dur-fast) var(--ease-out); }
.mention-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 12.5px; font-weight: 700; }
.mention-item:hover, .mention-item.hi { background: var(--surface-hover); }

.pinned-bar { background: var(--warning-soft); border-bottom: 1px solid var(--border); padding: 8px var(--space-4); font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 8px; cursor: pointer; color: #92600A; }
.pinned-panel { position: absolute; top: 56px; inset-inline-end: var(--space-3); width: 270px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 25; display: none; overflow: hidden; }
.pinned-panel.open { display: block; animation: pop-in var(--dur-fast) var(--ease-out); }
.pinned-panel .pp-head { padding: 10px 14px; font-weight: 800; font-size: 12.5px; border-bottom: 1px solid var(--border); }
.pinned-panel .pp-item { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 12px; }
.pinned-panel .pp-item:last-child { border-bottom: none; }
.pinned-panel .pp-item b { display: block; font-size: 12.5px; margin-bottom: 2px; }

.voice-bubble { display: flex; align-items: center; gap: 8px; min-width: 190px; }
.voice-bubble .vb-play { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; }
.chat-bubble.out .voice-bubble .vb-play { background: #fff; color: var(--primary); }
.voice-wave { display: flex; align-items: center; gap: 2px; height: 20px; flex: 1; }
.voice-wave span { width: 2px; background: currentColor; opacity: .45; border-radius: 1px; }
.voice-wave span:nth-child(3n) { opacity: .8; }
.voice-duration { font-size: 11px; font-family: var(--font-num); opacity: .8; }

/* ============================== Workspace polish: unread state, typing, group info ============================== */
.conv-item { transition: background var(--dur-fast) var(--ease-out); cursor: pointer; }
.conv-item:hover { background: var(--surface-hover); }
.conv-item.unread .ci-name, .conv-item.unread .ci-preview { color: var(--text); font-weight: 800; }
.conv-item.unread .ci-time { color: var(--accent); font-weight: 800; }
.conv-unread-badge { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-inline-start: 6px; font-family: var(--font-num); }
.conv-wa-badge { position: absolute; bottom: -2px; inset-inline-end: -2px; width: 15px; height: 15px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); }
.conv-wa-badge svg { width: 9px; height: 9px; }

.wa-inbox-banner { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); border-inline-start: 3px solid #25d366; }
.wa-inbox-banner-icon { width: 36px; height: 36px; border-radius: 50%; background: #25d36622; color: #25d366; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wa-inbox-banner-icon svg { width: 18px; height: 18px; }

/* ============================== قوالب واتساب — محرر + معاينة حية ============================== */
.wa-tpl-card { display: flex; flex-direction: column; }
.wa-tpl-editor-grid { display: grid; grid-template-columns: 1fr 260px; gap: var(--space-5); align-items: start; }
@media (max-width: 900px) { .wa-tpl-editor-grid { grid-template-columns: 1fr; } }
.wa-preview-phone { background: #e5ded6; border-radius: var(--radius-lg); padding: var(--space-4) var(--space-3); min-height: 180px; }
.wa-preview-bubble { background: #fff; border-radius: var(--radius-md); padding: 10px 12px; box-shadow: var(--shadow-xs); max-width: 220px; font-size: 13px; color: #111; }
.wa-preview-header { font-weight: 800; margin-bottom: 4px; }
.wa-preview-body { line-height: 1.5; }
.wa-preview-footer { font-size: 11px; color: #667781; margin-top: 6px; }

.typing-indicator { display: flex; align-items: center; gap: 4px; padding: 11px 14px; }
.typing-indicator span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); animation: typing-bounce 1.2s infinite; }
.typing-indicator span:nth-child(2) { animation-delay: .15s; }
.typing-indicator span:nth-child(3) { animation-delay: .3s; }

/* ============================== Admin Chat shell (لوحة الإدارة) ============================== */
/* هيكل كامل بديل عن الأنماط المضمّنة (inline styles) السابقة — يطابق نفس
   لغة workspace.css البصرية (.ws-*) لتوحيد الهوية بين واجهتي المحادثات. */
.admin-chat-shell { display: flex; height: calc(100vh - 148px); overflow: hidden; border-radius: var(--radius-xl); }
.admin-chat-sidebar { width: 320px; border-inline-end: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; background: var(--surface); }
.admin-chat-sidebar-head { padding: var(--space-4); border-bottom: 1px solid var(--border); }
.admin-chat-sidebar-head h3 { font-size: var(--text-md); margin-bottom: var(--space-3); }
.admin-chat-list { flex: 1; overflow-y: auto; }

/* موجة Speedo Motion هنا: انتقال ناعم على الـhover (كانت الصفوف بلا أي
   استجابة بصرية غير حالة .active الثابتة)، ودخول متتابع لأول عناصر
   القائمة زي باقي جداول النظام. */
.chat-conv-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-inline-start: 3px solid transparent; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); animation: fade-up-in var(--dur-base) var(--ease-out) both; }
.chat-conv-item:hover { background: var(--surface-hover); }
.chat-conv-item.active { background: var(--primary-soft); border-inline-start-color: var(--primary); }
.chat-conv-item.active:hover { background: var(--primary-soft); }
.chat-conv-item:nth-child(1) { animation-delay: 0ms; }
.chat-conv-item:nth-child(2) { animation-delay: 25ms; }
.chat-conv-item:nth-child(3) { animation-delay: 50ms; }
.chat-conv-item:nth-child(4) { animation-delay: 75ms; }
.chat-conv-item:nth-child(5) { animation-delay: 100ms; }
.chat-conv-item:nth-child(6) { animation-delay: 125ms; }
.chat-conv-item:nth-child(7) { animation-delay: 150ms; }
.chat-conv-item:nth-child(8) { animation-delay: 175ms; }
.chat-conv-item .avatar { flex-shrink: 0; }
.ci-body { flex: 1; min-width: 0; }
.ci-top-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.ci-name { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-time { font-size: 11px; color: var(--text-faint); flex-shrink: 0; }
.ci-preview { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }

.admin-chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg);
  background-image: radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0); background-size: 22px 22px; }
.admin-chat-header { padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.admin-chat-header-name { font-weight: 800; font-size: 14.5px; }
.admin-chat-header-sub { font-size: 11.5px; color: var(--text-muted); }
.admin-chat-messages { flex: 1; overflow-y: auto; padding: var(--space-5) 6%; display: flex; flex-direction: column; gap: 3px; }
.admin-chat-composer { position: relative; background: var(--surface); border-top: 1px solid var(--border); padding: var(--space-3) var(--space-4); display: flex; align-items: flex-end; gap: var(--space-2); flex-shrink: 0; }
.admin-chat-composer textarea { flex: 1; resize: none; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 11px 16px; max-height: 120px; background: var(--surface-2); color: var(--text); font-family: var(--font-ui); font-size: var(--text-sm); }
.admin-chat-composer textarea:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.admin-chat-send-btn { background: var(--primary) !important; color: #fff !important; }
.admin-chat-send-btn:hover { background: var(--primary-hover) !important; }

/* نافذة الرد المجانية (24 ساعة) + لوحة معلومات المحادثة (وكيل/ملاحظات) */
.admin-chat-body-row { flex: 1; display: flex; min-height: 0; }
.admin-chat-body-row .admin-chat-messages { flex: 1; }
.admin-chat-info-panel { width: 260px; flex-shrink: 0; border-inline-start: 1px solid var(--border); background: var(--surface); overflow-y: auto; padding: var(--space-4); }
.chat-window-banner { padding: 8px var(--space-4); font-size: 12px; display: flex; align-items: center; gap: 8px; }
.chat-window-banner.open { background: var(--success-soft); color: var(--success); }
.chat-window-banner.locked { background: var(--danger-soft); color: var(--danger); }
.chat-info-section { margin-bottom: var(--space-5); }
.chat-info-label { font-weight: 700; font-size: 12.5px; margin-bottom: 8px; color: var(--text-muted); }
.chat-note-item { background: var(--surface-2); border-radius: var(--radius-md); padding: 8px 10px; margin-bottom: 6px; }
.chat-note-text { font-size: 12.5px; white-space: pre-wrap; }
.chat-note-meta { font-size: 10.5px; margin-top: 4px; }
.chat-interaction-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--success-soft); color: var(--success); border-radius: var(--radius-full); padding: 4px 12px; font-size: 12px; font-weight: 700; }
.chat-info-customer { text-align: center; padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.chat-tags-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-tag-chip { cursor: pointer; font-size: 11.5px; padding: 4px 10px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); user-select: none; }
.chat-tag-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.chat-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.chat-media-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-2); color: var(--text-muted); }
.chat-media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.chat-media-file { font-size: 20px; }
.wa-composer-menu-wrap { position: relative; flex-shrink: 0; }
.wa-composer-menu { position: absolute; bottom: 100%; inset-inline-start: 0; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; min-width: 140px; z-index: 20; }
.wa-composer-menu[hidden] { display: none; }
.wa-emoji-picker { position: absolute; bottom: 100%; inset-inline-start: 0; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 20; width: 300px; overflow: hidden; }
.wa-emoji-picker[hidden] { display: none; }
.wa-emoji-tabs { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.wa-emoji-tabs::-webkit-scrollbar { display: none; }
.wa-emoji-tab { flex: 1 0 auto; cursor: pointer; font-size: 17px; text-align: center; border: none; background: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 6px 8px; line-height: 1; opacity: .55; }
.wa-emoji-tab:hover { background: var(--surface-2); opacity: .85; }
.wa-emoji-tab.active { opacity: 1; background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--primary); }
.wa-emoji-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 8px; max-height: 220px; overflow-y: auto; }
.wa-emoji-opt { cursor: pointer; font-size: 19px; text-align: center; border-radius: var(--radius-sm); padding: 4px; line-height: 1.6; }
.wa-emoji-opt:hover { background: var(--surface-2); }

/* ترجمة اللوحة (عربي/إنجليزي) — راجع LangSwitch في app.js وapi/translate.php.
   ترجمة فعلية عبر الخادم (بلا أي سكربت من google.com في المتصفح)، لا حاجة لأي CSS خاص هنا غير شكل الزر نفسه. */
#langToggleBtn { display: flex; align-items: center; gap: 2px; }
.wa-composer-menu button { display: flex; align-items: center; gap: 8px; background: none; border: none; text-align: start; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; color: var(--text); cursor: pointer; }
.wa-composer-menu button:hover { background: var(--surface-2); }
.wa-composer-menu button svg { width: 16px; height: 16px; flex-shrink: 0; }

.chat-msg-row { display: flex; gap: var(--space-2); margin-top: var(--space-3); max-width: 72%; }
.chat-msg-row.out { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg-row.grouped { margin-top: 2px; }
.chat-msg-avatar { width: 30px; height: 30px; font-size: 11.5px; flex-shrink: 0; visibility: visible; }
.chat-msg-row.grouped .chat-msg-avatar { visibility: hidden; }
.chat-msg-bubble { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); border-start-start-radius: 4px; padding: 9px 13px; box-shadow: var(--shadow-xs); min-width: 0; }
.chat-msg-row.out .chat-msg-bubble { background: var(--primary); color: #fff; border-color: transparent; border-start-start-radius: var(--radius-lg); border-start-end-radius: 4px; }
.chat-msg-row.grouped .chat-msg-bubble { border-start-start-radius: var(--radius-lg); }
.chat-msg-row.out.grouped .chat-msg-bubble { border-start-end-radius: var(--radius-lg); }
.chat-msg-sender { font-size: 11px; font-weight: 800; color: var(--primary); margin-bottom: 3px; }
.chat-msg-row.out .chat-msg-sender { display: none; }
.chat-msg-body { font-size: var(--text-sm); line-height: var(--leading-normal); word-break: break-word; }
.chat-msg-body img { max-width: 240px; border-radius: 10px; display: block; }
.chat-msg-body audio { max-width: 230px; }
.chat-msg-meta { display: flex; align-items: center; gap: 4px; font-size: 10px; margin-top: 4px; opacity: .7; }
.chat-msg-meta svg { width: 13px; height: 13px; }
.chat-tick-double { display: inline-flex; }
.chat-tick-double svg:last-child { margin-inline-start: -9px; }
.chat-tick-read svg { color: var(--info); }
.admin-chat-typing-bar { padding: 0 6% 4px; min-height: 22px; }
/* شريط تسجيل/معاينة الرسالة الصوتية في "واتسابي" — يستبدل شريط الكتابة العادي بالكامل أثناء التسجيل أو الاستماع قبل الإرسال */
.wa-record-bar { display: flex; align-items: center; gap: var(--space-3); width: 100%; }
.wa-record-discard { color: var(--danger); flex-shrink: 0; }
.wa-record-discard:hover { background: var(--danger-soft); }
.wa-record-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); flex-shrink: 0; animation: mic-record-pulse 1.4s infinite; }
@keyframes mic-record-pulse { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.35); } 70% { box-shadow: 0 0 0 6px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
@media (prefers-reduced-motion: reduce) { .wa-record-dot { animation: none; } }
.wa-record-timer { font-weight: 800; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--text); flex-shrink: 0; min-width: 34px; }
.wa-record-hint { color: var(--text-muted); font-size: var(--text-sm); flex: 1; }
.wa-record-preview audio { flex: 1; height: 36px; min-width: 0; }
#myWaRecStopBtn, #myWaPreviewSendBtn { flex-shrink: 0; margin-inline-start: auto; }

/* لوحة الإيموجي — شبكة أزرار خفيفة بلا مكتبة خارجية، تنبثق فوق زر الإيموجي */
.wa-emoji-panel { position: absolute; bottom: calc(100% + 8px); inset-inline-start: 0; width: 280px; max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-3); z-index: 40; }
.wa-emoji-cat-label { font-size: 11px; font-weight: 800; color: var(--text-muted); margin: var(--space-2) 0 4px; }
.wa-emoji-cat-label:first-child { margin-top: 0; }
.wa-emoji-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.wa-emoji-item { border: none; background: transparent; font-size: 19px; line-height: 1; padding: 6px 0; border-radius: var(--radius-sm); cursor: pointer; }
.wa-emoji-item:hover { background: var(--surface-hover); }
.admin-chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); color: var(--text-muted); }
.admin-chat-empty svg { width: 48px; height: 48px; opacity: .4; }
@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.admin-chat-back-btn { display: none; flex-shrink: 0; }
/* موبايل: نفس منطق لوحة/محادثة الواحدة المستخدم في ws-shell (workspace.css) —
   القائمة والمحادثة النشطة لا يمكن أن تتقاسما 390px بعرض ثابت 320px للقائمة. */
@media (max-width: 860px) {
  .admin-chat-sidebar { width: 100%; }
  .admin-chat-shell.conv-open .admin-chat-sidebar { display: none; }
  .admin-chat-shell:not(.conv-open) .admin-chat-main { display: none; }
  .admin-chat-back-btn { display: inline-flex !important; }
}

.ws-header-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 6px 8px; border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease-out); text-align: start; }
.ws-header-info:hover { background: var(--surface-hover); }

.group-info-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 60; display: none; }
.group-info-overlay.open { display: block; animation: fade-in var(--dur-base) var(--ease-out); }
.group-info-panel { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: 340px; max-width: 88vw; background: var(--surface); z-index: 61; transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
[dir="rtl"] .group-info-panel { transform: translateX(-100%); }
.group-info-overlay.open .group-info-panel { transform: translateX(0); }
.gi-header { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-8) var(--space-5) var(--space-5); border-bottom: 1px solid var(--border); position: relative; }
.gi-header .gi-close { position: absolute; top: var(--space-3); inset-inline-start: var(--space-3); }
.gi-header .gi-avatar { width: 84px; height: 84px; border-radius: var(--radius-lg); background: var(--primary-soft-strong); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: var(--space-3); }
.gi-header h3 { font-size: var(--text-lg); display: flex; align-items: center; gap: 6px; justify-content: center; }
.gi-header .gi-sub { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }
.gi-section { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.gi-section h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-bottom: var(--space-3); }
.gi-member { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.gi-member .gi-member-name { font-weight: 700; font-size: var(--text-sm); flex: 1; }
.gi-member .gi-member-role { font-size: 11px; color: var(--text-faint); }

/* ============================== مراجعة مستندات الهوية (اعتماد/رفض مزوّدي خدمة) ==============================
   الجزء الثاني — كانت الصورة <img> خامًا بعرض العمود كاملاً بلا أي بطاقة/
   حد/تسمية واضحة داخل عمود ضيق (نصف .grid-2)، فتبدو صغيرة ومقصوصة بلا سياق.
   الآن: بطاقة مستقلة برأس يحمل التسمية + صورة بنسبة عرض/ارتفاع ثابتة (لا
   تتمدد ولا تُقصّ بشكل عشوائي) + تكبير عند الضغط (Lightbox) لمراجعة تفاصيل
   المستند الحقيقية (رقم البطاقة، الصورة، التاريخ) قبل قرار الاعتماد/الرفض. */
/* شريط الحالة أعلى شبكة المستندات — الحالة الحالية + سبب الرفض (إن وُجد) +
   أزرار اعتماد/رفض سريعة، بجانب مكان المراجعة الفعلي وليس فقط في رأس الصفحة */
.doc-review-status-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.doc-review-status-info { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-width: 0; }
.doc-review-status-reason { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--danger); }
.doc-review-status-reason svg { width: 14px; height: 14px; flex-shrink: 0; }
.doc-review-status-actions { display: flex; gap: 8px; flex-shrink: 0; }
.doc-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 560px) { .doc-review-grid { grid-template-columns: 1fr; } }
.doc-review-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.doc-review-label { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 13px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.doc-review-label svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.doc-review-image { position: relative; aspect-ratio: 16/10; background: var(--surface-2); cursor: zoom-in; overflow: hidden; }
.doc-review-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.doc-review-image:hover img { transform: scale(1.06); }
.doc-review-zoom-hint { position: absolute; inset-inline-end: 10px; bottom: 10px; display: flex; align-items: center; gap: 5px; background: rgba(0,0,0,.62); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: var(--radius-full); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); pointer-events: none; }
.doc-review-image:hover .doc-review-zoom-hint { opacity: 1; }
.doc-review-image .doc-review-zoom-hint svg { width: 12px; height: 12px; }
.doc-review-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 16/10; color: var(--text-faint); font-size: 12.5px; }
.doc-review-empty svg { width: 28px; height: 28px; }
@media (prefers-reduced-motion: reduce) { .doc-review-image img { transition: none; } }
@media (hover: none) { .doc-review-zoom-hint { opacity: 1; } }

/* عارض تكبير صورة عام (Lightbox) — يُستخدَم لمستندات الهوية وأي صورة أخرى
   تحتاج معاينة كاملة الحجم بلا مغادرة الصفحة الحالية. */
.img-lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 300; display: none; align-items: center; justify-content: center; padding: var(--space-6); animation: fade-in var(--dur-fast) var(--ease-out); }
.img-lightbox-overlay.open { display: flex; }
.img-lightbox-overlay img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); }
.img-lightbox-close { position: absolute; top: var(--space-5); inset-inline-end: var(--space-5); width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease-out); }
.img-lightbox-close:hover { background: rgba(255,255,255,.22); }
.img-lightbox-close svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .img-lightbox-overlay { animation: none; } }

/* ============================== Empty / Loading / Error states ============================== */
.state-block { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-12) var(--space-6); gap: var(--space-2); }
.state-block .state-icon {
  width: 60px; height: 60px; border-radius: var(--radius-lg); background: var(--surface-2); color: var(--text-faint);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-2);
  animation: pop-in var(--dur-base) var(--ease-spring);
}
@media (prefers-reduced-motion: reduce) { .state-block .state-icon { animation: none; } }
.state-block .state-icon svg { width: 28px; height: 28px; }
.state-block .state-title { font-weight: 800; font-size: var(--text-md); }
.state-block .state-desc { color: var(--text-muted); font-size: var(--text-sm); max-width: 340px; }
.state-block .state-action { margin-top: var(--space-3); }
.state-block.error .state-icon { background: var(--danger-soft); color: var(--danger); }

/* Skeleton loading shimmer */
.skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--radius-sm); }
.skeleton::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: shimmer 1.4s infinite;
}
[data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skeleton-text { height: 12px; margin-bottom: 8px; width: 100%; }
.skeleton-text.short { width: 40%; }
.skeleton-avatar { width: 38px; height: 38px; border-radius: 50%; }
.skeleton-card { height: 100px; border-radius: var(--radius-lg); }

/* Row hover reveal actions (tables) */
.row-actions-reveal { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); display: flex; gap: 4px; }
tr:hover .row-actions-reveal { opacity: 1; }

/* ============================== Utility ============================== */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }

/* ============================== Dropdown menu (new, generic) ============================== */
/* Small floating menu anchored to a trigger — settings row actions, table row
   kebab menus, avatar menu, etc. Positioned by the caller (JS sets top/left or
   inset-inline-* inline); this only styles the panel and its items. */
.dropdown-menu {
  position: fixed; min-width: 190px; background: var(--surface); border: var(--elevation-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-2); z-index: 140;
  display: none; animation: pop-in var(--dur-fast) var(--ease-spring);
}
.dropdown-menu.open { display: block; }
.dropdown-item {
  display: flex; align-items: center; gap: var(--space-3); padding: 9px 10px; border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 600; color: var(--text); white-space: nowrap;
}
.dropdown-item svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.dropdown-item:hover { background: var(--surface-hover); }
.dropdown-item.danger { color: var(--danger); }
.dropdown-item.danger svg { color: var(--danger); }
.dropdown-divider { height: 1px; background: var(--border); margin: var(--space-2) 4px; }

/* ============================== Context menu (right-click, new) ============================== */
/* Same visual language as .dropdown-menu, kept as a distinct class so intent
   (right-click vs. triggered-by-click) stays greppable in the markup. */
.context-menu { position: fixed; min-width: 180px; background: var(--surface); border: var(--elevation-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-2); z-index: 160; display: none; animation: pop-in var(--dur-fast) var(--ease-spring); }
.context-menu.open { display: block; }
.context-menu-item { display: flex; align-items: center; gap: var(--space-3); padding: 9px 10px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; }
.context-menu-item svg { width: 16px; height: 16px; color: var(--text-muted); }
.context-menu-item:hover { background: var(--surface-hover); }

/* ============================== Tooltip (new, generic) ============================== */
/* Lightweight hover tooltip for icon-only buttons / truncated labels — distinct
   from .verify-tooltip (which carries a specific structured layout). */
.tooltip { position: relative; }
.tooltip[data-tip]::before {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(2px);
  background: var(--slate-900); color: #fff; font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: var(--radius-sm);
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  z-index: 300; box-shadow: var(--shadow-md);
}
[data-theme="dark"] .tooltip[data-tip]::before { background: var(--slate-700); }
.tooltip[data-tip]:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================== Drill-down panel (new) ============================== */
/* Slide-in side panel opened from a .stat-drill-trigger click — shows the
   detail/comparison/trend view for a KPI or chart segment without leaving
   the current page. Reuses the .group-info-overlay off-canvas pattern. */
.drill-overlay { position: fixed; inset: 0; background: rgba(10,14,23,.45); z-index: 90; display: none; }
.drill-overlay.open { display: block; animation: fade-in var(--dur-base) var(--ease-out); }
.drill-panel {
  position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: 420px; max-width: 92vw; background: var(--surface);
  z-index: 91; transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-spring);
  display: flex; flex-direction: column; box-shadow: var(--shadow-xl);
}
[dir="rtl"] .drill-panel { transform: translateX(-100%); }
.drill-overlay.open .drill-panel { transform: translateX(0); }
.drill-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); }
.drill-header h3 { font-size: var(--text-lg); }
.drill-body { padding: var(--space-6); overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: var(--space-5); }
.drill-tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--border); padding-bottom: var(--space-2); }
.drill-tab { font-size: var(--text-sm); font-weight: 700; color: var(--text-muted); padding: 6px 14px; border-radius: var(--radius-full); }
.drill-tab.active { background: var(--primary-soft); color: var(--primary); }
.drill-compare-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.drill-compare-row:last-child { border-bottom: none; }
.drill-compare-label { font-size: var(--text-sm); color: var(--text-muted); }
.drill-compare-value { font-family: var(--font-num); font-weight: 800; font-size: var(--text-md); }

/* ============================== Quick actions (FAB menu items, new shared look) ============================== */
.quick-action-item { display: flex; align-items: center; gap: var(--space-3); padding: 10px 14px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 700; }
.quick-action-item svg { width: 17px; height: 17px; color: var(--primary); }
.quick-action-item:hover { background: var(--surface-hover); }

/* ═══════════════════════════════════════════════════
   نموذج عرض الوظيفة (Offer Form) — نموذج واحد متواصل (وليس خطوات) مقسّم
   لثلاثة أقسام مرقّمة، مع معاينة حيّة ثابتة بجانبه (راجع OfferPreview
   بالموقع القديم). يُستخدَم فقط داخل صفحة offer-form.
═══════════════════════════════════════════════════ */
.offer-form-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-6); align-items: start; }
@media (max-width: 1100px) { .offer-form-layout { grid-template-columns: 1fr; } }
.offer-form-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-5); }
.offer-form-section-title { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: var(--text-md); margin-bottom: var(--space-5); }
.offer-form-section-num { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.offer-region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.offer-region-chip { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-md); font-size: 13px; cursor: pointer; }
.offer-region-chip.selected { border-color: var(--primary); background: var(--accent-soft); }
.offer-shift-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.offer-shift-chip { padding: 8px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-full); font-size: 13px; font-weight: 700; cursor: pointer; }
.offer-shift-chip.selected { border-color: var(--primary); background: var(--primary); color: #fff; }
.offer-tag-input-box { border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); }
.offer-tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.offer-tag-chip { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border-radius: var(--radius-full); padding: 5px 6px 5px 12px; font-size: 12.5px; }
.offer-tag-chip button { color: var(--text-faint); display: flex; }

/* نظام الدخل المرن (النصوص الثلاثة المحفوظة منفصلة لكل income_type) — راجع
   migration 092. النوع غير المفعّل حاليًا يفضل ظاهرًا (النص محفوظ) لكن
   بشفافية أقل، حتى يكون واضح إنه مش اللي بيتعرض للطيار دلوقتي. */
.offer-income-desc-inactive { opacity: .5; }
.offer-income-desc-inactive label::after { content: ' (غير معروض حاليًا)'; font-weight: 500; color: var(--text-faint); }

.offer-preview-card { position: sticky; top: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.offer-preview-head { padding: var(--space-4) var(--space-5); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.offer-preview-head b { display: block; font-size: 13px; }
.offer-preview-head span { font-size: 11.5px; color: var(--text-muted); }
.offer-preview-body { padding: var(--space-5); }
.offer-preview-company-row { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-4); }
.offer-preview-company-row .icon-box { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.offer-preview-income-box { display: flex; flex-direction: column; align-items: flex-start; background: var(--primary-soft); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); }
.offer-preview-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-4); }
.offer-preview-pill { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-full); background: var(--surface-2); }
.offer-preview-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: var(--space-4); }
.offer-preview-info-card { background: var(--surface-2); border-radius: var(--radius-md); padding: 8px 10px; font-size: 11.5px; text-align: center; }
.offer-preview-list-section { margin-bottom: var(--space-3); }
.offer-preview-list-section h5 { font-size: 12px; font-weight: 800; margin: 0 0 6px; display: flex; align-items: center; gap: 5px; }
.offer-preview-list-item { font-size: 12px; padding: 4px 0 4px 10px; border-inline-start: 2px solid var(--primary); margin-bottom: 4px; }

/* قوالب واتساب الرسمية (Meta) — محرر + معاينة "فقاعة محادثة" حيّة */
.wa-tpl-card { display: flex; flex-direction: column; }
.wa-tpl-editor-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-6); align-items: start; }
@media (max-width: 860px) { .wa-tpl-editor-grid { grid-template-columns: 1fr; } }

.wa-preview-phone { position: sticky; top: var(--space-4); background: #e5ddd5; border-radius: var(--radius-lg); padding: var(--space-5) var(--space-3); min-height: 220px; display: flex; align-items: flex-start; }
[data-theme="dark"] .wa-preview-phone { background: #0b141a; }
.wa-preview-bubble { background: #fff; border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 2px; padding: var(--space-3); max-width: 100%; box-shadow: var(--shadow-sm); font-size: 13.5px; line-height: 1.6; color: #111; }
.wa-preview-header { font-weight: 800; margin-bottom: 6px; }
.wa-preview-header-media { display: flex; align-items: center; gap: 8px; background: #f0f0f0; border-radius: var(--radius-sm); padding: var(--space-3); margin-bottom: 8px; color: #667781; font-size: 12px; }
.wa-preview-header-media svg { width: 20px; height: 20px; flex-shrink: 0; }
.wa-preview-body { white-space: pre-wrap; word-break: break-word; }
.wa-preview-footer { font-size: 11.5px; color: #667781; margin-top: 6px; }
.wa-preview-buttons { margin-top: 8px; border-top: 1px solid #eee; padding-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.wa-preview-btn { text-align: center; color: #00a5f4; font-size: 13px; font-weight: 700; padding: 6px 4px; }

.wa-tpl-btn-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.wa-tpl-btn-row .form-control { margin-bottom: 0; }
.wa-tpl-btn-row .btn-text-input { flex: 1; }
.wa-tpl-btn-row .btn-value-input { flex: 1; }