/**
 * 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.
 */

/* ============================== 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);
}
.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 { background: var(--surface); border: var(--elevation-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); width: 420px; max-width: 92vw; animation: pop-in var(--dur-base) var(--ease-spring); }
.modal-header { 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); }
.modal-footer { 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.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: var(--brand-gradient);
  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: var(--brand-gradient); 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); }

/* ============================== 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; }

.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; }