/* ============================================================
     خطوط لوحة النظام — مزيج: Tajawal للعناوين والأرقام + Cairo للنصوص.
     مُستضافة محلياً (بلا اعتماد شبكي). "JF Flat" يبقى أول القائمة، فإن
     أُضيف ملفّه المرخّص (assets/fonts/JFFlat.woff2 مع @font-face مطابق)
     يُفعَّل فوراً محلّ Tajawal دون أي تغيير آخر.
     ملاحظة: لا تُطبَّق letter-spacing على العربية — تكسر اتصال الحروف.
     ============================================================ */
  @font-face{font-family:"Cairo";src:url("/assets/fonts/Cairo.woff2") format("woff2");
    font-weight:200 1000;font-style:normal;font-display:swap}

  @font-face{font-family:"Tajawal";src:url("/assets/fonts/Tajawal-Regular.woff2") format("woff2");
    font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:"Tajawal";src:url("/assets/fonts/Tajawal-Medium.woff2") format("woff2");
    font-weight:500;font-style:normal;font-display:swap}
  @font-face{font-family:"Tajawal";src:url("/assets/fonts/Tajawal-Bold.woff2") format("woff2");
    font-weight:700;font-style:normal;font-display:swap}
  @font-face{font-family:"Tajawal";src:url("/assets/fonts/Tajawal-ExtraBold.woff2") format("woff2");
    font-weight:800;font-style:normal;font-display:swap}
  @font-face{font-family:"Tajawal";src:url("/assets/fonts/Tajawal-Black.woff2") format("woff2");
    font-weight:900;font-style:normal;font-display:swap}

  :root{
    --bg:#f6f2fc;
    --surface:#ffffff;
    --surface-2:#faf7fe;
    --border:#e7defa;
    --border-soft:#f0eafa;
    --text:#2b1a42;
    --muted:#6b5a86;
    --faint:#9686b0;
    --primary:#7c4dbd;
    --primary-light:#a97fd6;
    --accent:#8e5bc4;
    --grad:linear-gradient(135deg,#8e5bc4,#b98fd9);
    --sidebar-bg:#221333;
    --sidebar-bg-2:#2c1a44;
    --sidebar-text:#c9b7e3;
    --sidebar-text-dim:#9078b3;
    --sidebar-active:#3a2359;
    /* شريط التنقّل الجانبي نفسه (nav) — منفصلة عمداً عن --sidebar-* أعلاه،
       التي تبقى بنفسجية داكنة ثابتة وتُستخدَم كلون تمييز في بطاقات/تذييلات
       أخرى كثيرة عبر اللوحة (تلميحات المخططات، بطاقات KPI الداكنة، أبطال
       الموارد البشرية...) بصرف النظر عن الوضع الحالي. شريط التنقّل وحده هو
       ما يتحوّل أبيض في الوضع الفاتح؛ تلك البطاقات تبقى كما هي دائماً. */
    --nav-bg:#ffffff;
    --nav-bg-2:#fbf8fe;
    --nav-text:#4a3868;
    --nav-text-dim:#9686b0;
    --nav-icon:#8a5cc7;
    --nav-icon-opacity:1;
    /* أيقونات مُلوَّنة لكل قسم رئيسي بالشريط الجانبي — لون مميّز واحد لكل
       قسم بدل التوحيد السابق (رمادي ثم بنفسجي واحد)، تُطبَّق فقط على
       العناصر الرئيسية الظاهرة دائماً (لا العناصر الفرعية المطوية، فهي
       نصّية بلا أيقونات أصلاً). الرئيسية وحدها تبقى --nav-icon الافتراضي
       (لون العلامة المحايد) كونها نقطة الانطلاق لا قسماً موضوعياً مميّزاً. */
    --nav-ic-live:#e0527a;
    --nav-ic-cap:#d9822b;
    --nav-ic-cust:#c9628c;
    --nav-ic-reports:#3d7fd1;
    --nav-ic-policy:#1c7571;
    --nav-ic-cities:#2f8fc4;
    --nav-ic-trips:#229464;
    --nav-ic-notif:#c08a1f;
    --nav-ic-hr:#c04b85;
    --nav-ic-mkt:#d1652f;
    --nav-ic-crm:#4a5fc7;
    --nav-ic-inv:#8a6b45;
    --nav-ic-fin:#1f8c6e;
    --nav-ic-support:#2596a8;
    --nav-ic-gov:#4a4a8f;
    --nav-hover-bg:#f2e9fb;
    --nav-hover-text:#7c4dbd;
    --nav-active-bg:var(--grad);
    --nav-active-text:#ffffff;
    --nav-sep:rgba(124,77,189,.18);
    --nav-border:var(--border);
    --good:#1f9d75; --good-bg:#e5f7f0; --good-line:#bfe9d8;
    --warn:#b8790a; --warn-bg:#fdf1dc; --warn-line:#f3d99a;
    --crit:#c23a63; --crit-bg:#fbe4ec; --crit-line:#f2bdd0;
    /* عناقيد فئات مركز السياسات — 3 ألوان دلالية ثابتة (بنفسجي العلامة/
       ذهبي تيمة التاج/تيل)، منفصلة عمداً عن ألوان الحالة good/warn/crit
       أعلاه كي لا يختلط «تصنيف» بـ«حالة». */
    --cl-ops:#7c4dbd;      --cl-ops-bg:#f1e9fb;      --cl-ops-line:#d9c2f0;
    --cl-trust:#9c6f18;    --cl-trust-bg:#faf1de;    --cl-trust-line:#ecd394;
    --cl-gov:#1c7571;      --cl-gov-bg:#e2f3f2;      --cl-gov-line:#b8e0dd;
    /* عناقيد مركز التقارير والإحصائيات — معرِّفات مختلفة عمداً عن أعلاه
       تفادياً لتصادم أي اسم عنقود مستقبلي بمركز السياسات. */
    --cl-ovr:#6a4fc4;      --cl-ovr-bg:#efe9fb;      --cl-ovr-line:#d7c5f2;
    --cl-cap2:#c9741f;     --cl-cap2-bg:#faf1e2;     --cl-cap2-line:#f0d9ae;
    --cl-cus2:#b8557d;     --cl-cus2-bg:#faeef3;     --cl-cus2-line:#f0cddd;
    --cl-qual:#1f8a5c;     --cl-qual-bg:#e6f5ee;     --cl-qual-line:#bfe4d0;
    --cl-fin2:#a67c1f;     --cl-fin2-bg:#faf3e0;     --cl-fin2-line:#eddba0;
    --cl-mkt2:#c14f26;     --cl-mkt2-bg:#fbeee7;     --cl-mkt2-line:#f0c7ae;
    --shadow:0 12px 32px -18px rgba(60,20,90,.22);
    --shadow-lg:0 20px 48px -20px rgba(60,20,90,.28);
    --fdisplay:"JF Flat","Tajawal","Cairo","Segoe UI",Tahoma,sans-serif;
    --fbody:"Cairo","Tajawal","Segoe UI",Tahoma,sans-serif;
    --radius:16px;
  }
  :root{--page-bg:#e6e1e9}

  /* الوضع الداكن — كل الرموز تتغيّر معاً لا بعضها.
     كان --page-bg وحده يتبع تفضيل النظام بينما تبقى بقية الألوان فاتحة،
     فتظهر لوحة فاتحة داخل إطار أسود. القائمة كاملة هنا وفي الاستعلام
     أدناه لأن CSS لا يملك آلية لإعادة استخدام مجموعة رموز. */
  :root[data-theme="dark"]{
    --page-bg:#0e0716;
    --bg:#160c22; --surface:#20132f; --surface-2:#271939; --border:#3a2559; --border-soft:#2c1c42;
    --text:#ede3f5; --muted:#b59fce; --faint:#8a75a6;
    --primary:#a97fd6; --primary-light:#c9a4e6; --accent:#b98fd9;
    --sidebar-bg:#150a20; --sidebar-bg-2:#1d1030; --sidebar-text:#c9b7e3; --sidebar-text-dim:#7c6796; --sidebar-active:#3a2559;
    /* الوضع الداكن: شريط التنقّل يبقى بنفسجياً داكناً تماماً كسابقاً — لا
       تغيير هنا، فقط الوضع الفاتح أعلاه صار أبيض */
    --nav-bg:#150a20; --nav-bg-2:#1d1030; --nav-text:#c9b7e3; --nav-text-dim:#7c6796;
    --nav-icon:#c9b7e3; --nav-icon-opacity:.85;
    /* نفس ألوان أيقونات الشريط الجانبي أعلاه، بنسخة أفتح/أكثر نصوعاً
       تُقرأ بوضوح على الخلفية البنفسجية الداكنة (نفس درجة الصفاء تقريباً
       مع رفع الإضاءة، لا ألوان مختلفة كلياً — حفاظاً على هوية كل قسم
       موحّدة بين الوضعين). */
    --nav-ic-live:#f2879e;
    --nav-ic-cap:#f0b060;
    --nav-ic-cust:#e79bc0;
    --nav-ic-reports:#7fb3ec;
    --nav-ic-policy:#5fc9c4;
    --nav-ic-cities:#7fc2ea;
    --nav-ic-trips:#6fd1a8;
    --nav-ic-notif:#e8c069;
    --nav-ic-hr:#ea94bd;
    --nav-ic-mkt:#eda172;
    --nav-ic-crm:#97a3e8;
    --nav-ic-inv:#c2a988;
    --nav-ic-fin:#6fd0b3;
    --nav-ic-support:#7cd4e0;
    --nav-ic-gov:#9494d4;
    --nav-hover-bg:rgba(255,255,255,.06); --nav-hover-text:#ffffff;
    --nav-active-bg:#3a2559; --nav-active-text:#ffffff;
    --nav-sep:rgba(255,255,255,.13); --nav-border:transparent;
    --good:#4fd1a8; --good-bg:#173226; --good-line:#28553f;
    --warn:#e0b64a; --warn-bg:#3a2e12; --warn-line:#5c4a1e;
    --crit:#e2688f; --crit-bg:#3a1826; --crit-line:#5c2740;
    --cl-ops:#c9a4e6;      --cl-ops-bg:#2a1d3d;      --cl-ops-line:#4a3568;
    --cl-trust:#e0b64a;    --cl-trust-bg:#332711;    --cl-trust-line:#5c4a1e;
    --cl-gov:#5fc9c4;      --cl-gov-bg:#122b29;      --cl-gov-line:#255049;
    --cl-ovr:#a98fe0;      --cl-ovr-bg:#2a2140;      --cl-ovr-line:#493a68;
    --cl-cap2:#e8a855;     --cl-cap2-bg:#332615;     --cl-cap2-line:#5c4726;
    --cl-cus2:#e79bc0;     --cl-cus2-bg:#33202a;     --cl-cus2-line:#5c3a4a;
    --cl-qual:#6fd1a8;     --cl-qual-bg:#173226;     --cl-qual-line:#28553f;
    --cl-fin2:#e0c069;     --cl-fin2-bg:#332a12;     --cl-fin2-line:#5c4a1e;
    --cl-mkt2:#eda172;     --cl-mkt2-bg:#33200f;     --cl-mkt2-line:#5c3d20;
    --shadow:0 18px 44px -20px rgba(0,0,0,.6); --shadow-lg:0 24px 60px -20px rgba(0,0,0,.7);
  }

  /* الوضع الافتراضي فاتح لأنه التصميم المعتمد. الداكن اختيار صريح من
     الزر ويُحفَظ — لا يُفرض من تفضيل النظام كي لا تتبدّل هوية اللوحة
     تلقائياً على أجهزة مختلفة. */
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--page-bg);color:var(--text);font-family:var(--fbody);
    direction:rtl;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
  }
  button{font-family:inherit;cursor:pointer;color:inherit}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--primary-light);color:#1a0e28}

  .shell{
    display:grid;grid-template-columns:264px 1fr;min-height:100vh;
    background:var(--bg);
  }

  /* SIDEBAR */
  .sidebar{
    background:linear-gradient(180deg,var(--nav-bg),var(--nav-bg-2));
    color:var(--nav-text);padding:20px 14px;display:flex;flex-direction:column;gap:6px;
    position:sticky;top:0;height:100vh;overflow-y:auto;
    border-inline-end:1px solid var(--nav-border);transition:background-color .2s ease,border-color .2s ease;
  }
  .brand{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 10px 22px;text-align:center}
  .brand-logo{height:92px;width:auto;object-fit:contain;flex:0 0 auto;
    filter:drop-shadow(0 8px 16px rgba(124,77,189,.28))}
  .brand-tag{font-size:10.5px;color:var(--nav-text-dim);letter-spacing:.14em;text-transform:uppercase;font-weight:700}
  .nav-group{margin-top:14px}
  .nav-label{font-size:11px;color:var(--nav-text-dim);letter-spacing:.1em;text-transform:uppercase;padding:0 12px;margin-bottom:6px;font-weight:700}
  .nav-item{
    display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font-size:13.5px;
    color:var(--nav-text);border:1px solid transparent;transition:.15s;font-weight:500
  }
  .nav-item .ic{width:18px;height:18px;flex:0 0 auto;color:var(--nav-icon);opacity:var(--nav-icon-opacity)}
  .nav-item:hover{background:var(--nav-hover-bg);color:var(--nav-hover-text)}
  .nav-item:hover .ic{color:var(--nav-hover-text);opacity:1}
  .nav-item.active{background:var(--nav-active-bg);color:var(--nav-active-text);border-color:rgba(255,255,255,.08);box-shadow:0 4px 14px -4px rgba(0,0,0,.4)}
  .nav-item.active .ic{color:var(--nav-active-text);opacity:1}

  /* أيقونات مُلوَّنة لكل قسم رئيسي — الرئيسية وحدها تبقى بلون العلامة
     الافتراضي (--nav-icon) كنقطة انطلاق محايدة. :not(.active) يضمن بقاء
     الأيقونة بيضاء على الشارة المتدرّجة حين يكون القسم نفسه نشطاً، بصرف
     النظر عن ترتيب هذه القواعد. */
  .nav-item.nav-live:not(.active) .ic{color:var(--nav-ic-live)}
  #capToggle:not(.active) .ic{color:var(--nav-ic-cap)}
  #custToggle:not(.active) .ic{color:var(--nav-ic-cust)}
  #reportsCenterNav:not(.active) .ic{color:var(--nav-ic-reports)}
  #policyCenterNav:not(.active) .ic{color:var(--nav-ic-policy)}
  #citiesCenterNav:not(.active) .ic{color:var(--nav-ic-cities)}
  .nav-item[data-view="trips"]:not(.active) .ic{color:var(--nav-ic-trips)}
  .nav-item[data-view="notifications"]:not(.active) .ic{color:var(--nav-ic-notif)}
  #hrHead:not(.active) .ic{color:var(--nav-ic-hr)}
  #mktToggle:not(.active) .ic{color:var(--nav-ic-mkt)}
  .nav-item[data-view="crm-leads"]:not(.active) .ic{color:var(--nav-ic-crm)}
  .nav-item[data-view="inventory"]:not(.active) .ic{color:var(--nav-ic-inv)}
  #finToggle:not(.active) .ic{color:var(--nav-ic-fin)}
  #supportHead:not(.active) .ic{color:var(--nav-ic-support)}
  #govToggle:not(.active) .ic{color:var(--nav-ic-gov)}

  .nav-item .badge{margin-inline-start:auto;background:var(--crit);color:#fff;font-size:10px;font-weight:800;padding:1px 7px;border-radius:999px}
  .nav-item[data-panel]{cursor:pointer}
  .panel{animation:fadein .25s ease}
  @keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
  @media (prefers-reduced-motion:reduce){.panel{animation:none}}

  /* TOPBAR */
  .main{display:flex;flex-direction:column;min-width:0}
  .topbar{
    display:flex;align-items:center;gap:14px;padding:14px 26px;background:var(--surface);
    border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10
  }
  .crumb{font-size:13px;color:var(--faint)}
  .crumb b{color:var(--text);font-weight:700}
  .search{
    margin-inline-start:auto;display:flex;align-items:center;gap:8px;background:var(--surface-2);
    border:1px solid var(--border);border-radius:11px;padding:8px 14px;width:280px;color:var(--faint);font-size:13px
  }
  .search svg{width:15px;height:15px;flex:0 0 auto}
  .icon-btn{
    width:38px;height:38px;border-radius:11px;border:1px solid var(--border);background:var(--surface-2);
    color:var(--text);display:grid;place-items:center;position:relative
  }
  .icon-btn:hover{border-color:var(--primary)}
  .icon-btn .dot{position:absolute;top:6px;left:6px;width:7px;height:7px;border-radius:50%;background:var(--crit);border:2px solid var(--surface)}
  .avatar{
    width:38px;height:38px;border-radius:11px;background:var(--grad);display:grid;place-items:center;
    color:#fff;font-family:var(--fdisplay);font-weight:800;font-size:14px
  }

  /* على الشاشات العريضة نزيد الأعمدة بدل تمديد البطاقات بلا فائدة */
  @media(min-width:1700px){
    .widget-row{grid-template-columns:repeat(3,1fr)}
    .mod-grid{grid-template-columns:repeat(4,1fr)}
    .trend-map-row{grid-template-columns:1.6fr 1fr}
  }

  /* CONTENT */
  .content{padding:26px 32px 60px;width:100%}
  .page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
  .page-head h1{font-family:var(--fdisplay);font-size:25px;margin:0 0 6px;font-weight:800;text-wrap:balance}
  .page-head p{margin:0;color:var(--muted);font-size:14px;max-width:60ch}
  .btn-primary{
    background:var(--grad);color:#fff;border:none;padding:11px 20px;border-radius:12px;font-weight:700;
    font-size:14px;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow);white-space:nowrap
  }
  .btn-primary svg{width:16px;height:16px}

  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
  .chip{
    padding:7px 15px;border-radius:999px;border:1px solid var(--border);background:var(--surface);
    font-size:12.5px;color:var(--muted);font-weight:600
  }
  .chip.active{background:var(--grad);color:#fff;border-color:transparent}

  .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
  .stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
  .stat .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .stat .ic-wrap{width:34px;height:34px;border-radius:10px;display:grid;place-items:center}
  .stat .ic-wrap.p{background:linear-gradient(135deg,#8e5bc422,#b98fd922)}
  .stat .ic-wrap.g{background:var(--good-bg)}
  .stat .ic-wrap.w{background:var(--warn-bg)}
  .stat .ic-wrap.r{background:var(--crit-bg)}
  .stat .ic-wrap svg{width:17px;height:17px}
  .stat .ic-wrap.p svg{color:var(--primary)}
  .stat .ic-wrap.g svg{color:var(--good)}
  .stat .ic-wrap.w svg{color:var(--warn)}
  .stat .ic-wrap.r svg{color:var(--crit)}
  .stat .v{font-family:var(--fdisplay);font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
  .stat .l{font-size:12.5px;color:var(--faint);margin-top:2px}

  .section-head{display:flex;align-items:center;justify-content:space-between;margin:8px 0 14px}
  .section-head h2{font-family:var(--fdisplay);font-size:17px;margin:0;font-weight:800}
  .section-head .hint{font-size:12.5px;color:var(--faint)}

  .rules{display:flex;flex-direction:column;gap:12px;margin-bottom:30px}
  .rule-card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    padding:16px 18px;box-shadow:var(--shadow);display:flex;align-items:center;gap:18px;flex-wrap:wrap
  }
  .rule-flow{display:flex;align-items:center;gap:12px;flex:1 1 420px;min-width:0}
  .rule-pill{
    display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:11px;font-size:13px;font-weight:700;
    white-space:nowrap
  }
  .rule-pill.cond{background:var(--surface-2);border:1px solid var(--border);color:var(--text)}
  .rule-pill .metric-label{color:var(--faint);font-weight:600}
  .rule-arrow{color:var(--faint);flex:0 0 auto}
  .rule-pill.act-freeze{background:var(--crit-bg);color:var(--crit);border:1px solid var(--crit-line)}
  .rule-pill.act-up{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}
  .rule-pill.act-down{background:var(--good-bg);color:var(--good);border:1px solid var(--good-line)}
  .rule-meta{display:flex;align-items:center;gap:10px;margin-inline-start:auto;flex:0 0 auto}
  .scope-tag{font-size:11.5px;color:var(--faint);background:var(--surface-2);border:1px solid var(--border);padding:4px 10px;border-radius:999px}
  .review-tag{font-size:11px;font-weight:800;color:var(--crit);background:var(--crit-bg);border:1px solid var(--crit-line);padding:3px 9px;border-radius:999px}
  .switch{width:38px;height:22px;border-radius:999px;background:var(--good);position:relative;flex:0 0 auto}
  .switch::after{content:"";position:absolute;width:16px;height:16px;background:#fff;border-radius:50%;top:3px;left:3px;box-shadow:0 1px 3px rgba(0,0,0,.3)}
  .icon-mini{width:32px;height:32px;border-radius:9px;border:1px solid var(--border);display:grid;place-items:center;color:var(--faint);flex:0 0 auto}
  .icon-mini svg{width:14px;height:14px}
  .note-example{font-size:12px;color:var(--faint);margin:-6px 0 20px;display:flex;align-items:center;gap:6px}

  .builder{
    background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);padding:22px;
    margin-bottom:30px;box-shadow:var(--shadow)
  }
  .builder h3{margin:0 0 4px;font-family:var(--fdisplay);font-size:16px;font-weight:800}
  .builder p{margin:0 0 18px;color:var(--muted);font-size:13px}
  .builder-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:end}
  .field{display:flex;flex-direction:column;gap:6px}
  .field label{font-size:11.5px;color:var(--faint);font-weight:700}
  .field .box{
    border:1px solid var(--border);background:var(--surface-2);border-radius:10px;padding:10px 12px;
    font-size:13px;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:6px
  }
  .field .box svg{width:13px;height:13px;color:var(--faint);flex:0 0 auto}
  .builder-add{
    grid-column:1/-1;display:flex;justify-content:flex-end;margin-top:6px
  }

  .tbl-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto}
  table{border-collapse:collapse;width:100%;min-width:640px;font-size:13.5px}
  th,td{padding:13px 16px;text-align:right;border-bottom:1px solid var(--border-soft)}
  thead th{color:var(--faint);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;background:var(--surface-2)}
  tbody tr:last-child td{border-bottom:none}
  tbody tr:hover{background:var(--surface-2)}
  .cell-name{display:flex;align-items:center;gap:10px}
  .mini-avatar{width:30px;height:30px;border-radius:9px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;font-family:var(--fdisplay);font-weight:800;font-size:12px;color:var(--primary)}
  .rating{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;font-weight:700}
  .rating svg{width:13px;height:13px;color:var(--warn)}
  .status-pill{font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px}
  .status-pill.pending{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}
  .status-pill.paid{background:var(--good-bg);color:var(--good);border:1px solid var(--good-line)}
  .status-pill.rejected{background:var(--crit-bg);color:var(--crit);border:1px solid var(--crit-line)}
  .row-actions{display:flex;gap:6px}
  .row-btn{padding:6px 12px;border-radius:8px;font-size:12px;font-weight:700;border:1px solid var(--border)}
  .row-btn.approve{background:var(--good);color:#fff;border-color:transparent}
  .row-btn.reject{background:var(--surface);color:var(--crit);border-color:var(--crit-line)}

  .footnote{margin-top:26px;padding:14px 18px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);color:var(--muted);font-size:12.5px}
  .footnote b{color:var(--text)}

  /* HOME SCREEN */
  .live-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--good);background:var(--good-bg);border:1px solid var(--good-line);padding:5px 12px;border-radius:999px;margin-inline-start:12px;vertical-align:middle}
  .live-dot{width:7px;height:7px;border-radius:50%;background:var(--good);position:relative}
  .live-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--good);opacity:.5;animation:pulse 1.8s ease-out infinite}
  @keyframes pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.9);opacity:0}}
  @media (prefers-reduced-motion:reduce){.live-dot::after{animation:none}}

  .alert-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
  .alert-pill{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--warn-line);padding:9px 15px;border-radius:12px;font-size:12.5px;color:var(--text);box-shadow:var(--shadow)}
  .alert-pill svg{width:15px;height:15px;color:var(--warn);flex:0 0 auto}
  .alert-pill b{font-family:var(--fdisplay);font-variant-numeric:tabular-nums}
  .alert-pill.crit{border-color:var(--crit-line)}
  .alert-pill.crit svg{color:var(--crit)}

  .home-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start}

  .lb-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
  .lb-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 4px}
  .lb-head h2{font-family:var(--fdisplay);font-size:16px;margin:0;font-weight:800}
  .lb-head .hint{font-size:12px;color:var(--faint)}
  .lb-list{display:flex;flex-direction:column}
  .lb-row{display:grid;grid-template-columns:30px 1fr auto 90px 60px;align-items:center;gap:14px;padding:12px 20px;border-top:1px solid var(--border-soft)}
  .lb-rank{font-family:var(--fdisplay);font-weight:800;color:var(--faint);font-size:14px;text-align:center}
  .lb-rank.gold{color:var(--primary);display:flex;align-items:center;justify-content:center}
  .lb-rank.gold svg{width:18px;height:18px}
  .lb-city{display:flex;flex-direction:column;gap:5px;min-width:0}
  .lb-city .name{font-weight:700;font-size:13.5px}
  .lb-bar-track{height:5px;background:var(--border-soft);border-radius:999px;overflow:hidden}
  .lb-bar-fill{height:100%;border-radius:999px;background:var(--grad)}
  .lb-rev{text-align:left;font-variant-numeric:tabular-nums}
  .lb-rev .val{font-family:var(--fdisplay);font-weight:800;font-size:14.5px}
  .lb-rev .cur{font-size:10.5px;color:var(--faint)}
  .lb-share{font-size:11.5px;color:var(--faint);text-align:left;font-variant-numeric:tabular-nums}
  .lb-trend{display:flex;align-items:center;gap:3px;font-size:12px;font-weight:700;justify-content:flex-end;font-variant-numeric:tabular-nums}
  .lb-trend.up{color:var(--good)}
  .lb-trend.down{color:var(--crit)}
  .lb-trend svg{width:12px;height:12px}

  .side-col{display:flex;flex-direction:column;gap:16px}
  .mod-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
  .mod-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
  .mod-ic{width:28px;height:28px;border-radius:8px;background:var(--grad-soft,var(--surface-2));display:grid;place-items:center;background:linear-gradient(135deg,#8e5bc422,#b98fd922)}
  .mod-ic svg{width:14px;height:14px;color:var(--primary)}
  .mod-head h3{font-family:var(--fdisplay);font-size:13.5px;margin:0;font-weight:800}
  .mod-row{display:flex;align-items:baseline;justify-content:space-between;padding:6px 0;font-size:12.5px;color:var(--muted)}
  .mod-row b{color:var(--text);font-family:var(--fdisplay);font-variant-numeric:tabular-nums;font-size:14px}
  .mod-row.warn b{color:var(--warn)}
  .mod-row.crit b{color:var(--crit)}

  .feed-list{display:flex;flex-direction:column;gap:0}
  .feed-item{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--border-soft);font-size:12px;color:var(--muted)}
  .feed-item:first-child{border-top:none}
  .feed-dot{width:6px;height:6px;border-radius:50%;background:var(--primary);margin-top:5px;flex:0 0 auto}
  .feed-item b{color:var(--text);font-weight:700}
  .feed-time{margin-inline-start:auto;color:var(--faint);font-size:11px;white-space:nowrap}

  @media(max-width:1100px){
    .home-grid{grid-template-columns:1fr}
  }
  @media(max-width:640px){
    .lb-row{grid-template-columns:24px 1fr auto;grid-template-areas:"rank city rev" "rank bar bar" "rank share trend";row-gap:4px}
  }

  /* REVENUE CHART */
  .chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px 8px;margin-bottom:20px}
  .chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:2px;flex-wrap:wrap}
  .chart-head h2{font-family:var(--fdisplay);font-size:16px;margin:0 0 3px;font-weight:800}
  .chart-total{display:flex;align-items:center;gap:8px;font-family:var(--fdisplay);font-weight:800;font-size:19px;color:var(--text);white-space:nowrap}
  .chart-total b{font-variant-numeric:tabular-nums}
  .chart-total small{font-size:11px;color:var(--faint);font-weight:600}
  .chart-wrap{position:relative}
  .chart-wrap svg{width:100%;height:170px;display:block;overflow:visible}
  .chart-line{fill:none;stroke:var(--primary);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
  .chart-grid line{stroke:var(--border-soft);stroke-width:1}
  .chart-endpoint{fill:var(--primary)}
  .chart-point{fill:var(--surface);stroke:var(--primary);stroke-width:2}
  .chart-endpoint-ring{fill:none;stroke:var(--primary);stroke-width:2;opacity:.5;animation:pulse 1.8s ease-out infinite}
  .chart-hover-line{stroke:var(--faint);stroke-width:1;stroke-dasharray:3 3}
  .chart-axis{display:flex;justify-content:space-between;padding:4px 2px 10px;font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
  .chart-tip{position:absolute;top:0;left:0;pointer-events:none;background:var(--sidebar-bg);color:#fff;font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:8px;transform:translate(-50%,-125%);opacity:0;transition:opacity .12s;white-space:nowrap;box-shadow:var(--shadow-lg);font-variant-numeric:tabular-nums;z-index:5}
  .chart-tip.show{opacity:1}

  /* KSA MAP */
  .map-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px 16px;display:flex;flex-direction:column}
  .map-wrap{position:relative;margin-top:8px}
  .map-wrap svg{width:100%;height:auto;display:block;overflow:visible}
  .ksa-outline{fill:url(#ksaFill);stroke:var(--primary);stroke-width:1.4;stroke-linejoin:round}
  .pin-shape{fill:var(--primary);stroke:var(--surface);stroke-width:1.2}
  .pin-hole{fill:var(--surface)}
  .pin.pin-top .pin-shape{fill:#7c3fb8}
  .pin-shadow{fill:rgba(60,20,95,.16)}
  .pin-marker{transform-box:fill-box;transform-origin:50% 100%;animation:pinDrop .5s cubic-bezier(.34,1.4,.64,1) both}
  @keyframes pinDrop{0%{opacity:0;transform:translateY(-16px) scale(.7)}100%{opacity:1;transform:translateY(0) scale(1)}}
  .pin:hover .pin-marker{transform:translateY(-3px)}
  .pin{cursor:pointer}
  @media (prefers-reduced-motion:reduce){.pin-marker{animation:none}}
  .pin-tag rect{fill:var(--surface);stroke:var(--border);stroke-width:1}
  .pin-tag.rank1 rect{fill:var(--primary);stroke:none}
  .pin-label{fill:var(--text);font-weight:800;font-size:9.5px;font-family:var(--fbody)}
  .pin-tag.rank1 .pin-label{fill:#ffffff;font-size:10.5px}
  .map-legend{display:flex;align-items:center;gap:7px;margin-top:14px;font-size:11.5px;color:var(--faint)}
  .dot-legend{width:9px;height:9px;border-radius:50%;background:var(--primary);display:inline-block;flex:0 0 auto}
  .lb-list--compact .lb-row{padding:10px 18px}
  @media(max-width:600px){
    .chart-axis span:nth-child(odd){display:none}
  }

  /* PREMIUM HERO SECTION */
  .hero-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
  .collab-stack{display:flex;align-items:center}
  .collab-avatar{width:34px;height:34px;border-radius:50%;border:2.5px solid var(--surface);margin-inline-start:-10px;display:grid;place-items:center;font-family:var(--fdisplay);font-weight:800;font-size:11.5px;color:#fff;box-shadow:var(--shadow)}
  .collab-avatar:first-child{margin-inline-start:0}
  .collab-add{width:34px;height:34px;border-radius:50%;border:2px dashed var(--border);margin-inline-start:-10px;display:grid;place-items:center;color:var(--faint);background:var(--surface)}
  .tf-cluster{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .tf-toggle{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:8px 14px;font-size:12.5px;color:var(--muted);font-weight:600}
  .tf-switch{width:32px;height:18px;border-radius:999px;background:var(--primary);position:relative;flex:0 0 auto}
  .tf-switch::after{content:"";position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;top:2px;left:16px;box-shadow:0 1px 2px rgba(0,0,0,.3)}
  .tf-range{font-weight:800;color:var(--text)}

  .hero-row{display:flex;align-items:flex-start;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:22px}
  .hero-main .eyebrow{font-size:12px;color:var(--faint);font-weight:700;margin-bottom:8px}
  .hero-num{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  .hero-num .n{font-family:var(--fdisplay);font-size:clamp(32px,4.4vw,46px);font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums}
  .hero-num .n .dec{color:var(--faint)}
  .hero-pill{display:inline-flex;align-items:center;gap:4px;background:var(--good-bg);color:var(--good);font-weight:800;font-size:12.5px;padding:4px 11px;border-radius:999px}
  .hero-pill.alt{background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}
  .hero-pill svg{width:11px;height:11px}
  .hero-compare{margin-top:9px;font-size:12.5px;color:var(--faint);display:flex;align-items:center;gap:6px}
  .hero-compare b{color:var(--muted);font-weight:700}

  .stat-cluster{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
  .sc-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:11px 16px;min-width:104px;box-shadow:var(--shadow)}
  .sc-card .lbl{font-size:10.5px;color:var(--faint);font-weight:700;margin-bottom:7px;display:flex;align-items:center;gap:6px;white-space:nowrap}
  .sc-card .val{font-family:var(--fdisplay);font-weight:800;font-size:15px;display:flex;align-items:center;gap:6px;white-space:nowrap}
  .sc-card.dark{background:var(--sidebar-bg);color:#fff;border-color:transparent}
  .sc-card.dark .lbl{color:var(--sidebar-text-dim)}
  .sc-card.hi{box-shadow:0 0 0 1.5px var(--primary) inset,var(--shadow)}
  .sc-mini-avatar{width:17px;height:17px;border-radius:50%;background:var(--grad);display:inline-grid;place-items:center;color:#fff;font-size:7.5px;font-weight:800;flex:0 0 auto}

  .breakdown-bar{display:flex;align-items:center;gap:22px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:13px 18px;margin-bottom:20px;flex-wrap:wrap;box-shadow:var(--shadow)}
  .bd-item{display:flex;align-items:center;gap:8px;font-size:12.5px;white-space:nowrap}
  .bd-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
  .bd-item .amt{font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
  .bd-item .pct{color:var(--faint)}
  .bd-details{margin-inline-start:auto;background:var(--sidebar-bg);color:#fff;font-size:12px;font-weight:700;padding:8px 17px;border-radius:999px;white-space:nowrap}

  .widget-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:20px;align-items:stretch}
  .widget{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column}
  .widget-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;gap:8px}
  .widget-head h3{font-family:var(--fdisplay);font-size:13px;margin:0;font-weight:800}
  .widget-filter{font-size:10.5px;color:var(--faint);border:1px solid var(--border);border-radius:8px;padding:4px 9px;display:flex;align-items:center;gap:4px;white-space:nowrap}
  .wg-list{display:flex;flex-direction:column;gap:10px}
  .wg-item{display:flex;align-items:center;gap:9px;font-size:12px}
  .wg-ic{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto;color:#fff}
  .wg-ic svg{width:11px;height:11px}
  .wg-name{flex:1;font-weight:600;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wg-val{font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
  .wg-pct{font-size:10.5px;color:var(--faint);min-width:30px;text-align:left}

  .bars-wrap{flex:1;display:flex;align-items:flex-end;gap:8px;padding-top:16px;min-height:118px}
  .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
  .bar-val{font-size:9px;color:var(--faint);font-weight:700;font-variant-numeric:tabular-nums}
  .bar-shape{width:100%;border-radius:5px 5px 2px 2px;background:var(--surface-2);border:1px solid var(--border-soft)}
  .bar-shape.hi{background:var(--grad);border-color:transparent}
  .bar-label{font-size:9px;color:var(--faint)}

  .hi-card{background:var(--grad);color:#fff;box-shadow:var(--shadow-lg)}
  .hi-card .widget-head h3{color:#fff}
  .hi-card .widget-filter{border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.85)}
  .hi-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:5px}
  .hi-row .lbl{font-size:11px;color:rgba(255,255,255,.78)}
  .hi-row .val{font-family:var(--fdisplay);font-weight:800;font-size:15px}
  .hi-sub{font-size:10px;color:rgba(255,255,255,.68);margin-bottom:12px}
  .hi-mini-bars{display:flex;align-items:flex-end;gap:4px;height:34px;margin-top:auto}
  .hi-mini-bars span{flex:1;background:rgba(255,255,255,.32);border-radius:2px}
  .hi-mini-bars span.now{background:#fff}

  .team-tbl-wrap{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:20px}
  .team-tbl-head{display:flex;align-items:center;justify-content:space-between;padding:17px 20px 2px}
  .team-tbl-head h3{font-family:var(--fdisplay);font-size:15px;margin:0;font-weight:800}
  .badge-chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap}
  .badge-chip.gold{background:#fbe9c8;color:#9a6a12}
  .badge-chip.streak{background:var(--crit-bg);color:var(--crit)}
  .badge-chip.star{background:var(--good-bg);color:var(--good)}
  .team-tbl-scroll{overflow-x:auto}
  .team-row{display:grid;grid-template-columns:1.7fr .8fr .6fr .7fr .9fr 1.5fr;align-items:center;gap:10px;padding:12px 20px;border-top:1px solid var(--border-soft);font-size:12.5px;min-width:680px}
  .team-row.hd{color:var(--faint);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding-bottom:9px;padding-top:15px;border-top:none}
  .team-person{display:flex;align-items:center;gap:9px;font-weight:700;min-width:0}
  .team-avatar{width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:var(--fdisplay);font-weight:800;font-size:11px;flex:0 0 auto}
  .team-rating{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;font-weight:700}
  .rating-ring{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:8.5px;font-weight:800;color:#fff;background:var(--good);flex:0 0 auto}
  .team-badges{display:flex;gap:5px;flex-wrap:wrap}
  .platform-row{display:grid;grid-template-columns:.72fr 1.6fr;gap:16px;margin-bottom:20px;align-items:stretch}
  .pv-card{background:linear-gradient(150deg,#8e5bc4,#6d3ba3);color:#fff;border-radius:16px;padding:18px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:14px}
  .pv-head{font-size:11.5px;color:rgba(255,255,255,.72);line-height:1.45}
  .pv-head b{font-family:var(--fdisplay);font-size:15px;color:#fff;font-weight:800}
  .pv-metric{display:flex;flex-direction:column;gap:2px}
  .pv-metric .k{font-size:10.5px;color:rgba(255,255,255,.7)}
  .pv-metric .v{font-family:var(--fdisplay);font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
  .pv-metric .v small{font-size:10.5px;color:rgba(255,255,255,.6);font-weight:600}
  .seg-toggle{display:flex;gap:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px}
  .seg{font-size:10.5px;font-weight:700;color:var(--faint);padding:4px 10px;border-radius:999px;white-space:nowrap}
  .seg.active{background:var(--sidebar-bg);color:#fff}
  .trend-map-row{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-bottom:20px}
  .mod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  @media(max-width:1100px){
    .widget-row{grid-template-columns:1fr}
    .trend-map-row{grid-template-columns:1fr}
    .platform-row{grid-template-columns:1fr}
    .mod-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:640px){
    .team-row{grid-template-columns:1.6fr .8fr .8fr 1.2fr;min-width:520px}
    .team-row.hd :nth-child(3),.team-row.hd :nth-child(5),
    .team-row :nth-child(3),.team-row :nth-child(5){display:none}
    .mod-grid{grid-template-columns:1fr}
  }

  /* على الشاشات الضيقة يصير الشريط الجانبي شريطاً أفقياً أعلى الصفحة.
     لا نخفيه في درج منزلق لأن اللوحة بلا زر قائمة — إخفاؤه يقطع
     التنقّل كلياً بدل أن يوفّر مساحة. */
  @media(max-width:980px){
    .shell{grid-template-columns:1fr}
    .sidebar{
      position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
      gap:8px;padding:12px 14px;
    }
    .brand{flex-direction:row;align-items:center;gap:8px;padding:0 8px 0 0;text-align:start}
    .brand-logo{height:30px}
    .nav-group{margin:0;display:flex;flex-wrap:wrap;gap:4px}
    .nav-group[style]{margin-top:0 !important;margin-inline-start:auto}
    .nav-label{display:none}
    .search{display:none}
    .stat-grid{grid-template-columns:repeat(2,1fr)}
    .builder-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:600px){
    .stat-grid{grid-template-columns:1fr}
    .builder-grid{grid-template-columns:1fr}
    .content{padding:20px 16px 50px}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ============================================================
   إضافات لوحة التحكم الحيّة فوق التصميم المعتمد
   (شاشة الدخول، الحالات، الجداول التفاعلية) — نفس الرموز اللونية
   ============================================================ */

/* قاعدة المتصفح [hidden]{display:none} تُهزم أمام أي قاعدة display في
   ورقة المؤلف، فيبقى العنصر ظاهراً رغم ضبط hidden. */
[hidden]{display:none !important}

/* ---------- شاشة الدخول ---------- */
.login-shell{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:radial-gradient(900px 500px at 70% -10%,rgba(142,91,196,.22),transparent 60%),var(--page-bg)}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:22px;
  padding:34px 30px;width:min(400px,100%);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;gap:14px}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:8px;text-align:center}
.login-logo{height:72px;width:auto;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(124,77,189,.25))}
.login-brand span{font-size:11.5px;color:var(--faint)}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;
  color:var(--muted);font-weight:600}
.login-card input{padding:11px 14px;border:1px solid var(--border);border-radius:11px;
  background:var(--surface-2);color:var(--text);font:inherit;font-size:14px}
.login-card input:focus{outline:2px solid var(--primary);outline-offset:1px}
.login-error{margin:0;background:var(--crit-bg);color:var(--crit);padding:9px 13px;
  border-radius:10px;font-size:13px;font-weight:600}
.login-hint{margin:4px 0 0;font-size:11.5px;color:var(--faint);line-height:1.6}
.login-hint code{background:var(--surface-2);padding:1px 5px;border-radius:4px}
.login-card .btn-primary{justify-content:center}
/* روابط التنقّل بين مسارَي الدخول (جوال ↔ كلمة مرور) وإعادة الإرسال */
.login-switch{display:inline-block;margin-top:6px;margin-inline-end:14px;
  color:var(--primary);font-weight:600;text-decoration:none;font-size:11.5px}
.login-switch:hover{text-decoration:underline}
.login-switch[aria-disabled="true"]{color:var(--faint);pointer-events:none}
.login-sent{margin:0;font-size:12.5px;color:var(--muted);text-align:center}
.login-sent strong{color:var(--text);direction:ltr;display:inline-block;unicode-bidi:isolate}
/* الرمز يُقرأ رقماً رقماً — تباعد واسع واتجاه لاتيني كي لا تنقلب المنازل */
.code-input{text-align:center;letter-spacing:.55em;text-indent:.55em;
  font-size:20px!important;font-weight:700;direction:ltr}
.btn-primary:disabled{opacity:.6;cursor:not-allowed}

/* ---------- تنقّل جانبي فعّال ---------- */
.nav-item{background:none;border:1px solid transparent;text-align:right;width:100%;
  font:inherit;cursor:pointer}
.nav-item.logout{margin-top:auto;color:#e2688f}

/* ---------- حالات وجداول ---------- */
.spinner,.empty{padding:38px 20px;text-align:center;color:var(--faint);font-size:13px}
.err{background:var(--crit-bg);color:var(--crit);padding:11px 16px;border-radius:11px;
  font-size:13px;font-weight:600;margin-bottom:14px}

.tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;
  padding:3px 9px;border-radius:999px;white-space:nowrap}
.tag.good{background:var(--good-bg);color:var(--good);border:1px solid var(--good-line)}
.tag.warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}
.tag.crit{background:var(--crit-bg);color:var(--crit);border:1px solid var(--crit-line)}
.tag.mute{background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}

.btn{padding:6px 13px;border-radius:9px;font-size:12px;font-weight:700;
  border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer}
.btn.ok{background:var(--good);color:#fff;border-color:transparent}
.btn.no{color:var(--crit);border-color:var(--crit-line)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{cursor:pointer}

.data-tbl{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;margin-bottom:20px}
.data-tbl .tbl-wrap{overflow-x:auto}
.data-tbl table{border-collapse:collapse;width:100%;min-width:660px;font-size:13px}
.data-tbl th,.data-tbl td{text-align:right;padding:11px 16px;border-bottom:1px solid var(--border-soft)}
.data-tbl thead th{background:var(--surface-2);color:var(--faint);font-size:10.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.data-tbl tbody tr:hover{background:var(--surface-2)}
.data-tbl tbody tr:last-child td{border-bottom:none}
.data-tbl td.num{font-variant-numeric:tabular-nums;font-weight:700}
.tier-cell{display:flex;align-items:center;gap:10px}
.tier-veh{width:52px;height:36px;object-fit:contain;flex:0 0 auto;
  filter:drop-shadow(0 2px 5px rgba(20,8,32,.18))}

/* مصدر نسبة العمولة — شريط الأساس أعلى الجدول + شارة بجانب كل نسبة.
   تستخدم --cl-* (ألوان التصنيف) لا good/warn/crit (ألوان الحالة): هذه
   تُخبر «من أين جاء الرقم» لا «هل هو سليم». */
.pct-baseline{display:flex;flex-direction:column;gap:2px;margin-bottom:14px;
  padding:11px 15px;border-radius:12px;
  background:var(--cl-gov-bg);border:1px solid var(--cl-gov-line)}
.pct-baseline b{font-size:12.5px;font-weight:800;color:var(--cl-gov)}
.pct-baseline span{font-size:11px;color:var(--muted);line-height:1.6}
.pct-baseline.none b{color:var(--warn)}
.pct-baseline.none{background:var(--warn-bg);border-color:var(--warn-line)}
.src-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px}
.src-badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;
  font-weight:800;padding:2px 8px;border-radius:999px;white-space:nowrap}
.src-badge::before{content:"";width:5px;height:5px;border-radius:50%;flex:0 0 auto}
.src-badge.inherit{background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}
.src-badge.inherit::before{background:var(--faint)}
.src-badge.custom{background:var(--cl-ops-bg);color:var(--cl-ops);border:1px solid var(--cl-ops-line)}
.src-badge.custom::before{background:var(--cl-ops)}
.src-revert{background:none;border:none;padding:1px 3px;font-family:inherit;
  font-size:10.5px;font-weight:700;color:var(--primary);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;border-radius:5px}
/* كابتن معلَّق يظهر في القائمة العامة (الفلتر «الكل») بشريط جانبي خفيف
   يلفت الانتباه بلا فرض قرار — القرار الفعلي في «طلبات التفعيل» */
.data-tbl tbody tr.pend-accent td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.data-tbl .head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 4px}
.data-tbl .head h2{font-family:var(--fdisplay);font-size:15px;margin:0;font-weight:800}

/* ---------- شريط المؤشرات المتحرك (نمط البورصة) ---------- */
.ticker{
  position:relative;overflow:hidden;background:var(--sidebar-bg);
  border-radius:var(--radius);margin-bottom:20px;padding:11px 0;
  box-shadow:var(--shadow);
  /* تلاشٍ عند الطرفين ليبدو التمرير بلا بداية أو نهاية حادّة */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ticker-track{
  display:inline-flex;align-items:center;gap:14px;white-space:nowrap;
  will-change:transform;animation:tickerScroll 42s linear infinite;
}
/* المحتوى مكرّر مرتين والحركة تنتهي عند -50% فتُغلق الدورة بلا قفزة */
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}

.tk-item{display:inline-flex;align-items:baseline;gap:8px;font-size:13px}
.tk-item.strong .tk-value{font-size:15px}
.tk-label{color:var(--sidebar-text-dim);font-weight:600}
.tk-value{color:#fff;font-weight:800;font-variant-numeric:tabular-nums;font-family:var(--fdisplay)}
.tk-sub{color:var(--sidebar-text-dim);font-size:11px}
.tk-chg{font-weight:800;font-size:12px;font-variant-numeric:tabular-nums;
  padding:2px 8px;border-radius:999px}
.tk-chg.up{color:#4fd1a8;background:rgba(79,209,168,.14)}
.tk-chg.down{color:#e2688f;background:rgba(226,104,143,.14)}
.tk-share{color:#c9a4e6;font-weight:800;font-size:12px;font-variant-numeric:tabular-nums;
  padding:2px 8px;border-radius:999px;background:rgba(201,164,230,.14)}
.tk-sep{color:var(--sidebar-text-dim);opacity:.45}

/* الحركة المستمرة مُرهِقة لبعض المستخدمين — نوقفها ونُبقي المحتوى مقروءاً */
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none;flex-wrap:wrap;white-space:normal}
  .ticker{-webkit-mask-image:none;mask-image:none;padding:11px 16px}
}

/* ============================================================
   قسم الكباتن — القوائم الفرعية، التقارير، البلاغات
   ============================================================ */

/* ---------- قائمة جانبية فرعية ---------- */
.nav-toggle .chev{margin-inline-start:auto;transition:transform .18s}
.nav-parent.open .nav-toggle .chev{transform:rotate(180deg)}
.nav-parent.has-active .nav-toggle{color:var(--nav-hover-text)}
.nav-sub{display:none;flex-direction:column;gap:2px;margin:3px 0 4px;
  padding-inline-start:12px;position:relative}
.nav-parent.open .nav-sub{display:flex}
/* خط رفيع يربط البنود الفرعية ببندها الأب — بدونه تبدو قائمة ثانية منفصلة */
.nav-sub::before{content:"";position:absolute;inset-block:4px;inset-inline-start:16px;
  width:1px;background:var(--nav-sep)}
.nav-item.sub{font-size:12.5px;padding:7px 14px;gap:8px}
.nav-item.sub::before{content:"";width:5px;height:5px;border-radius:50%;
  background:currentColor;opacity:.45;flex:0 0 auto}
.nav-item.sub.active::before{opacity:1}

/* ---------- شريط المؤشرات ---------- */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:13px 15px;box-shadow:var(--shadow)}
.kpi .k{font-size:11px;color:var(--faint);font-weight:700;display:block;margin-bottom:5px}
.kpi .v{font-family:var(--fdisplay);font-size:22px;font-weight:800;
  font-variant-numeric:tabular-nums;line-height:1.2}
.kpi .s{font-size:11px;color:var(--muted);font-weight:600;display:block;margin-top:3px}
.kpi.crit{background:var(--crit-bg);border-color:var(--crit-line)}
.kpi.crit .v{color:var(--crit)}
.kpi.warn{background:var(--warn-bg);border-color:var(--warn-line)}
.kpi.warn .v{color:var(--warn)}
.kpi.good{background:var(--good-bg);border-color:var(--good-line)}
.kpi.good .v{color:var(--good)}
.kpi.dark{background:var(--sidebar-bg);border-color:transparent;color:#fff}
.kpi.dark .k,.kpi.dark .s{color:var(--sidebar-text-dim)}

/* ---------- بطاقة قسم ---------- */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;border-bottom:1px solid var(--border-soft)}
.panel-head h3{margin:0;font-family:var(--fdisplay);font-size:14.5px;font-weight:800}
.panel-head .hint{font-size:11px;color:var(--faint);font-weight:600}
.panel-body{padding:16px 18px}
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:1000px){.split-2{grid-template-columns:1fr}}

/* ---------- توزيع النجوم ---------- */
.star-row{display:grid;grid-template-columns:56px 1fr 96px;align-items:center;gap:10px;
  padding:5px 0;font-size:12.5px}
.star-row .lbl{font-weight:800;color:var(--warn);white-space:nowrap}
.star-track{height:11px;background:var(--surface-2);border:1px solid var(--border-soft);
  border-radius:999px;overflow:hidden}
/* display:block ضروري: العنصر span، والعنصر السطري يتجاهل العرض
   بالنسبة المئوية والارتفاع معاً فيُرسم الشريط بعرض صفر. */
.star-fill{display:block;height:100%;border-radius:999px;background:var(--grad);min-width:3px}
.star-fill.low{background:linear-gradient(135deg,#c23a63,#e2688f)}
.star-fill.mid{background:linear-gradient(135deg,#b8790a,#e0b64a)}
.star-row .cnt{text-align:end;font-variant-numeric:tabular-nums;font-weight:700;
  color:var(--muted);font-size:12px}

/* ---------- تعليقات العملاء ---------- */
.cmt-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.cmt{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:13px;
  padding:12px 14px;font-size:12.5px;line-height:1.7}
.cmt.neg{background:var(--crit-bg);border-color:var(--crit-line)}
.cmt.pos{background:var(--good-bg);border-color:var(--good-line)}
.cmt-top{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.cmt-stars{font-weight:800;letter-spacing:1px;color:var(--warn);font-size:12px}
.cmt-who{font-weight:800;font-size:12px}
.cmt-meta{margin-inline-start:auto;font-size:10.5px;color:var(--faint);font-weight:600}
.cmt-body{color:var(--text)}

/* ---------- مرشّحات متقدمة ---------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.sel,.inp{background:var(--surface);border:1px solid var(--border);color:var(--text);
  border-radius:9px;padding:7px 12px;font-family:inherit;font-size:12.5px;font-weight:600}
.sel:focus,.inp:focus{outline:2px solid var(--primary);outline-offset:1px}
.inp{min-width:190px}
.filter-bar .spacer{margin-inline-start:auto}
.toggle-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  padding:7px 13px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);color:var(--muted)}
.toggle-chip.on{background:var(--crit-bg);border-color:var(--crit-line);color:var(--crit)}

/* ---------- جدول البلاغات ---------- */
.data-tbl tbody tr.clickable{cursor:pointer}
.ref{font-family:var(--fdisplay);font-weight:800;font-variant-numeric:tabular-nums;
  font-size:12.5px}
.sla{font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.sla.over{color:var(--crit)}
.sla.soon{color:var(--warn)}
.sla.ok{color:var(--muted)}
.repeat-flag{background:var(--crit);color:#fff;font-size:9.5px;font-weight:800;
  padding:2px 7px;border-radius:999px;white-space:nowrap}
.geo{font-size:12px;color:var(--muted)}
.geo b{color:var(--text)}

/* ---------- لوحة تفاصيل البلاغ ---------- */
.drawer-bg{position:fixed;inset:0;background:rgba(20,8,32,.5);z-index:60;
  animation:fadeIn .15s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.drawer{position:fixed;inset-block:0;inset-inline-start:0;width:min(560px,100%);
  background:var(--bg);border-inline-end:1px solid var(--border);z-index:61;
  display:flex;flex-direction:column;box-shadow:var(--shadow-lg);
  animation:slideIn .2s cubic-bezier(.2,.8,.3,1)}
.drawer.drawer-lg{width:min(900px,100%)}
@keyframes slideIn{from{transform:translateX(-24px);opacity:.4}to{transform:none;opacity:1}}
.drawer-head{padding:16px 20px;border-bottom:1px solid var(--border);background:var(--surface);
  display:flex;align-items:flex-start;gap:10px}
.drawer-head h2{margin:0 0 4px;font-family:var(--fdisplay);font-size:16px;font-weight:800}
.drawer-head .sub{font-size:11.5px;color:var(--faint);font-weight:600}
.drawer-close{margin-inline-start:auto;background:var(--surface-2);border:1px solid var(--border);
  border-radius:9px;width:30px;height:30px;font-size:15px;color:var(--muted);flex:0 0 auto}
.drawer-body{flex:1;overflow-y:auto;padding:16px 20px 24px}
.drawer-sec{margin-bottom:18px}
.drawer-sec h4{margin:0 0 8px;font-size:11px;color:var(--faint);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12.5px}
.kv .k{color:var(--faint);font-weight:600}
.kv .v{font-weight:700}
.quote{background:var(--surface);border:1px solid var(--border);
  border-inline-start:3px solid var(--primary);
  border-radius:11px;padding:12px 14px;font-size:13px;line-height:1.8}

/* الخيط الزمني — الأحداث بترتيبها لا مبعثرة */
.timeline{position:relative;padding-inline-start:18px}
.timeline::before{content:"";position:absolute;inset-block:6px;inset-inline-start:4px;
  width:1px;background:var(--border)}
.tl-item{position:relative;padding-bottom:14px;font-size:12.5px}
.tl-item::before{content:"";position:absolute;inset-inline-start:-18px;top:5px;
  width:9px;height:9px;border-radius:50%;background:var(--primary);border:2px solid var(--bg)}
.tl-item.system::before{background:var(--faint)}
.tl-item.action::before{background:var(--crit)}
.tl-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:3px}
.tl-who{font-weight:800;font-size:12px}
.tl-time{font-size:10.5px;color:var(--faint);font-weight:600}
.tl-body{color:var(--muted);line-height:1.7}
.vis{font-size:9.5px;font-weight:800;padding:1px 7px;border-radius:999px;
  background:var(--surface-2);color:var(--faint);border:1px solid var(--border)}
.vis.customer{background:var(--good-bg);color:var(--good);border-color:var(--good-line)}
.vis.captain{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}

/* ملاحظات الحساب — سجلّ داخلي يعين القرار عند بلاغ جديد لنفس الحساب */
.acc-notes{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.acc-note{background:var(--surface);border:1px solid var(--border);
  border-inline-start:3px solid var(--accent);border-radius:9px;padding:9px 12px}
.acc-note-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px}
.acc-note-title{font-weight:800;font-size:12.5px}
.acc-note-body{font-size:12.5px;color:var(--muted);line-height:1.7;margin-bottom:4px}
.acc-note-by{font-size:10.5px;color:var(--faint);font-weight:600}
.acc-note-form{display:flex;flex-direction:column;gap:6px}
.acc-note-form .inp{min-width:0;width:100%}

/* أزرار الإجراءات — الحادّة منها منفصلة بصرياً عن الخفيفة */
.act-grid{display:flex;flex-wrap:wrap;gap:7px}
.act{padding:7px 13px;border-radius:9px;font-size:12px;font-weight:700;
  border:1px solid var(--border);background:var(--surface);color:var(--text)}
.act:hover{border-color:var(--primary);color:var(--primary)}
.act.danger{color:var(--crit);border-color:var(--crit-line);background:var(--crit-bg)}
.act.warnish{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.act.good{color:var(--good);border-color:var(--good-line);background:var(--good-bg)}
.act:disabled{opacity:.5;cursor:not-allowed}
.txta{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);
  border-radius:11px;padding:10px 13px;font-family:inherit;font-size:12.5px;
  line-height:1.7;resize:vertical;min-height:72px}
.txta:focus{outline:2px solid var(--primary);outline-offset:1px}

/* الدعم الفني — خيط المحادثة */
.chat-thread{display:flex;flex-direction:column;max-height:46vh;overflow-y:auto;
  padding:4px 2px;margin-bottom:2px}
.msg-row{display:flex;margin-bottom:9px}
.msg-row.system{justify-content:center}
.bubble{max-width:78%;padding:9px 13px;border-radius:14px;font-size:13px;line-height:1.6;
  box-shadow:var(--shadow)}
.msg-row.in .bubble{background:var(--surface);border:1px solid var(--border);
  margin-inline-end:auto;border-end-start-radius:4px}
.msg-row.out .bubble{background:var(--grad);color:#fff;
  margin-inline-start:auto;border-end-end-radius:4px;box-shadow:none}
.msg-row.system .bubble{background:var(--surface-2);color:var(--faint);font-size:11px;
  border-radius:999px;padding:5px 14px;max-width:90%;text-align:center;box-shadow:none}
.bubble .who{font-size:10.5px;font-weight:800;opacity:.75;margin-bottom:2px}
.bubble .stamp{font-size:9.5px;opacity:.65;margin-top:4px;text-align:end}
.unread-pill{background:var(--crit);color:#fff;font-size:10.5px;font-weight:800;
  padding:2px 8px;border-radius:999px;display:inline-block}
.form-row{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}

/* ---------- خريطة المشاكل حسب المنطقة ---------- */
.region-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.region-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:14px 16px;box-shadow:var(--shadow);cursor:pointer;transition:.15s}
.region-card:hover{border-color:var(--primary);transform:translateY(-1px)}
/* الأسوأ يُميَّز بحافة وشريط لا بملء البطاقة: الملء الأحمر يبتلع
   الأرقام داخلها ويجعل المقارنة بينها أصعب لا أسهل. */
.region-card.hot{border-color:var(--crit-line);position:relative;overflow:hidden}
.region-card.hot::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;
  width:4px;background:var(--crit)}
.region-card.hot .rv{color:var(--crit)}
.region-card .rn{font-family:var(--fdisplay);font-size:14px;font-weight:800;margin-bottom:8px}
.region-card .rv{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;
  font-family:var(--fdisplay);line-height:1}
.region-card .rl{font-size:11px;color:var(--faint);font-weight:700;margin-bottom:8px}
.region-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}

/* شريط نسبة داخل خلية جدول — يجعل المقارنة بصرية لا رقمية فقط */
.inline-bar{display:block;height:6px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--border-soft);overflow:hidden;margin-top:4px;min-width:60px}
.inline-bar i{display:block;height:100%;background:var(--grad)}
.inline-bar i.crit{background:linear-gradient(135deg,#c23a63,#e2688f)}

/* اتجاه البلاغات — أعمدة صغيرة */
.spark{display:flex;align-items:flex-end;gap:2px;height:52px}
.spark span{flex:1;background:var(--primary-light);border-radius:2px 2px 0 0;min-height:2px;
  opacity:.75}
.spark span.max{background:var(--crit);opacity:1}

/* شارة التقييم — كانت تُستعمل في جدول الكباتن بلا تعريف، فيظهر النص
   بلون المحتوى فوق خلفية ملوّنة بتباين ضعيف. أبيض على اللون الصريح. */
.rate{display:inline-block;min-width:44px;text-align:center;color:#fff;
  font-weight:800;font-size:11.5px;font-variant-numeric:tabular-nums;
  padding:3px 9px;border-radius:999px}

/* جدول داخل لوحة نصفية أضيق من جدول الصفحة الكاملة — 660px تُظهر
   شريط تمرير أفقياً في كل مرة بلا سبب. */
.panel .tbl-wrap{overflow-x:auto}
.panel .tbl-wrap table{border-collapse:collapse;width:100%;min-width:430px;font-size:12.5px}
.panel .tbl-wrap th,.panel .tbl-wrap td{text-align:right;padding:9px 14px;
  border-bottom:1px solid var(--border-soft)}
.panel .tbl-wrap thead th{background:var(--surface-2);color:var(--faint);font-size:10px;
  font-weight:800;letter-spacing:.04em;position:sticky;top:0}
.panel .tbl-wrap tbody tr:hover{background:var(--surface-2)}
.panel .tbl-wrap tbody tr:last-child td{border-bottom:none}
.panel .tbl-wrap td.num{font-variant-numeric:tabular-nums;font-weight:700}

.content.no-anim .panel{animation:none}
/* بطاقات KPI تبدأ شفافةً ومُزاحة وتدخل بحركة (انظر .kpi-row .kpi أدناه).
   كانت `.no-anim` تُسكِت اللوحات وحدها، فتُعيد البطاقات حركة الدخول كاملةً
   مع كل تحديث دوري (15 ثانية) — اهتزاز متكرّر يشتّت من يقرأ رقماً. وإسكات
   الحركة وحدها لا يكفي: قيمتا opacity/transform الابتدائيتان تبقيان فتختفي
   البطاقات نهائياً، فتُعادان صراحةً هنا. */
.content.no-anim .kpi-row .kpi{animation:none;opacity:1;transform:none}

/* ---------- التقارير التحليلية (تقرير الفرع — مبنيّ أصلاً) ---------- */
.tag-live{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;
  color:#fff;background:var(--grad);padding:8px 16px;border-radius:999px;white-space:nowrap}
.tag-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;opacity:.9}

.report-banner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--sidebar-bg),var(--sidebar-bg-2));
  color:#fff;border-radius:var(--radius);padding:16px 20px;margin-bottom:16px;
  box-shadow:var(--shadow)}
.rb-badge{background:rgba(201,164,230,.18);color:#e9d9fb;font-size:11px;font-weight:800;
  padding:5px 12px;border-radius:999px;border:1px solid rgba(201,164,230,.3);white-space:nowrap}
.rb-main{display:flex;flex-direction:column;gap:2px;padding-inline-end:16px;
  border-inline-end:1px solid rgba(255,255,255,.12)}
.rb-main b{font-family:var(--fdisplay);font-size:16px;font-weight:800}
.rb-main span{font-size:11.5px;color:var(--sidebar-text-dim);font-weight:700}
.rb-note{flex:1;min-width:240px;font-size:12px;line-height:1.7;color:var(--sidebar-text)}
.rb-note b{color:#fff}

/* ثلاث بطاقات في صف */
.split-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
@media(max-width:1000px){.split-3{grid-template-columns:1fr}}

/* مقياس الكفاءة */
.gauge-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0}
.gauge-num{font-family:var(--fdisplay);font-size:40px;font-weight:800;margin-top:-42px}
.gauge-sub{font-size:11.5px;color:var(--faint);font-weight:700;text-align:center}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);font-weight:700;margin-top:8px}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-inline-end:5px;vertical-align:-1px}

/* أشرطة أفقية */
.hbar{display:grid;gap:9px}
.hbar-row{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:10px;font-size:12px}
.hbar-lbl{color:var(--text);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar-track{height:12px;background:var(--surface-2);border:1px solid var(--border-soft);
  border-radius:999px;overflow:hidden}
.hbar-fill{display:block;height:100%;border-radius:999px;background:var(--grad);min-width:3px;
  transition:width .7s cubic-bezier(.16,1,.3,1)}
.hbar-fill.crit{background:linear-gradient(135deg,#c23a63,#e2688f)}
.hbar-fill.good{background:linear-gradient(135deg,#1f9d75,#4fd1a8)}
.hbar-val{font-weight:800;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

/* دونات (جديدة) */
.donut-svg{width:100%;max-width:220px;display:block;margin:12px auto 0;overflow:visible}
.donut-seg{cursor:pointer}
.donut-total{font-variant-numeric:tabular-nums}
.donut-legend{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:10px;
  font-size:11.5px;color:var(--muted);font-weight:700}
.donut-legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-inline-end:5px;vertical-align:-1px}

/* بطاقات موجزة */
.mini{display:flex;flex-direction:column;gap:4px}
.mini .mv{font-family:var(--fdisplay);font-size:24px;font-weight:800}
.mini .ml{font-size:11.5px;color:var(--faint);font-weight:700}
.split{display:flex;gap:10px;margin-top:10px}
.split .s{flex:1;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:11px;
  padding:10px 12px;font-size:11.5px;color:var(--muted);font-weight:700}
.split .s b{display:block;font-family:var(--fdisplay);font-size:17px;color:var(--text);margin-top:2px;
  font-variant-numeric:tabular-nums}

/* اكتشافات */
.ins-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.ins{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:13px;padding:13px 15px}
.ins.critical{background:var(--crit-bg);border-color:var(--crit-line)}
.ins.high{background:var(--warn-bg);border-color:var(--warn-line)}
.ins-top{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.ins-top .t{font-weight:800;font-size:12.5px}
.ins .w{font-size:12px;color:var(--muted);line-height:1.7}
.ins .a{font-size:11.5px;color:var(--text);margin-top:7px;padding-top:7px;
  border-top:1px dashed var(--border);font-weight:700}
.chip{font-size:9.5px;font-weight:800;padding:2px 9px;border-radius:999px;white-space:nowrap}
.chip.critical{background:var(--crit);color:#fff}
.chip.high{background:var(--warn);color:#fff}
.chip.medium{background:var(--surface);color:var(--muted);border:1px solid var(--border)}
.chip.low{background:var(--surface);color:var(--muted);border:1px solid var(--border)}

/* رسوم SVG */
.chart-grid line{stroke:var(--border);stroke-width:1;stroke-dasharray:3 4}
.axis-x{display:flex;justify-content:space-between;font-size:9.5px;color:var(--faint);font-weight:700;
  margin-top:4px;font-variant-numeric:tabular-nums}
.foot-note{font-size:11.5px;color:var(--faint);text-align:center;padding:8px 0 4px;line-height:1.9}

/* ---- التقارير: شريط النطاق والتبويبات ---- */
.scope-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.scope-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 14px;color:var(--text)}
.scope-note{font-size:11.5px;color:var(--faint);font-weight:600;line-height:1.6;flex:1;min-width:220px}
.scope-note b{color:var(--muted)}

.report-filters{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:16px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px}
.report-filters label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;font-weight:800;
  color:var(--faint)}
.report-filters .inp{min-width:150px}
.loading{padding:40px;text-align:center;color:var(--faint);font-weight:700;font-size:13px}

.rtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;border-bottom:1px solid var(--border);
  padding-bottom:0}
.rtab{background:none;border:1px solid transparent;border-bottom:2px solid transparent;
  padding:9px 15px;font-size:13px;font-weight:700;color:var(--muted);border-radius:9px 9px 0 0;margin-bottom:-1px}
.rtab:hover{color:var(--text);background:var(--surface-2)}
.rtab.active{color:var(--primary);border-bottom-color:var(--primary);background:var(--surface)}

.exec-summary{margin-bottom:16px}
.exec-summary .panel-body{font-size:13.5px;line-height:2;color:var(--muted)}
.exec-summary b{color:var(--text)}

/* قمع */
.funnel{display:grid;gap:10px}
.funnel-row{display:grid;grid-template-columns:180px 1fr;align-items:center;gap:12px}
.fn-lbl{font-size:12.5px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:6px}
.fn-conv{font-size:11px;font-weight:800;color:var(--good);background:var(--good-bg);
  border:1px solid var(--good-line);padding:1px 7px;border-radius:999px}
.fn-track{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:10px;overflow:hidden;height:30px}
.fn-fill{display:flex;align-items:center;justify-content:flex-start;height:100%;background:var(--grad);
  border-radius:10px;min-width:44px;padding:0 12px}
.fn-val{color:#fff;font-weight:800;font-size:13px;font-variant-numeric:tabular-nums}

/* ملاحظات */
.notes{display:grid;gap:8px}
.note-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12.5px;
  padding:9px 12px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:11px}
.note-row span{color:var(--faint);font-weight:700}
.note-row b{color:var(--text);font-weight:800;text-align:end}
.note-row.good{background:var(--good-bg);border-color:var(--good-line)}
.note-row.good b{color:var(--good)}

/* ============================================================
   شاشة الافتتاح المتحركة (Splash)
   ============================================================ */
.splash{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 50% 35%,#2c1a46 0%,#1a0e2b 55%,#120820 100%);
  overflow:hidden;transition:opacity .18s ease,visibility .18s ease;
}
.splash.hide{opacity:0;visibility:hidden;pointer-events:none}
.splash-aura{
  position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(168,111,221,.45),rgba(168,111,221,0) 68%);
  filter:blur(12px);animation:auraPulse 2.6s ease-in-out infinite;
}
@keyframes auraPulse{0%,100%{transform:scale(.9);opacity:.55}50%{transform:scale(1.12);opacity:.9}}
.splash-inner{position:relative;text-align:center;animation:splashRise .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes splashRise{0%{transform:translateY(18px);opacity:0}100%{transform:translateY(0);opacity:1}}
.splash-emblem{position:relative;width:190px;height:232px;margin:0 auto;overflow:hidden}
.splash-svg{width:100%;height:100%;object-fit:contain;
  animation:emblemPop .5s cubic-bezier(.16,1.2,.3,1) both;
  filter:drop-shadow(0 18px 34px rgba(120,60,190,.5));}
@keyframes emblemPop{0%{transform:scale(.55) translateY(10px);opacity:0}60%{transform:scale(1.07)}100%{transform:scale(1);opacity:1}}
.splash-shine{position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:shineSweep 2.4s ease-in-out .9s infinite}
@keyframes shineSweep{0%{left:-60%}45%,100%{left:130%}}
.splash-tag{margin-top:10px;font-size:12.5px;color:#a98fca;letter-spacing:.16em;
  opacity:0;animation:tagIn .3s ease .5s both}
@keyframes tagIn{to{opacity:1}}

/* ============================================================
   بند التنقّل «الوضع الحي» + نبضة البث
   ============================================================ */
.nav-live .live-dot{margin-inline-start:auto;width:9px;height:9px;border-radius:50%;background:#2fd07a;
  box-shadow:0 0 0 0 rgba(47,208,122,.7);animation:livePulse 1.6s ease-out infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(47,208,122,.6)}70%{box-shadow:0 0 0 8px rgba(47,208,122,0)}100%{box-shadow:0 0 0 0 rgba(47,208,122,0)}}

/* ============================================================
   قسم «الوضع الحي للرحلات»
   ============================================================ */
/* فلتر المدن — يعزل كل مدينة لوحدها (سياق أعلى وأوسع من فلاتر الحالة تحته).
   ١٠٦ مدينة تمنع عرضها كصفّ أزرار كامل: بدلاً منها قائمة منسدلة واحدة (زر
   يفتح لوحة بحث+قائمة قابلة للتمرير، انظر renderLiveCities بـlive.js). */
.live-cities{margin-bottom:16px}
.lc-select{position:relative;display:inline-flex;align-items:center;gap:8px}
.lc-trigger{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:11px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);font-size:13px;font-weight:800;color:var(--text);
  transition:.15s;min-width:170px}
.lc-trigger:hover{border-color:var(--primary-light)}
.lc-trigger .ic{width:15px;height:15px;flex:none;color:var(--muted)}
.lc-trigger span{flex:1;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-chev{width:14px;height:14px;flex:none;color:var(--muted);transition:transform .15s}
.lc-select.open .lc-trigger{border-color:var(--primary-light)}
.lc-select.open .lc-chev{transform:rotate(180deg)}
.lc-clear{width:30px;height:30px;border-radius:9px;border:1px solid var(--border);background:var(--surface);
  color:var(--muted);cursor:pointer;font-size:16px;line-height:1;display:grid;place-items:center;flex:none;transition:.15s}
.lc-clear:hover{color:var(--text);border-color:var(--primary-light)}

.lc-panel{position:absolute;top:calc(100% + 6px);inset-inline-start:0;width:300px;max-width:88vw;
  background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow-lg);
  z-index:20;display:none;overflow:hidden}
.lc-select.open .lc-panel{display:block}
.lc-panel-search{display:flex;align-items:center;gap:7px;padding:10px 13px;border-bottom:1px solid var(--border)}
.lc-panel-search .ic{width:15px;height:15px;flex:none;color:var(--muted)}
.lc-panel-search input{border:none;background:none;outline:none;font:inherit;font-size:13px;color:var(--text);flex:1;min-width:0}
.lc-panel-search input::placeholder{color:var(--muted)}
.lc-panel-list{max-height:320px;overflow-y:auto;padding:6px}
.lc-item{display:flex;align-items:center;gap:7px;width:100%;padding:8px 10px;border:none;background:none;
  border-radius:8px;cursor:pointer;font-size:13px;font-weight:700;color:var(--text);text-align:start}
.lc-item:hover{background:var(--surface-2)}
.lc-item.active{background:var(--grad);color:#fff}
.lc-item .ic{width:14px;height:14px;flex:none;color:var(--muted)}
.lc-item.active .ic{color:#fff}
.lc-item span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-item .n{flex:none;min-width:18px;text-align:center;background:var(--surface-2);color:var(--text);
  border-radius:999px;padding:0 6px;font-size:11px;font-weight:800}
.lc-item.active .n{background:rgba(255,255,255,.22);color:#fff}
.lc-sec{padding:8px 10px 4px;font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.lc-empty{padding:16px;text-align:center;font-size:12.5px;color:var(--muted)}

.live-wrap{display:grid;grid-template-columns:340px 1fr;gap:14px;height:calc(100vh - 210px);min-height:440px;max-height:660px}
.live-side{display:flex;flex-direction:column;gap:12px;min-height:0}
.live-filters{display:flex;flex-wrap:wrap;gap:7px}
.lf{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);font-size:12.5px;font-weight:700;color:var(--muted);transition:.15s}
.lf:hover{border-color:var(--primary-light)}
.lf.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:var(--shadow)}
.lf .n{min-width:20px;text-align:center;background:var(--surface-2);color:var(--text);border-radius:999px;padding:0 6px;font-size:11px;font-weight:800}
.lf.active .n{background:rgba(255,255,255,.22);color:#fff}
.lf .d{width:8px;height:8px;border-radius:50%}
.lf.f-unassigned .d{background:#b8790a}
.lf.f-ongoing .d{background:#1f9d75}
.lf.f-cancelled .d{background:#c23a63}
.lf.f-completed .d{background:#7c4dbd}
.lf.f-unpaid .d{background:#d98a1f}
.lf.f-mine .d{background:#3b82f6}
.live-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-inline-end:2px}
.lt{border:1px solid var(--border);border-radius:13px;background:var(--surface);padding:11px 13px;cursor:pointer;transition:.15s}
.lt:hover{border-color:var(--primary-light);transform:translateX(-2px)}
.lt.sel{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-light) inset}
.lt-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.lt-ref{font-weight:800;font-size:12.5px;color:var(--text)}
.lt-body{font-size:12px;color:var(--muted);line-height:1.7}
.lt-body .addr{display:flex;align-items:center;gap:6px}
.lt-body .pin{width:7px;height:7px;border-radius:50%;flex:none}
.lt-body .pin.a{background:#7c4dbd}
.lt-body .pin.b{background:#2b1a42}

/* عدّاد الوصول — رحلة جارية (started): حلقة خضراء نابضة + عدّاد حي
   لوقت انتهائها المتوقّع، يتحوّل أحمر نابضاً عند الاقتراب/التأخّر */
.lt.eta-ring{border-color:var(--good);position:relative}
.lt.eta-ring::before{content:"";position:absolute;inset:-1px;border-radius:14px;border:1.5px solid var(--good);opacity:.55;animation:etaPulse 1.8s ease-out infinite;pointer-events:none}
.lt.eta-ring.sel{border-color:var(--good)}
.lt-countdown{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);font-size:11.5px;font-weight:800;color:var(--good)}
.lt-countdown .cd-ic{font-size:13px}
.lt.eta-urgent{border-color:var(--crit)}
.lt.eta-urgent::before{border-color:var(--crit)}
.lt.eta-urgent .lt-countdown,.lt.eta-over .lt-countdown{color:var(--crit)}
@keyframes etaPulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.03);opacity:0}100%{opacity:0}}

.live-empty{text-align:center;color:var(--faint);padding:40px 12px;font-size:13px}

.live-main{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:var(--surface-2)}
#liveMap{position:absolute;inset:0}
.live-detail{position:absolute;inset-inline-end:12px;top:12px;bottom:12px;width:320px;max-width:calc(100% - 24px);
  background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;overflow:hidden;transform:translateX(-14px);opacity:0;pointer-events:none;transition:.22s}
.live-detail.show{transform:translateX(0);opacity:1;pointer-events:auto}
.ld-head{padding:13px 15px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:space-between}
.ld-head b{font-size:14px;font-weight:800}
.ld-close{background:rgba(255,255,255,.2);border:none;color:#fff;width:26px;height:26px;border-radius:8px;cursor:pointer;font-size:15px;line-height:1}
.ld-body{padding:14px 15px;overflow-y:auto;display:flex;flex-direction:column;gap:13px;font-size:12.5px}
.ld-sec .t{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.1em;font-weight:800;margin-bottom:6px}
.ld-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0;color:var(--muted)}
.ld-row b{color:var(--text);font-weight:700;text-align:end}
.ld-person{display:flex;align-items:center;gap:10px}
.ld-ava{width:38px;height:38px;border-radius:11px;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:800;flex:none}
.ld-person .nm{font-weight:800;color:var(--text)}
.ld-person .sub{font-size:11.5px;color:var(--muted)}
.ld-ab{display:flex;flex-direction:column;gap:8px}
.ld-ab .row{display:flex;gap:9px;align-items:flex-start}
.ld-ab .dot{width:10px;height:10px;border-radius:50%;margin-top:3px;flex:none}
.ld-ab .dot.a{background:#7c4dbd}
.ld-ab .dot.b{background:#2b1a42}
.ld-time{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted)}
.ld-time b{color:var(--text)}

/* علامات الخريطة */
.map-pin{width:16px;height:16px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.4);cursor:pointer}
.map-pin.s-unassigned{background:#e0a52a}
.map-pin.s-ongoing{background:#22b981}
.map-pin.s-cancelled{background:#e0557f}
.map-pin.s-completed{background:#8e5bc4}
.map-pin.s-ongoing{background:#7c4dbd}
/* سيارة من الأعلى — نفس هيكل تطبيق العميل حرفياً (car_art.dart)، لا شارة دائرية.
   .map-car يحمل موضعها (المؤقّت المشترك في live.js:_startMotion ينزلق بها
   تدريجياً نحو كل نبضة GPS حقيقية، بنفس صيغة سرعة تطبيق العميل؛ الانتقال
   القصير هنا يُنعّم فقط اهتزاز كل خطوة 70مﺱ لا يستبدل الانزلاق الفعلي)،
   و.map-car-rot يدور وحده باتجاهها الفعلي دون تعارض مع تحويل الموضع. */
/* أكبر من مقاس تطبيق الكابتن (17.92×32) عمداً — هنا خريطة عامّة بعشرات
   السيارات معاً، لا رحلة واحدة مكبَّرة كما في التطبيق، فتحتاج علامة أوضح
   للعين ولضغطة الفأرة (نفس النسبة 0.56 محفوظة كي لا يتشوّه رسم السيارة). */
.map-car{width:28px;height:50px;cursor:pointer;transition:transform .08s linear}
.map-car-rot{width:100%;height:100%;transition:transform .12s linear;transform-origin:50% 50%}
.map-car-rot svg{display:block;width:100%;height:100%}
/* دبوس العميل وهو ينتظر الكابتن — نبضة بلون الهوية */
.map-wait{position:relative;width:38px;height:38px;display:grid;place-items:center;cursor:pointer}
.map-wait .ring{position:absolute;width:20px;height:20px;border-radius:50%;background:rgba(124,77,189,.35);animation:waitPulse 1.8s ease-out infinite}
.map-wait .dot{position:relative;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#8e5bc4,#7c4dbd);
  border:2.5px solid #fff;box-shadow:0 2px 7px rgba(60,20,90,.5);display:grid;place-items:center}
.map-wait .dot svg{width:13px;height:13px}
@keyframes waitPulse{0%{transform:scale(.7);opacity:.85}100%{transform:scale(2.4);opacity:0}}
/* نقطة بداية الرحلة (بعد ركوب العميل) */
.map-start{width:16px;height:16px;border-radius:50%;background:#7c4dbd;border:3px solid #fff;box-shadow:0 2px 7px rgba(60,20,90,.5)}
/* دبوس الوجهة */
.map-dest{width:26px;height:26px;border-radius:50% 50% 50% 2px;transform:rotate(45deg);background:#2b1a42;
  border:2.5px solid #fff;display:grid;place-items:center;box-shadow:0 3px 8px rgba(0,0,0,.45)}
.map-dest b{transform:rotate(-45deg);color:#fff;font-size:10px;line-height:1}
.live-toast{position:absolute;inset-inline-start:12px;bottom:12px;z-index:5;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;padding:7px 12px;font-size:12px;color:var(--muted);box-shadow:var(--shadow);display:flex;align-items:center;gap:8px}
.live-toast .live-dot{width:8px;height:8px;border-radius:50%;background:#2fd07a}

@media (max-width:1024px){
  .live-wrap{grid-template-columns:1fr;height:auto}
  .live-main{height:60vh}
  .live-detail{position:fixed;inset:auto 12px 12px 12px;top:auto;width:auto}
}

/* لوحة التفاصيل الغنية — العميل/السائق/المركبة/المدد/الخط الزمني */
.ld-pcard{display:flex;align-items:center;gap:11px;position:relative;padding:11px 12px;
  border:1px solid var(--border);border-radius:13px;background:var(--surface-2)}
.ld-avatar{width:54px;height:54px;border-radius:50%;flex:none;position:relative;overflow:visible;
  background:var(--surface-2);box-shadow:0 4px 12px -4px rgba(60,20,90,.45)}
.ld-avatar svg,.ld-avatar img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.ld-avatar-empty{background:var(--surface);border:1.5px dashed var(--border);box-shadow:none;display:grid;place-items:center}
.ld-avatar-empty svg{width:30px;height:30px}
.av-rate{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff;
  color:var(--warn);font-size:10px;font-weight:800;padding:1px 6px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.22)}
.ld-pi{flex:1;min-width:0}
.ld-pi .nm{font-weight:800;color:var(--text);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld-pi .sub{font-size:12px;color:var(--muted);direction:ltr;text-align:start}
.ld-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.pchip{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:2px 9px;font-size:10.5px;color:var(--muted);font-weight:700}
.ld-role{position:absolute;top:9px;inset-inline-end:12px;font-size:10px;color:var(--faint);font-weight:800;letter-spacing:.04em}

.ld-vehicle{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.vh-plate{font-family:var(--fdisplay),sans-serif;font-weight:800;letter-spacing:.05em;background:var(--grad);color:#fff;
  padding:7px 13px;border-radius:9px;font-size:14px;white-space:nowrap;box-shadow:0 3px 10px -4px rgba(124,77,189,.6)}
.vh-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.vh-info b{font-size:13px;color:var(--text)}
.vh-info span{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.vh-color{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.18);display:inline-block;flex:none}

.ld-estimate{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding:10px 12px;border-radius:11px;
  background:linear-gradient(135deg,rgba(142,91,196,.10),rgba(185,143,217,.08));border:1px solid var(--border-soft)}
.ld-estimate span{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:4px}
.ld-estimate b{color:var(--primary);font-size:15px;font-weight:800}
.ld-pay{margin-top:8px;font-size:12px;color:var(--muted)}
.ld-pay b{color:var(--text);font-weight:700}

.ld-durations{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dm{background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:9px 6px;text-align:center}
.dm span{display:block;font-size:10px;color:var(--faint);font-weight:700;margin-bottom:4px}
.dm b{font-size:13px;color:var(--text);font-weight:800}

.ld-timeline{list-style:none;margin:0;padding:0}
.ld-timeline li{display:flex;gap:11px;align-items:flex-start;position:relative;padding-bottom:13px}
.ld-timeline li:last-child{padding-bottom:0}
.ld-timeline li:not(:last-child)::before{content:'';position:absolute;inset-inline-start:11px;top:23px;bottom:-1px;width:2px;background:var(--border)}
.tl-ic{width:23px;height:23px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:10.5px;flex:none;z-index:1;box-shadow:0 2px 6px -1px rgba(124,77,189,.5)}
.ld-timeline b{font-size:12.5px;color:var(--text);font-weight:700;display:block;line-height:1.5}
.tl-time{font-size:11.5px;color:var(--muted)}

/* ============================================================
   الموارد البشرية — ويزارد Employee 360
   ============================================================ */
.pbar{height:7px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:999px;overflow:hidden;min-width:90px;display:inline-block;width:100%}
.pbar i{display:block;height:100%;background:var(--grad);border-radius:999px}

.hr-wrap{display:flex;flex-direction:column;gap:16px}

/* البطاقة الترويسية */
.hr-hero{display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:var(--radius);
  background:linear-gradient(120deg,var(--sidebar-bg),var(--sidebar-bg-2));color:#fff;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.hr-hero::after{content:"";position:absolute;inset-inline-end:-40px;top:-40px;width:200px;height:200px;
  background:radial-gradient(circle,rgba(201,164,230,.25),transparent 70%);pointer-events:none}
.hr-hero-badge{width:52px;height:52px;border-radius:15px;background:var(--grad);display:grid;place-items:center;flex:0 0 auto}
.hr-hero-badge svg{width:26px;height:26px;color:#fff}
.hr-hero-main{flex:1;min-width:0}
.hr-hero-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hr-hero-top h1{font-family:var(--fdisplay);font-size:20px;margin:0;font-weight:800}
.hr-hero-top .ref{font-size:12px;color:var(--sidebar-text-dim);font-weight:800}
.hr-steps-count{font-size:11px;color:#e9d9fb;background:rgba(201,164,230,.16);border:1px solid rgba(201,164,230,.3);padding:3px 10px;border-radius:999px;font-weight:800}
.hr-hero-main p{margin:6px 0 0;font-size:12.5px;color:var(--sidebar-text);line-height:1.7}
.hr-hero-main p b{color:#e9d9fb}
.hr-hero-ring{flex:0 0 auto}

/* بطاقات الحالة */
.hr-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.hr-cards{grid-template-columns:repeat(2,1fr)}}
.hr-card{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.hc-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);flex:0 0 auto}
.hc-ic svg{width:18px;height:18px;color:var(--primary)}
.hr-card.p .hc-ic{background:linear-gradient(135deg,#8e5bc422,#b98fd922)}
.hr-card.g .hc-ic svg{color:var(--good)} .hr-card.d .hc-ic svg{color:var(--warn)} .hr-card.k .hc-ic svg{color:var(--accent)}
.hc-b{display:flex;flex-direction:column;min-width:0}
.hc-l{font-size:11px;color:var(--faint);font-weight:800}
.hc-v{font-family:var(--fdisplay);font-size:20px;font-weight:800;line-height:1.2}
.hc-s{font-size:10.5px;color:var(--muted);font-weight:700}

/* شريط الناقص */
.hr-missing-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--crit-bg);border:1px solid var(--crit-line);border-radius:14px;padding:13px 18px;color:var(--crit);font-size:13px;font-weight:700}
.hr-missing-bar .geo{color:var(--crit);opacity:.85;margin-top:2px}
.hr-ok{background:var(--good-bg);border:1px solid var(--good-line);color:var(--good);border-radius:14px;padding:12px 18px;font-weight:800;font-size:13px}

/* المنطقة الرئيسية: محتوى + شريط الخطوات */
.hr-main{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
@media(max-width:960px){.hr-main{grid-template-columns:1fr}}
.hr-step-content{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow);min-height:340px}
.hr-step-title{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border-soft)}
.hr-step-ic{width:44px;height:44px;border-radius:13px;background:var(--grad);display:grid;place-items:center;flex:0 0 auto}
.hr-step-ic svg{width:22px;height:22px;color:#fff}
.hr-step-title h2{font-family:var(--fdisplay);font-size:19px;margin:0;font-weight:800}
.hr-step-title span{font-size:12.5px;color:var(--faint);font-weight:600}

/* الشريط الجانبي للخطوات */
.hr-steps{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow);position:sticky;top:80px;display:flex;flex-direction:column;gap:4px}
.hr-steps-head{display:flex;align-items:center;justify-content:space-between;padding:6px 10px 12px;font-size:11px;color:var(--faint);font-weight:800;letter-spacing:.04em;border-bottom:1px solid var(--border-soft);margin-bottom:6px}
.hr-steps-head b{font-family:var(--fdisplay);font-size:15px;color:var(--primary)}
.hr-step-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;border:1px solid transparent;background:none;text-align:right;width:100%;transition:.14s}
.hr-step-item:hover{background:var(--surface-2)}
.hr-step-item.active{background:var(--surface-2);border-color:var(--border)}
.hs-ic{width:30px;height:30px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;flex:0 0 auto}
.hs-ic svg{width:15px;height:15px;color:var(--muted)}
.hr-step-item.done .hs-ic{background:var(--good-bg)} .hr-step-item.done .hs-ic svg{color:var(--good)}
.hr-step-item.current .hs-ic{background:var(--grad)} .hr-step-item.current .hs-ic svg{color:#fff}
.hs-body{flex:1;min-width:0;display:flex;flex-direction:column}
.hs-body b{font-size:12.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-body b em{color:var(--faint);font-weight:600;font-style:normal;font-size:11px}
.hs-body span{font-size:10.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-dot{width:18px;height:18px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;
  background:var(--surface-2);border:2px solid var(--crit-line)}
.hs-dot.done{background:var(--good);border-color:var(--good)}
.hs-dot.current{background:var(--primary);border-color:var(--primary)}
.hs-dot.partial{background:var(--warn);border-color:var(--warn)}
.hs-dot.todo{background:transparent;border-color:var(--crit-line)}

/* النماذج */
.hr-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.hr-form{grid-template-columns:1fr}}
.hr-field{display:flex;flex-direction:column;gap:6px;grid-column:1/-1}
.hr-field.half{grid-column:auto}
.fld-lbl{font-size:12.5px;font-weight:800;color:var(--text)}
.fld-lbl .req{color:var(--crit);margin-inline-start:3px}
.fld-hint{font-size:10.5px;color:var(--faint);font-weight:600;margin-top:2px}
.hr-input{width:100%}
.hr-field-head{grid-column:1/-1;font-family:var(--fdisplay);font-size:13px;font-weight:800;color:var(--primary);
  padding:10px 0 4px;border-top:1px dashed var(--border);margin-top:4px}
.hr-check{grid-column:1/-1;display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--border);
  border-radius:12px;background:var(--surface-2);cursor:pointer;font-size:13px;font-weight:700}
.hr-check.on{border-color:var(--primary);background:linear-gradient(135deg,#8e5bc41a,#b98fd91a)}
.hr-check input{display:none}
.hr-check-box{width:20px;height:20px;border-radius:6px;border:2px solid var(--border);display:grid;place-items:center;
  flex:0 0 auto;color:#fff;font-size:13px;font-weight:800}
.hr-check.on .hr-check-box{background:var(--primary);border-color:var(--primary)}

/* الوثائق */
.hr-hint-box{background:linear-gradient(135deg,#8e5bc414,#b98fd914);border:1px solid var(--border);border-radius:12px;
  padding:12px 15px;font-size:12.5px;color:var(--muted);font-weight:600;line-height:1.7;margin-bottom:16px}
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.doc-grid{grid-template-columns:1fr}}
.doc-slot{border:1px solid var(--border);border-radius:13px;padding:14px 16px;background:var(--surface-2);transition:.15s}
.doc-slot.has{border-color:var(--good-line);background:var(--good-bg)}
.doc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.doc-name{font-size:13px;font-weight:800}
.doc-up,.doc-replace{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  padding:8px 14px;border-radius:9px;border:1px dashed var(--primary);color:var(--primary);background:var(--surface)}
.doc-up svg{width:15px;height:15px}
.doc-replace{border-style:solid;border-color:var(--border);color:var(--muted);margin-top:8px;padding:5px 12px;font-size:11px}
.doc-retry{display:inline-flex;align-items:center;gap:6px;margin-top:8px;margin-inline-end:8px;padding:7px 13px;font-size:11.5px;
  font-weight:800;border-radius:9px;border:1px solid var(--primary);background:var(--primary);color:#fff;cursor:pointer}
.doc-retry:hover{filter:brightness(1.06)}
.doc-ai-hint{font-size:10.5px;color:var(--faint);font-weight:700;margin-top:7px}
.doc-done{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.doc-photo-thumb{width:34px;height:34px;border-radius:9px;object-fit:cover;border:1px solid var(--good-line);flex:0 0 auto}
.doc-file-name{font-size:11.5px;color:var(--muted);font-weight:700;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-loading{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--primary);font-weight:700}
.spin{width:15px;height:15px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:hrspin .7s linear infinite}
@keyframes hrspin{to{transform:rotate(360deg)}}

/* شريط التنقّل */
.hr-navbar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);padding:14px 20px;box-shadow:var(--shadow);position:sticky;bottom:12px}
.hr-nav-btns{display:flex;gap:8px;align-items:center}

/* توست */
.hr-toast{position:fixed;inset-block-end:24px;inset-inline-start:50%;transform:translateX(50%) translateY(20px);
  background:var(--sidebar-bg);color:#fff;font-size:13px;font-weight:700;padding:12px 20px;border-radius:12px;
  box-shadow:var(--shadow-lg);opacity:0;transition:.25s;z-index:80;pointer-events:none}
.hr-toast.show{opacity:1;transform:translateX(50%) translateY(0)}

/* ============================================================
   الموارد البشرية — مساحة العمل الموحّدة (تبويبات)
   ============================================================ */
.hrx{display:flex;flex-direction:column;gap:16px}
.linkish{background:none;border:none;color:var(--primary);font:inherit;font-weight:800;font-size:12.5px;cursor:pointer;padding:0}
.linkish:hover{text-decoration:underline}
.btn-primary.sm{padding:9px 15px;font-size:12.5px}

/* الترويسة */
.hrx-hero{display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:var(--radius);
  background:linear-gradient(120deg,var(--sidebar-bg),var(--sidebar-bg-2));color:#fff;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.hrx-hero::after{content:"";position:absolute;inset-inline-end:-50px;top:-50px;width:220px;height:220px;
  background:radial-gradient(circle,rgba(201,164,230,.22),transparent 70%);pointer-events:none}
.hrx-hero-badge{width:50px;height:50px;border-radius:14px;background:var(--grad);display:grid;place-items:center;flex:0 0 auto}
.hrx-hero-badge svg{width:26px;height:26px;color:#fff}
.hrx-hero-main{flex:1;min-width:0}
.hrx-hero-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hrx-hero-top h1{font-family:var(--fdisplay);font-size:21px;margin:0;font-weight:800;color:#fff}
.hrx-hero-tag{font-size:11px;color:#e9d9fb;background:rgba(201,164,230,.16);border:1px solid rgba(201,164,230,.3);padding:3px 10px;border-radius:999px;font-weight:800}
.hrx-hero-main p{margin:6px 0 0;font-size:12.5px;color:var(--sidebar-text,#d9ccec);line-height:1.7}
.hrx-hero-main p b{color:#f0e6fb}
.hrx-hero .btn-primary{flex:0 0 auto}

/* شريط التبويبات */
.hrx-tabs{display:flex;gap:6px;overflow-x:auto;padding:8px;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;box-shadow:var(--shadow);scrollbar-width:thin}
.hrx-tabs::-webkit-scrollbar{height:6px}
.hrx-tabs::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
.hrx-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;border:1px solid transparent;
  background:none;color:var(--muted);font:inherit;font-size:12.5px;font-weight:800;white-space:nowrap;cursor:pointer;transition:.14s;position:relative}
.hrx-tab:hover{background:var(--surface-2);color:var(--text)}
.hrx-tab.active{background:var(--grad);color:#fff;box-shadow:0 4px 12px -4px var(--primary)}
.hrx-tab-ic{display:grid;place-items:center}
.hrx-tab-ic svg{width:15px;height:15px}
.hrx-tab.soon{color:var(--faint)}
.hrx-tab.soon.active{color:#fff}
.hrx-soon-dot{width:6px;height:6px;border-radius:50%;background:var(--warn);flex:0 0 auto}

.hrx-body{min-height:340px}
.hrx-h2{font-family:var(--fdisplay);font-size:15px;margin:0 0 14px;font-weight:800}
.hrx-sub{font-size:11.5px;color:var(--faint);font-weight:600;margin:2px 0 0}
.hrx-note{font-size:12px;color:var(--muted);font-weight:600;margin:10px 2px 0}

/* توزيعات اللوحة */
.hrx-dist{display:flex;flex-direction:column;gap:11px}
.hrx-dist-row{display:grid;grid-template-columns:120px 1fr 34px;align-items:center;gap:10px}
.hrx-dist-lbl{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrx-dist-n{font-family:var(--fdisplay);font-size:13px;font-weight:800;text-align:left;color:var(--text)}
.hrx-dist .pbar i.b0{background:var(--crit)} .hrx-dist .pbar i.b1{background:var(--warn)}
.hrx-dist .pbar i.b2{background:var(--accent)} .hrx-dist .pbar i.b3{background:var(--good)}
.hrx-ai{display:flex;align-items:center;gap:9px;margin-top:16px;padding:10px 13px;border-radius:11px;
  background:var(--warn-bg);border:1px solid var(--warn);color:var(--warn);font-size:11.5px;font-weight:700}
.hrx-ai.on{background:var(--good-bg);border-color:var(--good-line);color:var(--good)}
.hrx-ai svg{width:16px;height:16px;flex:0 0 auto}
.hrx-recent-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.hrx-recent-head .hrx-h2{margin:0}

/* الحالة الفارغة */
.hrx-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:56px 24px;
  background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius)}
.hrx-empty-ic{width:64px;height:64px;border-radius:18px;background:var(--grad);display:grid;place-items:center}
.hrx-empty-ic svg{width:30px;height:30px;color:#fff}
.hrx-empty h2{font-family:var(--fdisplay);font-size:19px;margin:6px 0 0}
.hrx-empty p{font-size:13px;color:var(--muted);max-width:440px;line-height:1.7;margin:0}
.hrx-empty .btn-primary{margin-top:8px}

/* بطاقات الموظفين */
.emp-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.emp-search{flex:1;min-width:220px;display:flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--border);border-radius:11px;padding:0 13px}
.emp-search svg{width:16px;height:16px;color:var(--faint);flex:0 0 auto}
.emp-search input{flex:1;border:none;background:none;color:var(--text);font:inherit;font-size:13px;padding:11px 0;outline:none}
.emp-chips{display:flex;gap:6px}
.emp-chip{padding:9px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface);
  color:var(--muted);font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:.14s}
.emp-chip:hover{background:var(--surface-2)}
.emp-chip.on{background:var(--grad);color:#fff;border-color:transparent}

.emp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.emp-grid.mini{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.emp-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;
  box-shadow:var(--shadow);cursor:pointer;transition:.16s;display:flex;flex-direction:column;gap:12px}
.emp-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.ec-top{display:flex;align-items:center;gap:12px}
.ec-ring{flex:0 0 auto}
.ec-head{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.ec-avatar{width:40px;height:40px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border);
  display:grid;place-items:center;font-family:var(--fdisplay);font-size:18px;font-weight:800;color:var(--primary);flex:0 0 auto;overflow:hidden}
.ec-avatar img{width:100%;height:100%;object-fit:cover}
.ec-title{min-width:0;display:flex;flex-direction:column}
.ec-title b{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-title span{font-size:11.5px;color:var(--faint);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ec-ref{font-size:11px;color:var(--faint);font-weight:800;letter-spacing:.02em}
.ec-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;padding:12px 0;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.ec-fields>div{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.ec-fields span{font-size:11px;color:var(--faint);font-weight:700}
.ec-fields b{font-size:11.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.ec-bar{display:flex;align-items:center;gap:9px}
.ec-bar>span{font-size:11px;color:var(--faint);font-weight:700;white-space:nowrap}
.ec-bar .pbar{flex:1}
.ec-bar>b{font-family:var(--fdisplay);font-size:12px;font-weight:800;min-width:34px;text-align:left}
.pbar i.good{background:var(--good)} .pbar i.warn{background:var(--warn)} .pbar i.crit{background:var(--crit)}

/* الفريق والصلاحيات */
.team-sec{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow);margin-bottom:16px}
.team-sec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.role-card{border:1px solid var(--border);border-radius:14px;padding:15px 16px;background:var(--surface-2);
  display:flex;flex-direction:column;gap:9px;border-top:3px solid var(--rc,var(--primary))}
.rc-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rc-dot{width:10px;height:10px;border-radius:50%;background:var(--rc,var(--primary));flex:0 0 auto}
.rc-head b{font-size:14px;font-weight:800;flex:1;min-width:0}
.rc-sys{font-size:10px;font-weight:800;color:var(--primary);background:var(--surface);border:1px solid var(--border);padding:2px 7px;border-radius:999px}
.rc-count{font-size:11px;font-weight:800;color:var(--faint)}
.rc-desc{font-size:12px;color:var(--muted);line-height:1.6;margin:0;min-height:34px}
.rc-perms{display:flex;flex-wrap:wrap;gap:5px}
.role-chip{font-size:10.5px;font-weight:700;color:var(--muted);background:var(--surface);border:1px solid var(--border);padding:3px 9px;border-radius:8px}
.role-chip.more{color:var(--primary);font-weight:800}
.rc-actions{display:flex;gap:7px;margin-top:4px}
.rc-locked{font-size:11.5px;font-weight:800;color:var(--faint)}

.team-add{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;padding:14px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:12px}
.team-add .hr-input{flex:1;min-width:150px;margin:0}
.team-add .btn-primary{flex:0 0 auto}
.team-list{display:flex;flex-direction:column;gap:9px}
.tm-row{display:grid;grid-template-columns:1fr auto 180px auto;align-items:center;gap:12px;padding:12px 14px;
  border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.tm-who{display:flex;align-items:center;gap:11px;min-width:0}
.tm-avatar{width:38px;height:38px;border-radius:11px;background:var(--rc,#7b8794);color:#fff;display:grid;place-items:center;
  font-family:var(--fdisplay);font-size:16px;font-weight:800;flex:0 0 auto}
.tm-id{min-width:0;display:flex;flex-direction:column}
.tm-id b{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-id span{font-size:11px;color:var(--faint);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-permn{font-size:11.5px;font-weight:800;color:var(--faint)}
.hr-input.sm{padding:8px 10px;font-size:12px}
@media(max-width:760px){.tm-row{grid-template-columns:1fr auto;gap:8px}.tm-perms,.tm-row select{grid-column:1/-1}}

/* نافذة الدور + مصفوفة الصلاحيات */
.hr-modal-ov{position:fixed;inset:0;background:rgba(20,10,32,.55);backdrop-filter:blur(3px);z-index:120;
  display:grid;place-items:center;padding:20px;animation:hrfade .18s ease}
@keyframes hrfade{from{opacity:0}to{opacity:1}}
.hr-modal{width:min(680px,100%);max-height:90vh;overflow:auto;background:var(--surface);border:1px solid var(--border);
  border-radius:18px;box-shadow:var(--shadow-lg)}
.hr-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border-soft);position:sticky;top:0;background:var(--surface);z-index:1}
.hr-modal-head h3{font-family:var(--fdisplay);font-size:16px;margin:0;font-weight:800}
.hr-modal-x{width:32px;height:32px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);cursor:pointer;font-size:14px;font-weight:800}
.hr-modal-x:hover{background:var(--crit-bg);color:var(--crit)}
.hr-modal-body{padding:20px 22px}
.hr-input.color{padding:4px;height:42px;cursor:pointer}
.perm-matrix-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 12px;padding-top:16px;border-top:1px dashed var(--border)}
.perm-matrix-head b{font-family:var(--fdisplay);font-size:13.5px;font-weight:800}
.perm-matrix{display:flex;flex-direction:column;gap:14px}
.perm-group-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.perm-group-head b{font-size:12px;font-weight:800;color:var(--primary)}
.perm-items{display:grid;grid-template-columns:1fr 1fr;gap:7px}
@media(max-width:560px){.perm-items{grid-template-columns:1fr}}
.perm-item{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface-2);cursor:pointer;font-size:12.5px;font-weight:700;transition:.12s}
.perm-item.on{border-color:var(--primary);background:linear-gradient(135deg,#8e5bc41a,#b98fd91a)}
.perm-item input{display:none}
.perm-box{width:19px;height:19px;border-radius:6px;border:2px solid var(--border);display:grid;place-items:center;
  color:#fff;font-size:12px;font-weight:800;flex:0 0 auto;background:transparent}
.perm-item.on .perm-box{background:var(--primary);border-color:var(--primary)}
.perm-item:not(.on) .perm-box{color:transparent}
.hr-modal-foot{display:flex;justify-content:flex-end;gap:9px;margin-top:22px;padding-top:16px;border-top:1px solid var(--border-soft)}

/* بطاقة «قيد الإعداد» */
.hrx-soon-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:56px 28px;
  background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius)}
.hrx-soon-ic{width:66px;height:66px;border-radius:19px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center}
.hrx-soon-ic svg{width:30px;height:30px;color:var(--primary)}
.hrx-soon-card h2{font-family:var(--fdisplay);font-size:20px;margin:4px 0 0}
.hrx-soon-desc{font-size:13px;color:var(--muted);max-width:460px;line-height:1.7;margin:0}
.hrx-soon-badge{font-size:11px;font-weight:800;color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn);padding:4px 13px;border-radius:999px}
.hrx-soon-note{font-size:12px;color:var(--faint);max-width:480px;line-height:1.7;margin:2px 0 0;font-weight:600}

/* ---------- المالية (FINANCE) ---------- */
.head-tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.data-tbl tbody tr.row-head{background:var(--surface-2)}
.data-tbl tbody tr.row-head td{border-top:1px solid var(--border)}
.num.neg{color:var(--crit)}
.fin-in{background:var(--surface);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:6px 9px;font-family:inherit;font-size:13px;font-weight:600}
.fin-in:focus{outline:2px solid var(--primary);outline-offset:1px}
.fin-in[type=checkbox]{width:18px;height:18px;accent-color:var(--primary)}
.fin-hist td{background:var(--surface-2)}
.sub-tbl{width:100%;border-collapse:collapse;font-size:12.5px;margin:2px 0}
.sub-tbl th{text-align:start;color:var(--faint);font-weight:700;padding:6px 9px;border-bottom:1px solid var(--border)}
.sub-tbl td{padding:6px 9px;border-bottom:1px solid var(--border);color:var(--text)}
code{font-family:var(--fmono,ui-monospace,monospace);font-size:12px;background:var(--surface-2);
  padding:1px 6px;border-radius:6px;color:var(--muted)}

/* ---------- الرحلات — ترقيم الصفحات ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:16px;padding:14px 20px;
  border-top:1px solid var(--border-soft)}
.pg-btn{background:var(--surface);border:1px solid var(--border);color:var(--text);font-weight:700;
  font-size:12.5px;padding:7px 16px;border-radius:9px;cursor:pointer;font-family:inherit}
.pg-btn:hover:not(:disabled){background:var(--surface-2);border-color:var(--primary)}
.pg-btn:disabled{opacity:.4;cursor:not-allowed}
.pg-info{font-size:12px;color:var(--faint);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- درج تفاصيل الرحلة ---------- */
.fraud-banner{background:var(--crit-bg);border:1px solid var(--crit-line);color:var(--crit);
  border-radius:12px;padding:12px 14px;font-size:12.5px;font-weight:700;line-height:1.7;margin-bottom:14px}

.trust-meter{height:9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden}
.trust-fill{height:100%;border-radius:999px;transition:width .4s ease}
.trust-fill.good{background:var(--good)}
.trust-fill.warn{background:var(--warn)}
.trust-fill.crit{background:var(--crit)}
.trust-score-num{margin-top:7px;font-family:var(--fdisplay);font-size:18px;font-weight:800}
.trust-score-num.good{color:var(--good)}
.trust-score-num.warn{color:var(--warn)}
.trust-score-num.crit{color:var(--crit)}
.trust-reasons{margin:9px 0 0;padding-inline-start:18px;font-size:12.5px;color:var(--muted);line-height:1.9}
.trust-clean{margin:9px 0 0;font-size:12.5px;color:var(--good);font-weight:700}

.td-map{position:relative;height:260px;border-radius:12px;overflow:hidden;
  border:1px solid var(--border);margin-top:12px;background:var(--surface-2)}
.td-map-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}

.mini-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.mini-tbl th{text-align:start;color:var(--faint);font-weight:700;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--border)}
.mini-tbl td{padding:8px 10px;border-bottom:1px solid var(--border-soft);color:var(--text)}
.mini-tbl tr.row-won{background:var(--good-bg)}
.mini-tbl tr:last-child td{border-bottom:none}

.doc-thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;cursor:pointer;
  border:1px solid var(--border);transition:transform .15s,border-color .15s}
.doc-thumb:hover{transform:scale(1.12);border-color:var(--primary)}

/* ---------- مركز قيادة الكابتن ---------- */
.chk{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--faint);cursor:pointer;user-select:none}
.chk input{accent-color:var(--primary);width:15px;height:15px;cursor:pointer}

.drawer-actions{padding:12px 18px;border-bottom:1px solid var(--border-soft)}
.muted-note{font-size:11px;color:var(--faint);margin:9px 0 0;line-height:1.7}
.cap-rtabs{padding:2px 18px 0;flex-wrap:wrap}

.bars{display:flex;flex-direction:column;gap:6px}
.bar-row{display:flex;align-items:center;gap:10px;font-size:12px}
.bar-label{width:34px;color:var(--faint);font-weight:700;flex-shrink:0}
.bar-track{flex:1;height:9px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.bar-fill{display:block;height:100%;border-radius:6px;background:var(--grad)}
.bar-val{width:40px;text-align:end;color:var(--text);font-weight:700;flex-shrink:0}

.mode-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 14px;
  padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.mode-lbl{font-size:12.5px;font-weight:800;color:var(--text)}
.mode-hint{font-size:11px;color:var(--faint);margin-inline-start:6px}

/* ── الرحلات المتسلسلة — خريطة توضيحية تفاعلية + مفتاح تفعيل ── */
.chain-map-panel{margin-bottom:18px}
.chain-map-stage{background:var(--surface-2);border-bottom:1px solid var(--border);position:relative}
.chain-map-stage #chainMapGL{width:100%;height:280px}
.chain-map-legend{display:flex;flex-wrap:wrap;gap:14px;padding:10px 18px;
  border-bottom:1px solid var(--border);font-size:11.5px;color:var(--muted);font-weight:700}
.chain-map-legend .chain-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-inline-end:5px}
.chain-map-legend .chain-dot-ring{background:transparent;border:1.5px dashed #8e5bc4;width:10px;height:10px}

.chain-switch{position:relative;width:40px;height:23px;background:var(--border);border-radius:999px;
  cursor:pointer;transition:background .15s;flex:none;display:inline-block}
.chain-switch.on{background:var(--primary)}
/* right فيزيائي هنا لا inset-inline-end المنطقي — اللوحة كلها RTL ثابت (لا
   تبديل لغة حيّ)، وخلطه سابقاً مع transform:translateX الفيزيائي كان يدفع
   الكرة خارج المسار بدل عبوره (bug فعلي: العنصر يظهر مشوّهاً/غير شغّال). */
.chain-switch .knob{position:absolute;top:2.5px;right:2.5px;width:18px;height:18px;
  background:#fff;border-radius:50%;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.chain-switch.on .knob{transform:translateX(-17px)}

/* بازل ترتيب أولوية عوامل التوزيع (وضع عرض الطلب على الكباتن) */
.piece-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.piece{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1.5px solid var(--border);
  border-radius:12px;padding:10px 12px;cursor:grab;user-select:none;transition:border-color .15s,opacity .15s}
.piece:hover{border-color:var(--primary-light)}
.piece.dragging{opacity:.45}
.piece.is-off{background:transparent;border-style:dashed}
.piece.is-off .info .name{color:var(--faint)}
.piece .handle{color:var(--faint);font-size:13px;letter-spacing:1px;flex:0 0 auto;line-height:1}
.piece .rank-badge{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-weight:800;font-size:12px;color:#fff;background:var(--primary)}
.piece.is-off .rank-badge{background:var(--border);color:var(--faint)}
.piece .info{flex:1 1 auto;min-width:0}
.piece .info .name{font-size:13px;font-weight:700;color:var(--text)}
.piece .info .desc{font-size:11px;color:var(--muted);margin-top:1px}
.piece .pct{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:800;font-size:13px;color:var(--text)}
.piece.is-off .pct{color:var(--faint);font-weight:700;font-size:11px}
.piece .arrows{display:flex;flex-direction:column;gap:2px;flex:0 0 auto}
.piece .arrows button{font:inherit;width:20px;height:16px;border:1px solid var(--border);background:var(--surface);
  color:var(--muted);border-radius:4px;cursor:pointer;font-size:9px;line-height:1;display:grid;place-items:center}
.piece .arrows button:hover{color:var(--primary);border-color:var(--primary)}
.piece .arrows button:disabled{opacity:.3;cursor:default}
.mini-switch{position:relative;width:30px;height:18px;background:var(--border);border-radius:999px;
  border:none;cursor:pointer;flex:0 0 auto;transition:background .15s}
.mini-switch.on{background:var(--good)}
.mini-switch .knob{position:absolute;top:2px;right:2px;width:14px;height:14px;background:#fff;border-radius:50%;
  transition:transform .15s}
.mini-switch.on .knob{transform:translateX(-12px)}

/* مراجعة طلب التفعيل — بطاقات وثائق كبيرة قابلة للتكبير (لا صفّ جدول
   بمصغّرة 40×40 كما كان) + صندوق نتيجة تحقّق Claude لكل وثيقة. تُعيد
   استخدام ألوان ومكوّنات اللوحة القائمة (mod-card/quote/tag) عمداً —
   إضافة بصرية محصورة، لا نظام تصميم موازٍ. */
.doc-review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:22px}
.doc-review-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.doc-preview{width:100%;aspect-ratio:16/10;object-fit:cover;cursor:pointer;display:block;
  border-bottom:1px solid var(--border-soft);transition:opacity .15s}
.doc-preview:hover{opacity:.9}
.doc-preview-empty{width:100%;aspect-ratio:16/10;border-radius:0;border-bottom:1px dashed var(--border);
  background:var(--surface-2);display:flex;align-items:center;justify-content:center;
  color:var(--faint);font-size:12px;font-weight:700;text-align:center;padding:10px}
.doc-review-body{padding:14px 16px;display:flex;flex-direction:column;gap:9px;flex:1}
.doc-review-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.doc-review-title{font-family:var(--fdisplay);font-weight:800;font-size:13.5px;margin-bottom:3px}
.doc-compare{margin-top:5px;display:flex;flex-direction:column;gap:2px;font-size:11px}
.doc-compare-row.mismatch{color:var(--crit);font-weight:700}
.doc-compare-row .vs{color:var(--faint);font-weight:400}
.quote.good{border-inline-start-color:var(--good)}
.quote.warn{border-inline-start-color:var(--warn)}
.quote-head{display:flex;align-items:center;gap:7px}
.quote-desc{margin-top:3px;color:var(--muted)}
.quote-ic{width:15px;height:15px;flex:0 0 auto}
.quote-ic.g{color:var(--good)}
.quote-ic.w{color:var(--warn)}
.quote-ic.m{color:var(--faint)}
.section-ic{width:16px;height:16px;vertical-align:-3px;margin-inline-end:7px;color:var(--primary)}
.btn-ic{width:13px;height:13px;vertical-align:-2px;margin-inline-end:4px}

/* مفاتيح مدى وصول الطلب وتكلفته (وضع عرض الطلب على الكباتن).
   شبكة لا صفّ فلاتر: كل مفتاح هنا يحتاج سطر شرح تحته — هذه إعدادات تُغيّر
   من يصله الطلب وكم يكلّفنا، فالتخمين فيها مكلف. */
.reach-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:10px;max-width:1080px}
.reach-cell{display:flex;flex-direction:column;gap:6px;background:var(--surface-2);
  border:1.5px solid var(--border);border-radius:12px;padding:11px 13px}
.reach-cell .reach-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.reach-cell .reach-head b{font-size:13px;font-weight:700;color:var(--text)}
.reach-cell .reach-desc{font-size:11.5px;line-height:1.65;color:var(--muted)}
.reach-cell .reach-desc b{color:var(--text);font-weight:700}

/* صفّ طلب موافقة وصلنا إليه من شاشة أخرى (زرّ «عرض طلب الموافقة» في صفّ حملة).
   الوميض يلفت النظر إليه لحظة الوصول ثم يهدأ إلى إطار ثابت خفيف، فلا يضيع
   الطلب المقصود بين بقية الصفوف. يُحترم تفضيل تقليل الحركة. */
tr.ap-focus > td{background:var(--warn-bg);}
tr.ap-focus > td:first-child{box-shadow:inset 3px 0 0 var(--warn);}
tr.ap-focus{animation:apFocusPulse 1.6s ease-out 2;}
@keyframes apFocusPulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ---------- مراقبة أسعار المنافسين ---------- */
.pw-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-inline-end:6px;vertical-align:middle}
.pw-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:16px}
.pw-card{padding:15px 16px;margin-bottom:0}
.pw-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.pw-card-price{font-family:var(--fdisplay);font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
.pw-card-sub{font-size:12px;color:var(--muted);margin-top:4px}
.pw-card-age{font-size:11px;color:var(--faint);font-weight:700;margin-top:8px}
.pw-card-age.warn{color:var(--warn)}
.pw-card-note{font-size:11.5px;color:var(--muted);margin-top:6px;font-style:italic}
.pw-card-fail{font-size:11px;color:var(--crit);margin-top:8px;padding-top:8px;border-top:1px solid var(--border-soft)}
.pw-hist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.pw-hist-grid .panel{margin-bottom:0}
.pw-geo-results{max-height:150px;overflow-y:auto}
.pw-geo-item{padding:7px 10px;font-size:12.5px;border-bottom:1px solid var(--border-soft);cursor:pointer}
.pw-geo-item:hover{background:var(--surface-2)}
.pw-geo-item:last-child{border-bottom:none}
@media (prefers-reduced-motion: reduce){tr.ap-focus{animation:none}}

/* ============================================================
 * مركز السياسات — لوحة مُصنَّفة بحث حي + طيّ متدرّج للفلترة + شريط تنقّل
 * فرعي (فتات خبز + شقيقات الفئة) أعلى كل صفحة سياسة. ثلاثة عناقيد لونية
 * (--cl-ops/--cl-trust/--cl-gov معرَّفة أعلى الملف) تفصل «تصنيف» عن
 * «حالة» (good/warn/crit) عمداً.
 * ============================================================ */

/* -- تقنية طيّ متدرّج عامة (grid-rows 1fr↔0fr) — تُستخدم لبطاقات الفئات
   وصفوف العناصر عند البحث/الفلترة، بحيث تنكمش بسلاسة بدل الاختفاء
   الفجائي. الجافاسكربت يضبط display:none بعد اكتمال الانتقال فقط. */
.policy-collapsible{display:grid;grid-template-rows:1fr;transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1),opacity .24s ease;opacity:1}
.policy-collapsible.collapsed{grid-template-rows:0fr;opacity:0}
.policy-collapsible-inner{overflow:hidden;min-height:0}

/* -- شريط البحث والفلاتر -- */
.policy-hub-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0 22px}
.policy-search{position:relative;flex:1 1 260px;min-width:220px}
.policy-search svg{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--faint);transition:color .2s ease}
.policy-search input{width:100%;padding:9px 38px 9px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-family:var(--fbody);
  transition:border-color .2s ease,box-shadow .2s ease}
.policy-search input:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(124,77,189,.18)}
.policy-search input:focus + svg{color:var(--primary)}
.policy-pillbar{display:flex;gap:7px;flex-wrap:wrap}
.policy-pill{position:relative;display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--pcline,var(--border));background:var(--surface);color:var(--pc,var(--muted));
  font-size:12px;font-weight:700;padding:7px 15px;border-radius:999px;cursor:pointer;font-family:var(--fbody);
  transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .15s ease,box-shadow .25s ease}
.policy-pill .pdot{width:7px;height:7px;border-radius:50%;background:var(--pc,var(--faint));transition:background-color .25s ease}
.policy-pill:hover{transform:translateY(-1px)}
.policy-pill:not(.active):hover{border-color:var(--pc,var(--primary-light))}
.policy-pill.active{background:var(--pc,var(--primary));border-color:var(--pc,var(--primary));color:#fff;box-shadow:var(--shadow)}
.policy-pill.active .pdot{background:#fff}
.policy-pill.cl-ops{--pc:var(--cl-ops);--pcline:var(--cl-ops-line)}
.policy-pill.cl-trust{--pc:var(--cl-trust);--pcline:var(--cl-trust-line)}
.policy-pill.cl-gov{--pc:var(--cl-gov);--pcline:var(--cl-gov-line)}
.policy-pill.cl-ovr{--pc:var(--cl-ovr);--pcline:var(--cl-ovr-line)}
.policy-pill.cl-cap2{--pc:var(--cl-cap2);--pcline:var(--cl-cap2-line)}
.policy-pill.cl-cus2{--pc:var(--cl-cus2);--pcline:var(--cl-cus2-line)}
.policy-pill.cl-qual{--pc:var(--cl-qual);--pcline:var(--cl-qual-line)}
.policy-pill.cl-fin2{--pc:var(--cl-fin2);--pcline:var(--cl-fin2-line)}
.policy-pill.cl-mkt2{--pc:var(--cl-mkt2);--pcline:var(--cl-mkt2-line)}

/* -- العناقيد والفئات -- */
#policyClusters{display:flex;flex-direction:column;gap:24px}
.policy-cluster-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.policy-cluster-head .bar{width:4px;height:18px;border-radius:3px;flex:0 0 auto}
.policy-cluster-head h2{font-family:var(--fdisplay);font-size:14.5px;font-weight:800;margin:0}
.policy-cluster-head span{font-size:11.5px;color:var(--faint);font-weight:600}
.policy-catgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.policy-catblock-card{--catc:var(--primary);--catcbg:var(--surface-2);--catcline:var(--border);
  background:var(--surface);border:1px solid var(--catcline);border-top:3px solid var(--catc);
  border-radius:14px;box-shadow:var(--shadow);overflow:hidden;
  transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s ease}
.policy-catblock-card.cl-ops{--catc:var(--cl-ops);--catcbg:var(--cl-ops-bg);--catcline:var(--cl-ops-line)}
.policy-catblock-card.cl-trust{--catc:var(--cl-trust);--catcbg:var(--cl-trust-bg);--catcline:var(--cl-trust-line)}
.policy-catblock-card.cl-gov{--catc:var(--cl-gov);--catcbg:var(--cl-gov-bg);--catcline:var(--cl-gov-line)}
.policy-catblock-card.cl-ovr{--catc:var(--cl-ovr);--catcbg:var(--cl-ovr-bg);--catcline:var(--cl-ovr-line)}
.policy-catblock-card.cl-cap2{--catc:var(--cl-cap2);--catcbg:var(--cl-cap2-bg);--catcline:var(--cl-cap2-line)}
.policy-catblock-card.cl-cus2{--catc:var(--cl-cus2);--catcbg:var(--cl-cus2-bg);--catcline:var(--cl-cus2-line)}
.policy-catblock-card.cl-qual{--catc:var(--cl-qual);--catcbg:var(--cl-qual-bg);--catcline:var(--cl-qual-line)}
.policy-catblock-card.cl-fin2{--catc:var(--cl-fin2);--catcbg:var(--cl-fin2-bg);--catcline:var(--cl-fin2-line)}
.policy-catblock-card.cl-mkt2{--catc:var(--cl-mkt2);--catcbg:var(--cl-mkt2-bg);--catcline:var(--cl-mkt2-line)}
.policy-catblock-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px -16px rgba(60,20,90,.32)}
.policy-catblock-head{display:flex;align-items:center;gap:10px;padding:13px 14px;
  border-bottom:1px solid var(--border-soft);cursor:pointer}
.policy-cat-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--catcbg);color:var(--catc);border:1px solid var(--catcline)}
.policy-cat-ic svg{width:17px;height:17px}
.policy-catblock-head b{font-family:var(--fdisplay);font-size:13px;font-weight:800;display:block}
.policy-catblock-head p{margin:1px 0 0;font-size:11px;color:var(--muted)}
.policy-catblock-head .policy-cnt{margin-inline-start:auto;font-size:10.5px;font-weight:700;
  background:var(--catcbg);color:var(--catc);padding:2px 9px;border-radius:999px;white-space:nowrap}
.policy-itemrow{display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-top:1px solid var(--border-soft);font-size:12.5px;cursor:pointer;transition:background-color .16s ease}
.policy-itemrow:hover{background:var(--surface-2)}
.policy-itemrow-wrap:first-of-type .policy-itemrow{border-top:none}
.policy-itemrow .it{flex:1 1 auto;min-width:0}
.policy-itemrow .it b{font-weight:700;display:block;font-size:12.5px}
.policy-itemrow .it span{font-size:11px;color:var(--muted);display:block;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.policy-itemrow .chev{width:14px;height:14px;color:var(--faint);flex:0 0 auto}

/* -- دخول تدريجي لبطاقات الفئات + عدّاد شريط المؤشّرات عند أول تحميل -- */
@keyframes policyCardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.policy-catblock-card.enter{animation:policyCardIn .5s cubic-bezier(.16,1,.3,1) both}
.kpi-row .kpi{opacity:0;transform:translateY(8px);animation:policyCardIn .5s cubic-bezier(.16,1,.3,1) forwards}

/* -- شريط التنقّل الفرعي أعلى كل صفحة سياسة: فتات خبز + شقيقات الفئة.
   اسم مختلف عمداً عن .crumb القائم (فتات خبز الرأس العلوي للوحة كلها)
   كي لا تتداخل قواعد الاثنين. -- */
.policy-subnav{margin-bottom:18px}
.policy-crumb{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);
  margin-bottom:12px;flex-wrap:wrap}
.policy-crumb a{color:var(--primary);text-decoration:none;font-weight:700;cursor:pointer;transition:color .15s ease}
.policy-crumb a:hover{color:var(--accent);text-decoration:underline}
.policy-crumb .sep{color:var(--faint)}
.policy-sib-nav{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--border)}
.policy-sib{border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:12.5px;
  font-weight:700;padding:8px 15px;border-radius:10px;font-family:var(--fbody);
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .15s ease}
.policy-sib:not([disabled]){cursor:pointer}
.policy-sib:not([disabled]):hover{transform:translateY(-1px);border-color:var(--primary-light)}
.policy-sib[disabled]{cursor:default}
.policy-sib.cl-ops[disabled]{background:var(--cl-ops-bg);border-color:var(--cl-ops-line);color:var(--cl-ops)}
.policy-sib.cl-trust[disabled]{background:var(--cl-trust-bg);border-color:var(--cl-trust-line);color:var(--cl-trust)}
.policy-sib.cl-gov[disabled]{background:var(--cl-gov-bg);border-color:var(--cl-gov-line);color:var(--cl-gov)}
.policy-sib.cl-ovr[disabled]{background:var(--cl-ovr-bg);border-color:var(--cl-ovr-line);color:var(--cl-ovr)}
.policy-sib.cl-cap2[disabled]{background:var(--cl-cap2-bg);border-color:var(--cl-cap2-line);color:var(--cl-cap2)}
.policy-sib.cl-cus2[disabled]{background:var(--cl-cus2-bg);border-color:var(--cl-cus2-line);color:var(--cl-cus2)}
.policy-sib.cl-qual[disabled]{background:var(--cl-qual-bg);border-color:var(--cl-qual-line);color:var(--cl-qual)}
.policy-sib.cl-fin2[disabled]{background:var(--cl-fin2-bg);border-color:var(--cl-fin2-line);color:var(--cl-fin2)}
.policy-sib.cl-mkt2[disabled]{background:var(--cl-mkt2-bg);border-color:var(--cl-mkt2-line);color:var(--cl-mkt2)}

/* فتات خبج صفحات تفاصيل الكيان (ملف الكابتن الكامل وما بعده) — عنوان ديناميكي
   (اسم الكابتن) لا يُقرأ من VIEWS الثابتة، لذا مكوّن مستقل عن .policy-crumb. */
.entity-crumb{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-bottom:12px;flex-wrap:wrap}
.entity-crumb a{color:var(--primary);text-decoration:none;font-weight:700;cursor:pointer;transition:color .15s ease}
.entity-crumb a:hover{color:var(--accent);text-decoration:underline}
.entity-crumb .sep{color:var(--faint)}
.entity-crumb b{color:var(--text)}

@media (prefers-reduced-motion: reduce){
  .policy-collapsible,.policy-catblock-card,.kpi-row .kpi,.policy-catblock-card.enter{
    animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ============================================================
   مركز المدن — كل مدن السعودية (106): خريطة حقيقية + قائمة مُصنَّفة
   حسب المنطقة الإدارية (بطاقات قابلة للطيّ) + فلاتر حالة/بحث.
   ============================================================ */
.chain-map-stage #cityMapGL{width:100%;height:420px}
.drawer-body .hint{font-size:11.5px;color:var(--faint)}

.city-rchip-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px}
.city-rchip{padding:6px 13px;border-radius:999px;border:1px solid var(--border);background:var(--surface);
  font-size:11.5px;font-weight:700;color:var(--muted)}
.city-rchip.active{background:var(--surface-2);border-color:var(--primary-light);color:var(--primary)}
.city-rchip b{font-variant-numeric:tabular-nums;margin-inline-start:3px;opacity:.7}

.city-region-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;margin-bottom:12px}
.city-region-head{display:flex;align-items:center;gap:14px;padding:15px 18px;cursor:pointer;user-select:none}
.city-region-head:hover{background:var(--surface-2)}
.city-region-bar{width:4px;height:32px;border-radius:3px;flex:0 0 auto}
.city-region-info{flex:1;min-width:0}
.city-region-info h3{font-family:var(--fdisplay);font-size:14px;margin:0 0 3px;font-weight:800}
.city-region-info .sub{font-size:11.5px;color:var(--faint)}
.city-region-stats{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.city-region-stats .rs{text-align:center}
.city-region-stats .rs b{display:block;font-family:var(--fdisplay);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.city-region-stats .rs span{font-size:9.5px;color:var(--faint);font-weight:700}
.city-region-stats .rs.good b{color:var(--good)}
.city-region-chev{color:var(--faint);transition:transform .2s ease;flex:0 0 auto}
.city-region-card.open .city-region-chev{transform:rotate(180deg)}
.city-region-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s cubic-bezier(.4,0,.2,1)}
.city-region-card.open .city-region-body{grid-template-rows:1fr}
.city-region-body-inner{overflow:hidden}

.city-row{display:flex;align-items:center;gap:14px;padding:11px 18px 11px 46px;
  border-top:1px solid var(--border-soft);cursor:pointer;transition:background .12s ease}
.city-row:hover{background:var(--surface-2)}
.city-row-name{flex:1;min-width:0;display:flex;align-items:baseline;gap:9px}
.city-row-name b{font-weight:700;font-size:13px}
.city-row-name span{color:var(--faint);font-size:11px}
.city-row-meta{display:flex;gap:16px;color:var(--muted);font-size:11.5px;flex:0 0 auto;
  font-variant-numeric:tabular-nums}
.city-row-meta div{text-align:center}
.city-row-meta span{color:var(--faint);display:block;font-size:9px;font-weight:700}

@media (max-width:760px){
  .city-row{flex-wrap:wrap;padding-inline-start:18px}
}