/* كل المتغيّرات في css/tokens.css — هو المصدر الوحيد.
   لا تعرّف :root هنا، ولا تكتب لوناً مباشراً. */

    * { margin: 0; padding: 0; box-sizing: border-box; }

    /* «مخفيّ» يعني مخفيّاً — والقاعدة في tokens.css وحدها.
       كانت هنا قائمةً بأصنافٍ بعينها، وهي أضعف: لا تشمل صنفاً يُضاف
       غداً يضبط `display`، فيعود العطلُ نفسه في مكانٍ جديد. */

    body {
      font-family: var(--font-sans);
      background: var(--bg-primary);
      color: var(--text-primary);
      /* سطرٌ مُعلَن لا افتراضُ المتصفّح: العربيةُ بمداتها وتشكيلها تضيق
         عند `normal`، والقيمةُ تتغيّر بتغيّر الخطّ الذي حُمِّل فعلاً. */
      line-height: var(--lh-base);
      min-height: 100vh;
      overflow-x: hidden;
      transition: background-color var(--transition-base), color var(--transition-base);
    }

    body::before {
      content: '';
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background:
        radial-gradient(ellipse at 20% 20%, var(--ambient-1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, var(--ambient-2) 0%, transparent 50%);
      z-index: 0;
      /* زخرفة لا تُلمَس. بدون هذا السطر تبتلع الطبقةُ الثابتة كلَّ نقرة
         على أي عنصر لا يرتفع فوق z-index: 0 — وهو ما جعل زرّ الدخول
         غير قابل للضغط أصلاً. */
      pointer-events: none;
    }

    /* === Sidebar === */
    .sidebar {
      position: fixed; right: 0; top: 0; bottom: 0;
      width: var(--sidebar-width);
      background: var(--surface-1);
      border-left: 1px solid var(--glass-border);
      z-index: 100;
      display: flex; flex-direction: column;
      padding: 24px 0;
      transition: transform 0.3s;
    }

    .sidebar-logo {
      padding: 0 24px 24px;
      border-bottom: 1px solid var(--glass-border);
      margin-bottom: 12px;
    }
    /* الاسمُ يُقرأ حرفاً: كان مصبوغاً بتدرّجٍ عبر background-clip،
       والتدرّجُ على اسمِ العلامة يجعلها تُقرأ لافتةً لا هويّة. */
    .sidebar-logo h1 {
      font-size: var(--fs-xl); font-weight: var(--fw-bold);
      color: var(--text-strong);
      background: none;
      -webkit-text-fill-color: currentColor;
    }
    .sidebar-logo p { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 4px; }

    /* ── أعلى القائمة ──
       كانت الحالة والردّ الآلي بطاقتين فوق بعضهما، فوقهما الشعار، وتحتهما
       لافتةُ صمتٍ من أربعة أسطر: أربع كتلٍ تأكل أعلى الشاشة قبل أن يظهر
       أوّل رابط. صارت الحالة والمفتاح صفّاً واحداً. */
    .sidebar-state {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin: 0 16px 10px;
      padding: 7px 11px;
      background: var(--glass);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-sm);
    }
    .conn-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: var(--fs-sm);
      color: var(--text-secondary);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .status-dot {
      width: 10px; height: 10px; border-radius: 50%;
      flex-shrink: 0;
    }
    /* ── نقطةُ الحالة: الحركةُ للحالة التي تحتاج تدخّلاً ──
       كانت المتّصلةُ تنبض ولها هالة، والمنقطعةُ لها هالةٌ بلا نبض — أي
       أنّ الحالةَ التي تستدعي أن يُنظَر إليها هي وحدها الساكنة. وهالةُ
       الانقطاع كانت من `--red-glow` وهو رمزُ سطحٍ لا رمزُ توهّج: في
       الثيم الفاتح لونٌ ورديٌّ فاتحٌ على شريطٍ أبيض، لا يُرى ويُميّع
       حافّةَ النقطة. فذهبت الهالتان، وبقيت الحركةُ حيث تعني شيئاً. */
    .status-dot.connected { background: var(--green); }
    .status-dot.disconnected { background: var(--red); animation: pulse 1s infinite; }
    .status-dot.connecting { background: var(--yellow); animation: pulse 1s infinite; }
    /* و`error` كانت بلا قاعدة. و`checkStatus` تكتب الحالةَ في اسم الصنف
       رأساً — أربعُ حالاتٍ تبلغ هذا السطر ولثلاثٍ ألوان. فكانت النقطةُ
       تصير شفّافةً تماماً مع كلّ خطأ اتصال: تختفي في اللحظة التي وُجدت
       من أجلها، فيقرأ صاحبُ اللوحة غيابَها «لا جديد» لا «انقطع». */
    .status-dot.error { background: var(--danger); animation: pulse 1s infinite; }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

    .nav-items { flex: 1; padding: 0 12px; overflow-y: auto; }
    /* بنودُ القائمة روابطُ <a> حقّاً — تُفتَح في تبويبٍ جديد ويُنسَخ
       عنوانُها. والمتصفّحُ يخطّ تحت كلّ رابطٍ ما لم يُقَل غيرُ ذلك، فظهرت
       القائمةُ كلُّها مسطَّرةً لحظةَ تحوّلها عن <div>. */
    .nav-item {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 16px; margin: 4px 0;
      border-radius: var(--radius-sm);
      cursor: pointer; font-size: var(--fs-base); font-weight: var(--fw-medium);
      color: var(--text-secondary);
      text-decoration: none;
      transition: all 0.2s;
      border: 1px solid transparent;
    }
    .nav-item:hover {
      background: var(--glass); color: var(--text-primary);
      border-color: color-mix(in srgb, var(--accent) 20%, transparent);
    }
    /* البندُ النشط: سطحٌ أرفعُ ووزنٌ أثقلُ وعلامةٌ على حافّة البداية —
       لا غسلةٌ بنفسجيّةٌ متدرّجة. القائمةُ يُنظَر إليها في كلّ دقيقة،
       فما يميّز واحداً منها يكفي أن يكون هادئاً وواضحاً.

       والنصُّ --text-strong لا --accent: البنفسجيُّ على سطحٍ مصبوغٍ
       بالبنفسجيّ نفسِه هو أضعفُ ما يمكن أن يُقرأ به بندٌ هو المقصود
       بالتمييز أصلاً.

       وborder-inline-start لا border-right: القائمةُ يمينَ الشاشة في
       العربيّة ويسارَها لو قُلبت الجهة، والحافّةُ تتبعها وحدَها. */
    .nav-item.active {
      background: var(--surface-3);
      color: var(--text-strong);
      font-weight: var(--fw-semibold);
      border-color: transparent;
      border-inline-start: 3px solid var(--accent);
    }
    .nav-item i , .nav-item svg{ width: var(--icon-md); height: var(--icon-md); }

    /* === Main Content === */
    .main {
      margin-right: var(--sidebar-width);
      padding: 32px;
      position: relative; z-index: 1;
      min-height: 100vh;
    }

    /* === Cards === */
    /* حشوةُ البطاقة واحدةٌ في المنصّة: كانت ستَّ قيمٍ بين ثمانيةٍ
       واثنتين وثلاثين، فلا يبدأ المحتوى من الحافّة نفسِها في صفحتين. */
    .card {
      background: var(--surface-2);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius);
      padding: var(--sp-5);
      transition: all 0.3s;
    }
    .card:hover { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

    /* === Stats Grid === */
    /* === Buttons === */
    /* الخطُّ يُورَث لا يُسمّى: عناصرُ النموذج تُعيد ضبطَ الخطّ إلى خطّ
       النظام، وتسميةُ 'Tajawal' وحدَها بلا بديلٍ تُسقِطها إلى الافتراضيّ
       المشبَّك حين لا يصل الخطُّ من جوجل — وذلك يقع في كلّ تحميلٍ بارد
       قبل أن يصل، ويدوم على شبكةٍ تحجبه. */
    /* و.btn يُلبَس على <a> أيضاً (زرُّ التصدير مثلاً) — فيسري عليه الخطُّ
       تحته إن لم يُمنَع، وهو زرٌّ في نظر من يراه لا رابط. */
    .btn {
      padding: 10px 20px; border: none; border-radius: var(--radius-sm);
      font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-semibold);
      cursor: pointer; transition: all 0.2s;
      display: inline-flex; align-items: center; gap: var(--sp-2);
      text-decoration: none;
    }
    /* سطحٌ مصمتٌ لا تدرّج. والتدرّجُ لم يكن يقول شيئاً عن الزرّ — لا حالةً
       ولا أولويّةً — وكان يجعله يلمع كزرِّ شراءٍ في متجر.
       و--accent-solid لا --accent: الأوّلُ violet-500 ويعطي الأبيضَ فوقه
       4.94:1، والثاني violet-400 عند 3.41:1 — تحت الحدّ. */
    .btn-primary {
      background: var(--accent-solid);
      color: var(--text-on-accent);
      box-shadow: var(--shadow-sm);
    }
    .btn-primary:hover { background: var(--accent-solid-hover); }
    .btn-danger { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger-text); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
    .btn-danger:hover { background: color-mix(in srgb, var(--danger) 25%, transparent); }
    .btn-sm { padding: 6px 14px; font-size: var(--fs-sm); }
    .btn-success { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success-text); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); }
    /* فصلُ الواتساب ونظائرُه: فِعلٌ يُتراجَع عنه، فلا هو خطرٌ ولا محايد.
       كان يُرسَم بسمةٍ على الوسم — لونٌ يتخطّى الأنماط فلا يُفحَص ولا
       يُصلَح مع إخوته. */
    .btn-warning { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning-text); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); }
    .btn-warning:hover { background: color-mix(in srgb, var(--warning) 25%, transparent); }
    .btn-ghost { background: var(--glass); color: var(--text-secondary); border: 1px solid var(--glass-border); }
    .btn-ghost:hover { color: var(--text-primary); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
    .btn i , .btn svg{ width: 16px; height: 16px; }

    /* === Product Categories Grid === */
    .category-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;
    }
    .category-card {
      background: var(--bg-card); border: 1px solid var(--glass-border);
      border-radius: var(--radius); padding: var(--sp-5); cursor: pointer;
      transition: all 0.3s; position: relative; overflow: hidden;
      display: flex; flex-direction: column; align-items: center; text-align: center;
    }
    .category-card:hover {
      transform: translateY(-4px); border-color: var(--accent);
      box-shadow: 0 10px 30px var(--surface-inset), inset 0 0 20px color-mix(in srgb, var(--accent) 5%, transparent);
    }
    .category-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); color: var(--text-strong); }
    .category-card p { font-size: var(--fs-sm); color: var(--text-muted); }
    .category-card .icon { color: var(--accent); margin-bottom: var(--sp-4); opacity: 0.8; }
    .category-card .icon i , .category-card .icon svg{ width: 48px; height: 48px; }

    /* === Tables === */
    .table-wrap { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; }
    /* ── كثافةُ أداةِ عمل ──
       الصفُّ كان تسعةً وأربعين بكسلاً هنا وأربعين في جدول الطلبات، لأنّ
       جدولَ الطلبات وحدَه ضُبِط على ما تحتاجه شاشةٌ تُمسَح بحثاً عن سطر.
       فأُخذت كثافتُه أصلاً للجداول كلّها، وحُذف تخصيصُه.

       ولا `text-transform: uppercase` ولا تباعدَ حروف: المحتوى عربيٌّ،
       والأولى لا تفعل به شيئاً، والثانية تفكّ وصلَ حروفه فتمطّ الكلمة.
       والخفوتُ يبقى بالوزن واللون — وهما يعملان. */
    th {
      text-align: right; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs);
      color: var(--text-muted); font-weight: var(--fw-semibold);
      border-bottom: 1px solid var(--glass-border);
    }
    td {
      padding: var(--sp-3); font-size: var(--fs-sm);
      border-bottom: 1px solid var(--border-hairline);
    }
    tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }

    /* ── وسمُ الحالة: مفرداتٌ واحدة ──
       كانت اثنتين: `badge badge-yellow` في إحدى عشرة صفحة، و
       `tag data-tone="amber"` في أربع. والمفهومُ واحد — حالةُ طلبٍ أو
       سجلّ — فيراه من ينتقل بين الصفحتين مكوّنَين مختلفين: حبّةٌ ذاتُ
       حدٍّ هنا، وأخرى مدوّرةٌ بنقطةٍ هناك. ومن يضيف حالةً في صفحةٍ جديدة
       عليه أن يعرف أيّ صفحةٍ هو فيها ليعرف أنّ التحذير «yellow» أم
       «amber».

       فصارتا شكلاً واحداً هنا، وبقي الاسمان يعملان: لا يُعاد تسميةُ
       تسعةَ عشرَ موضعاً في الجافاسكربت لأجل التنسيق. */
    .badge, .tag {
      display: inline-flex; align-items: center; gap: var(--sp-1);
      padding: 3px var(--sp-2);
      border-radius: var(--radius-full);
      font-size: var(--fs-xs); font-weight: var(--fw-semibold);
      white-space: nowrap;
      background: var(--surface-inset);
      color: var(--text-secondary);
      border: 1px solid transparent;
    }
    /* نقطةٌ تسبق النصّ حيث لا أيقونة — واثنتان معاً حشو */
    .badge::before, .tag::before {
      content: ''; width: 6px; height: 6px;
      border-radius: 50%; background: currentColor; flex: none;
    }
    .badge:has(i)::before, .tag:has(i)::before { content: none; }

    /* السطحُ مصمتٌ لا شفّاف.

       الشفّافيّةُ تجعل اللونَ الفعليَّ تحت النصّ تابعاً لما تحتها: شارةٌ
       على بطاقةٍ بيضاءَ غيرُ شارةٍ على صفٍّ رماديّ. وقيست «محوّلة» عند
       4.44:1 — تحت الحدّ بستّة أجزاءَ من مئة، لأنّها وقعت على سطحٍ أدكن.

       والرموزُ `-soft` مصمتةٌ في الفاتح، فالنسبةُ واحدةٌ أينما وقعت. */
    .badge-green, .tag[data-tone="green"] { background: var(--success-soft); color: var(--success-text); border-color: color-mix(in srgb, var(--success) 25%, transparent); }
    .badge-red, .tag[data-tone="red"] { background: var(--danger-soft); color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
    .badge-yellow, .tag[data-tone="amber"], .tag[data-tone="yellow"] { background: var(--warning-soft); color: var(--warning-text); border-color: color-mix(in srgb, var(--warning) 25%, transparent); }
    .badge-blue, .tag[data-tone="blue"] { background: var(--info-soft); color: var(--info-text); border-color: color-mix(in srgb, var(--info) 25%, transparent); }

    /* === Forms === */
    .form-group { margin-bottom: 16px; }
    .form-group label {
      display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
      color: var(--text-secondary); margin-bottom: 6px;
    }
    /* ── الاتجاهُ للسمة لا للصنف ──
       كان هنا `direction: rtl`. والصفحةُ عربيةٌ أصلاً بـ `dir="rtl"` على
       الجذر، فالقاعدةُ لا تضيف شيئاً — لكنّها تُبطِل ثلاثين حقلاً كُتب
       عليها `dir="ltr"` عمداً: الآيبان ورقمُ الجوال والبريد والمفتاح
       والرابط. فقاعدةُ المؤلِّف تعلو قاعدةَ المتصفّح `[dir=ltr]` مهما
       ضعُف تخصيصُها. وكان من يكتب `cardeix.com/` يراها `/cardeix.com`. */
    .form-input {
      width: 100%; padding: 10px 14px;
      background: var(--surface-inset);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-sm);
      color: var(--text-primary); font-family: inherit; font-size: var(--fs-base);
      transition: all 0.2s;
    }
    /* السطحُ يرتفع درجةً عند التركيز، ولا يصير أسودَ نصفَ شفّاف: تلك
       القيمةُ لا تعرف ثيمَها، فتصير في الفاتح رمادياً متوسّطاً يُكتَب
       عليه بنصٍّ داكن — 3.63:1 في الحقل الذي يُكتَب فيه الآن. */
    .form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); background: var(--surface-3); }
    select.form-input { appearance: none; cursor: pointer; }
    textarea.form-input { min-height: 80px; resize: vertical; }

    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-check {
      display: flex; align-items: center; gap: var(--sp-2);
      font-size: var(--fs-base); cursor: pointer; color: var(--text-secondary);
    }
    .form-check input[type="checkbox"] {
      width: var(--icon-md); height: var(--icon-md); accent-color: var(--accent);
    }

    /* === Modal === */
    .modal-overlay {
      display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: var(--surface-overlay);
      z-index: 200; align-items: center; justify-content: center;
    }
    .modal-overlay.active { display: flex; }
    .modal {
      background: var(--bg-secondary); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
      border-radius: var(--radius); padding: var(--sp-7); box-shadow: var(--shadow-lg);
      width: 90%; max-width: 550px; max-height: 85vh; overflow-y: auto;
      animation: modalIn 0.3s ease;
    }
    @keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } }
    .modal-header {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 20px; padding-bottom: 16px;
      border-bottom: 1px solid var(--glass-border);
    }
    /* عنوانُ النافذة نصٌّ لا رابط: البنفسجيُّ للتفاعل وحدَه */
    .modal-header h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); display: flex; align-items: center; gap: var(--sp-2); }
    .modal-close {
      width: 32px; height: 32px; border-radius: 50%;
      background: var(--glass); border: 1px solid var(--glass-border);
      color: var(--text-secondary); cursor: pointer; font-size: var(--fs-lg);
      display: flex; align-items: center; justify-content: center; transition: all 0.2s;
    }
    .modal-close:hover { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
    .modal-actions {
      display: flex; gap: 12px; justify-content: flex-end;
      margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--glass-border);
    }

    /* === Toast === */
    .toast-container { position: fixed; top: 24px; left: 24px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }

    /* يُخفى عن العين ويبقى لقارئ الشاشة.
       ولا display:none ولا [hidden]: كلاهما يُسقط العنصرَ من شجرة الإتاحة
       فلا يُعلَن منه شيء — وهذه مناطقُ إعلانٍ لا زينة. */
    .sr-only {
      position: absolute; width: 1px; height: 1px;
      margin: -1px; padding: 0; border: 0;
      overflow: hidden; white-space: nowrap;
      clip-path: inset(50%);
    }
    .toast {
      padding: 12px 20px; border-radius: var(--radius-sm); font-size: var(--fs-base); font-weight: var(--fw-medium);
      animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards; border: 1px solid var(--surface-3);
      display: flex; align-items: center; gap: var(--sp-2);
    }
    /* الملءُ مصمتٌ ودرجتُه هي درجةُ الملء لا درجةُ الحدّ: violet-400
       يكفي حدّاً ولا يكفي أن يُكتَب عليه بالأبيض — 3.41:1. و90% من لونٍ
       فوق ما يمرّ خلفه يجعل النسبةَ تابعةً لما يُمرَّر تحت اللافتة. */
    .toast-success { background: var(--accent-solid); color: var(--text-on-accent); }
    /* والخطرُ مثلُها: rose-400 يعطي الأبيضَ عليه 3.23:1، والسادسةُ 4.7:1.
       ولا رمزَ دلاليٌّ لملء الخطر بعدُ كما لـ`--accent-solid`، فتُؤخَذ
       الدرجةُ من السلّم مباشرةً حتى يُضاف `--danger-solid` في tokens.css. */
    .toast-error { background: var(--rose-600); color: var(--text-on-accent); }
    @keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } }
    @keyframes toastOut { to { opacity: 0; transform: translateY(-10px); } }

    /* ── «لا شيءَ هنا بعد»: لغةٌ واحدة ──
       كانت ستّ لغات: أيقونةٌ بثمانيةٍ وأربعين بكسلاً وهالةٍ بنفسجية في
       صفحة المنتجات، وأخرى بستّةٍ وعشرين في الرسم، وجملةٌ عاريةٌ بلا
       أيقونةٍ في قائمة الاتصالات، وسطرٌ خافتٌ في لوح التذكرة. أربعُ
       لحظاتِ فراغٍ في جولةٍ واحدة، وأربعةُ مظاهر.

       فمقاسان لا ستّة: كتلةٌ لصفحةٍ خالية، وأخرى ضيّقةٌ داخل بطاقة.
       والأصنافُ الأربعةُ الباقيةُ تُجمَع هنا ولا يُعاد تسميتُها في
       الجافاسكربت: التنسيقُ يوحّدها، والوسمُ يبقى كما هو. */
    .empty-state, .error-state,
    .chart-empty, .empty-inline, .tk-empty, .conn-list:empty::after {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: var(--sp-2);
      padding: var(--sp-12) var(--sp-6);
      color: var(--text-muted); text-align: center;
    }
    /* داخلَ بطاقةٍ أو لوح: الحشوةُ أضيق، وإلّا أزاح الفراغُ ما تحته */
    .chart-empty, .empty-inline, .tk-empty, .conn-list:empty::after {
      padding: var(--sp-5) var(--sp-3);
    }
    .empty-state .icon, .error-state .icon { opacity: 0.5; }
    .empty-state .icon i, .empty-state .icon svg, .error-state .icon i , .error-state .icon svg{ width: var(--icon-xl); height: var(--icon-xl); }
    .empty-state .icon { color: var(--text-muted); }
    .error-state .icon { color: var(--danger-text); opacity: 0.7; }
    .chart-empty i, .chart-empty svg, .empty-inline i , .empty-inline svg{ width: var(--icon-lg); height: var(--icon-lg); opacity: 0.5; }
    .empty-state p, .error-state p { font-size: var(--fs-base); }
    .chart-empty p, .empty-inline p { font-size: var(--fs-sm); margin: 0; }

    /* === Chat View === */
    .chat-list { display: flex; flex-direction: column; gap: 8px; }
    .chat-item {
      display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--radius-sm);
      background: var(--glass); border: 1px solid var(--glass-border); cursor: pointer; transition: all 0.2s;
    }
    .chat-item:hover { border-color: var(--accent); transform: translateX(-2px); background: color-mix(in srgb, var(--accent) 5%, transparent); }
    .chat-avatar {
      width: 44px; height: 44px; border-radius: 50%; background: var(--accent-solid);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
      color: var(--text-on-accent);
    }
    .chat-info { flex: 1; min-width: 0; }
    .chat-name { font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--text-strong); display: flex; align-items: center; gap: var(--sp-2);}
    .chat-preview { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .chat-time { font-size: var(--fs-xs); color: var(--text-muted); flex-shrink: 0; }

    /* === Messages View === */
    /* السطحُ غائرٌ بالرمز لا بأسودَ أربعينَ بالمئة: تلك القيمةُ لا تعرف
       ثيمَها، فتُرسَم في الفاتح مستطيلاً داكناً داخلَ لوحٍ أبيض، ونصُّ
       المحادثة داكنٌ فوقه. وهي الشاشةُ التي تُقرأ فيها المحادثة. */
    .messages-container {
      max-height: 400px; overflow-y: auto; padding: var(--sp-4); margin: var(--sp-4) 0;
      background: var(--surface-inset); border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);
    }
    .message { max-width: 75%; padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: var(--sp-2); font-size: var(--fs-base); }
    /* ── ضفّتان لا ضفّة ──
       `margin-left: auto` و`margin-right: 0` كلتاهما تدفع الفقاعةَ إلى
       اليمين تحت `dir="rtl"`: الأولى لأنّها تمتصّ الفراغ، والثانية لأنّ
       الصندوقَ يفيض فيُعاد حسابُ الهامش المبدئيّ. فكان الطرفان في ضفّةٍ
       واحدة، ولا يفرّق بينهما إلا سطرٌ صغيرٌ تحت كلٍّ منهما.

       والخصائصُ المنطقيّةُ تنقلب مع اتجاه الصفحة: العميلُ عند المبتدأ،
       والبوتُ عند المنتهى، وزاويةُ كلٍّ القائمةُ على الحافّة التي يلتصق
       بها لا على المقابلة. */
    .message.customer { background: color-mix(in srgb, var(--info) 15%, transparent); border: 1px solid color-mix(in srgb, var(--info) 20%, transparent); margin-inline-end: auto; border-end-start-radius: 0; }
    .message.bot { background: color-mix(in srgb, var(--accent) 15%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); margin-inline-start: auto; border-end-end-radius: 0;}
    .message .meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-1); display: flex; justify-content: space-between;}

    /* قائمةُ المدد وبنودُها تُعرَّف في catalog.css — وكانت معرّفةً هنا
       أيضاً، فيرث النموذجُ التنسيقين معاً: بطاقةٌ داخلَ بطاقة، وآخرُ
       سطرٍ بلا حدٍّ لأنّ `:last-child` هنا يعلو تخصيصَ القاعدة هناك. */

    /* Scrollbar */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--radius-full); }
    ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

    /* دوران — تستهلكه .spin-icon أثناء تهيئة الواتساب */
    @keyframes spin { to { transform: rotate(360deg); } }

    /* === Skeleton Loader === */
    @keyframes shimmer {
      0%   { background-position: -600px 0; }
      100% { background-position: 600px 0; }
    }
    .skeleton {
      background: linear-gradient(90deg, var(--border-hairline) 25%, var(--surface-3) 50%, var(--border-hairline) 75%);
      background-size: 600px 100%;
      animation: shimmer 1.4s infinite linear;
      border-radius: var(--radius-sm);
    }
    .skeleton-line  { height: 14px; margin-bottom: 10px; border-radius: var(--radius-xs); }
    .skeleton-line.short { width: 40%; }
    .skeleton-line.medium { width: 65%; }
    .skeleton-line.full   { width: 100%; }
    .skeleton-card {
      background: var(--surface-2); border: 1px solid var(--border-subtle);
      border-radius: var(--radius); padding: var(--sp-5); margin-bottom: var(--sp-3);
    }
    .skeleton-row { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border-hairline); }
    .skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
    .skeleton-text  { flex: 1; }
    .skeleton-stat  { height: 28px; width: 80px; border-radius: var(--radius-xs); }

    /* شريطُ الأدوات: مسافةٌ واحدةٌ تحته في كلّ صفحة. كانت اثنتَي عشرةَ
       في الطلبات وستّةَ عشرَ في المحادثات وعشرين في المنتجات، فيبدأ
       المحتوى عند ارتفاعٍ مختلفٍ كلّما انتُقل بين صفحتين. */
    .toolbar,
    .conv-toolbar,
    .sales-toolbar,
    .store-bar,
    .orders-bar,
    .section-head { margin-bottom: var(--sp-4); }

    .toolbar { display: flex; justify-content: space-between; align-items: center; }

    /* === Toggle Switch === */
    .switch { position: relative; display: inline-block; width: 44px; height: 24px; }
    .switch input { opacity: 0; width: 0; height: 0; }
    .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); transition: .4s; border-radius: var(--radius-full); border: 1px solid var(--glass-border); }
    .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 3px; background-color: var(--text-muted); transition: .4s; border-radius: 50%; }
    input:checked + .slider { background-color: var(--green); border-color: var(--success-text); }
    input:checked + .slider:before { transform: translateX(20px); background-color: var(--text-on-accent); }


    /* === WhatsApp Full Grid (3 cards) === */
    .wa-full-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 20px;
    }
    /* بطاقة الحالة + الإدارة في الصف الأول، التدريب يمتد عبر العمودين في الصف الثاني */
    .wa-train-card {
      grid-column: 1 / -1;
    }

    /* === بطاقة إدارة الاتصال === */
    .wa-manage-card {
      background: var(--surface-2);
      border: 1px solid var(--border-subtle); border-radius: var(--radius);
      padding: var(--sp-5);
    }
    .wa-manage-title {
      color: var(--text-strong); font-size: var(--fs-md); font-weight: var(--fw-bold);
      display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5);
    }
    .wa-manage-title i , .wa-manage-title svg{ width: var(--icon-md); height: var(--icon-md); color: var(--accent); }

    .wa-actions-list { display: flex; flex-direction: column; gap: 0; }
    .wa-action-item {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 0;
    }
    .wa-action-divider { border: none; border-top: 1px solid var(--border-subtle); margin: 0; }
    .wa-action-icon {
      width: 40px; height: 40px; border-radius: var(--radius-sm);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .wa-action-icon i , .wa-action-icon svg{ width: 18px; height: 18px; }
    .wa-icon-blue   { background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info-text); }
    .wa-icon-yellow { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning-text); }
    .wa-icon-red    { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger-text); }
    .wa-action-body { flex: 1; min-width: 0; }
    .wa-action-name { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-strong); margin-bottom: 3px; }
    .wa-action-desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-base); }

    /* === معلومات الرقم المتصل === */
    .wa-info-box {
      background: color-mix(in srgb, var(--success) 8%, transparent);
      border: 1px solid color-mix(in srgb, var(--success) 25%, transparent);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
      margin: 14px 0;
      display: flex; flex-direction: column; gap: 8px;
    }
    .wa-info-row {
      display: flex; align-items: center; gap: 10px;
      font-size: var(--fs-sm); color: var(--text-secondary);
    }
    .wa-info-row i , .wa-info-row svg{ width: var(--icon-sm); height: var(--icon-sm); color: var(--success-text); flex-shrink: 0; }
    .wa-info-row span { min-width: 70px; }
    .wa-info-row strong { color: var(--text-strong); font-weight: var(--fw-semibold); }
    .wa-status-card {
      text-align: center; padding: 40px 20px;
      background: linear-gradient(145deg, var(--surface-2), color-mix(in srgb, var(--accent) 5%, transparent));
      border: 1px solid var(--glass-border); border-radius: var(--radius);
      position: relative; overflow: hidden;
    }
    .wa-status-card::before {
      content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
      background: radial-gradient(circle, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 60%);
      animation: rotateBg 10s linear infinite; z-index: 0; pointer-events: none;
    }
    @keyframes rotateBg { to { transform: rotate(360deg); } }
    .wa-status-content { position: relative; z-index: 1; }
    
    .qr-wrapper {
      background: #fff; /* لازم أبيض في الثيمين — الماسح محتاج هامش فاتح */ padding: var(--sp-5); border-radius: var(--radius); display: inline-block;
      /* ظلٌّ يرفع الإطار، لا هالةٌ بنفسجيةٌ بثلاثين بكسلاً */
      box-shadow: var(--shadow-lg);
      margin: 20px 0; border: 4px solid var(--accent);
      animation: floatQR 3s ease-in-out infinite;
    }
    @keyframes floatQR { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    
    .pulse-ring {
      width: 100px; height: 100px; border-radius: 50%;
      background: color-mix(in srgb, var(--accent) 10%, transparent); margin: 30px auto;
      border: 2px solid var(--accent);
      animation: pulseRing 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
      display: flex; align-items: center; justify-content: center; color: var(--accent);
    }
    .pulse-ring i , .pulse-ring svg{ width: var(--icon-xl); height: var(--icon-xl); }
    @keyframes pulseRing { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); } 70% { transform: scale(1); box-shadow: 0 0 0 20px color-mix(in srgb, var(--accent) 0%, transparent); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } }

    .wa-action-card {
      padding: var(--sp-5); background: var(--surface-2);
      border: 1px solid var(--glass-border); border-radius: var(--radius);
      display: flex; flex-direction: column; justify-content: space-between;
    }
    .wa-action-header h3 { color: var(--text-strong); font-size: var(--fs-lg); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;}
    .wa-action-header p { color: var(--text-muted); font-size: var(--fs-base); line-height: var(--lh-base); }

    .wa-action-btn { width: 100%; padding: 14px; font-size: var(--fs-md); justify-content: center; margin-top: 16px; border-radius: var(--radius-sm); }

    /* Mobile Hamburger Menu */
    .hamburger { display: none; position: fixed; top: 20px; right: 20px; z-index: 200; background: var(--bg-secondary); border: 1px solid var(--glass-border); padding: 10px; border-radius: var(--radius-sm); color: var(--text-primary); cursor: pointer; }

    /* === Drawer === */
    .drawer-overlay {
      display: none; position: fixed; inset: 0;
      background: var(--surface-overlay);
      z-index: var(--z-modal, 200); align-items: stretch; justify-content: flex-end;
    }
    .drawer-overlay.active { display: flex; }
    .drawer {
      width: min(520px, 95vw);
      background: var(--surface-1);
      border-right: 1px solid var(--border-default);
      display: flex; flex-direction: column;
      animation: drawerIn 0.28s ease;
      overflow: hidden;
    }
    /* ── يدخل من الحافّة التي يرسو عليها ──
       `justify-content: flex-end` في صفٍّ مرنٍ عربيٍّ يرسي اللوحَ يساراً،
       و`translateX` لا تنقلب مع الاتجاه: فكان يبدأ من وسط الشاشة وينزلق
       يساراً، فيُقرأ خللاً في الرسم لا لوحاً يصل. */
    @keyframes drawerIn { from { transform: translateX(-100%); opacity: 0.8; } to { transform: translateX(0); opacity: 1; } }
    .drawer-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 20px 24px; border-bottom: 1px solid var(--border-subtle);
      flex-shrink: 0;
    }
    /* عنوانُ اللوح نصٌّ لا رابط — كنظيره في النافذة المنبثقة */
    .drawer-header h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); display: flex; align-items: center; gap: 8px; }
    .drawer-body { flex: 1; overflow-y: auto; padding: 24px; }
    .drawer-footer {
      padding: 16px 24px; border-top: 1px solid var(--border-subtle);
      display: flex; gap: 10px; justify-content: flex-end; flex-shrink: 0;
    }

    /* ── Topbar ──────────────────────────────────────── */
    .topbar {
      position: sticky; top: 0; z-index: var(--z-topbar, 150);
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 28px; margin: -32px -32px 24px;
      background: color-mix(in srgb, var(--surface-1) 85%, transparent);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border-subtle);
    }
    /* margin: 0 لأنّه <h2> — هامشُ المتصفّح الافتراضيّ يزيح الشريط */
    .topbar-title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-primary); }
    .topbar-left { display: flex; align-items: center; gap: 12px; }
    .topbar-status { display: flex; align-items: center; gap: 6px; }
    .topbar-refresh { padding: 6px 10px; }

    /* ── Sidebar Nav Sections ────────────────────────── */
    /* عناوينُ الأقسام عربية: `uppercase` لا تفعل بها شيئاً، وتباعدُ
       الحروف يفكّ وصلَها فتُقرأ ممطوطة — وهو ما عولج في حقل الرمز
       أسفلَ الملفّ. والخفوتُ يبقى بالوزن واللون والمقاس. */
    .nav-section-title {
      font-size: var(--fs-xs); font-weight: var(--fw-bold);
      color: var(--text-muted);
      padding: 14px 18px 4px; margin-top: 4px;
    }

    /* ── KPI Grid & Cards ────────────────────────────── */
    .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
    .kpi-card {
      background: var(--surface-2);
      border: 1px solid var(--border-subtle); border-radius: var(--radius);
      padding: var(--sp-5); position: relative; overflow: hidden;
      transition: all var(--transition-base);
    }
    /* الارتفاعُ والعلامةُ لمن يُضغَط وحدَه.
       كانتا على `.kpi-card` كلِّها: وبطاقاتُ الأرقام في الرئيسية ثلاثٌ
       منها تُفتَح (`.kpi-clickable`) وبقيّتُها لا. فكانت كلُّها ترتفع
       وتلمع تحت المؤشّر ثمّ لا يقع شيءٌ عند الضغط — وعدٌ بتفاعلٍ لا
       وجودَ له، وهو أسوأُ من بطاقةٍ ساكنةٍ تبدو ساكنة.
       والعلامةُ لونٌ مصمت: تدرّجٌ فوق رقمٍ زينةٌ لا تقول شيئاً. */
    .kpi-clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .kpi-clickable::after { content:''; position:absolute; inset-block-start:0; inset-inline:0; height:2px; background:var(--accent); opacity:0; transition: opacity var(--transition-base); }
    .kpi-clickable:hover::after { opacity: 1; }
    .kpi-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .kpi-label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: var(--fw-semibold); }
    .kpi-value { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); color: var(--text-strong); margin-bottom: 6px; line-height: var(--lh-tight); }
    .kpi-footer { display: flex; align-items: center; gap: 8px; }
    .kpi-sub { font-size: var(--fs-sm); color: var(--text-muted); }
    .kpi-trend { font-size: var(--fs-sm); font-weight: var(--fw-bold); padding: 2px 7px; border-radius: var(--radius-full); }
    .kpi-trend.up { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success-text); }
    .kpi-trend.down { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger-text); }
    .kpi-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); opacity: 0.12; color: var(--accent-hover); }
    .kpi-icon i , .kpi-icon svg{ width: 44px; height: 44px; }
    /* ── الأيقونةُ داخلَ الترويسة أيقونةُ حالةٍ لا علامةٌ مائية ──
       الصنفُ نفسُه يُستعمَل استعمالين: في الرئيسية زخرفةٌ باهتةٌ خلف
       الرقم، وفي الحضور والدعم أيقونةٌ يُمرَّر إليها لونُ الحالة —
       أخضرُ لمن على رأس العمل وأحمرُ لمن لم يبصم. وبالوضع المطلق
       والشفافيةِ 12% كان اللونُ المقصودُ يُضرَب حتّى يختفي، وتقع
       الأيقونةُ بأربعةٍ وأربعين بكسلاً خلفَ الرقم.
       والموضعُ في الوسم يفرّق بينهما، فلا حاجةَ لصنفٍ جديد. */
    .kpi-header .kpi-icon {
      position: static; transform: none; opacity: 1;
      flex: none; width: 32px; height: 32px;
      display: grid; place-items: center;
      border-radius: var(--radius-sm);
      background: color-mix(in srgb, currentColor 14%, transparent);
    }
    .kpi-header .kpi-icon i , .kpi-header .kpi-icon svg{ width: var(--icon-md); height: var(--icon-md); }

    /* ── Period toggle ───────────────────────────────── */
    .kpi-period-toggle { display: flex; gap: 2px; background: var(--surface-inset); padding: 2px; border-radius: var(--radius-xs); }
    /* تسعةَ عشرَ بكسلاً كان ارتفاعُها: لا يُصيبها إصبعٌ ولا يكاد يُقرأ
       نصُّها. والحدُّ هنا لكلّ مؤشّرٍ لا للّمس وحده — فأرةٌ تُخطئ هدفاً
       بهذا الصغر أيضاً. ويزيد إلى 44px على شاشات اللمس أسفلَ الملفّ. */
    .period-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 4px 11px; border: none; border-radius: var(--radius-xs); font-size: var(--fs-sm); font-family: inherit; cursor: pointer; background: transparent; color: var(--text-muted); transition: all 0.15s; }
    .period-btn.active { background: var(--accent); color: var(--text-on-accent); }
    .period-btn:hover:not(.active) { color: var(--text-primary); }

    /* ── Home Grid ───────────────────────────────────── */
    .home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
    .home-section { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: var(--sp-5); }
    .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
    .section-header h4 { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text-strong); display: flex; align-items: center; gap: 6px; }
    .section-header h4 i , .section-header h4 svg{ width: 16px; height: 16px; color: var(--accent); }

    /* ── التنبيهات ────────────────────────────────────
       لوحٌ واحدٌ بطبقتين: ما يوقف البيع فوق، وما يُنتبَه إليه تحته.
       كانت خمسةَ أشرطةٍ حمراءَ متطابقةِ الوزن تُقرأ حائطاً لا قائمة. */
    .alerts-box {
      margin-bottom: 20px;
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius);
      background: var(--surface-2);
      overflow: hidden;
    }
    .alerts-box.has-urgent { border-color: color-mix(in srgb, var(--danger) 40%, var(--border-subtle)); }

    .alerts-head {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 14px;
      background: var(--danger-soft);
      border-bottom: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
      font-size: var(--fs-sm); color: var(--danger-text);
    }
    .alerts-head i , .alerts-head svg{ width: 15px; height: 15px; flex-shrink: 0; }
    .alerts-head b { font-weight: var(--fw-bold); }
    .alerts-count {
      margin-inline-start: auto;
      min-width: 22px; padding: 1px 7px;
      border-radius: var(--radius-full);
      background: color-mix(in srgb, var(--danger) 20%, transparent);
      font-size: var(--fs-xs); font-weight: var(--fw-bold);
      text-align: center; font-variant-numeric: tabular-nums;
    }

    /* اللونُ صريحٌ لا موروث: النصُّ الموروثُ يتبع `body`، وعليها انتقالٌ
       على اللون — فيُقرأ أثناءه لونُ الثيم السابق. */
    .alert-item {
      display: flex; align-items: center; gap: 10px;
      padding: 11px 14px;
      font-size: var(--fs-sm); font-weight: var(--fw-medium);
      color: var(--text-primary);
      cursor: pointer;
      transition: background-color .14s ease;
    }
    .alert-item + .alert-item { border-top: 1px solid var(--border-hairline); }
    .alert-item:hover { background: var(--surface-3); }
    .alert-item i , .alert-item svg{ width: 16px; height: 16px; flex-shrink: 0; }
    .alert-text { flex: 1; min-width: 0; }
    /* السهم يقول إنّ السطر يُنقَر، ولا يُزاحم النصّ */
    .alert-go { opacity: .45; margin-inline-start: auto; }

    /* ── الطبقة الثانية: يُنتبَه إليه لا يُوقِف ── */
    .alerts-minor { border-top: 1px solid var(--border-subtle); }
    .alerts-minor .alert-item {
      padding: 9px 14px;
      font-size: var(--fs-xs);
      font-weight: var(--fw-medium);
      color: var(--text-secondary);
      background: transparent;
    }
    .alerts-minor .alert-item i , .alerts-minor .alert-item svg{ width: 14px; height: 14px; }
    /* الحدُّ والسطحُ من لون الحالة، والنصُّ من لون نصّها: الأوّل يُرى
       والثاني يُقرأ، وحدُّهما مختلف. وكان النصّ يأخذ لون السطح فيصير
       3.19:1 في الثيم الفاتح — يُرى ولا يُقرأ.
       ولا لونَ مكتوباً مباشرةً: rgba(245,158,11,…) كانت ثابتةً هنا،
       فلا تعرف أيَّ ثيمٍ هي فيه. */
    /* داخل اللوح لا يحمل كلُّ سطرٍ سطحَه وحدَّه: اللوحُ يحملهما مرّةً.
       واللونُ يبقى في الأيقونة والنصّ — وهو ما يميّز السطرَ فعلاً. */
    .alert-item i:first-child , .alert-item svg:first-child{ color: var(--text-muted); }
    .alert-error { color: var(--text-primary); }
    .alert-error i:first-child , .alert-error svg:first-child{ color: var(--danger-text); }
    .alert-warn  i:first-child , .alert-warn  svg:first-child{ color: var(--warning-text); }
    .alert-info  i:first-child , .alert-info  svg:first-child{ color: var(--accent); }

    /* ── Chart ───────────────────────────────────────── */
    .chart-wrap { padding: 4px 0 0; position: relative; }

    /* سقفُ المقياس: عمودٌ بلا رقمٍ يُرى طولاً لا مبلغاً.
       ويُوضَع على اليسار حيث تُرسَم الأيامُ الأقدم — أخلى مواضع الرسم
       عادةً. وكان على الحافّة نفسِها التي يقف عليها عمودُ اليوم، فيقع
       الرقمُ فوقه فلا يُقرأ واحدٌ منهما. */
    .chart-max {
      position: absolute; top: -2px; left: 0;
      font-size: var(--fs-xs); color: var(--text-muted);
      font-variant-numeric: tabular-nums;
      pointer-events: none;
      background: var(--surface-2);
      padding-inline-end: 6px;
    }
    .chart-total {
      margin-inline-start: auto;
      font-size: var(--fs-sm); font-weight: var(--fw-bold);
      color: var(--text-strong);
      font-variant-numeric: tabular-nums;
    }

    /* ولا محورَ بلا بيانات: أربعةَ عشرَ خطاً رمادياً تُقرأ عطلاً.
       وشكلُها من شكل «لا شيءَ هنا بعد» أعلاه — لا مقاسٌ ثالث. */
    /**
     * الرسمُ يقرأ من اليسار كما يُرسَم.
     *
     * الأعمدةُ داخل SVG تُرسَم بإحداثيّاتها: الأقدمُ عند x=0 فيقع يساراً،
     * ولا يقلبه اتجاهُ الصفحة لأنّ نظامَ إحداثيّات SVG لا يُعكَس.
     * والتسمياتُ صفٌّ مرن، والصفُّ المرنُ يُعكَس في العربية — فصار
     * الأقدمُ يميناً.
     *
     * فالعمودُ في أقصى اليمين هو اليوم، وتحته مكتوبٌ تاريخُ ما قبل
     * أربعةَ عشرَ يوماً. قيس ذلك: بيعةٌ اليوم 8/24، وعمودُها في اليمين،
     * وتسميتُه 8/11. الرسمُ يكذب على أيّ يومٍ باع المتجر.
     *
     * والعلاجُ في ترتيب التسميات لا في اتجاه الحاوية: فرضُ LTR عليها
     * يُخرِج التاريخَ من سياقه اللغويّ فيُعاد ترتيبُ محارفه — «11/8»
     * تُرسَم «118/». جُرِّب فوقع.
     *
     * فتُعكَس القائمةُ في المصدر: أوّلُها الأحدث، والصفُّ المرنُ العربيُّ
     * يضعه يميناً حيث يقف عمودُه.
     */
    .chart-labels { display: flex; justify-content: space-between; margin-top: 4px; }
    .chart-labels span { font-size: var(--fs-xs); color: var(--text-muted); }

    /* ── Status Distribution ─────────────────────────── */
    .status-dist { margin-top: 16px; }
    .dist-bar { display: flex; height: 8px; border-radius: var(--radius-full); overflow: hidden; background: var(--border-hairline); margin: 6px 0; }
    .dist-seg { transition: width 0.4s ease; height: 100%; }
    .seg-green { background: var(--green); } .seg-blue { background: var(--blue); }
    .seg-yellow { background: var(--yellow); } .seg-red { background: var(--red); }
    .dist-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
    .dist-legend span { font-size: var(--fs-xs); color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
    .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
    .dot-green { background: var(--green); } .dot-blue { background: var(--blue); }
    .dot-yellow { background: var(--yellow); } .dot-red { background: var(--red); }

    /* ── Segmented Filters ───────────────────────────── */
    .seg-filters { display: flex; gap: 2px; background: var(--surface-inset); padding: 3px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); flex-shrink: 0; }
    .seg-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 14px; border: none; border-radius: var(--radius-xs); font-size: var(--fs-sm); font-family: inherit; font-weight: var(--fw-medium); cursor: pointer; background: transparent; color: var(--text-muted); transition: all 0.15s; }
    .seg-btn.active { background: var(--accent); color: var(--text-on-accent); box-shadow: 0 1px 4px color-mix(in srgb, var(--accent) 30%, transparent); }
    .seg-btn:hover:not(.active) { background: var(--border-hairline); color: var(--text-primary); }

    /* ── Conversations Toolbar ───────────────────────── */
    .conv-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
    .conv-search { max-width: 260px; flex-shrink: 0; }

    /* ── Sales Toolbar ───────────────────────────────── */
    .sales-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
    .sales-toolbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .sales-stats-bar { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
    .sales-stat-pill { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 10px 18px; }
    .sales-stat-pill .label { font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-semibold); }
    .sales-stat-pill .val  { font-size: var(--fs-lg); font-weight: var(--fw-extrabold); color: var(--text-strong); margin-top: 2px; }

    /* ── Product Cards ───────────────────────────────── */
    .product-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
    .product-card {
      background: var(--surface-2); border: 1px solid var(--border-subtle);
      border-radius: var(--radius); padding: var(--sp-5);
      display: flex; flex-direction: column; gap: 12px;
      transition: all var(--transition-base);
    }
    .product-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
    .product-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
    /* اسمُ المنتج عنوانٌ لا رابط: البنفسجيُّ للتفاعل وحدَه، والوزنُ
       يكفيه تمييزاً. وصفحةُ المنتجات كانت كلُّ اسمٍ فيها بنفسجياً. */
    .product-card-name { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-strong); line-height: var(--lh-tight); }
    .product-card-desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-base); }
    .product-card-prices { display: flex; flex-direction: column; gap: 4px; }
    .product-price-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; background: var(--surface-inset); border-radius: var(--radius-xs); font-size: var(--fs-sm); }
    .product-price-row .price-label { color: var(--text-secondary); }
    .product-price-row .price-val   { color: var(--success-text); font-weight: var(--fw-bold); }
    .product-card-actions { display: flex; gap: 8px; margin-top: auto; }

    /* ── Settings Tabs ───────────────────────────────── */

    /* ── Conversation Timeline ───────────────────────── */
    .conv-timeline { display: flex; flex-direction: column; gap: 2px; }
    .conv-action-bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; background: var(--surface-inset); border-radius: var(--radius-sm); margin-bottom: 12px; }
    .conv-actions-extra { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }

    /* ── Load More ───────────────────────────────────── */
    .load-more-wrap { text-align: center; padding: 16px 0 4px; }

    /* ── chat-list mini variant ──────────────────────── */
    .chat-list.mini .chat-item { padding: 10px 12px; }
    .chat-list.mini .chat-avatar { width: 34px; height: 34px; }

    @media (max-width: 768px) {
      .hamburger { display: block; }
      /* ── القائمةُ المغلقةُ مغلقةٌ للكيبورد أيضاً ──
         `transform` تُخرِج الشريطَ من الشاشة ولا تُخرِجه من ترتيب
         التنقّل: من يضغط Tab على الجوّال يمرّ بتسعةَ عشرَ بنداً لا
         يراها، والصفحةُ تقفز جانباً مع كلّ واحدٍ منها.
         و`visibility` تُنتَقَل معها كي يبقى الانزلاقُ مرئياً أثناءه. */
      .sidebar { transform: translateX(100%); visibility: hidden; transition: transform 0.3s, visibility 0.3s; }
      .sidebar.open { transform: translateX(0); visibility: visible; }
      /* زر القائمة ثابت عند right:20px بطبقة أعلى من الشريط الجانبي،
         فكان يركب على الشعار عند فتح القائمة. نُخلي له مساحة. */
      .sidebar-logo { padding-right: 68px; }
      .main { margin-right: 0; padding: 60px 16px 16px; }
      .topbar { margin: -60px -16px 16px; padding: 12px 16px; }
      .form-row { grid-template-columns: 1fr; }
      .kpi-grid { grid-template-columns: 1fr 1fr; }
      .home-grid { grid-template-columns: 1fr; }
      .wa-full-grid { grid-template-columns: 1fr; }
      .wa-train-card { grid-column: 1; }
      .drawer { width: 100%; }
      .sales-toolbar { flex-direction: column; align-items: flex-start; }
      .conv-toolbar { flex-direction: column; align-items: flex-start; }
      .conv-search { max-width: 100%; width: 100%; }
    }
    @media (max-width: 480px) {
      .kpi-grid { grid-template-columns: 1fr; }
      .topbar-title { font-size: var(--fs-md); }
    }
    /* =================================================================
       أهداف اللمس
       =================================================================
       قياس فعلي على 375px أظهر أزرار الفترة بارتفاع 19px وأزرار الشريط
       العلوي 38px ومفتاح التبديل 24px — كلها تحت حدّ الـ 44px.

       نستخدم (pointer: coarse) لا (max-width): شاشة لمس كبيرة تحتاج
       الأهداف الكبيرة بنفس القدر، وفأرة على شاشة صغيرة لا تحتاجها.
       بهذا تبقى الكثافة العالية على الديسكتوب كما هي. */
    @media (pointer: coarse) {
      .btn-sm,
      .topbar-refresh,
      .theme-toggle {
        min-height: 44px;
        min-width: 44px;
      }

      .period-btn,
      .seg-btn {
        min-height: 44px;
        min-width: 44px;
        padding-block: 10px;
      }

      /* المفتاح: نُكبِّر عنصر الليبل نفسه إلى 44px ونُبقي الشريط المرئي
         عند 24px موسّطاً رأسياً. جرّبنا أولاً عنصراً زائفاً بـ inset سالب،
         لكن .slider مطلق الموضع فوقه فلم تتّسع منطقة اللمس فعلياً
         (قياس elementFromPoint أظهرها 24px كما هي). */
      .switch {
        height: 44px;
        display: inline-flex;
        align-items: center;
      }
      .slider {
        top: 50%;
        bottom: auto;
        height: 24px;
        transform: translateY(-50%);
      }
    }


    /* المفتاح قبل معرفة حالته الحقيقية: مربّع الاختيار لا يملك حالة ثالثة،
       فيُرسم "مقفولاً" ثم يقفز عند وصول الرد. نُخفّته حتى تُعرف الحقيقة
       بدل أن يعرض حالة قد تكون كذباً. */
    .switch.switch-loading { opacity: .45; pointer-events: none; }
    .switch.switch-loading .slider { animation: switchPulse 1.1s ease-in-out infinite; }
    @keyframes switchPulse { 0%,100% { opacity: .6 } 50% { opacity: 1 } }

    /* ── الرئيسية: عناصر أُضيفت مع لوحة العمليات ─────────────── */

    /* البطاقة التي تنقل إلى صفحتها: المؤشّر وحده لا يكفي دليلاً */
    .kpi-clickable { cursor: pointer; }
    .kpi-clickable:hover { border-color: var(--border-strong); }
    .kpi-clickable:active { transform: translateY(0); }

    /* "3 / 8" — الجزء الثاني مرجع لا رقم، فيأخذ وزناً أقل */
    .kpi-of { font-size: var(--fs-lg); color: var(--text-muted); font-weight: var(--fw-medium); }

    .alert-item { cursor: pointer; transition: filter var(--transition-fast); }
    .alert-item:hover { filter: brightness(1.12); }
    .alert-go { margin-inline-start: auto; width: 14px; height: 14px; opacity: .6; }

    .dist-title { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 4px; font-weight: var(--fw-semibold); }

    .sale-product { font-size: var(--fs-sm); color: var(--text-strong); font-weight: var(--fw-semibold); }

    /* حقائق عملية البيع في اللوح الجانبي — كانت أنماطاً مضمّنة بخلفية
       سوداء ثابتة تظهر كثقب في الوضع الفاتح */
    .sale-fact {
      background: var(--surface-inset);
      border: 1px solid var(--border-hairline);
      padding: 12px;
      border-radius: var(--radius-sm);
    }
    .sale-fact-value { color: var(--text-strong); font-weight: var(--fw-semibold); }

    /* المسؤول عن المحادثة — سطر ثالث في البطاقة، أخفت من المعاينة */
    .conv-owner {
      display: flex; align-items: center; gap: 4px;
      margin-top: 3px;
      font-size: var(--fs-xs);
      color: var(--text-secondary);
    }
    .conv-owner i , .conv-owner svg{ width: 12px; height: 12px; }

    /* اسمُ المسؤول بيانٌ لا رابط، فيأخذ درجةَ النصّ الثانويّ */
    .sale-owner { font-size: var(--fs-sm); color: var(--text-secondary); font-weight: var(--fw-semibold); }

    /* رابط التخطّي: مخفيّ حتى يصله التركيز، ثم يظهر فوق كل شيء */
    .skip-link {
      position: fixed;
      inset-inline-start: 50%;
      top: -100px;
      transform: translateX(50%);
      z-index: 1000;
      padding: 12px 24px;
      /* الأبيضُ على violet-400 يقيس 3.41:1، ودرجةُ الملء 4.94:1.
         والرابطُ لا يُرى إلا لمن يتنقّل بالكيبورد — وفيهم من يحتاجه. */
      background: var(--accent-solid);
      color: var(--text-on-accent);
      border-radius: 0 0 var(--radius-sm) var(--radius-sm);
      font-weight: var(--fw-bold);
      text-decoration: none;
      transition: top var(--transition-base);
    }
    .skip-link:focus { top: 0; }

    /* عناوين الأقسام: h3 وh4 كلاهما مقبول، والتنسيق واحد */
    .section-header h3, .section-header h4 {
      font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text-strong);
      display: flex; align-items: center; gap: 6px;
    }
    .section-header h3 i, .section-header h3 svg, .section-header h4 i , .section-header h4 svg{
      width: 16px; height: 16px; color: var(--accent);
    }

    /* =================================================================
       انكماش عناصر الشبكة
       =================================================================
       عنصر الشبكة (والمرن) قيمته min-width: auto افتراضياً، أي أنّه يرفض
       الانكماش تحت عرض محتواه الأدنى. فيتمدّد المسار ويجرّ الصفحة معه،
       وتظهر شريحة تمرير أفقي على الجوال لا يفسّرها أي عنصر عريض ظاهر.

       قياس على 390px: قسم الرئيسية خرج بعرض 420 داخل حاوية 358، فصار
       عرض المستند 436 بدل 390. */
    .home-grid > *,
    .kpi-grid > *,
    .team-grid > *,
    .product-cards-grid > *,
    .category-grid > *,
    .att-row > *,
    .ticket-row > *,
    .store-bar > * {
      min-width: 0;
    }

    /* النصوص الطويلة داخلها تُقصّ لا تدفع */
    .chat-preview, .chat-name,
    .ticket-subject, .att-name, .person-id h4 {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* شرح خطوات الأرشيف */
    .wa-steps-note {
      background: var(--surface-inset);
      border: 1px solid var(--glass-border);
      padding: 14px;
      border-radius: var(--radius-sm);
      margin-top: 16px;
    }
    .wa-steps-note ul {
      color: var(--text-secondary);
      font-size: var(--fs-sm);
      line-height: var(--lh-relaxed);
      margin-right: 18px;
    }

    /* عدد المواقف في الذاكرة — يُظهر أنّ الخطوة نجحت */
    .memory-stats {
      display: flex; align-items: center; gap: 8px;
      margin-top: 14px; padding: 12px 14px;
      background: var(--accent-soft);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      font-size: var(--fs-sm);
      color: var(--text-secondary);
    }
    .memory-stats i , .memory-stats svg{ width: 16px; height: 16px; color: var(--accent); }
    .memory-stats strong { color: var(--text-strong); font-variant-numeric: tabular-nums; }

/* ═══ هويّة المُنفِّذ ═══
   الشارة تجلس في الترويسة بجوار حالة الاتصال: من يعمل الآن معلومة من
   طبقة "من وأين" نفسها. كل ألوانها من الرموز فتصحّ في الوضعين. */
.actor-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px;
  background: var(--surface-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  max-width: 190px;
}
.actor-chip span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.actor-chip i , .actor-chip svg{ width: var(--icon-sm); height: var(--icon-sm); flex: none; }
.actor-chip:hover {
  background: var(--accent-soft);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.actor-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* معرَّف: الحدّ يحمل اللون، والخلفية تبقى هادئة كي لا تنافس المحتوى */
.actor-chip.actor-known {
  color: var(--text-primary);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.actor-chip.actor-known i , .actor-chip.actor-known svg{ color: var(--accent); }

.actor-modal {
  position: fixed; inset: 0; z-index: 220;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  background: var(--surface-overlay);
  backdrop-filter: blur(4px);
}
.actor-modal.open { display: flex; }

.actor-card {
  width: 100%; max-width: 380px;
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
}
.actor-card h2 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px;
  font-size: var(--fs-md); color: var(--text-strong);
}
.actor-card h2 i , .actor-card h2 svg{ width: var(--icon-md); height: var(--icon-md); color: var(--accent); }
.actor-card p {
  margin: 0 0 16px;
  font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--text-secondary);
}
/* الرمز أرقام: محاذاة جدولية وتباعد يجعل الخطأ مرئياً قبل الإرسال */
.actor-card .form-input {
  text-align: center;
  letter-spacing: 6px;
  font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums;
}
/* التباعد للأرقام لا للنائب: العربية متّصلة الحروف، وتباعدُها يمطّها */
.actor-card .form-input:placeholder-shown {
  letter-spacing: normal;
  font-size: var(--fs-md);
}
.actor-error {
  min-height: 18px;
  margin-top: 8px;
  font-size: var(--fs-sm);
  /* النصُّ يأخذ درجةَ نصّ الخطر لا درجةَ سطحه: الفاتحُ يقيس السادسةَ
     3.19:1 على أبيض، والسابعةُ تعبر الحدّ. */
  color: var(--danger-text);
}
.actor-actions {
  display: flex; gap: 8px; justify-content: flex-start;
  margin-top: 16px;
}
.actor-actions .btn { flex: 1; }

@media (max-width: 640px) {
  /* على الجوال تكفي الأيقونة: الترويسة ضيّقة والاسم يزاحم العنوان */
  .actor-chip { max-width: none; padding: 0 9px; }
  .actor-chip span { display: none; }
}

/* ── سبب الصمت المقصود ──
   من يفتح اللوحة يرى مفتاحاً مطفأً ولا يعرف أنّه لا يُرفع من هنا،
   فيضغطه ويظنّه اشتغل. فتبقى إشارةٌ ما بقي القفل — سطرٌ واحد لا فقرة،
   وتفصيلُه في تلميحةٍ وعند اللمس. الفقرةُ كانت تُزيح القائمة كلّها. */
.silence-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  width: calc(100% - 32px);
  margin: 0 16px 10px;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  /* السطرُ الذي يقول إنّ الردّ الآليّ مقفولٌ والعملاءُ بلا جواب كان
     يُكتَب بدرجةِ السطح: 2.9:1 في الثيم الفاتح على سطحه الكريميّ. */
  color: var(--warning-text);
  font-size: var(--fs-xs);
  font-family: inherit;
  text-align: start;
  cursor: help;
}
.silence-chip::before {
  content: '🔇';
  font-size: var(--fs-xs);
  line-height: 1;
}

/* المفتاح المقفول يبدو مقفولاً: مطفأٌ بلا سبب ظاهر يُضغط مرّةً بعد مرّة */
.switch.switch-locked { opacity: .5; cursor: not-allowed; }
.switch.switch-locked .slider { cursor: not-allowed; }