/* ═══════════════════════════════════════════════════════════════════
   لوحة تحكم ناطق — تُحمَّل بعد main.css وترث كل رموزه.

   قرار معماري قاله العميل صراحةً: اللوحة **ثابتة عامّة**. ما يتغيّر لكل
   عميل هو النظام خلفها — معرفته وأسعاره وتكاملاته — لا شاشاتها ولا
   كلماتها. فكل نصّ هنا عامّ يصلح لمتجر وعيادة ومقاول بلا تعديل.

   الأرقام مأخوذة من ممارسة السوق لا من الذوق:
     · الشريط الجانبي 256px موسّعاً و64px شريطَ أيقونات — تقارب Linear وStripe وVercel.
     · الترويسة 56–64px: تحمل الموضع والبحث، لا شعاراً بطولياً.
     · صف الجدول 48–56px بحشو 12–16 وخط 13–14 — كثافة «مريحة»، وهي
       الافتراضية لجمهور واحد. الكثافة المضغوطة تُعرض حين يختلط الجمهور.
     · عرض المحتوى سائل بلا سقف — الجداول والرسوم تملأ الشاشة. النماذج
       وحدها تُحدّ بـ~760px لأن سطر الإدخال الطويل يصعب مسحه بالعين.

   وما يجعل اللوحة تبدو مولّدة آلياً موثّق ومُتجنَّب هنا:
     لا تدرّج · لا زجاجية · لا توهّج · لا بطاقات ثلاث متطابقة
     (نوّعنا: بطاقة رقم ≠ بطاقة رسم ≠ بطاقة قائمة) · ولا رسم دائري
     إطلاقاً — العين رديئة في مقارنة الزوايا، والشريط الأفقي أصدق.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────── الهيكل ───────── */
.app{
  --rail:256px;
  --topbar:60px;
  min-block-size:100dvh;
  display:grid;
  grid-template-columns:1fr;
  background:var(--sunk);
}
@media (min-width:64rem){
  .app{grid-template-columns:var(--rail) 1fr}
}
/* ⚠ نفس فخّ الشبكة الذي كسر صفحة المطوّرين، وقد تكرّر هنا حرفياً:
   عمود اللوحة قيمته الافتراضية min-inline-size:auto فلا ينكمش دون المقاس
   الأدنى لمحتواه — والجدول العريض يفرض عرضه على العمود فيتمدّد إطار
   التخطيط كلّه. وoverflow-x:auto على .dtwrap لا يكفي: العلّة في العمود
   الحاوي لا في الغلاف. كشفه القياس حين خرج innerWidth ٦٦١ بدل ٤١٤. */
.app>*{min-inline-size:0}

/* ───────── الشريط الجانبي ───────── */
.side{
  display:none;
  position:sticky;inset-block-start:0;
  block-size:100dvh;
  background:var(--paper);
  border-inline-end:var(--hair) solid var(--rule);
  padding:var(--s-4);
  overflow-y:auto;overscroll-behavior:contain;
  grid-template-rows:auto 1fr auto;gap:var(--s-5);
}
@media (min-width:64rem){ .side{display:grid} }

/* الشعار كلمةٌ لا حرف — كما في الموقع. والشريط أضيق من الترويسة فيبقى أصغر. */
/* block لا inline-block: الشعرة السفلى تفصل الشعار عن التنقّل، فتمتدّ
   بعرض الشريط لا بعرض الكلمة. */
.side__brand{
  display:block;
  font-family:var(--font-head);font-weight:700;font-size:1.625rem;letter-spacing:-.04em;line-height:1.35;
  text-decoration:none;
  padding:var(--s-2) var(--s-2) var(--s-4);
  border-block-end:var(--hair) solid var(--rule);
  background:linear-gradient(to left,var(--palm) 0 13%,var(--ink) 13% 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.side__group{margin-block-end:var(--s-5)}
.side__label{
  display:block;padding:0 var(--s-3) var(--s-2);
  font-size:.75rem;font-weight:600;color:var(--ink-mute);
  letter-spacing:.04em;
}
.side__nav{display:grid;gap:2px}
.side__link{
  display:flex;align-items:center;gap:.65rem;
  padding:.6rem var(--s-3);
  border-radius:var(--r);
  font-size:.9375rem;color:var(--ink-soft);text-decoration:none;
  min-block-size:40px;
  transition:background-color var(--t-2) var(--ease),color var(--t-2) var(--ease);
}
.side__link .i{color:var(--ink-mute);transition:color var(--t-2) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .side__link:hover{background:var(--sunk);color:var(--ink)}
  .side__link:hover .i{color:var(--ink-soft)}
}
.side__link:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
/* الصفحة الحالية تُعلن بـaria-current لا باللون وحده — اللون وحده لا يصل القارئ الشاشي */
.side__link[aria-current="page"]{
  background:var(--palm-wash);color:var(--palm-deep);font-weight:600;
  box-shadow:inset 2px 0 0 var(--palm);
}
:root[data-theme="dark"] .side__link[aria-current="page"],
.side__link[aria-current="page"] .i{color:var(--palm)}
.side__link[aria-current="page"]{color:var(--palm)}
.side__count{
  margin-inline-start:auto;
  font-family:var(--font-num);font-size:.75rem;
  color:var(--ink-mute);
}

.side__foot{
  border-block-start:var(--hair) solid var(--rule);
  padding-block-start:var(--s-4);
  font-size:.8125rem;color:var(--ink-mute);
}

/* ───────── الترويسة ───────── */
.top{
  position:sticky;inset-block-start:0;z-index:20;
  min-block-size:var(--topbar);
  display:flex;align-items:center;gap:var(--s-4);
  padding-inline:var(--s-4);padding-block:var(--s-2);
  background:var(--paper);
  border-block-end:var(--hair) solid var(--rule);
}
.top__title{font-family:var(--font-head);font-size:1.0625rem;font-weight:600}
.top__sub{display:block;font-family:var(--font-ar);font-size:.8125rem;font-weight:400;color:var(--ink-mute)}
.top__end{margin-inline-start:auto;display:flex;align-items:center;gap:var(--s-2)}

/* زر القائمة على الشاشات الضيّقة */
.side__toggle{
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:40px;block-size:40px;flex:none;
  background:none;border:var(--hair) solid var(--rule);border-radius:var(--r);
  color:var(--ink-soft);cursor:pointer;
}
.side__toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (min-width:64rem){ .side__toggle{display:none} }

/* درج التنقّل على الجوال — نفس روابط الشريط */
.appdrawer{
  display:none;
  border-block-end:var(--hair) solid var(--rule);
  background:var(--paper);padding:var(--s-4);
}
.appdrawer[data-open="true"]{display:block}
@media (min-width:64rem){ .appdrawer{display:none!important} }

/* ───────── لوح المحتوى ───────── */
.pane{padding:var(--s-5) var(--s-4) var(--s-9)}
@media (min-width:48rem){ .pane{padding:var(--s-6) var(--s-6) var(--s-9)} }
.pane__head{margin-block-end:var(--s-5)}
.pane__head h2{font-size:var(--step-2);line-height:1.35}
.pane__lede{margin-block-start:var(--s-2);color:var(--ink-soft);font-size:.9375rem;max-inline-size:70ch}

/* شريط «هذه بيانات عرض» — يبقى ظاهراً دائماً، فلا يظنّ أحد الأرقام حقيقية */
.demobar{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:var(--s-3) var(--s-4);
  background:var(--palm-wash);
  border:var(--hair) solid var(--palm-ring);
  border-radius:var(--r);
  font-size:.875rem;color:var(--palm-deep);
  margin-block-end:var(--s-5);
  max-inline-size:none;   /* p{max-inline-size:64ch} في main.css قاعدة نصّ لا لوحة */
}
:root[data-theme="dark"] .demobar{color:var(--palm)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .demobar{color:var(--palm)} }
.demobar .i{color:currentColor}

/* ───────── شبكة اللوحة ───────── */
.kpis{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
@media (min-width:64rem){ .kpis{grid-template-columns:repeat(3,1fr)} }
.panels{display:grid;gap:var(--s-4);grid-template-columns:1fr;margin-block-start:var(--s-4)}
@media (min-width:68rem){ .panels--7-5{grid-template-columns:7fr 5fr} }
.panels>*{min-inline-size:0}

/* ───────── بطاقة رقم ───────── */
.kpi{
  position:relative;
  display:flex;flex-direction:column;gap:var(--s-2);
  padding:var(--s-5);
  background:var(--paper);
  border:var(--hair) solid var(--rule);
  border-radius:var(--r);
}
.kpi__label{font-size:.8125rem;color:var(--ink-mute);display:flex;align-items:center;gap:.4rem}
.kpi__label .i{color:var(--ink-mute)}
.kpi__n{
  font-family:var(--font-num);font-size:1.75rem;font-weight:500;
  line-height:1.1;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.kpi__n small{font-size:.55em;color:var(--ink-mute);font-weight:400;margin-inline-start:.2em}
/* الرقم وحده زينة. المقارنة والمدّة إلزاميتان — وإلا لا يعرف القارئ أهو جيّد أم سيّئ */
.kpi__foot{
  display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  font-size:.8125rem;color:var(--ink-mute);
  margin-block-start:auto;padding-block-start:var(--s-2);
}
.delta{display:inline-flex;align-items:center;gap:.2rem;font-family:var(--font-num);font-weight:500}
.delta--up{color:var(--palm)}
.delta--down{color:var(--danger)}
:root[data-theme="dark"] .delta--up{color:var(--palm)}
/* السهم لا يُعكس في RTL — اتجاهه يعني «صعود/هبوط» لا «تقدّم/تأخّر» */
/* الأيقونة تلتزم سُلّم 16/20/26 — لا مقاس رابع يتسلّل للسهم وحده */

/* ───────── لوح عام ───────── */
.panel{
  background:var(--paper);
  border:var(--hair) solid var(--rule);
  border-radius:var(--r);
  overflow:hidden;
}
.panel__head{
  display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  padding:var(--s-4) var(--s-5);
  border-block-end:var(--hair) solid var(--rule);
}
/* عنوان اللوح مكوّن لا قسم: حجمه من دوره لا من مستواه في المستند */
.panel__head h2,.panel__head h3{font-family:var(--font-head);font-size:.9375rem;font-weight:600;line-height:1.5}
.panel__head .muted{font-size:.8125rem;color:var(--ink-mute);font-weight:400}
.panel__act{margin-inline-start:auto;display:flex;gap:var(--s-2)}
.panel__body{padding:var(--s-5)}
.panel__body--flush{padding:0}

/* ───────── رسم بياني بـSVG خالص ─────────
   أعمدة لا دائرة: العين تقارن الأطوال جيداً والزوايا رديئاً.
   ولكل عمود قيمة مكتوبة، فالرسم يُقرأ بلا تخمين. */
/* ⚠ الرسم البياني لا يُعكس في الواجهة العربية.
   ما يُعكس هو التخطيط والأسهم الملاحية. أمّا محور الزمن فيبقى من اليسار
   إلى اليمين — وهو عُرف شبه عالمي حتى في أدوات التحليل العربية. وبدون
   direction:ltr هنا كان الأقدم سيظهر يميناً والأحدث يساراً، فيُقرأ التاريخ
   مقلوباً. وكذلك سهم الاتجاه: «صعود» يعني أعلى لا يميناً، فلا يُعكس أبداً. */
.chart{display:flex;align-items:stretch;gap:2px;block-size:200px;padding-block-start:var(--s-4);direction:ltr}
/* شبكة بثلاثة صفوف: القيمة ثم مساحة العمود (1fr محدَّدة) ثم التسمية.
   بدون صفّ محدَّد لا تُحلّ النسبة المئوية لارتفاع العمود فيختفي الرسم. */
.bar{
  flex:1;display:grid;grid-template-rows:auto 1fr auto;
  justify-items:center;align-items:end;gap:.4rem;min-inline-size:0;
}
.bar__fill{
  inline-size:100%;align-self:end;
  background:var(--palm-wash);
  border-block-start:2px solid var(--palm);
  border-radius:var(--r-sm) var(--r-sm) 0 0;
  transition:background-color var(--t-2) var(--ease);
}
@media (hover:hover) and (pointer:fine){ .bar:hover .bar__fill{background:var(--palm-ring)} }
.bar__x{font-family:var(--font-num);font-size:.75rem;color:var(--ink-mute);white-space:nowrap}
.bar__v{font-family:var(--font-num);font-size:.75rem;color:var(--ink-soft)}

/* شريط أفقي للتوزيع — بديل الرسم الدائري */
.hbars{display:grid;gap:var(--s-4)}
.hbar__top{display:flex;justify-content:space-between;gap:var(--s-3);font-size:.875rem;margin-block-end:.4rem}
.hbar__v{font-family:var(--font-num);color:var(--ink-mute);font-variant-numeric:tabular-nums}
/* المسار 8px، ونصف قطر 4px يجعله كبسولة — والكبسولة ممنوعة. 3px داخل النظام */
.hbar__track{block-size:8px;background:var(--sunk);border-radius:var(--r-sm);overflow:hidden}
.hbar__fill{block-size:100%;background:var(--palm);border-radius:var(--r-sm)}
.hbar__fill--mute{background:var(--ink-mute)}

/* ───────── الجداول ─────────
   النص يُحاذى للبداية والرقم للنهاية، فتصطفّ الخانات وتُمسح بالعين بسرعة.
   والأرقام بأرقام مجدولة كي لا يرقص العمود بين صفّ وصفّ. */
.dtwrap{overflow-x:auto}
.dtwrap:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.dt{inline-size:100%;border-collapse:collapse;font-size:.875rem}
.dt thead th{
  position:sticky;inset-block-start:0;z-index:1;
  background:var(--sunk);
  padding:.7rem var(--s-4);
  text-align:start;font-weight:600;font-size:.8125rem;color:var(--ink-soft);
  white-space:nowrap;
  border-block-end:var(--hair) solid var(--rule);
}
.dt td{
  padding:var(--s-4);
  border-block-end:var(--hair) solid var(--rule);
  vertical-align:middle;
}
.dt tbody tr{min-block-size:52px}
.dt th[scope="row"]{padding:var(--s-4);text-align:start;font-weight:500;border-block-end:var(--hair) solid var(--rule)}
.dt .num{text-align:end;font-family:var(--font-num);font-variant-numeric:tabular-nums;white-space:nowrap}
/* رأس العمود تسميةٌ لا رقم، و«بلا سقف» كلمةٌ مكان رقم — كلاهما يبقى محاذياً
   لأرقام عموده ويعود إلى خطّ المتن. و‎--font-num‎ لاتينيّ فقط (الملفّ المشحون
   ‎ibm-plex-mono-400-latin‎)، فالعربية فيه تسقط إلى خطّ نظام خارج نظام الخطوط. */
.dt th.num,.dt .num--txt{font-family:inherit;font-variant-numeric:normal}
@media (hover:hover) and (pointer:fine){ .dt tbody tr:hover{background:var(--sunk)} }
.dt tbody tr:last-child td,.dt tbody tr:last-child th{border-block-end:0}
.dt__foot{
  display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  padding:var(--s-4);border-block-start:var(--hair) solid var(--rule);
  font-size:.8125rem;color:var(--ink-mute);
}
.dt__foot .spacer{margin-inline-start:auto}

/* ───────── وسوم الحالة ─────────
   اللون لا يكفي: لكل حالة نصّ صريح، فلا يضيع المعنى على عمى الألوان. */
.tag{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.2rem .5rem;border-radius:var(--r-sm);
  font-size:.75rem;font-weight:500;white-space:nowrap;
  border:var(--hair) solid var(--rule);color:var(--ink-soft);background:var(--sunk);
}
.tag--ok{background:var(--palm-wash);border-color:var(--palm-ring);color:var(--palm-deep)}
:root[data-theme="dark"] .tag--ok{color:var(--palm)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .tag--ok{color:var(--palm)} }
.tag--warn{background:color-mix(in srgb,var(--amber) 12%,var(--paper));border-color:color-mix(in srgb,var(--amber) 30%,var(--paper));color:var(--amber)}
.tag--wait{color:var(--ink-mute)}
.tag__dot{inline-size:6px;block-size:6px;border-radius:50%;background:currentColor;flex:none}

/* ───────── المحادثات ───────── */
.convo{display:grid;grid-template-columns:1fr;gap:var(--s-4)}
@media (min-width:68rem){ .convo{grid-template-columns:340px 1fr;align-items:start} }
.convo>*{min-inline-size:0}
.thread{display:grid;gap:2px;max-block-size:560px;overflow-y:auto}
.tline{
  inline-size:100%;text-align:start;
  display:grid;gap:.25rem;
  padding:var(--s-4);
  background:none;border:0;border-block-end:var(--hair) solid var(--rule);
  cursor:pointer;color:inherit;font:inherit;
}
@media (hover:hover) and (pointer:fine){ .tline:hover{background:var(--sunk)} }
.tline:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.tline[aria-current="true"]{background:var(--sunk);box-shadow:inset 2px 0 0 var(--palm)}
.tline__top{display:flex;align-items:center;gap:var(--s-2)}
.tline__who{font-weight:600;font-size:.875rem}
.tline__when{margin-inline-start:auto;font-family:var(--font-num);font-size:.75rem;color:var(--ink-mute)}
.tline__prev{font-size:.8125rem;color:var(--ink-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.chat{display:grid;gap:var(--s-3);padding:var(--s-5);max-block-size:520px;overflow-y:auto}
.cmsg{max-inline-size:78%;padding:.65rem .85rem;border-radius:var(--r);font-size:.875rem;line-height:1.75}
.cmsg--them{background:var(--sunk);justify-self:start}
.cmsg--us{background:var(--palm-wash);justify-self:end;border:var(--hair) solid var(--palm-ring)}
.cmsg--sys{
  justify-self:center;background:none;border:var(--hair) dashed var(--rule);
  color:var(--ink-mute);font-size:.875rem;max-inline-size:100%;text-align:center;
}
.cmsg__meta{display:block;margin-block-start:.35rem;font-size:.75rem;color:var(--ink-mute)}

/* ───────── قاعدة المعرفة ───────── */
.kb{display:grid;gap:var(--s-4)}
.kbitem{
  display:grid;gap:var(--s-2);
  padding:var(--s-5);
  border:var(--hair) solid var(--rule);border-radius:var(--r);
  background:var(--paper);
}
.kbitem__q{font-weight:600;font-size:.9375rem}
.kbitem__a{font-size:.875rem;color:var(--ink-soft);line-height:1.8}
.kbitem__meta{display:flex;gap:var(--s-3);flex-wrap:wrap;font-size:.875rem;color:var(--ink-mute);margin-block-start:var(--s-2)}

/* ───────── نماذج اللوحة ───────── */
.form{max-inline-size:760px;display:grid;gap:var(--s-5)}
.frow{display:grid;gap:var(--s-2)}
.frow>label{font-size:.875rem;font-weight:500}
.frow .hint{font-size:.8125rem;color:var(--ink-mute)}
.frow input[type="text"],.frow input[type="time"],.frow input[type="number"],
.frow select,.frow textarea{
  inline-size:100%;padding:.6rem .7rem;
  border:var(--hair) solid var(--rule);border-radius:var(--r);
  background:var(--paper);color:var(--ink);font-size:.9375rem;
  min-block-size:44px;
}
.frow textarea{min-block-size:110px;line-height:1.8;resize:vertical}
.frow input:focus-visible,.frow select:focus-visible,.frow textarea:focus-visible{
  outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink);
}
.fgrid{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media (min-width:38rem){ .fgrid{grid-template-columns:1fr 1fr} }

/* مفتاح تبديل — مربّع لا كبسولة، فالشكل الكبسولي علامة قالب جاهز */
.sw{display:flex;align-items:flex-start;gap:var(--s-3);padding-block:var(--s-3);cursor:pointer}
.sw input{inline-size:20px;block-size:20px;flex:none;margin-block-start:.15rem;accent-color:var(--palm)}
.sw__t{font-size:.9375rem;font-weight:500}
.sw__d{display:block;font-size:.8125rem;color:var(--ink-mute);font-weight:400;margin-block-start:.15rem;line-height:1.7}

/* ───────── حالة الفراغ ─────────
   تشرح السبب وتعرض فعلاً واحداً. «لا توجد بيانات» ليست حالة فراغ بل اعتذار. */
.empty{
  display:grid;gap:var(--s-3);justify-items:center;text-align:center;
  padding:var(--s-9) var(--s-5);color:var(--ink-mute);
}
.empty .i{color:var(--rule);inline-size:34px;block-size:34px}
.empty h4{font-family:var(--font-head);font-size:1rem;color:var(--ink)}
.empty p{font-size:.875rem;max-inline-size:44ch;line-height:1.8}

/* ───────── أدوات ───────── */
.btn--sm{padding:.42rem .8rem;font-size:.8125rem;min-block-size:36px}
.toolbar{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-block-end:var(--s-4)}
.search{
  flex:1;min-inline-size:180px;
  padding:.55rem .7rem;min-block-size:40px;
  border:var(--hair) solid var(--rule);border-radius:var(--r);
  background:var(--paper);color:var(--ink);font-size:.875rem;
}
.search:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ago{font-family:var(--font-num);font-size:.75rem;color:var(--ink-mute);white-space:nowrap}

/* الأرقام والمعرّفات والجوالات تُعزل باتجاهها كي لا يعيد المحرّك ترتيبها
   داخل النص العربي — «10-20» تنقلب إلى «20-10» بدون هذا. */
bdi,.ltr{unicode-bidi:isolate;direction:ltr}

/* WCAG 2.2 بند 2.4.11: الترويسة اللاصقة يجب ألّا تحجب العنصر المركَّز عليه.
   بدون هذا يقفز التركيز إلى صفّ مختبئ تحت الترويسة فيبدو أنه اختفى. */
.pane :is(a,button,input,select,textarea,[tabindex]){scroll-margin-block-start:calc(var(--topbar) + 12px)}

/* الأرقام في اللوحة غربية لا هندية: هذا عرف بيانات الجداول والسجلات
   ومعرّفات المستندات، وتُقرأ الهندية في النثر التسويقي لا في خانة جدول. */
.dt,.kpi__n,.ago,.hbar__v{font-feature-settings:"tnum" 1}

/* إعلان الوضع التجريبي — موجود عند التحميل ويظهر عند الحاجة */
.demolive{
  position:fixed;inset-block-end:var(--s-5);inset-inline-start:var(--s-5);z-index:50;
  max-inline-size:min(92vw,420px);
  padding:var(--s-4);
  background:var(--ink-surface);color:var(--on-ink);
  border-radius:var(--r);font-size:.875rem;line-height:1.7;
  opacity:0;visibility:hidden;
  transition:opacity var(--t-3) var(--ease),visibility var(--t-3) var(--ease);
}
.demolive[data-on="1"]{opacity:1;visibility:visible}
[data-demo]:disabled{cursor:not-allowed;opacity:.72}