/* ============================================================
   نظام تصميم «السراي» — هوية مؤسسية فاخرة
   ليل كحلي عميق + نحاس ذهبي (فانوس السراي) + عاج
   Noto Naskh Arabic للعناوين، Noto Sans Arabic للنص
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;700&display=swap');

* { box-sizing: border-box; margin: 0; }
/* ── التوكنات (DEC-121 · D-1): الهوية الكريمية افتراضًا ─────────────────────
   الأسماء تاريخية والقيم انقلبت: --ink-* صارت أرضيات ورقٍ كريمي دافئ،
   و--ivory صار حبرًا داكنًا مائلًا للأزرق الرمادي. أبقينا الأسماء عمدًا:
   45 صفحة تقرؤها، وإعادة التسمية كانت ستلمس كل سطر لون في المنصة لصفر أثرٍ
   بصري. الوضع الداكن خيار بنفس التوكنات في الكتلة التالية — لا لوحتان.
   **كل زوج نصٍّ/أرضية هنا مقيس** في colorContrastDec121.test.ts (4.5:1
   عادي · 3:1 كبير) — عدّل درجةً وسيقول لك القياس إن كسرتها. */
:root {
  --ink-0: #EDE6D2;        /* أعمق الورق — الشريط الجانبي */
  --ink-1: #F4EFE4;        /* أرضية الصفحة — كريمي دافئ */
  --ink-2: #FBF8F1;        /* الألواح — أفتح بدرجة */
  --ink-3: #ECE5D3;        /* عناصر مرتفعة */
  --hairline: rgba(158, 119, 25, .30);
  --hairline-strong: rgba(158, 119, 25, .55);
  --gold: #9E7719;         /* حدود وأختام وعناصر كبيرة — 3.59:1 مقيس */
  --gold-soft: #7E6318;    /* الذهب حين يحمل نصًّا — معمَّق 4.97:1 مقيس */
  --gold-deep: #6B5513;
  --ivory: #232B38;        /* الحبر الأساسي — 10.7:1 على الورق */
  --muted: #55657A;        /* 5.19:1 */
  --dim: #5F6E82;          /* 4.53:1 — نصوصه صغيرة فلا إعفاء */
  --ok: #1E7A4E;
  --ok-bg: #E3F0E7;
  --warn: #7A5800;
  --warn-bg: #F5EBD3;
  --danger: #B02A37;
  --danger-bg: #F7E4E4;
  --info: #2B5FB8;
  --info-bg: #E4EBF7;
  --radius: 14px;
  --glow: 0 0 30px rgba(158, 119, 25, .16);
  --trans: 200ms cubic-bezier(.4, 0, .2, 1);
}

/* الوضع الداكن — ليل السراي المعهود، خيارًا بنفس التوكنات (زر في الترويسة) */
:root[data-theme="dark"] {
  --ink-0: #070B15;
  --ink-1: #0A101F;
  --ink-2: #0F1729;
  --ink-3: #16203A;
  --hairline: rgba(212, 175, 55, .14);
  --hairline-strong: rgba(212, 175, 55, .35);
  --gold: #D4AF37;
  --gold-soft: #E8CF7A;
  --gold-deep: #9A7B1E;
  --ivory: #F5F1E6;
  --muted: #93A8C4;
  --dim: #8296AD;          /* رُفع من #6B7F9C — كان 4.38:1 تحت الشرط (مقيس) */
  --ok: #3FB68B;
  --ok-bg: rgba(63, 182, 139, .12);
  --warn: #E7A93C;
  --warn-bg: rgba(231, 169, 60, .12);
  --danger: #E5636B;
  --danger-bg: rgba(229, 99, 107, .12);
  --info: #6C9EF2;
  --info-bg: rgba(108, 158, 242, .12);
  --glow: 0 0 40px rgba(212, 175, 55, .18);
}
html { font-size: 16px; }
body {
  font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(158,119,25,.07), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(43,95,184,.04), transparent 55%),
    var(--ink-1);
  color: var(--ivory); min-height: 100vh; direction: rtl;
}
h1, h2, h3, .display { font-family: "Noto Naskh Arabic", "Noto Sans Arabic", serif; letter-spacing: .2px; }
a { color: var(--gold-soft); text-decoration: none; cursor: pointer; }

/* ── الهيكل: شريط جانبي + محتوى ─────────────────────────────── */
.shell { display: flex; min-height: 100vh; }
aside.side {
  width: 232px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; height: 100dvh;
  background: linear-gradient(180deg, var(--ink-0), var(--ink-3) 70%);
  border-inline-start: 1px solid var(--hairline);
  display: flex; flex-direction: column; padding: 22px 14px; gap: 4px; z-index: 30;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 10px 14px; flex-shrink: 0; }
.brand .mark {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, var(--gold-soft), var(--gold-deep));
  display: grid; place-items: center; color: #141003; box-shadow: var(--glow);
}
.brand .mark svg { width: 24px; height: 24px; stroke: #241C05; }
/* (المرحلة H) شعار المؤسسة من صفحتها على إنستغرام — يملأ العلامة دائريًا */
.brand .mark { overflow: hidden; background: #fff; }
.brand .mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand b { font-family: "Noto Naskh Arabic", serif; font-size: 1.15rem; color: var(--ivory); display: block; line-height: 1.3; }
.brand small { color: var(--muted); font-size: .68rem; font-weight: 300; }
/* القائمة كبرت (13+ صفحة): تجميع بعناوين مقطعية + تمرير داخلي —
   العلامة مثبتة أعلى والهوية/الخروج مثبتان أسفل، والقائمة وحدها تتمرر */
.side nav {
  display: flex; flex-direction: column; gap: 2px; margin-top: 2px;
  flex: 1; min-height: 0; overflow-y: auto; padding-inline-end: 4px;
  scrollbar-width: thin; scrollbar-color: rgba(158,119,25,.35) transparent;
}
.side nav::-webkit-scrollbar { width: 5px; }
.side nav::-webkit-scrollbar-thumb { background: rgba(158,119,25,.30); border-radius: 99px; }
.side nav .navsec {
  color: var(--dim, var(--muted)); font-size: .64rem; letter-spacing: .12em;
  padding: 12px 14px 4px; opacity: .75; user-select: none;
}
.side nav .navsec:first-child { padding-top: 2px; }
.side nav a {
  display: flex; align-items: center; gap: 11px; padding: 8px 13px; border-radius: 9px;
  /* (مراجعة R2) الخصائص تُسمّى ولا تُعمَّم بـ`all` — قاعدة الميثاق «انتقالات
     محددة». وهذه الثلاث هي **كل** ما يتغيّر فعلًا بين السكون و`:hover` و`.on`. */
  color: var(--muted); font-size: .88rem; border: 1px solid transparent;
  transition: color var(--trans), background var(--trans), border-color var(--trans);
}
.side nav a svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; flex-shrink: 0; }
/* (DEC-121 · D-4) المطوية الإدارية: اليومي أولًا وهذه خلفه — نفس البنود بنفس شروطها */
.side nav details.navadmin { margin-top: 10px; border-top: 1px dashed var(--hairline); padding-top: 6px; }
.side nav details.navadmin > summary {
  cursor: pointer; list-style: none; color: var(--dim); font-size: .72rem;
  padding: 8px 14px; letter-spacing: .06em; user-select: none;
}
.side nav details.navadmin > summary::-webkit-details-marker { display: none; }
.side nav details.navadmin > summary:hover { color: var(--gold-soft); }
.side nav details.navadmin[open] > summary { color: var(--gold-soft); }
.side nav a:hover { color: var(--ivory); background: rgba(158,119,25,.08); }
.side nav a.on {
  color: var(--gold-soft); background: linear-gradient(90deg, rgba(158,119,25,.14), rgba(158,119,25,.04));
  border-color: var(--hairline); font-weight: 500;
}
.side .foot { margin-top: auto; padding: 12px 10px 4px; border-top: 1px solid var(--hairline); }
.side .foot .who { color: var(--ivory); font-size: .85rem; margin-bottom: 8px; display: block; }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* ══ (UI-F-P · اكتشاف 2) أصل التمرير الأفقي على الهاتف كان **هنا** ══════════
   القياس بالمتصفح على 375: `documentElement.scrollWidth − clientWidth` يساوي
   **حرفيًا** مقدار خروج `#themeToggle` من الحافة في كل صفحة قيست
   (continuity 51/−51 · customers 63/−63 · cutover 65/−65 · delivery 48/−48 ·
   expenses 49/−49 · office 43/−43 · receive 45/−45 · reorder 57/−57 ·
   settings 47/−47 · catalog 46/−46). والسبب بنيوي: الشريط صفٌّ مرن **لا
   يلتفّ**، وبنوده (زر القائمة · العنوان · فتات الطريق الطويل · مبدّل الوضع)
   حدّها الأدنى `min-content` فلا تنكمش — فيُدفع آخرها خارج الشاشة، وفي RTL
   الخروج يسارًا **تمرير مستند** لا قصًّا.
   والجداول لم تكن السبب: القياس نفسه يقول إن كل جدولٍ خارجٍ عن حافته يقع
   داخل `.panel` بـ`overflow-x:auto` (حاويةُ تمريره) فلا يمدّ المستند بشيء.
   العلاج جذريّ لا صفحةً صفحة: الشريط يلتفّ، وبنوده النصية تنكمش. */
.pagebar {
  display: flex; align-items: center; gap: 14px; padding: 18px 28px 14px;
  flex-wrap: wrap; row-gap: 8px;
}
.pagebar h1 { font-size: 1.25rem; color: var(--ivory); font-weight: 600; min-width: 0; }
.pagebar .crumb { color: var(--muted); font-size: .8rem; min-width: 0; }
main { padding: 8px 28px 40px; max-width: 1280px; width: 100%; }

/* ── الألواح والبطاقات ──────────────────────────────────────── */
.panel {
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)), var(--ink-2);
  border: 1px solid var(--hairline); border-radius: var(--radius); padding: 20px;
  /* ══ (DEC-118 محور 8 — S16) توحيد قاعدة الفيض: اللوح صندوق تمرير أفقي
     **بلا سقف عرض** ══════════════════════════════════════════════════════════
     القاعدة كانت محبوسة في `@media (max-width: 920px)` أدناه، فكانت 1024 و1440
     (الحاسوب المحمول وسطح المكتب — وهما عرضا العمل الفعليان في المكتب) خارجها
     تمامًا. والمقيس بالقياس النصي على الصفحات الثلاث والثلاثين: **٨٥ جدولًا في
     ٢١ صفحة** بلا حاوية تمرير أفقي في أي سلف عند 1024/1440 — أي أن العطب الذي
     رصدته DEC-115 حيًّا في `online.html` (المستند يزحف 181px) لم يكن خاصًّا
     بثلاث شاشات، بل كان قاعدة الصفحات كلها وقد رُقّعت ثلاثٌ منها بيدها.
     ورقعةُ صفحةٍ صفحةً كانت تعني ثلاثين كتلة نمط متطابقة يسهو عن إحداها أول
     من يضيف شاشة جديدة.

     ولماذا الآن ولم يكن يجوز في DEC-115؟ لأن التأجيل هناك كان **مشروطًا بقياس**
     لا رأيًا: «`saray.css` يخدم ثلاثين شاشة لم أقس أيًّا منها… التوحيد بند
     نظافة صالح **بعد** قياس الثلاثين — لا قبله» (`dec115/online-WIRING.md` §4).
     والقياس وقع في هذه الشريحة على الصفحات كلها، وشرطُه الثاني قيس كذلك:
     **صفر عنصر `position:absolute|fixed|sticky` داخل أي `.panel`** في الصفحات
     الثلاث والثلاثين (المسبار يعطي نتيجة واحدة: `#receipt` في `pos.html` وهي
     قاعدة `@media print` وحدها، وكتلتها المطلقة تفلت من قصّ الأسلاف لأن
     حاويتها المرجعية هي المستند لا اللوح). فلا شيء يُقصّ بالتوحيد.

     ولا يُجعل الجدول نفسه `display:block`: قياس DEC-115 أثبت أن ذلك يُفقده
     امتداده إلى عرض اللوح حيث لا تجاوز أصلًا — إصلاح عطبٍ بإحداث آخر. */
  overflow-x: auto;
}
.panel h2 { font-size: 1rem; margin-bottom: 14px; color: var(--gold-soft); font-weight: 600; display: flex; align-items: center; gap: 10px; }
.grid { display: grid; gap: 16px; }
.cards { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
/* ── §14: أصل التجاوز الأفقي عند 375px ───────────────────────────
   مسار الشبكة `1fr` هو في الحقيقة `minmax(auto, 1fr)`، و«auto» في حدّه الأدنى
   تعني **min-content العنصر**. فلوحٌ واحد فيه جدول عريض كان يرفع المسار كله
   إلى 543–584px داخل حاوية عرضها 375px، فتُدفع الألواح كلها خارج الشاشة
   (يسارًا لأن الاتجاه RTL) وتُقاس الصفحة 557–598px.
   `min-width: 0` يلغي هذا الحدّ الأدنى التلقائي فيعود المسار إلى عرض حاويته.
   المقاس بعده: 375/375 على الشاشات الأربع. وعلى 1024 و1440 الأثر **صفر** —
   قُورنت عروض العناصر قبل/بعد فتطابقت حرفيًا (المسارات كانت أوسع من المحتوى
   أصلًا، فالقاعدة لا تعمل شيئًا هناك). */
.grid > *, .cards > *, .pos-grid > * { min-width: 0; }
.card {
  background: linear-gradient(160deg, rgba(158,119,25,.05), rgba(255,255,255,.25)), var(--ink-2);
  border: 1px solid var(--hairline); border-radius: var(--radius); padding: 16px 18px;
  transition: border-color var(--trans), transform var(--trans);
}
.card:hover { border-color: var(--hairline-strong); transform: translateY(-1px); }
.card .k { color: var(--muted); font-size: .76rem; margin-bottom: 8px; font-weight: 300; }
.card .v { font-family: "Noto Naskh Arabic", serif; font-size: 1.55rem; font-weight: 700; color: var(--ivory); }
.card .v small { font-size: .74rem; color: var(--muted); font-weight: 300; font-family: "Noto Sans Arabic", sans-serif; }

/* ── النماذج والأزرار ───────────────────────────────────────── */
label { display: block; font-size: .78rem; color: var(--muted); margin: 10px 0 5px; font-weight: 300; }
input, select, textarea {
  width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(85,101,122,.30);
  background: var(--ink-3); color: var(--ivory); font-family: inherit; font-size: .93rem;
  transition: border-color var(--trans), box-shadow var(--trans);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(158,119,25,.22); }
/* ══ (UI-F-P · اكتشافا 3 و19) هدف اللمس في صناديق الاختيار ═════════════════
   `input, select, textarea { width: 100% }` أعلاه كانت تشمل صندوق الاختيار
   فيخرج بعرض السطر كله وارتفاع 13px — أوسعُ مما يجب وأقصرُ مما يكفي. والمقيس
   بالمتصفح: 45 هدفًا دون الأربعين في `users` (شبكة الصلاحيات) و18 في
   `settings`، كلها صناديق اختيار. هنا يُعاد للصندوق حجمه الحقيقي (20px مربّعًا)
   ويُرفع **الوسمُ الحاوي** — وهو المنطقة التي تُنقر فعلًا حين يلفّ الحقل — إلى
   أربعين. ولا يُمَسّ شكلٌ آخر: القاعدة محصورة بـ`type="checkbox"`. */
input[type="checkbox"], input[type="radio"] {
  width: 20px; height: 20px; min-height: 20px; flex-shrink: 0; padding: 0;
  accent-color: var(--gold-soft); cursor: pointer;
}
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
  display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer;
}
button {
  cursor: pointer; border: 0; border-radius: 10px; padding: 10px 18px; font-family: inherit;
  /* (مراجعة R2) خصائص مسمّاة لا `all`: هذه هي ما يتغيّر في `:hover` و`:disabled`
     و`.ghost` — و`all` كانت تحرّك معها كل ما يُضاف غدًا بلا قصد. */
  font-size: .9rem; font-weight: 600;
  transition: filter var(--trans), box-shadow var(--trans), border-color var(--trans), color var(--trans), opacity var(--trans);
  background: linear-gradient(135deg, var(--gold-soft), var(--gold-deep)); color: #FFF8E6;
}
button:hover { filter: brightness(1.1); box-shadow: 0 4px 18px rgba(158,119,25,.25); }
button.ghost { background: transparent; border: 1px solid rgba(85,101,122,.38); color: var(--ivory); }
button.ghost:hover { border-color: var(--gold); color: var(--gold-soft); box-shadow: none; }
button.warn { background: linear-gradient(135deg, #8A5800, #6B4400); color: #FFF6E6; }
button.danger { background: linear-gradient(135deg, #A03038, #7E2E33); color: #FFECEC; }
button:disabled { opacity: .4; cursor: not-allowed; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* (مراجعة R2) هدف اللمس: `padding: 3px` كان يعطي ارتفاعًا ~26px — دون الأربعين
   المطلوبة، وهذا الزر يُلمس كثيرًا (الكمية · «حفظ» في صفوف الإعدادات · 91 موضعًا
   في 21 صفحة). المساحة تُرفع بـ`min-height` وحدها فلا يتغيّر شكل الزر ولا حجم
   خطه ولا حشوه الأفقي — تكبر منطقة الإصبع لا الزينة. */
/* (UI-F-P · اكتشاف 13) والعرض كذلك: أزرار `×` (سحب منحة · حذف لون · إزالة سطر)
   كانت 34px عرضًا — والحدّ أربعون في البعدين لا في الارتفاع وحده. والنصّيّة منها
   أوسع من أربعين أصلًا فلا يتغيّر لها شكل. */
.qtybtn { padding: 3px 12px; min-height: 40px; min-width: 40px; font-size: .9rem; background: var(--ink-3); border: 1px solid rgba(85,101,122,.32); color: var(--ivory); }
.qtybtn:hover { border-color: var(--gold); box-shadow: none; }
/* (UI-F-P) رابطٌ يلبس ثوب زرّ يُلمس كزرّ: `a.ghost` كان 28px ارتفاعًا في
   `wholesale` و`credit` و`import`. تُرفع المساحة وحدها — بلا حدٍّ ولا أرضية
   تُضاف، فلا يتغيّر شكله ولا يصير زرًّا لم يكن. */
a.ghost { display: inline-flex; align-items: center; min-height: 40px; }

/* ── الجداول ────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { padding: 10px 12px; border-bottom: 1px solid rgba(85,101,122,.16); text-align: right; }
th { color: var(--muted); font-weight: 400; font-size: .74rem; }
tbody tr { transition: background var(--trans); }
tbody tr:hover { background: rgba(158,119,25,.05); }
.num { font-variant-numeric: tabular-nums; direction: ltr; text-align: left; }

/* ── الرسائل والشارات ───────────────────────────────────────── */
.msg { padding: 11px 14px; border-radius: 10px; font-size: .87rem; margin-top: 10px; border: 1px solid transparent; }
.msg.ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.msg.err { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.msg.info { background: var(--info-bg); border-color: var(--info); color: var(--info); }
.pill { display: inline-block; padding: 3px 12px; border-radius: 99px; font-size: .72rem; background: var(--ink-3); border: 1px solid rgba(85,101,122,.32); color: var(--muted); }
.pill.g { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.pill.y { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.pill.b { background: var(--info-bg); border-color: var(--info); color: var(--info); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.row > div { flex: 1; min-width: 130px; }

/* ── مسرح «السراي» — الذكاء بطلاً ───────────────────────────── */
.stage {
  min-height: calc(100vh - 70px); display: flex; flex-direction: column; align-items: center;
  padding: 12px 28px 30px; position: relative;
}
.kpis { width: 100%; max-width: 1100px; }
.orb-zone { flex: 1; display: grid; place-items: center; width: 100%; padding: 26px 0 10px; position: relative; }
.orb-wrap { position: relative; width: min(240px, 46vw); aspect-ratio: 1; cursor: pointer; }
.orb-wrap:focus-visible { outline: 2px solid var(--gold); outline-offset: 12px; border-radius: 50%; }
.orb {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,240,190,.95), rgba(212,175,55,.75) 34%, rgba(90,66,12,.9) 78%, #241C05 100%);
  box-shadow: 0 0 50px rgba(158,119,25,.30), inset 0 0 55px rgba(0,0,0,.30);
  transition: transform 400ms ease, box-shadow 400ms ease;
}
.ring { position: absolute; inset: -14px; border-radius: 50%; border: 1px solid var(--hairline-strong); opacity: .8; }
.ring.r2 { inset: -30px; opacity: .4; }
.ring.r3 { inset: -50px; opacity: .18; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes ripple { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes spinring { to { transform: rotate(360deg); } }
.orb-wrap[data-state="idle"] .orb { animation: breathe 4.5s ease-in-out infinite; }
.orb-wrap[data-state="listening"] .orb { box-shadow: 0 0 90px rgba(158,119,25,.45), inset 0 0 55px rgba(0,0,0,.3); }
.orb-wrap[data-state="listening"] .ring { animation: ripple 1.6s ease-out infinite; border-color: var(--gold); }
.orb-wrap[data-state="listening"] .ring.r2 { animation-delay: .5s; }
.orb-wrap[data-state="listening"] .ring.r3 { animation-delay: 1s; }
.orb-wrap[data-state="thinking"] .ring { border-style: dashed; border-color: var(--gold); animation: spinring 2.4s linear infinite; }
.orb-wrap[data-state="speaking"] .orb { animation: breathe 1.1s ease-in-out infinite; box-shadow: 0 0 100px rgba(158,119,25,.45), inset 0 0 55px rgba(0,0,0,.3); }
.orb-hint { text-align: center; margin-top: 26px; color: var(--muted); font-size: .9rem; font-weight: 300; }
.orb-state { text-align: center; margin-top: 8px; color: var(--gold-soft); font-family: "Noto Naskh Arabic", serif; font-size: 1.05rem; min-height: 1.6em; }
@media (prefers-reduced-motion: reduce) {
  .orb, .ring { animation: none !important; }
  * { transition-duration: 1ms !important; }
}

/* محادثة السراي العائمة */
.convo {
  width: 100%; max-width: 760px; max-height: 34vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 6px 4px; margin-top: 6px;
  mask-image: linear-gradient(180deg, transparent, #000 8%);
}
.jb { max-width: 82%; padding: 12px 16px; border-radius: 16px; font-size: .93rem; line-height: 1.8; white-space: pre-wrap; }
.jb.me { align-self: flex-start; background: linear-gradient(135deg, rgba(158,119,25,.16), rgba(158,119,25,.06)); border: 1px solid var(--hairline-strong); border-end-start-radius: 5px; }
.jb.ai { align-self: flex-end; background: var(--ink-2); border: 1px solid rgba(85,101,122,.24); border-end-end-radius: 5px; }
.jb.ai.talking { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(158,119,25,.40); }
.askbar { width: 100%; max-width: 760px; display: flex; gap: 10px; margin-top: 12px; }
.askbar input { flex: 1; background: rgba(255,253,246,.92); backdrop-filter: blur(8px); }

/* ── نقطة البيع ─────────────────────────────────────────────── */
.pos-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
@media (max-width: 920px) { .pos-grid { grid-template-columns: 1fr; } }
.chooser { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chooser button { background: var(--ink-3); border: 1px solid var(--hairline-strong); color: var(--ivory); font-weight: 400; }
.chooser button:hover { border-color: var(--gold); color: var(--gold-soft); box-shadow: none; }
.total-line { display: flex; justify-content: space-between; padding: 7px 2px; font-size: .95rem; color: var(--muted); }
.total-line b { color: var(--ivory); }
.total-line.grand { font-size: 1.25rem; border-top: 1px solid var(--hairline); padding-top: 12px; margin-top: 4px; }
.total-line.grand b { color: var(--gold-soft); font-family: "Noto Naskh Arabic", serif; }

/* ── تسجيل الدخول ───────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-box { width: 100%; max-width: 400px; }
.login-brand { text-align: center; margin-bottom: 26px; }
.login-brand .mark { margin: 0 auto 14px; width: 64px; height: 64px; border-radius: 18px; }
.login-brand h1 { font-size: 1.5rem; color: var(--ivory); }
.login-brand p { color: var(--muted); font-size: .78rem; margin-top: 6px; font-weight: 300; }

/* ── استجابة ────────────────────────────────────────────────── */
.menu-btn { display: none; }
@media (max-width: 920px) {
  .shell { flex-direction: column; }
  /* ══ (UI-F-P · R2-08) سدُّ الأمان الأخير — بعد إصلاح الأصل لا بدلًا عنه ══════
     الأصل (شريط الصفحة) صار لا يفيض، والقياس بعده: **صفر** تمرير مستند على 375
     و412 في الثلاث والثلاثين بلا هذا السطر. ويبقى السطر سدًّا معلنًا لما قد
     يُضاف غدًا خارج لوحٍ له حاوية تمرير — والقاعدة «RTL بلا فيض على 375» تقيس
     المستند، فلا يُترك بابها مفتوحًا على أول عنصر جديد.
     و`clip` لا `hidden` عمدًا: `hidden` يصنع صندوق تمرير يبتلع `sticky` ويصير
     حاويةً مرجعية، و`clip` يقصّ ولا يصنع شيئًا. والشريط الجانبي `position:fixed`
     لا يقصّه سلفٌ بلا `transform`/`filter`/`contain` — و`.shell` بلا أيٍّ منها
     (تحقق حيّ: الشريط يُفتح ويُغلق بعد هذا السطر على 375). */
  .shell { overflow-x: clip; }
  /* RTL: الشريط يسكن يمين الشاشة ويختبئ خارجها يمينًا (إحداثيات فيزيائية عمدًا) */
  aside.side { position: fixed; right: 0; left: auto; top: 0; transform: translateX(100%); transition: transform var(--trans); box-shadow: -20px 0 60px rgba(35,43,56,.25); }
  aside.side.open { transform: translateX(0); }
  .menu-btn { display: inline-flex; align-items: center; gap: 8px; }
  main, .pagebar { padding-inline: 14px; }
  .stage { padding-inline: 12px; }
  /* §14: المحتوى العريض يتمرر **داخل لوحه** ولا يجرّ الصفحة معه.
     جدولٌ بتسعة أعمدة حدّه الأدنى 525px لا يتسع في 305px المتاحة على 375px،
     وبلا هذا السطر كان يخرج من اللوح ويدفع المستند إلى 560px.
     الآن اللوح صندوق تمرير أفقي (وفي RTL يتمرر يسارًا: scrollLeft من 0 إلى
     −219)، والجدول يحتفظ بعرض أعمدته الطبيعي فلا يُقصّ نصٌّ ولا تنكسر محاذاة
     رأس بجسم.
     ولم يُجعل الجدول نفسه `display:block` عمدًا رغم أنه يزيل التجاوز أيضًا:
     قياسًا كان يُفقد الجدولَ امتدادَه إلى عرض اللوح على 768 و920 (698px ⇒
     330–676px) حيث لا تجاوز أصلًا — إصلاحُ عطبٍ بإحداث عطبٍ آخر.
     ولا شيء يُقصّ رأسيًا: لا عنصر `position:absolute` داخل الألواح (مقيس)،
     وارتفاع اللوح تلقائي فلا يتجاوزه محتواه.

     (DEC-118 محور 8 — S16) القاعدة نفسها **رُفعت من هنا إلى تعريف `.panel`
     أعلاه بلا سقف عرض**، بعد أن قيست الصفحات الثلاث والثلاثون كلها كما اشترط
     تأجيل DEC-115 حرفيًا. وبقاء نسخةٍ ثانيةٍ هنا كان يوهم أن للعرض الصغير
     قاعدةً تخصّه، والقاعدة واحدة في العروض الأربعة. */
}

@media print {
  body * { visibility: hidden; }
  #receipt, #receipt * { visibility: visible; }
  #receipt { position: absolute; inset: 0; background: #fff; color: #000; padding: 20px; }
}