/* ═══════════════════════════════════════════════════════════════════
   صِلَة — نظام التصميم v7 «ثيم التسوّق» (يُحمَّل بعد app.css ويعيد تعريف الرموز)
   لوحة صفحة /shop حرفياً: كحلي #0B1F3A للحبر والقشرة، برتقالي الفعل #C2410C
   (أزرار وروابط ونص — الأبيض عليه 5.2:1)، برتقالي الهوية #EA580C، أخضر #0F6E56،
   أرضية باردة #F3F6FB، أنصاف أقطار 12/18/24، ظلال كحلية ناعمة، خط Cairo.
   قرار المالك 2026-10-17: «ابنِ الثيم للمنصة والتطبيقات بثيم /shop» — يلغي
   «Silah Console Light» الأزرق (2026-09-22). أسماء المتغيّرات القديمة باقية؛ القيم وحدها تغيّرت.
   المصدر الوحيد للحقيقة: public/assets/css/shop.css (:root) — والمواصفة parity/theme-shop-spec.md.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* ── الرموز ── */
  --ink: #0B1F3A; --ink-2: #33445C; --ink-3: #56677F; --ink-4: #8393A8;
  --bg: #F3F6FB; --bg-2: #E9EFF8; --surface: #FFFFFF; --surface-2: #F8FAFD; --line: #E2E8F0; --line-2: #EDF1F7;
  --teal: #C2410C; --teal-2: #9A3412; --teal-soft: #FFF1E6; --teal-rgb: 194, 65, 12;
  --orange: #EA580C; --rose: #EA580C; --rose-soft: #FFF1E6; --orange-soft: #FFF1E6; --rose-rgb: 234, 88, 12;
  --violet: #12345F; --violet-soft: #E9EFF8; --gold: #D97706; --gold-soft: #FEF3C7;
  --ok: #0F6E56; --ok-soft: #E1F5EE; --warn: #B45309; --warn-soft: #FEF3C7; --bad: #B42318; --bad-soft: #FDECEA; --info: #12345F; --info-soft: #E9EFF8;
  --rail: #0B1F3A; --rail-2: #0D2749; --rail-ink: #A9B8CC;
  --grad-brand: #C2410C;
  --grad-cta: #C2410C;
  --glow: 0 1px 3px rgba(11, 31, 58, .14);
  --ease: cubic-bezier(.2, .7, .2, 1); --dur: .18s;
  --fs-0: clamp(11px, .66rem + .12vw, 12px); --fs-1: clamp(12.5px, .74rem + .18vw, 13.5px); --fs-2: clamp(13.5px, .8rem + .25vw, 15px);
  --fs-3: clamp(15px, .88rem + .4vw, 18px); --fs-4: clamp(18px, 1rem + .8vw, 25px); --fs-5: clamp(24px, 1.2rem + 1.5vw, 42px);
  /* v5.2 قرار المالك: «الخط كايرو» — Cairo وحده للواجهة كلها (النص والعناوين والأرقام والرموز) */
  --font: 'Cairo', sans-serif;
  --display: 'Cairo', sans-serif;
  --mono: 'Cairo', ui-monospace, Menlo, Consolas, monospace;
  --rail-w: 68px; --sidebar-w: 232px;
  /* ── إعادة تعريف رموز app.css القديمة على اللوحة الجديدة ── */
  --primary: #0B1F3A;            /* حبر العناوين */
  --secondary: #C2410C;          /* الفعل الرئيسي */
  --sec-deep: #9A3412; --sec-light: #FDBA74; --sec-rgb: 194, 65, 12;
  --accent: #C2410C; --accent-deep: #9A3412; --acc-light: #FDBA74; --acc-rgb: 194, 65, 12;
  --success: #0F6E56; --warning: #B45309;
  --card: #FFFFFF; --border: #E2E8F0;
  --blue-soft: #E9EFF8; --cyan-soft: #E9EFF8; --green-soft: #E1F5EE; --amber-soft: #FEF3C7;
  --grad: #C2410C;
  --shadow-sm: 0 1px 2px rgba(11, 31, 58, .06);
  --shadow-md: 0 8px 20px -12px rgba(11, 31, 58, .30);
  --r: 12px;
  --panel: #FFFFFF; --muted: #56677F;
  /* ── رموز /shop الجديدة: أنصاف الأقطار والظلال وتعبئة الفعل (v7) ── */
  --r-card: 18px; --r-lg: 24px;
  --sh-card: 0 18px 50px -24px rgba(11, 31, 58, .35);
  --sh-or: 0 16px 34px -18px rgba(194, 65, 12, .65);
  --fill: #C2410C; --fill-2: #9A3412;                 /* تعبئة الأزرار والشارات بنص أبيض — ثابتة في الفاتح والداكن (5.2:1) */
  --ring: 0 0 0 3px rgba(194, 65, 12, .16);           /* حلقة تركيز الحقول */
  /* جسر Bootstrap 5.3: متغيّراته الزرقاء/الصفراء/السماوية الافتراضية تتبع لوحة /shop (الروابط الخام، text-danger/-success/-warning، التنبيهات الفرعية…) */
  --bs-primary: #C2410C; --bs-primary-rgb: 194, 65, 12;
  --bs-success: #0F6E56; --bs-success-rgb: 15, 110, 86;
  --bs-info: #12345F; --bs-info-rgb: 18, 52, 95;
  --bs-warning: #B45309; --bs-warning-rgb: 180, 83, 9;
  --bs-danger: #B42318; --bs-danger-rgb: 180, 35, 24;
  --bs-link-color: #9A3412; --bs-link-color-rgb: 154, 52, 18;
  --bs-link-hover-color: #7C2D12; --bs-link-hover-color-rgb: 124, 45, 18;
  --bs-border-color: #E2E8F0; --bs-focus-ring-color: rgba(194, 65, 12, .25);
  --bs-code-color: #9A3412;
  --bs-primary-bg-subtle: #FFF1E6; --bs-primary-border-subtle: #FDBA74; --bs-primary-text-emphasis: #7C2D12;
  --bs-success-bg-subtle: #E1F5EE; --bs-success-border-subtle: #B9E3D5; --bs-success-text-emphasis: #0B5A46;
  --bs-info-bg-subtle: #E9EFF8; --bs-info-border-subtle: #C7D3E3; --bs-info-text-emphasis: #12345F;
  --bs-warning-bg-subtle: #FEF3C7; --bs-warning-border-subtle: #FCD34D; --bs-warning-text-emphasis: #92400E;
  --bs-danger-bg-subtle: #FDECEA; --bs-danger-border-subtle: #F4B4AE; --bs-danger-text-emphasis: #8C1D13;
  accent-color: #C2410C;                              /* مربعات الاختيار والراديو والمنزلقات الأصلية */
}
html[data-theme="dark"] {
  --ink: #EAF1FA; --ink-2: #C7D3E3; --ink-3: #93A6BF; --ink-4: #6C809B;
  --bg: #081629; --bg-2: #0B1F3A; --surface: #0D2749; --surface-2: #12345F; --line: #1C3A63; --line-2: #16304F;
  --teal: #FB923C; --teal-2: #FDBA74; --teal-soft: #3A1D0B; --teal-rgb: 251, 146, 60;
  --orange: #FB923C; --rose: #FB923C; --rose-soft: #3A1D0B; --orange-soft: #3A1D0B; --rose-rgb: 251, 146, 60;
  --violet: #93A6BF; --violet-soft: #12345F; --gold: #FBBF24; --gold-soft: #33260F;
  --ok: #34D399; --ok-soft: #0B2E25; --warn: #FBBF24; --warn-soft: #33260F; --bad: #F87171; --bad-soft: #3A1416; --info: #93C5FD; --info-soft: #12345F;
  --rail: #050E1B; --rail-2: #081629; --rail-ink: #7E92AB;
  --glow: 0 1px 3px rgba(0,0,0,.5);
  --primary: #EAF1FA; --secondary: #FB923C; --sec-deep: #FDBA74; --sec-rgb: 251, 146, 60;
  --accent: #FB923C; --accent-deep: #FDBA74; --acc-rgb: 251, 146, 60;
  --success: #34D399; --warning: #FBBF24;
  --card: #0D2749; --border: #1C3A63; --blue-soft: #12345F; --cyan-soft: #12345F; --green-soft: #0B2E25; --amber-soft: #33260F;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow-md: 0 14px 40px -16px rgba(0,0,0,.7);
  --sh-card: 0 18px 50px -24px rgba(0,0,0,.7); --sh-or: 0 16px 34px -18px rgba(251, 146, 60, .35);
  --ring: 0 0 0 3px rgba(251, 146, 60, .22);
  --panel: #0D2749; --muted: #93A6BF;
  --bs-primary: #FB923C; --bs-primary-rgb: 251, 146, 60;
  --bs-success: #34D399; --bs-success-rgb: 52, 211, 153;
  --bs-info: #93C5FD; --bs-info-rgb: 147, 197, 253;
  --bs-warning: #FBBF24; --bs-warning-rgb: 251, 191, 36;
  --bs-danger: #F87171; --bs-danger-rgb: 248, 113, 113;
  --bs-link-color: #FB923C; --bs-link-color-rgb: 251, 146, 60;
  --bs-link-hover-color: #FDBA74; --bs-link-hover-color-rgb: 253, 186, 116;
  --bs-border-color: #1C3A63; --bs-focus-ring-color: rgba(251, 146, 60, .3);
  --bs-code-color: #FDBA74;
  accent-color: #FB923C;
}

/* ═══ الطباعة والأرضية ═══ */
body { font-family: var(--font); font-size: var(--fs-2); color: var(--ink); background: var(--bg); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
html[data-theme="dark"] body { color: var(--ink); }
h1, h2, h3, h4, h5, .topbar-title, .panel-title, .e3-kpi > b, .stat-value, .erp-kpi b, .ord-stat b, .e3-ring-v b, .pos-totals .grand strong, .e3-hero h1, .e3-rep-t b, .setting-card strong, .e3-card-h > b, .modal-title { font-family: var(--display); letter-spacing: 0; }
h1, h2, h3, .topbar-title, .panel-title { color: var(--ink); font-weight: 800; text-wrap: balance; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3 { color: var(--ink); }
.num, [dir="ltr"].num, .stat-value, .e3-kpi > b, .table td.num, .pos-totals strong { font-variant-numeric: tabular-nums; }
code, kbd, .mono, .inv-no, .doc-no { font-family: var(--mono); }
body.v5::before { content: none; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 8px; }

/* ═══ الحركة ═══ */
@keyframes dsRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dsGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dsDraw { to { stroke-dashoffset: 0; } }
@keyframes dsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dsPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(194,65,12,.35); } 60% { box-shadow: 0 0 0 10px rgba(194,65,12,0); } }
@keyframes dsBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes dsPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.ds-a { animation: dsRise .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.ds-grow { transform-origin: 100% 50%; animation: dsGrow .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms + .15s); }
[dir="ltr"] .ds-grow { transform-origin: 0 50%; }
.ds-draw { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: dsDraw 1.5s var(--ease) forwards; animation-delay: .25s; }
.ds-draw-s { stroke-dasharray: 260; stroke-dashoffset: 260; animation: dsDraw 1.2s var(--ease) forwards; animation-delay: .3s; }
.ds-fade { animation: dsFade 1.2s ease .6s both; }
.ds-live { position: relative; }
.ds-live::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: dsPulse 2.2s ease-out infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ds-a, .ds-grow, .ds-draw, .ds-draw-s, .ds-fade, .ds-live::after { animation: none !important; } .ds-draw, .ds-draw-s { stroke-dashoffset: 0; } }

/* ═══ الهيكل v5: شريط أيقونات + قائمة سياقية + شريط أوامر ═══ */
body.v5 .rail { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: var(--rail-w); z-index: 1045;
  background: var(--rail); color: var(--rail-ink); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 4px; }
body.v5 .rail-logo { width: 40px; height: 40px; border-radius: 12px; background: var(--grad-brand); display: grid; place-items: center; margin-bottom: 8px; box-shadow: none; }
body.v5 .rail-logo img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
body.v5 .rail-btn { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; position: relative; color: var(--rail-ink); text-decoration: none; transition: background var(--dur), color var(--dur); }
body.v5 .rail-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
body.v5 .rail-btn.active { background: rgba(234,88,12,.22); color: #fff; }
body.v5 .rail-btn.active::before { content: ""; position: absolute; inset-inline-start: -11px; top: 13px; bottom: 13px; width: 3px; border-radius: 3px; background: #EA580C; }
body.v5 .rail-btn svg { width: 20px; height: 20px; }
body.v5 .rail-btn .rail-badge { position: absolute; top: 6px; inset-inline-end: 6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #B42318; color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
body.v5 .rail-btn .rail-tip { position: absolute; inset-inline-start: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-4px); background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 5; }
[dir="ltr"] body.v5 .rail-btn .rail-tip { transform: translateY(-50%) translateX(4px); }
body.v5 .rail-btn:hover .rail-tip, body.v5 .rail-btn:focus-visible .rail-tip { opacity: 1; transform: translateY(-50%); }
body.v5 .rail-sep { width: 28px; height: 1px; background: rgba(255,255,255,.12); margin: 6px 0; }
body.v5 .rail-grow { flex: 1; }
body.v5 .rail-avatar { width: 34px; height: 34px; border-radius: 10px; background: var(--grad-brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; text-decoration: none; margin-top: 4px; }
body.v5 .sidebar { inset-inline-start: var(--rail-w); width: var(--sidebar-w); background: var(--surface); color: var(--ink-2); border-inline-end: 1px solid var(--line); box-shadow: none; }
body.v5 .sidebar-brand { color: var(--ink); font-family: var(--display); font-size: var(--fs-3); font-weight: 800; padding: 16px 16px 10px; }
body.v5 .sidebar-brand img { display: none; }
body.v5 .sidebar-brand small { display: block; font: 500 var(--fs-0)/1.4 var(--font); color: var(--ink-3); letter-spacing: .04em; }
body.v5 .nav-sec { color: var(--ink-3); font-size: var(--fs-0); font-weight: 700; letter-spacing: .05em; padding: 14px 12px 6px; }
body.v5 .nav-item { color: var(--ink-2); font-weight: 600; font-size: var(--fs-1); padding: 9px 12px; border-radius: 12px; transition: background var(--dur), color var(--dur); }
body.v5 .nav-item:hover { background: var(--bg-2); color: var(--ink); }
body.v5 .nav-item.active { background: var(--teal-soft); color: var(--teal-2); box-shadow: none; font-weight: 700; }
body.v5 .nav-item .cnt { margin-inline-start: auto; font-size: var(--fs-0); color: var(--ink-3); background: var(--bg-2); padding: 1px 7px; border-radius: 999px; }
body.v5 .nav-item.active .cnt { background: var(--surface); color: var(--teal-2); }
body.v5 .sidebar-footer { border-top: 1px solid var(--line-2); }
body.v5 .tenant-meta strong { color: var(--ink); }
body.v5 .tenant-meta span { color: var(--ink-3); }
body.v5 .sidebar-footer .btn-icon { color: var(--ink-3); }
body.v5 .sidebar-footer .btn-icon:hover { background: var(--bg-2); color: var(--bad); }
body.v5 .main-wrap { margin-inline-start: calc(var(--rail-w) + var(--sidebar-w)); }
body.v5 .topbar { background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px clamp(12px, 1.6vw, 22px); min-height: 60px; gap: 10px; flex-wrap: wrap; }
html[data-theme="dark"] body.v5 .topbar { background: var(--surface); color: var(--ink); }
body.v5 .topbar-title { font-size: var(--fs-3); font-weight: 800; color: var(--ink); }
body.v5 .topbar-actions { gap: 6px; }
body.v5 .ds-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink-3); width: min(300px, 100%); font: 500 var(--fs-1) var(--font); transition: border-color var(--dur), box-shadow var(--dur); cursor: pointer; }
body.v5 .ds-search:hover { border-color: var(--teal); box-shadow: var(--ring); }
body.v5 .ds-search kbd { margin-inline-start: auto; font: 11px var(--mono); padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink-3); }
body.v5 .ds-branch { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; font: 500 var(--fs-1) var(--font); background: var(--surface); color: var(--ink-2); max-width: 220px; }
body.v5 .ds-branch span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.v5 .btn-icon { width: 38px; height: 38px; border-radius: 12px; color: var(--ink-2); border: 1px solid transparent; }
body.v5 .btn-icon:hover { background: var(--bg); border-color: var(--line); color: var(--ink); }
body.v5 .lang-switch { border-radius: 12px; color: var(--ink-3); border-color: var(--line); }
body.v5 .lang-switch:hover { color: var(--teal-2); border-color: var(--teal); }
body.v5 .notif-badge { background: #B42318; }
body.v5 .content { max-width: 1440px; padding: clamp(14px, 1.8vw, 24px) clamp(12px, 1.6vw, 24px) 4rem; }
body.v5 .ds-cta { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 12px; background: var(--fill); color: #fff; font: 700 var(--fs-1) var(--font); text-decoration: none; box-shadow: var(--shadow-sm); transition: background var(--dur), box-shadow var(--dur); }
body.v5 .ds-cta:hover { color: #fff; background: var(--fill-2); box-shadow: var(--shadow-sm); }
body.v5 .ds-cta svg { width: 16px; height: 16px; }
@media (max-width: 991.98px) {
  body.v5 .rail { top: auto; bottom: 0; inset-inline: 0; width: auto; height: calc(62px + env(safe-area-inset-bottom)); padding: 6px 8px env(safe-area-inset-bottom); flex-direction: row; justify-content: space-around; border-top: 1px solid rgba(255,255,255,.08); }
  body.v5 .rail-logo, body.v5 .rail-sep, body.v5 .rail-grow, body.v5 .rail-avatar, body.v5 .rail-btn .rail-tip, body.v5 .rail-btn.rail-more-hide { display: none; }
  body.v5 .rail-btn.active::before { inset-inline-start: 14px; inset-inline-end: 14px; top: auto; bottom: -6px; width: auto; height: 3px; }
  body.v5 .sidebar { inset-inline-start: 0; width: min(300px, 86vw); }
  body.v5 .main-wrap { margin-inline-start: 0; }
  body.v5 .content { padding-bottom: calc(5.4rem + env(safe-area-inset-bottom)); }
  body.v5 .fab-wrap { bottom: calc(4.8rem + env(safe-area-inset-bottom)); }
  body.v5 .efab-wrap { bottom: calc(9rem + env(safe-area-inset-bottom)); }
  body.v5 .m-tabbar { display: none !important; }
  body.v5 .ds-search { order: 9; width: 100%; }
  body.v5 .ds-branch { display: none; }
}
@media (display-mode: standalone) { body.v5 .sidebar { padding-top: env(safe-area-inset-top); } }

/* ═══ التخطيط الكلاسيكي (الأدمن وغيره): القائمة الجانبية بلون القشرة (كحلي) والنشط بلمسة برتقالية ═══ */
.sidebar { background: var(--rail); }
.sidebar .nav-item { color: var(--rail-ink); }
.sidebar .nav-item:hover { color: #fff; background: rgba(255,255,255,.07); }
.sidebar .nav-item.active { color: #fff; background: rgba(234,88,12,.24); box-shadow: inset 0 0 0 1px rgba(234,88,12,.38); }
.sidebar .tenant-chip { background: var(--fill); }
body.v5 .sidebar { background: var(--surface); }

/* ═══ الأزرار — 12px، وزن 700، الأساسي برتقالي الفعل بنص أبيض (5.2:1)، الثانوي أبيض بحد 1px وحبر ═══ */
.btn { font-family: var(--font); font-weight: 700; border-radius: 12px; transition: background var(--dur), border-color var(--dur), color var(--dur), box-shadow var(--dur); }
.btn-lg { border-radius: 14px; }
.btn:active { transform: scale(.98); }
.btn-silah { background: var(--fill); box-shadow: var(--shadow-sm); }
.btn-silah:hover { background: var(--fill-2); box-shadow: var(--shadow-sm); }
.btn-ghost { background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-weight: 700; }
.btn-ghost:hover { border-color: var(--ink-4); color: var(--ink); background: var(--surface-2); box-shadow: none; }
.btn-primary, .btn-success { background: var(--fill); border-color: var(--fill); color: #fff; }
.btn-primary:hover, .btn-success:hover { background: var(--fill-2); border-color: var(--fill-2); box-shadow: none; }
.btn-outline-secondary, .btn-outline-primary, .btn-light { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-light:hover { background: var(--surface-2); border-color: var(--ink-4); color: var(--ink); }
.btn-danger, .btn-outline-danger:hover { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-outline-danger { color: var(--bad); border-color: var(--bad-soft); background: var(--surface); }
.btn-warning { background: var(--warn); border-color: var(--warn); color: #fff; }
.e3-btn { background: var(--fill); color: #fff; border-radius: 12px; font-family: var(--font); font-weight: 700; font-size: var(--fs-0); }
.e3-btn:hover { background: var(--fill-2); color: #fff; box-shadow: none; }
.e3-btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.e3-btn.ghost:hover { border-color: var(--ink-4); background: var(--surface-2); box-shadow: none; }
.e3-btn.xs { background: var(--bg-2); color: var(--ink-2); }
.e3-btn.xs:hover { background: var(--fill); color: #fff; }
.fab-main { background: var(--fill); }
.fab-label { background: var(--ink); color: var(--surface); font-family: var(--font); }
.efab-btn { background: var(--fill); box-shadow: var(--shadow-md); }
.efab-panel { background: var(--surface); border-color: var(--line); border-radius: var(--r-card); box-shadow: var(--sh-card); }
.efab-search { border-color: var(--line); background: var(--surface); color: var(--ink); }
.efab-search:focus { border-color: var(--teal); box-shadow: var(--ring); }
.efab-item:hover, .efab-item.on { background: var(--teal-soft); border-color: transparent; }
.efab-item .efab-t { font-weight: 700; }
/* أزرار الدعوة الكبيرة (دخول الضيوف، إتمام الكاشير): الظل البرتقالي الناعم لها وحدها — بقية الكونسول مسطّح */
.btn-silah.btn-lg, .auth-actions .btn-silah, .checkout-mega { box-shadow: var(--sh-or); }
.btn-silah.btn-lg:hover, .auth-actions .btn-silah:hover, .checkout-mega:hover { box-shadow: var(--sh-or); }

/* ═══ البطاقات والمؤشرات — 18px (الكبيرة) و16px (المؤشرات)، حد 1px، ظل ناعم ═══ */
.panel, .e3-card, .stat-card, .ord-stat, .erp-kpi, .erp-tile, .setting-card, .table-card, .pos-cart, .form-panel > .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
.stat-card, .ord-stat, .erp-kpi, .erp-tile { border-radius: 16px; }
.e3-card, .stat-card, .erp-tile, .setting-card { transition: box-shadow var(--dur), border-color var(--dur); }
.e3-card:hover, .stat-card:hover { box-shadow: var(--shadow-md); border-color: var(--ink-4); }
.erp-tile:hover, .setting-card:hover { border-color: var(--teal); box-shadow: var(--shadow-md); }
.e3-card-h { font-family: var(--font); }
.e3-card-h > b { font-size: var(--fs-2); font-weight: 800; color: var(--ink); }
.e3-muted, .e3-k-l, .e3-k-sub, .e3-legend, .e3-rep-t small, .stat-label, .erp-kpi .ek-l, .ord-stat small, .erp-tile p, .form-text, .text-muted { color: var(--ink-3) !important; font-weight: 500; }
.e3-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); container-type: inline-size; }
.e3-kpi::after { content: none; }
.e3-kpi:hover { border-color: var(--ink-4); box-shadow: var(--shadow-md); }
.e3-kpi > b { font-size: clamp(20px, 9.5cqi, 34px); font-weight: 800; color: var(--ink); }
.e3-kpi.ok > b { color: var(--ok); } .e3-kpi.bad > b { color: var(--bad); }
.e3-k-ic { border-radius: 12px; }
.e3-d { font-weight: 700; border-radius: 999px; }
.e3-d.up { background: var(--ok-soft); color: var(--ok); } .e3-d.down { background: var(--bad-soft); color: var(--bad); } .e3-d.flat { background: var(--bg-2); color: var(--ink-3); }

.e3-kpi .spark path[fill]:not([fill="none"]) { opacity: .1; }
.e3-bar, .top-bar, .low-bar, .onb-progress { background: var(--bg-2); border-radius: 999px; }
.e3-bar i, .top-bar span, .low-bar span, .onb-progress span { background: var(--teal); }
.stat-card { container-type: inline-size; }
.stat-value { font-size: clamp(18px, 8cqi, 28px); font-weight: 800; color: var(--ink); }
.stat-icon { border-radius: 12px; }
.ord-stat b { font-size: var(--fs-4); color: var(--ink); }
.ord-stat.hot { border-color: var(--bad); background: var(--bad-soft); }
.ord-stat.hot b { color: var(--bad); }
.erp-kpi b { color: var(--ink); }
.erp-kpi.ok b { color: var(--ok); } .erp-kpi.bad b { color: var(--bad); } .erp-kpi.warn b { color: var(--warn); }
.erp-tile b, .setting-card strong { color: var(--ink); }
.erp-tile .et-badges span { background: var(--teal-soft); color: var(--teal-2); border-radius: 999px; }
.erp-total td { background: var(--surface-2); border-top: 2px solid var(--teal) !important; }
.e3-hero, .e3-hero.dash { background: linear-gradient(135deg, var(--rail) 0%, var(--rail-2) 100%); box-shadow: var(--shadow-md); border-radius: var(--r-card); }
.e3-hero::before { content: none; }
.e3-hero::after { display: none; }
.e3-hero h1 { font-weight: 800; font-size: var(--fs-4); }
.e3-hero p { color: #C7D3E3; font-size: var(--fs-1); }
.e3-eyebrow { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); color: #fff; font-weight: 700; border-radius: 999px; }
.e3-chip { font-weight: 700; color: #D5DEEA; border-color: rgba(255,255,255,.22); border-radius: 999px; }
.e3-chip.on { background: var(--fill); color: #fff; border-color: var(--fill); }
.e3-chip.hot { background: var(--warn); color: #fff; border-color: transparent; }
.e3-hero.dash .e3-chip.hot { background: var(--warn); border-color: var(--warn); color: #fff; }
.e3-ring-v b { color: #fff; font-family: var(--display); } .e3-ring-v span { color: #C7D3E3; }
.e3-ring svg circle[stroke="#E7C55B"] { stroke: var(--gold); }
.e3-att { background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--warn); border-radius: 16px; }
.e3-att-h, .e3-att-row { border-color: var(--line-2); }
.e3-att-h span { background: var(--warn); border-radius: 999px; }
.e3-att-ic { background: var(--warn-soft); border-color: transparent; }
.e3-att-t { font-weight: 600; }
.e3-rep { background: var(--surface); border-color: var(--line); border-radius: 14px; }
.e3-rep:hover { border-color: var(--teal); background: var(--surface); }
.e3-mod { background: var(--surface); border-color: var(--line); font-weight: 700; border-radius: 999px; }
.e3-mod:hover { border-color: var(--teal); color: var(--teal-2); }
.pay-chip, .cap, .ctx-pill { background: var(--bg-2); color: var(--ink-2); border-radius: 999px; }
.badge-sub { background: var(--teal-soft); color: var(--teal-2); border-radius: 999px; }

/* ═══ الحالات والكبسولات — pill بتدرّجات ناعمة من رموز الدلالة ═══ */
.badge-state, .badge, .pill, .chip.state, .status { font-family: var(--font); font-weight: 700; font-size: var(--fs-0); border-radius: 999px; }
.badge-state.ok { background: var(--ok-soft); color: var(--ok); }
.badge-state.off, .badge-state.bad { background: var(--bad-soft); color: var(--bad); }
.badge-state.warn, .badge-state.pending { background: var(--warn-soft); color: var(--warn); }
.badge-state.info { background: var(--info-soft); color: var(--info); }
.badge-state.mute, .badge-state.draft { background: var(--bg-2); color: var(--ink-3); }
.chip, .ord-tab, .seg-btn, .pos-cat { font-family: var(--font); font-weight: 700; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); transition: all var(--dur); }
.seg-btn { border-radius: 12px; }
.chip:hover, .ord-tab:hover, .pos-cat:hover { border-color: var(--teal); color: var(--teal-2); }
.chip.active, .ord-tab.active, .seg-btn.active, .pos-cat.active { background: var(--fill); color: #fff; border-color: var(--fill); }
html[data-theme="dark"] .seg-btn.active { background: var(--fill); color: #fff; }
.alert { border-radius: 14px; border: 1px solid; font-weight: 600; }
.alert-success { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.alert-danger { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.alert-warning { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.alert-info { background: var(--info-soft); color: var(--info); border-color: transparent; }

/* ═══ النماذج — الحقول 12px، التركيز بحلقة برتقالية، التسميات 700 ═══ */
.form-label, .e3-fields label { color: var(--ink-2); font-weight: 700; font-size: var(--fs-1); }
.form-control, .form-select, .efab-search, .e3-fields input, .e3-fields select { border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-family: var(--font); min-height: 42px; transition: border-color var(--dur), box-shadow var(--dur); }
.form-control:hover, .form-select:hover { border-color: var(--ink-4); }
.form-control:focus, .form-select:focus, .e3-fields input:focus { border-color: var(--teal); box-shadow: var(--ring); background: var(--surface); color: var(--ink); }
.form-control-sm, .form-select-sm { min-height: 34px; border-radius: 10px; }
.form-check-input:checked { background-color: var(--fill); border-color: var(--fill); }
.form-check-input:focus { border-color: var(--teal); box-shadow: var(--ring); }
.form-switch .form-check-input:focus:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23C2410C'/%3E%3C/svg%3E"); }
.form-switch .form-check-input:checked { background-color: var(--fill); }
.req { color: var(--bad); }
.num-step button { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.num-step button:hover { background: var(--teal-soft); color: var(--teal-2); }
.actbar { background: var(--surface); border-top: 1px solid var(--line); }

/* ═══ الجداول — الترويسة على --bg-2، المرور على --surface-2 ═══ */
.table { color: var(--ink); font-size: var(--fs-1); --bs-table-color: var(--ink); --bs-table-bg: transparent; --bs-table-border-color: var(--line-2); --bs-table-hover-bg: var(--surface-2); --bs-table-hover-color: var(--ink); --bs-table-striped-bg: var(--surface-2); }
.table thead th, .e3-table th { background: var(--bg-2); color: var(--ink-3); font-weight: 700; font-size: var(--fs-0); border-bottom: 1px solid var(--line); }
.table tbody td { border-bottom: 1px solid var(--line-2); font-size: var(--fs-1); vertical-align: middle; }
.table-hover tbody tr:hover td { background: var(--surface-2); }
.table-wrap { border-radius: 16px; }
.e3-table tbody tr:nth-child(even) td { background: transparent; }
.e3-table tr.e3-total td { background: var(--teal-soft) !important; color: var(--ink); font-weight: 800; }
.dt-toolbar, .dt-pager, .dt-info { color: var(--ink-3); font-family: var(--font); }
.dt-pager button, .act-menu { background: var(--surface); border-color: var(--line); color: var(--ink-2); border-radius: 10px; }
.dt-pager button:hover { border-color: var(--teal); color: var(--teal-2); }

/* ═══ لوحة الطلبات والكاشير ═══ */
.ord-col-head { background: var(--bg-2); color: var(--ink); border-radius: 14px; }
.ord-card, .ord-item { background: var(--surface); border-color: var(--line); border-radius: 16px; transition: box-shadow var(--dur), border-color var(--dur); }
.ord-card:hover { box-shadow: var(--shadow-md); }
.ord-card.hot, .ord-card.new { border-color: var(--bad); }
.pos-product { border-radius: 16px; border-color: var(--line); background: var(--surface); }
.pos-product:hover { border-color: var(--teal); box-shadow: var(--shadow-md); }
.pos-product .p-price-tag b { color: var(--fill-2); }
/* بلاطات الكاشير: ألوان الفئات من لوحة /shop (برتقالي/أخضر/كهرماني/كحلي/رمادي/أحمر) — فاتحة في الوضعين */
.pos-product.t0 { --tone-grad: linear-gradient(145deg, #FFF1E6, #FFDDC2); }
.pos-product.t1 { --tone-grad: linear-gradient(145deg, #E1F5EE, #C8EBDD); }
.pos-product.t2 { --tone-grad: linear-gradient(145deg, #FEF3C7, #FDE68A); }
.pos-product.t3 { --tone-grad: linear-gradient(145deg, #E9EFF8, #D5DFEF); }
.pos-product.t4 { --tone-grad: linear-gradient(145deg, #E2E8F0, #CBD5E1); }
.pos-product.t5 { --tone-grad: linear-gradient(145deg, #FDECEA, #F9D3CE); }
.pos-product.t6 { --tone-grad: linear-gradient(145deg, #E8F3EF, #D2E8DF); }
.pos-product.t7 { --tone-grad: linear-gradient(145deg, #EEF2F8, #DDE5F1); }
.pos-product .p-segs i { border-radius: 999px; }
.pos-product .p-segs i.on { background: var(--ok); }
/* عناصر فوق خلفية بيضاء ثابتة داخل البلاطة: نصها ثابت الغمق في الوضعين */
.pos-product .p-unit-chip, .pos-product .p-price-tag small, .pos-product .p-album { color: #33445C; }
.pos-tool { border-radius: 14px; border-color: var(--line); background: var(--surface); color: var(--ink-2); }
.pos-tool:hover { border-color: var(--teal); color: var(--teal-2); }
.pos-cart { border-radius: var(--r-card); }
.pos-totals .grand { background: var(--teal-soft); border-radius: 14px; }
.pos-totals .grand strong { color: var(--ink); font-size: var(--fs-4); }
.pay-tile, .pay-tiles button { border-radius: 14px; border-color: var(--line); }
.pay-tile.active, .pay-tiles button.active { background: var(--fill); color: #fff; border-color: var(--fill); }
.pos-modal-card, .modal-content { background: var(--surface); color: var(--ink); border-radius: var(--r-card); border: 1px solid var(--line); box-shadow: var(--sh-card); }
.gs-results { background: var(--surface); border-color: var(--line); }
.table-card, .tc-head { border-radius: 16px; }

/* ═══ الحالة الفارغة والتنبيهات ═══ */
.empty-state { color: var(--ink-3); }
.trial-banner { background: var(--gold-soft); color: var(--warn); border-radius: 14px; border: 0; }
.trial-banner.urgent { background: var(--bad-soft); color: var(--bad); }
.impersonation-bar { background: var(--violet-soft); color: var(--violet); border: 1px solid var(--violet); border-radius: 14px; }
.impersonation-bar button { background: var(--surface); border-color: var(--violet); color: var(--violet); }
.impersonation-bar button:hover { background: var(--violet-soft); }
.skip-link:focus { background: var(--ink); color: var(--surface); }
.onb-step { border-radius: 999px; border-color: var(--line); }
.onb-step.done { background: var(--ok-soft); color: var(--ok); }
.onb-check { background: var(--teal-soft); color: var(--teal-2); }

/* ═══ الطباعة ═══ */
@media print { body.v5 .rail, body.v5 .sidebar, body.v5 .topbar, .fab-wrap, .efab-wrap { display: none !important; } body.v5 .main-wrap { margin: 0; } body::before { display: none; } }

/* ═══ الكاشير: مسح الباركود بالكاميرا ═══ */
.scan-row { display: flex; align-items: center; gap: 8px; }
.scan-row .form-control { flex: 1; }
.scan-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 3.3rem; padding: 0 14px; border-radius: 14px; border: 0; background: var(--fill); color: #fff; font: 700 var(--fs-1) var(--font); box-shadow: var(--shadow-sm); cursor: pointer; white-space: nowrap; transition: background var(--dur); }
.scan-btn:hover { background: var(--fill-2); }
.scan-card { max-width: 560px; padding: 0; overflow: hidden; }
.scan-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--display); }
.scan-view { position: relative; background: #000; aspect-ratio: 4/3; }
.scan-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame { position: absolute; inset: 14% 12%; border: 2px solid rgba(255,255,255,.55); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); pointer-events: none; }
.scan-frame i { position: absolute; inset-inline: 0; top: 0; height: 2px; background: var(--orange); box-shadow: 0 0 12px var(--orange); animation: dsScanLine 2s ease-in-out infinite; }
@keyframes dsScanLine { 0%, 100% { top: 4%; } 50% { top: 94%; } }
.scan-status { position: absolute; inset-inline: 12px; bottom: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(11,31,58,.82); color: #fff; font-size: var(--fs-0); text-align: center; backdrop-filter: blur(6px); }
.scan-status.ok { background: rgba(15,110,86,.92); }
.scan-status.bad { background: rgba(180,35,24,.92); }
.scan-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; }
.scan-count { font-weight: 800; color: var(--teal-2); }
@media (max-width: 640px) { .scan-card { max-width: none; border-radius: 24px 24px 0 0; } .scan-view { aspect-ratio: 3/4; } }

/* ═══ باركود الأصناف ═══ */
.bc-box { display: inline-block; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; }
.bc-box svg { max-width: 100%; height: auto; display: block; }
.bc-hero { align-self: center; }
.bc-open { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--ink-4); cursor: pointer; }
.bc-open:hover { color: var(--teal-2); border-bottom-color: var(--teal); }

/* ═══ مركز البيانات + التسويات البنكية (v119) ═══ */
.dh-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem; margin: 0 0 1rem; }
.dh-step { background: var(--surface, #fff); border: 1px solid var(--line, #E2E8F0); border-radius: 16px; padding: .7rem .9rem; display: flex; gap: .6rem; align-items: center; font-size: .82rem; }
.dh-step b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; background: var(--teal-soft, #FFF1E6); color: var(--teal, #C2410C); flex: none; }
.dh-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1rem; }
.dh-chip { border: 1px solid var(--line, #E2E8F0); background: var(--surface, #fff); border-radius: 999px; padding: .3rem .8rem; font-size: .8rem; font-weight: 700; color: var(--ink-2, #33445C); text-decoration: none; }
.dh-chip:hover { border-color: var(--teal, #C2410C); color: var(--teal, #C2410C); }
.dh-group { margin: 0 0 1.4rem; scroll-margin-top: 84px; }
.dh-group-h { font-size: 1rem; font-weight: 800; margin: 0 0 .6rem; display: flex; align-items: center; gap: .4rem; }
.dh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .75rem; }
.dh-card { display: flex; flex-direction: column; gap: .45rem; margin: 0; scroll-margin-top: 84px; }
.dh-card h3 { font-size: .95rem; font-weight: 800; margin: 0; display: flex; gap: .45rem; align-items: center; }
.dh-card p { font-size: .78rem; margin: 0; }
.dh-meta { display: flex; gap: .35rem; flex-wrap: wrap; font-size: .7rem; }
.dh-meta span { background: var(--bg-2, #E9EFF8); border-radius: 999px; padding: .12rem .55rem; color: var(--ink-2, #33445C); }
.dh-actions { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: auto; }
.dh-import { border-top: 1px dashed var(--line, #E2E8F0); padding-top: .5rem; }
.dh-import > summary, .brc-act > summary { cursor: pointer; font-weight: 700; font-size: .8rem; color: var(--teal-2, #9A3412); list-style: none; }
.dh-import > summary::-webkit-details-marker, .brc-act > summary::-webkit-details-marker { display: none; }
.dh-import form { display: grid; gap: .4rem; margin-top: .45rem; }
.dh-err td { font-size: .8rem; vertical-align: top; }
.brc-lines td { vertical-align: top; }
.brc-act { margin-top: .25rem; }
.brc-cands { max-height: 240px; overflow: auto; border: 1px solid var(--line, #E2E8F0); border-radius: 14px; padding: .25rem; margin: .35rem 0; background: var(--surface-2, #F8FAFD); }
.brc-cand { display: grid; grid-template-columns: auto auto auto 1fr auto; gap: .4rem; align-items: center; font-size: .75rem; padding: .25rem .3rem; border-radius: 10px; cursor: pointer; margin: 0; }
.brc-cand:hover { background: var(--bg-2, #E9EFF8); }
.brc-cand .brc-memo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2, #33445C); }
.brc-sum { font-weight: 700; font-size: .78rem; color: var(--bad, #B42318); }
.brc-sum.ok { color: var(--ok, #0F6E56); }
.brc-stmt td { padding: .4rem .5rem; font-size: .84rem; }
.brc-stmt tr.total td { font-weight: 800; border-top: 2px solid var(--line, #E2E8F0); }
.brc-memo-cell { max-width: 320px; font-size: .82rem; }
.e3-kpi.muted { opacity: .6; }

/* ═══ v5.2 القوائم المنسدلة القابلة للبحث (forms.js §5) — القائمة الأصلية تبقى، ويُستبدل منبثقها ═══ */
select.xsp-on { border-color: var(--teal, #C2410C); box-shadow: 0 0 0 3px rgba(var(--teal-rgb, 194, 65, 12), .16); }
.xsp { position: fixed; z-index: 2100; display: flex; flex-direction: column; min-width: 0; background: var(--surface, #fff); color: var(--ink, #0B1F3A);
  border: 1px solid var(--line, #E2E8F0); border-radius: 14px; box-shadow: 0 12px 32px -12px rgba(11, 31, 58, .28), 0 2px 6px rgba(11, 31, 58, .08);
  font: 500 .86rem/1.45 var(--font, 'Cairo', sans-serif); overflow: hidden; animation: xsp-in .14s var(--ease, ease-out); }
@keyframes xsp-in { from { opacity: 0; transform: translateY(-3px); } }
.xsp-h { padding: 8px; border-bottom: 1px solid var(--line-2, #EDF1F7); flex: none; }
.xsp-q { display: block; width: 100%; height: 36px; border: 1px solid var(--line, #E2E8F0); border-radius: 10px; background-color: var(--surface-2, #F8FAFD); color: inherit;
  font: inherit; padding-block: 0; padding-inline: 32px 10px; outline: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2356677F' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 10px center; }
html[dir="rtl"] .xsp-q { background-position: right 10px center; }
.xsp-q::-webkit-search-cancel-button { cursor: pointer; }
.xsp-q:focus { border-color: var(--teal, #C2410C); box-shadow: 0 0 0 3px rgba(var(--teal-rgb, 194, 65, 12), .16); background-color: var(--surface, #fff); }
.xsp-l { list-style: none; margin: 0; padding: 4px; overflow-y: auto; overscroll-behavior: contain; max-height: 340px; }
.xsp-o { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 10px; border-radius: 8px; cursor: pointer; overflow-wrap: anywhere; }
.xsp-o.on { background: var(--teal-soft, #FFF1E6); }
.xsp-o[aria-selected="true"] { font-weight: 700; color: var(--teal-2, #9A3412); }
.xsp-o[aria-selected="true"]::after { content: "✓"; margin-inline-start: auto; font-weight: 800; }
.xsp-o.ph { color: var(--ink-3, #56677F); }
.xsp-o.dis { opacity: .45; cursor: not-allowed; }
.xsp-o.add { color: var(--teal-2, #9A3412); font-weight: 700; border-top: 1px dashed var(--line, #E2E8F0); border-radius: 0 0 8px 8px; margin-top: 2px; }
.xsp-g { padding: 8px 10px 3px; font: 700 .7rem/1.3 var(--font, 'Cairo', sans-serif); color: var(--ink-3, #56677F); }
.xsp-none, .xsp-more { padding: 12px 10px; color: var(--ink-3, #56677F); font-size: .78rem; text-align: center; }
.xsp-t { display: flex; align-items: center; gap: 8px; padding: 10px 12px 2px; }
.xsp-t b { flex: 1 1 auto; font: 700 .95rem/1.3 var(--display, 'Cairo', sans-serif); }
.xsp-x { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--bg-2, #E9EFF8); color: var(--ink-2, #33445C); font-size: .9rem; cursor: pointer; }
.xsp-back { position: fixed; inset: 0; z-index: 2099; background: rgba(11, 31, 58, .42); animation: xsp-fade .14s ease-out; }
@keyframes xsp-fade { from { opacity: 0; } }
.xsp.sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 80dvh; border-radius: 24px 24px 0 0; border-bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px); animation: xsp-up .18s var(--ease, ease-out); }
@keyframes xsp-up { from { transform: translateY(24px); opacity: .4; } }
.xsp.sheet .xsp-l { max-height: none; flex: 1 1 auto; min-height: 0; }
.xsp.sheet .xsp-o { min-height: 46px; }
.xsp.sheet .xsp-q { height: 44px; font-size: 16px; }
html.xsp-lock, html.xsp-lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .xsp, .xsp.sheet, .xsp-back { animation: none; } }

/* ═══ v5.2 الجداول المتجاوبة (datatable.js — rsp): بلا حشر — ما لا يتسع يُطوى في صف ثانٍ بزر «+» ═══ */
table.rsp > thead > tr > th, table.rsp > tbody > tr > td, table.rsp > tfoot > tr > td, table.rsp > tfoot > tr > th { white-space: nowrap; }
table.rsp .rsp-ctl { display: none; }
table.rsp.rsp-on .rsp-ctl { display: table-cell; width: 36px; min-width: 36px; padding-inline: 8px 2px !important; text-align: center; vertical-align: middle; }
table.rsp.rsp-on .rsp-h { display: none !important; }
.rsp-ctl .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.rsp-tg { position: relative; display: inline-block; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--fill, #C2410C); color: #fff; cursor: pointer; vertical-align: middle;
  box-shadow: 0 1px 2px rgba(11, 31, 58, .22); transition: background var(--dur, .18s), transform var(--dur, .18s); }
.rsp-tg::before, .rsp-tg::after { content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; border-radius: 1px; }
.rsp-tg::before { width: 10px; height: 2px; margin: -1px 0 0 -5px; }
.rsp-tg::after { width: 2px; height: 10px; margin: -5px 0 0 -1px; transition: transform var(--dur, .18s); }
.rsp-tg:hover { transform: scale(1.08); }
.rsp-tg:focus-visible { outline: 2px solid var(--teal, #C2410C); outline-offset: 2px; }
tr.rsp-open .rsp-tg { background: #B42318; }
tr.rsp-open .rsp-tg::after { transform: scaleY(0); }
tr.rsp-open > td { border-bottom-color: transparent !important; }
table.rsp > tbody > tr.rsp-child > td { white-space: normal; background: var(--surface-2, #F8FAFD); padding: 10px 14px 12px; border-bottom: 1px solid var(--line, #E2E8F0); }
table.rsp > tbody > tr.rsp-child:hover > td { background: var(--surface-2, #F8FAFD); }
.rsp-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 22px; margin: 0; }
.rsp-it { display: grid; grid-template-columns: minmax(88px, max-content) minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--line-2, #EDF1F7); min-width: 0; }
.rsp-it dt { margin: 0; font: 700 .72rem/1.45 var(--font, 'Cairo', sans-serif); color: var(--ink-3, #56677F); }
.rsp-it dd { margin: 0; min-width: 0; font-size: .84rem; color: var(--ink, #0B1F3A); overflow-wrap: anywhere; }
.rsp-it dd.num { font-variant-numeric: tabular-nums; font-weight: 600; }
.rsp-it dd :is(form, .btn, .xp-btn) { display: inline-flex; }
@media (max-width: 520px) { .rsp-dl { grid-template-columns: minmax(0, 1fr); } }
@media print { table.rsp .rsp-h { display: table-cell !important; } table.rsp .rsp-ctl, table.rsp tr.rsp-child { display: none !important; } }
table.rsp.rsp-print .rsp-h { display: table-cell !important; }
table.rsp.rsp-print .rsp-ctl, table.rsp.rsp-print tr.rsp-child { display: none !important; }

/* ═══ v5.2 «نموذج واحد في الصف، والجداول والنماذج بعرض الصف (col-12)» — قرار المالك ═══
   عمود صفحة فيه نموذج إدخال أو جدول يأخذ عرض الصف كاملاً ومعه إخوته، فلا يجاور نموذجٌ نموذجاً أو جدولاً.
   صفوف الحقول داخل النماذج لا تُمس، ونماذج الأزرار وحدها (حذف/اعتماد) لا تُحتسب. */
:is(.xs-content, main.content) .row:not(form.row):not(form .row):has(> :is([class^="col"], [class*=" col"]) :is(form :is(input:not([type="hidden"]), select, textarea), table)) > :is([class^="col"], [class*=" col"]) {
  flex: 0 0 auto; width: 100%; max-width: 100%;
}
/* شبكات v5: أعمدة البطاقات، والمحتوى + لوحة السياق (تنزل تحته بعرض كامل)، وودجات لوحة القيادة */
:is(.xs-content, main.content) .xp-cols:has(> * :is(form :is(input:not([type="hidden"]), select, textarea), table)) { grid-template-columns: minmax(0, 1fr); }
:is(.xs-content, main.content) .xp-layout:has(table, form :is(input:not([type="hidden"]), select, textarea)) { grid-template-columns: minmax(0, 1fr); }
:is(.xs-content, main.content) .xp-layout:has(table, form :is(input:not([type="hidden"]), select, textarea)) > .xp-aside {
  position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start;
}
:is(.xs-content, main.content) .xp-aside > :has(form :is(input:not([type="hidden"]), select, textarea), table) { grid-column: 1 / -1; }
:is(.xs-content, main.content) .ck-grid > :has(table, form :is(input:not([type="hidden"]), select, textarea)) { grid-column: 1 / -1; }
/* والنموذج نفسه بعرض الصف: قيود العرض المضمّنة (style="max-width:640px") على صناديق النماذج تُرفع */
:is(.xs-content, main.content) :is(div, section, article)[style*="max-width"]:has(form :is(input:not([type="hidden"]), select, textarea)),
:is(.xs-content, main.content) form[style*="max-width"]:has(:is(input:not([type="hidden"]), select, textarea)) { max-width: none !important; }

/* ═══ v5.2 سطر وصفي تحت خيار القائمة القابلة للبحث (الرمز · الرصيد · السعر) وحالة البحث عن بُعد ═══ */
.xsp-tx { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.xsp-m { font: 500 .72rem/1.35 var(--font, 'Cairo', sans-serif); color: var(--ink-3, #56677F); }
.xsp-o[aria-selected="true"] .xsp-m { color: inherit; opacity: .8; }
.xsp-more.busy::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-inline-end: 6px; vertical-align: -2px; border-radius: 50%;
  border: 2px solid var(--line, #E2E8F0); border-top-color: var(--teal, #C2410C); animation: xsp-spin .7s linear infinite; }
@keyframes xsp-spin { to { transform: rotate(360deg); } }

/* ═══ v5.2 بنود المستندات (partials/doc-lines + doc-lines.js): صنف من قائمة بحث + كمية + تكلفة/سعر + إجمالي ═══ */
.dl { border: 1px solid var(--line, #E2E8F0); border-radius: 14px; background: var(--surface, #fff); overflow: hidden; }
.dl-wrap { overflow-x: auto; }
.dl-t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .86rem; }
.dl-t th { position: sticky; top: 0; z-index: 1; background: var(--surface-2, #F8FAFD); color: var(--ink-3, #56677F); font: 700 .72rem/1.3 var(--font, 'Cairo', sans-serif);
  text-align: start; padding: 9px 10px; border-bottom: 1px solid var(--line, #E2E8F0); white-space: nowrap; }
.dl-t td { padding: 7px 8px; border-bottom: 1px solid var(--line-2, #EDF1F7); vertical-align: top; }
.dl-t .num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-t td.num { padding-top: 14px; }
.dl-t .dl-n { width: 38px; text-align: center; color: var(--ink-3, #56677F); font-variant-numeric: tabular-nums; padding-top: 14px; }
.dl-t th.dl-p, .dl-t td.dl-p { min-width: 260px; width: 40%; }
.dl-t .dl-q input { width: 104px; }
.dl-t .dl-c input { width: 132px; }
.dl-t .dl-s select { min-width: 170px; }
.dl-t .dl-xc { width: 44px; text-align: center; }
.dl-t td.dl-lt { font-weight: 700; color: var(--ink, #0B1F3A); }
.dl-t .dl-tx { font-weight: 500; color: var(--ink-3, #56677F); }
.dl-meta { display: block; margin-top: 4px; font-size: .72rem; line-height: 1.35; color: var(--ink-3, #56677F); min-height: 1em; }
.dl-line.low .dl-meta { color: var(--warn, #B45309); }
.dl-line:not(.on) .dl-prod { color: var(--ink-3, #56677F); }
.dl-line.on td { background: var(--surface, #fff); }
.dl-line.flash td { animation: dl-flash 1s ease-out; }
@keyframes dl-flash { from { background: var(--teal-soft, #FFF1E6); } }
.dl-x { width: 32px; height: 32px; margin-top: 2px; border-radius: 50%; border: 1px solid var(--line, #E2E8F0); background: var(--surface, #fff); color: var(--ink-3, #56677F);
  font-size: 1.05rem; line-height: 1; cursor: pointer; transition: color var(--dur, .18s), border-color var(--dur, .18s), background var(--dur, .18s); }
.dl-x:hover { color: var(--bad, #B42318); border-color: var(--bad, #B42318); background: var(--bad-soft, #FDECEA); }
.dl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 12px; background: var(--surface-2, #F8FAFD); border-top: 1px solid var(--line, #E2E8F0); }
.dl-hint { font-size: .74rem; color: var(--ink-3, #56677F); }
.dl-sum { margin-inline-start: auto; font-size: .84rem; color: var(--ink-2, #33445C); }
.dl-sum b { font: 800 1.02rem/1 var(--display, 'Cairo', sans-serif); color: var(--ink, #0B1F3A); font-variant-numeric: tabular-nums; }
.dl-err { margin: 0; padding: 9px 12px; background: var(--bad-soft, #FDECEA); color: var(--bad, #B42318); font-size: .82rem; font-weight: 600; border-top: 1px solid var(--line, #E2E8F0); }
@media (max-width: 760px) {
  .dl-t thead { display: none; }
  .dl-t, .dl-t tbody { display: block; }
  .dl-t tr.dl-line { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; padding: 12px 12px 12px 48px; position: relative; border-bottom: 1px solid var(--line, #E2E8F0); }
  html[dir="rtl"] .dl-t tr.dl-line { padding: 12px 12px 12px 48px; }
  .dl-t tr.dl-line td { display: block; padding: 0; border: 0; min-width: 0; width: auto; }
  .dl-t tr.dl-line td.dl-p { grid-column: 1 / -1; }
  .dl-t tr.dl-line td.dl-n { display: none; }
  .dl-t tr.dl-line td[data-lbl]:not(.dl-p)::before { content: attr(data-lbl); display: block; margin-bottom: 3px; font: 700 .68rem/1.2 var(--font, 'Cairo', sans-serif); color: var(--ink-3, #56677F); }
  .dl-t tr.dl-line td.num { text-align: start; padding-top: 0; }
  .dl-t tr.dl-line td.dl-xc { position: absolute; top: 10px; left: 8px; width: auto; }
  .dl-t .dl-q input, .dl-t .dl-c input, .dl-t .dl-s select { width: 100%; }
}

/* ═══ v5.2 «شكل الفورم في الصف الواحد منسّق لا ملء فراغ» — النموذج المكدّس (كتل .mb-2/.mb-3 متتالية) أو الذي
   يرى forms.js حقوله ممطوطة (.fx-grid) يصير شبكة أعمدة متساوية (240px فأكثر): كل حقل خلية، وأزواج .row > .col-6
   تتفكك خلايا في الشبكة نفسها؛ العناوين والحقول النصية الطويلة والجداول والأزرار بعرض كامل، والأزرار بعرضها الطبيعي. ═══ */
:is(.xs-content, main.content) form:is(.fx-grid, :not(.row):not(.d-flex):has(> :is(.mb-2, .mb-3) + :is(.mb-2, .mb-3))) {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); column-gap: 18px; align-items: start;
}
:is(.xs-content, main.content) form:is(.fx-grid, :not(.row):not(.d-flex):has(> :is(.mb-2, .mb-3) + :is(.mb-2, .mb-3))) > * { grid-column: 1 / -1; }
:is(.xs-content, main.content) form:is(.fx-grid, :not(.row):not(.d-flex):has(> :is(.mb-2, .mb-3) + :is(.mb-2, .mb-3))) > :is(.mb-1, .mb-2, .mb-3, .mb-4, .fld, div):has(> .form-label):not(:has(textarea, table, .dl, .form-check, .fx-wide)) {
  grid-column: auto; margin-bottom: 1rem;
}
:is(.xs-content, main.content) form:is(.fx-grid, :not(.row):not(.d-flex):has(> :is(.mb-2, .mb-3) + :is(.mb-2, .mb-3))) > .row { display: contents; }
:is(.xs-content, main.content) form:is(.fx-grid, :not(.row):not(.d-flex):has(> :is(.mb-2, .mb-3) + :is(.mb-2, .mb-3))) > .row > * {
  grid-column: auto; width: auto; max-width: none; flex: none; padding-inline: 0; margin-top: 0; margin-bottom: 1rem;
}
:is(.xs-content, main.content) form:is(.fx-grid, :not(.row):not(.d-flex):has(> :is(.mb-2, .mb-3) + :is(.mb-2, .mb-3))) > .row > :is(.col-12, .col-sm-12, .col-md-12, .col-lg-12, :has(textarea, table, .dl, .form-check, .fx-wide)) { grid-column: 1 / -1; }
:is(.xs-content, main.content) form:is(.fx-grid, :not(.row):not(.d-flex):has(> :is(.mb-2, .mb-3) + :is(.mb-2, .mb-3))) > :is(button, .btn, .e3-btn, .xp-btn) { justify-self: start; width: auto !important; min-width: 160px; }
:is(.xs-content, main.content) form:is(.fx-grid, :not(.row):not(.d-flex):has(> :is(.mb-2, .mb-3) + :is(.mb-2, .mb-3))) > :is(button, .btn, .e3-btn, .xp-btn):last-child { margin-top: 2px; }
:is(.xs-content, main.content) form:is(.fx-grid, :not(.row):not(.d-flex):has(> :is(.mb-2, .mb-3) + :is(.mb-2, .mb-3))) > :is(.d-flex, .wz-actions):last-child { padding-top: 12px; border-top: 1px solid var(--line-2, #EDF1F7); }
/* نماذج السطر الواحد (فلتر شهر + بحث + تصدير): الحقل يمتد والأزرار بعرضها لا تُعصر ولا تلتف */
:is(.xs-content, main.content) form.d-flex > :is(.form-control, .form-select) { flex: 1 1 150px; width: auto; min-width: 0; }
:is(.xs-content, main.content) form.d-flex > :is(button, .btn, a.btn, .xp-btn, .e3-btn) { flex: none; white-space: nowrap; }

/* ═══ v7 «ثيم التسوّق»: كبسولات وبطاقات app.css التي بقيت بزاوية 8–14px تصير pill/16px كما في /shop ═══ */
.net-badge, .kpi-delta, .cons-badge, .coupon-chip, .ex-st, .ex-count, .age-chip, .kds-mins, .cart-count, .cat-chip, .nav-item .soon,
.table-card .tc-state, .table-card .tbl-meta span, .top-rank, .pick-qty, .onb-check { border-radius: 999px; }
.cons-nav a { border-radius: 12px; }
.prod-card, .market-card, .menu-card, .kds-ticket { border-radius: 16px; }
.held-row, .act-pop { border-radius: 14px; }
.fab-label { border-radius: 12px; }
.error-card { border-radius: var(--r-lg); }

/* ═══ الداكن: تعبئات دلالية فاتحة (أخضر/كهرماني/أحمر) بنص كحلي — الأبيض عليها أقل من 4.5:1 ═══ */
html[data-theme="dark"] :is(.btn-danger, .btn-outline-danger:hover, .btn-warning, .e3-chip.hot, .e3-hero.dash .e3-chip.hot, .e3-att-h span) { color: #0B1F3A; }

/* ═══ خرائط Leaflet: Cairo وألوان الثيم (القيم الافتراضية للمكتبة: Helvetica وأزرق #0078A8) ═══ */
html .leaflet-container, html .leaflet-container .leaflet-popup-content { font-family: var(--font); }
html .leaflet-container .leaflet-popup-content-wrapper, html .leaflet-container .leaflet-popup-tip { background: var(--surface); color: var(--ink); }
html .leaflet-container .leaflet-popup-content-wrapper { border-radius: 16px; }
html .leaflet-container .leaflet-popup-content a, html .leaflet-container .leaflet-control-attribution a { color: var(--teal-2); }