/* ══════════════════════════════════════════════════════════════════════
   خطوط مستضافة محلّيّاً — 2026-08-15
   ──────────────────────────────────────────────────────────────────────
   كانت من fonts.googleapis.com: طلبان حاجبان للعرض من أصلٍ مغاير، وعامل
   الخدمة يتجاهل الأصول المغايرة صراحةً (sw.js) — فالتطبيق دون اتّصال كان
   يفقد خطّه، والأسوأ أنّ Material Symbols محمّلة بـdisplay=block فتُعرَض
   أسماءُ الأيقونات نصّاً («notifications_active» مكان الجرس).
   الآن: نفس الأصل → يخزّنها عامل الخدمة → تعمل دون اتّصال، ومرّةً واحدة.

   الخطّان متغيّران (variable): ملفّ واحد يغطّي الأوزان 200→1000 بدل ستّة
   ملفّات، فلا يضيع وزنٌ كان مستعملاً.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Cairo (متن) ── */
@font-face {
  font-family: 'Cairo'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(../fonts/cairo-arabic.woff2) format('woff2-variations');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face {
  font-family: 'Cairo'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(../fonts/cairo-latin.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cairo'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(../fonts/cairo-latin-ext.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── Alexandria (عناوين) ── */
@font-face {
  font-family: 'Alexandria'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(../fonts/alexandria-arabic.woff2) format('woff2-variations');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face {
  font-family: 'Alexandria'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(../fonts/alexandria-latin.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── أيقونات Material Symbols Rounded ──
   المحاور مثبّتة على ما يطلبه النظام (opsz24 · wght400 · FILL0 · GRAD0)
   وبلا حذفِ أيّ أيقونة — أيّ اسمٍ ناقص يظهر كلمةً على الشاشة، فلا نجازف.
   block لا swap: أفضلُ من ومضةِ أسماءٍ نصّيّة قبل وصول الخطّ.           */
@font-face {
  font-family: 'Material Symbols Rounded'; font-style: normal; font-weight: 400; font-display: block;
  src: url(../fonts/material-symbols-rounded.woff2) format('woff2');
}
/* ════════════════════════════════════════════════════════════════
   Odoo Enterprise Theme — مصدر الألوان الوحيد للتطبيق كلّه
   لا تستخدم ألواناً أخرى. استخدم var(--*) دائماً.
   ════════════════════════════════════════════════════════════════ */
:root{
  /* ═══ الهويّة 2 «حبرٌ على قماش» — أبيض ناصع + حبر أسود + حدود ناعمة ═══
     نفس رموز src/v2/styles/v2.css حرفاً بحرف، مُسقَطة على أسماء المتغيّرات القديمة
     حتى تلبس كلُّ الصفحات القديمة الهويّةَ نفسها دون إعادة بناء. */
  --ink: #0E0E0E; --ink-2: #2B2B2B;
  --primary: #0E0E0E;          /* حبر */
  --primary-hover: #000000;
  --primary-active: #000000;
  --primary-light: #2B2B2B;
  --primary-bg: #F3F3F1;       /* خلفية الصفوف/البلاطات النشطة الهادئة */
  --on-primary: #FFFFFF;       /* النصّ فوق الحبر */

  /* لمسة محايدة (accent ثانوي) */
  --accent: #0E0E0E;
  --accent-hover: #000000;
  --accent-bg: #F3F3F1;

  /* الحالات */
  --success: #1E7F4F;  --success-bg: #E6F4EC;  --success-text: #155C3A;
  --warning: #A86B00;  --warning-bg: #FFF4DC;  --warning-text: #7A4E00;
  --danger:  #B42318;  --danger-bg:  #FDECEA;  --danger-text:  #8A1B12;
  --info:    #2D5FA6;  --info-bg:    #E9F0FA;  --info-text:    #214A83;

  /* النصوص */
  --text: #111111;
  --text-muted: #6B6B66;
  --text-disabled: #8A8A85;
  --text-faint: #A3A39E;
  --link: #111111;

  /* الخلفيات — أبيض في كل مكان (لا رمادي) */
  --bg: #FFFFFF;
  --bg-alt: #F3F3F1;
  --surface: #FFFFFF;
  --surface-2: #FAFAF8;
  --surface-hover: #FAFAF8;

  /* الحدود */
  --border: #E3E3DF;
  --border-light: #ECECE9;
  --border-strong: #C8C8C2;

  /* الشريط العلوي — أبيض بحدّ سفلي (لا تدرّج ولا أسود) */
  --topbar-bg: #FFFFFF;
  --topbar-text: #111111;
  --topbar-height: 48px;

  /* الأبعاد */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;

  /* الخطّ — Cairo للنصّ، Alexandria للأرقام واللاتيني */
  --font-family: 'Cairo',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-heading: 'Cairo',-apple-system,sans-serif;
  --font-num: 'Alexandria','Cairo',sans-serif;
  --font-size:14.5px;
  --font-size-sm: 12px;
  --font-size-lg: 15px;
  --font-size-xl: 17px;
  --line-height: 1.55;

  /* الظلال — ناعمة ومحايدة (لا ألوان) */
  --shadow-sm: 0 1px 2px rgba(10,10,10,.05);
  --shadow-md: 0 10px 30px -14px rgba(10,10,10,.16);
  --shadow-lg: 0 20px 50px -20px rgba(10,10,10,.24);
  --shadow-modal: 0 24px 64px -24px rgba(10,10,10,.28);

  /* منظومة الحركة الموحّدة */
  --d-micro: 120ms; --d-std: 160ms; --d-enter: 260ms; --d-slow: 420ms;
  --e-swift: cubic-bezier(.2,.7,.2,1);
  --e-luxe: cubic-bezier(.16,1,.3,1);
  --e-exit: cubic-bezier(.4,0,.7,.2);
  --ring: 0 0 0 3px rgba(14,14,14,.10);

  /* z-index ladder */
  --z-topbar: 50;
  --z-modal: 200;
  --z-toast: 300;
  --z-dropdown: 100;
}

/* ════════════════════════════════════════════════════════════════
   🌙 الوضع الداكن — نفس المتغيّرات بقيم الهويّة 2 الداكنة.
   يُفعَّل بوضع data-theme="dark" على <html> (من «إعداداتي» أو تلقائياً
   حسب نظام الجهاز). كل ما يستخدم var(--*) يتبدّل وحده.
   ════════════════════════════════════════════════════════════════ */
html[data-theme="dark"]{
  color-scheme: dark;

  --ink: #F2F2EF; --ink-2: #D6D6D2;
  --primary: #F2F2EF;
  --primary-hover: #FFFFFF;
  --primary-active: #FFFFFF;
  --primary-light: #D6D6D2;
  --primary-bg: #1E1E1E;
  --on-primary: #0E0E0E;

  --accent: #F2F2EF;
  --accent-hover: #FFFFFF;
  --accent-bg: #1E1E1E;

  --success: #3FB273;  --success-bg: #12281B;  --success-text: #8FE0B4;
  --warning: #E0A23A;  --warning-bg: #2C2210;  --warning-text: #F0C77E;
  --danger:  #E0574B;  --danger-bg:  #2E1613;  --danger-text:  #F3A199;
  --info:    #6C9BE0;  --info-bg:    #14213A;  --info-text:    #A9C6F2;

  --text: #EDEDEA;
  --text-muted: #9C9C96;
  --text-disabled: #6E6E69;
  --text-faint: #63635F;
  --link: #EDEDEA;

  --bg: #101010;
  --bg-alt: #171717;
  --surface: #181818;
  --surface-2: #1E1E1E;
  --surface-hover: #1E1E1E;

  --border: #2A2A2A;
  --border-light: #232323;
  --border-strong: #3A3A3A;

  --topbar-bg: #181818;
  --topbar-text: #EDEDEA;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 10px 30px -14px rgba(0,0,0,.6);
  --shadow-lg: 0 20px 50px -20px rgba(0,0,0,.7);
  --shadow-modal: 0 24px 64px -24px rgba(0,0,0,.75);
  --ring: 0 0 0 3px rgba(242,242,239,.14);
}

/* ════════════════════════════════════════════════════════════════
   🩹 طبقة توافق الوضع الداكن المشتركة — إصلاح واحد يغطّي كل الصفحات
   يلتقط الألوان الثابتة (hex) المكتوبة inline ويحوّلها لقيم داكنة مناسبة.
   الغرض: أي صفحة لم تُهاجَر بعد لمتغيّرات CSS تعمل تلقائياً في الداكن.
   ════════════════════════════════════════════════════════════════ */

/* 1) الخلفيّات الفاتحة (بيضاء/رماديّة/تلميحات ملوّنة) → سطح داكن */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fafafa"],
html[data-theme="dark"] [style*="background:#fafafb"],
html[data-theme="dark"] [style*="background:#f9fafb"],
html[data-theme="dark"] [style*="background:#f8f9fa"],
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background:#f5f5f5"],
html[data-theme="dark"] [style*="background:#f5f5f7"],
html[data-theme="dark"] [style*="background:#f3f3f5"],
html[data-theme="dark"] [style*="background:#f0f0f2"],
html[data-theme="dark"] [style*="background:#f1f1f2"],
html[data-theme="dark"] [style*="background:#eef2ff"],
html[data-theme="dark"] [style*="background:#eff6ff"],
html[data-theme="dark"] [style*="background:#dbeafe"],
html[data-theme="dark"] [style*="background:#ecfdf5"],
html[data-theme="dark"] [style*="background:#f0fdf4"],
html[data-theme="dark"] [style*="background:#f1faf1"],
html[data-theme="dark"] [style*="background:#fef3c7"],
html[data-theme="dark"] [style*="background:#fff8e1"],
html[data-theme="dark"] [style*="background:#fff8e6"],
html[data-theme="dark"] [style*="background:#fef2f2"],
html[data-theme="dark"] [style*="background:#fee2e2"],
html[data-theme="dark"] [style*="background:#e2e8f0"]{
  background: var(--bg-alt) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* 2) النصوص الداكنة الثابتة → لون النصّ المتغيّر (كانت تختفي على الخلفية الداكنة) */
html[data-theme="dark"] [style*="color:#141414"],
html[data-theme="dark"] [style*="color: #141414"],
html[data-theme="dark"] [style*="color:#161616"],
html[data-theme="dark"] [style*="color:#212529"],
html[data-theme="dark"] [style*="color:#26262b"],
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color:#3a3346"],
html[data-theme="dark"] [style*="color:#56565c"]{
  color: var(--text) !important;
}

/* 3) الحدود الفاتحة الثابتة → حدّ متغيّر */
html[data-theme="dark"] [style*="border:1px solid #e"],
html[data-theme="dark"] [style*="border:1px solid #f"],
html[data-theme="dark"] [style*="border-color:#e"],
html[data-theme="dark"] [style*="border-color:#f"]{
  border-color: var(--border) !important;
}

/* 4) حقول التاريخ/الوقت الأصليّة — نصّ واضح وأيقونة تقويم مقلوبة في الداكن */
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="month"],
html[data-theme="dark"] input[type="week"]{
  color-scheme: dark;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text);
}
html[data-theme="dark"] input::-webkit-datetime-edit,
html[data-theme="dark"] input::-webkit-datetime-edit-text,
html[data-theme="dark"] input::-webkit-datetime-edit-month-field,
html[data-theme="dark"] input::-webkit-datetime-edit-day-field,
html[data-theme="dark"] input::-webkit-datetime-edit-year-field,
html[data-theme="dark"] input::-webkit-datetime-edit-hour-field,
html[data-theme="dark"] input::-webkit-datetime-edit-minute-field{
  color: var(--text);
}
html[data-theme="dark"] input::-webkit-calendar-picker-indicator{ filter: invert(1) opacity(.7); }

/* ─── Reset أساسي ─── */
*, *::before, *::after{ box-sizing:border-box; }
*{ -webkit-tap-highlight-color:transparent; }

html, body{
  margin:0; padding:0;
  height:100%;
  overflow-x:hidden;
  overscroll-behavior:none;
  touch-action:manipulation;
}

body{
  font-family:var(--font-family);
  font-size:var(--font-size);
  line-height:var(--line-height);
  color:var(--text);
  background:var(--bg);
}

a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* احترام تفضيل «تقليل الحركة» — المكان الوحيد لهذه القاعدة في الحزمة كلّها */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

h1,h2,h3,h4,h5,h6{
  margin:0 0 var(--space-md);
  font-family:var(--font-heading);
  font-weight:700;
  color:var(--text);
  letter-spacing:-.2px;
}
h1{ font-size:20px; }
h2{ font-size:17px; }
h3{ font-size:15px; }
h4{ font-size:14px; }

p{ margin:0 0 var(--space-md); }

/* ─── أيقونات Material Symbols (موحَّدة) ─── */
.icon{
  font-family:'Material Symbols Rounded';
  font-weight:normal;
  font-style:normal;
  font-size:24px;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-block;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  -webkit-font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'liga';
  vertical-align:middle;
  user-select:none;
  /* إخفاء النصّ حتى يحمَّل الخط (بدل ظهور اسم الأيقونة) */
  font-display:block;
  color:inherit;
}
/* قبل تحميل الخط: أخفِ النصّ */
.icon:not(.font-loaded){
  visibility:visible;
}
.icon-sm{ font-size:18px; }
.icon-lg{ font-size:32px; }
.icon-xl{ font-size:42px; }

/* ─── شارة الإصدار — مُخفاة نهائياً ─── */
.build-badge{ display:none !important; }

/* ─── Toast container ─── */
#toast-host{
  position:fixed;
  top:60px;
  inset-inline:0;          /* توسيط بلا transform — كان translateX(-50%) يدفعه خارج الشاشة في RTL على الجوال */
  z-index:var(--z-toast);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:0 12px;
  pointer-events:none;
}

/* ─── Modal container ─── */
#modal-host{
  position:fixed;
  inset:0;
  z-index:var(--z-modal);
  pointer-events:none;
}
#modal-host.is-open{ pointer-events:auto; }
/* ════════════════════════════════════════════════════════════════
   التخطيطات — App shell, Topbar, Login, Apps grid
   ════════════════════════════════════════════════════════════════ */

/* ─── App shell ─── */
.app-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
/* هيكل: قائمة جانبية (يمين RTL) + عمود المحتوى */
.app-frame{ display:flex; align-items:stretch; min-height:100vh; }
.app-col{ flex:1; min-width:0; display:flex; flex-direction:column; }
.app-main{
  flex:1;
  padding:18px 24px;
  width:100%;
  max-width:100%;
}
@media (max-width:640px){
  .app-main{ padding:14px 12px; }
}

/* ─── القائمة الجانبية ─── */
.app-side{
  width:236px; flex:none; background:var(--surface);
  /* الفاصل بين القائمة (يمين) والصفحة المفتوحة (يسار) = الحدّ الداخليّ (inline-end) */
  border-inline-end:1px solid var(--border);
  position:sticky; top:0; height:100vh; z-index:5;
  display:flex; flex-direction:column; padding:0 12px 10px;
}
.sd-ic{ width:20px; height:20px; flex:none; }
/* رأس القائمة بنفس ارتفاع الشريط العلوي تماماً — يلتقي الحدّان في زاوية واحدة نظيفة */
.sd-brand{
  display:flex; align-items:center; gap:10px;
  height:var(--topbar-height); box-sizing:border-box; flex:none;
  margin:0 -12px 8px; padding:0 16px;
  border-bottom:1px solid var(--border);
}
.sd-logo{ width:32px; height:32px; border-radius:9px; background:var(--primary); color:var(--on-primary); display:grid; place-items:center; flex:none; font-weight:900; font-size:15px; }
.sd-brand-tx{ min-width:0; flex:1; }
.sd-brand-tx b{ font-size:15px; font-weight:800; display:block; letter-spacing:-.2px; }
.sd-brand-tx small{ font-size:12px; color:var(--text-muted); }
.sd-close{ width:32px; height:32px; border-radius:9px; display:none; place-items:center; background:none; border:0; color:var(--text-muted); cursor:pointer; }
.sd-close:hover{ background:var(--bg-alt); }
.sd-nav{ display:flex; flex-direction:column; gap:2px; margin-top:6px; overflow-y:auto; flex:1; }
.sd-sec{ font-size:12px; font-weight:800; color:var(--text-muted); letter-spacing:.6px; padding:12px 10px 5px; }
.sd-item{
  display:flex; align-items:center; gap:12px; padding:9px 11px; border-radius:10px;
  color:var(--text-muted); font-size:14px; font-weight:600; font-family:inherit; cursor:pointer;
  background:none; border:0; width:100%; text-align:start; transition:background-color .15s, color .15s;
}
.sd-item .sd-ic{ color:inherit; transition:color .15s; }
.sd-item:hover{ background:var(--bg-alt); color:var(--text); }
/* النشط: بلاطة حبر — خلفيّة سوداء ونصّ أبيض (تنقلب في الداكن عبر --on-primary) */
.sd-item.on{ background:var(--primary); color:var(--on-primary); font-weight:700; }
.sd-item.on .sd-ic{ color:inherit; }
.sd-lbl{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sd-badge{ background:var(--danger); color:#fff; border-radius:100px; min-width:20px; height:20px; padding:0 6px; font-size:12px; font-weight:800; display:grid; place-items:center; flex:none; }
.sd-item.on .sd-badge{ background:var(--danger); color:#fff; }
.sd-foot{ border-top:1px solid var(--border); padding-top:8px; margin-top:6px; }
.sd-user{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:11px; width:100%; background:none; border:0; cursor:pointer; font-family:inherit; text-align:start; }
.sd-user:hover{ background:var(--bg-alt); }
.sd-av{ width:34px; height:34px; border-radius:10px; background:var(--primary); color:var(--on-primary); display:grid; place-items:center; font-weight:800; flex:none; }
.sd-user-tx{ min-width:0; flex:1; }
.sd-user-tx b{ font-size:13px; font-weight:700; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.sd-user-tx small{ font-size:12px; color:var(--text-muted); }

.app-scrim{ display:none; }
.topbar-burger{ display:none !important; }
/* منع أي تمرير أفقي بسبب الدرج المخفيّ خارج الشاشة (كان يظهر جانبه كنصف شاشة) */
html, body{ overflow-x:hidden; }

/* 📱 جوال: القائمة درج منزلق احترافي (Overlay فوق المحتوى + خلفيّة معتمة) */
@media (max-width:900px){
  .app-side{
    position:fixed; right:0; left:auto; top:0;
    height:100vh; height:100dvh;
    width:min(84vw, 320px);
    transform:translateX(102%); visibility:hidden;
    transition:transform .26s cubic-bezier(.2,.75,.2,1), visibility .26s;
    z-index:70; box-shadow:var(--shadow-lg);
    border-inline-start:0; border-radius:18px 0 0 18px;
    padding-top:calc(14px + env(safe-area-inset-top,0));
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0));
  }
  .app-side.open{ transform:none; visibility:visible; }
  .sd-close{ display:grid; }
  .sd-item{ padding:12px 12px; font-size:14.5px; }
  .sd-nav{ gap:3px; }
  .app-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:65; }
  .app-scrim.on{ display:block; }
  .topbar-burger{ display:grid !important; }
  /* أوقف تمرير الخلفيّة أثناء فتح الدرج */
  body.sd-open{ overflow:hidden; }
}

/* ─── Topbar ─── */
.topbar{
  position:sticky; top:0;
  z-index:var(--z-topbar);
  display:flex; align-items:center; flex-wrap:nowrap;
  min-width:0;
  height:var(--topbar-height);
  /* safe-area لِـ iPhone notch — الأَمان فَوقَ كل شَيء */
  padding: env(safe-area-inset-top, 0) calc(14px + env(safe-area-inset-right, 0)) 0 calc(14px + env(safe-area-inset-left, 0));
  /* في PWA mode على iOS، الـ height يَزيد لِلنوتش */
  min-height: calc(var(--topbar-height) + env(safe-area-inset-top, 0));
  gap:8px;
  background:var(--topbar-bg);
  color:var(--topbar-text);
  border-bottom:1px solid var(--border);
}
.topbar-apps-btn{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  border:none; border-radius:10px;
  background:transparent;
  color:var(--topbar-text);
  cursor:pointer;
  font-size:18px;
  transition:background-color .12s;
}
.topbar-apps-btn:hover{ background:var(--bg-alt); }
.topbar-brand{
  font-weight:500;
  letter-spacing:.3px;
  font-size:15px;
}
.topbar-breadcrumb{
  font-size:14px;
  font-weight:600;
  opacity:1;
  margin-inline-start:6px;
  letter-spacing:-.1px;
  /* لا تداخُل: يُقصَّر بنقاط بدل دفع الأيقونات */
  flex:0 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* لا رمز › — لم يعُد هناك جزء أب («متجر الرجل») يسبقه */
.topbar-spacer{ flex:1; }
.topbar-search-wrap{
  position:relative;
  display:flex; align-items:center;
}
.topbar-search-icon{
  position:absolute; inset-inline-start:8px;
  color:var(--text-muted);
  pointer-events:none;
  font-size:16px !important;
}
.topbar-search{
  background:var(--bg-alt);
  border:1px solid var(--border);
  color:var(--text);
  padding:6px 12px 6px 32px;
  border-radius:10px;
  font-size:13px;
  outline:none;
  width:220px;
  font-family:inherit;
  transition:background-color .15s, border-color .15s, box-shadow .15s;
}
.topbar-search::placeholder{ color:var(--text-muted); }
.topbar-search:focus{ background:var(--surface); border-color:var(--primary); box-shadow:var(--ring); }
.topbar-icon-btn{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  border:none; border-radius:10px;
  background:transparent;
  color:var(--text-muted);
  cursor:pointer;
  font-size:15px;
  position:relative;
  transition:background-color .12s, color .12s;
}
.topbar-icon-btn:hover{ background:var(--bg-alt); color:var(--text); }
.topbar-icon-btn .badge{
  position:absolute; top:2px; inset-inline-end:2px;
  min-width:14px; height:14px;
  padding:0 4px;
  background:var(--danger);
  color:#fff;
  border-radius:7px;
  font-size:11px; font-weight:700;
  display:grid; place-items:center;
  border:1.5px solid var(--surface);
}
.topbar-user{
  position:relative; flex:none;
  display:flex; align-items:center; gap:8px;
  padding:4px 10px;
  border-radius:10px;
  cursor:pointer;
  transition:background-color .12s;
}
.topbar-nav{ flex:none; display:flex; }
.topbar-user:hover{ background:var(--bg-alt); }
.topbar-user-avatar{
  width:26px; height:26px;
  border-radius:8px;
  background:var(--primary);
  color:var(--on-primary);
  display:grid; place-items:center;
  font-size:12px;
  font-weight:700;
}
.topbar-user-name{
  font-size:13px;
  font-weight:500;
}
.topbar-user-menu{
  position:absolute;
  top:100%; inset-inline-end:0;
  margin-top:6px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  min-width:200px;
  box-shadow:var(--shadow-lg);
  z-index:var(--z-dropdown);
  padding:4px;
}
.topbar-user-menu button{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:9px 12px;
  text-align:start;
  background:transparent;
  border:none;
  border-radius:8px;
  color:var(--text);
  font-family:inherit;
  font-size:13px;
  cursor:pointer;
}
.topbar-user-menu button:hover{ background:var(--bg-alt); }
.topbar-user-menu button .icon{ color:var(--text-muted); font-size:18px !important; }
.topbar-user-menu .divider{
  height:1px;
  background:var(--border-light);
  margin:4px 0;
}

/* mobile topbar — نظيف بلا تزاحُم */
@media (max-width:640px){
  .topbar{
    gap:4px;   /* كان 2px: زرّ «كشف الأرقام» ملاصقاً لـ«الإشعارات» */
    padding: env(safe-area-inset-top, 0) calc(8px + env(safe-area-inset-right, 0)) 0 calc(8px + env(safe-area-inset-left, 0));
  }
  .topbar-brand{ display:none; }
  .topbar-search-wrap{ display:none; }   /* البحث مخفي على الهاتف — لا صندوق فارغ */
  .topbar-user-name{ display:none; }
  .topbar-nav{ display:none; }            /* رجوع/تقدّم — زائد على الهاتف (زر النظام يكفي) */
  /* الـ breadcrumb يصير عنوان الصفحة الواضح */
  .topbar-breadcrumb{ font-size:14.5px; font-weight:700; opacity:1; margin-inline-start:2px; }
  .topbar-breadcrumb::before{ display:none; }   /* بلا رمز › */
  /* ٤٤ هو الحدّ الأدنى لهدف اللمس. الأيقونة 17px داخل صندوقٍ شفّافٍ بلا
     حدّ، فتكبير الصندوق لا يُظهِر شيئاً جديداً — يوسّع مساحة الإصبع فقط. */
  .topbar-icon-btn{ width:44px; height:44px; }
  .topbar-user{ padding:4px 4px; }
}
/* شاشات صغيرة جداً — أبقِ الأساسي فقط */
@media (max-width:360px){
  #topbar-odoo-refresh{ display:none; }
}

/* ─── Login screen ─── */
.login-screen{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:var(--bg);
}
.login-card{
  width:100%;
  max-width:400px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:42px 36px;
  box-shadow:var(--shadow-md);
}
.login-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
}
.login-brand-logo{
  width:180px;
  height:auto;
  max-width:80%;
  object-fit:contain;
}
@media (max-width: 480px) {
  .login-brand-logo{ width:140px; }
}
.login-logo-circle{
  width:38px; height:38px;
  border-radius:50%;
  background:var(--primary);
  color:var(--on-primary);
  display:grid; place-items:center;
  font-size:17px;
  font-weight:700;
}
.login-logo-text{
  font-size:22px;
  font-weight:600;
  color:var(--primary);
  letter-spacing:-.4px;
}
.login-brand-ar{
  text-align:center;
  font-size:20px;
  font-weight:700;
  color:var(--text);
  margin:16px 0 2px;
  letter-spacing:-.3px;
}
.login-brand-en{
  text-align:center;
  font-size:12px;
  letter-spacing:3px;
  font-weight:600;
  color:var(--text-muted);
  margin-bottom:28px;
  text-transform:uppercase;
}
.login-form{ display:flex; flex-direction:column; gap:14px; }
.login-footer-note{
  text-align:center;
  margin-top:18px;
  font-size:12px;
  color:var(--text-muted);
}

/* ─── Page header (above content) ─── */
.page-header{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
  padding:14px 18px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:14px;
}
.page-title{
  font-size:20px;
  font-weight:800;
  letter-spacing:-.3px;
  color:var(--text);
  margin:0;
}
.page-subtitle{
  font-size:13px;
  color:var(--text-muted);
  margin:2px 0 0;
}
.page-actions{ display:flex; gap:6px; flex-wrap:wrap; }

/* ─── Apps grid (home page) ─── */
.apps-section-title{
  font-size:12px;
  font-weight:600;
  color:var(--text-muted);
  letter-spacing:.5px;
  text-transform:uppercase;
  margin:18px 4px 10px;
  padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
.apps-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:16px;
  margin-bottom:20px;
}

/* ════════════════════════════════════════════════════════════════
   شاشة التطبيقات الرئيسية — نمط درج تطبيقات Odoo 19
   خلفية بنفسجيّة فاتحة متدرّجة + بلاطات بيضاء مربّعة بأيقونات ملوّنة
   ════════════════════════════════════════════════════════════════ */
.apps-page{
  margin:-18px -24px;
  padding:46px 24px 60px;
  min-height:calc(100vh - var(--topbar-height));
  background:var(--bg);
}
.apps-grid-home{
  grid-template-columns:repeat(auto-fill, minmax(116px, 1fr));
  gap:22px 16px;
  max-width:920px;
  margin:0 auto;
}
.app-tile{
  background:transparent;
  border:none;
  border-radius:0;
  padding:6px 4px;
  cursor:pointer;
  display:flex; flex-direction:column;
  align-items:center; gap:11px;
  text-align:center;
  height:auto;
  transition:transform .15s;
  position:relative;
  outline:none;
  font-family:inherit;
  color:var(--text);
}
.app-tile-icon{
  width:84px; height:84px;
  border-radius:22px;
  background:var(--surface);
  color:var(--app-c, var(--primary));
  display:grid; place-items:center;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:transform .16s, box-shadow .2s, border-color .2s;
}
.app-tile-icon .icon{ font-size:42px; color:var(--app-c, var(--primary)); }
.app-tile:hover .app-tile-icon{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--border-strong);
}
.app-tile:active .app-tile-icon{ transform:translateY(-1px) scale(.97); }
.app-tile-label{
  font-size:13px;
  font-weight:600;
  color:var(--text);
  line-height:1.3;
}
.app-tile-badge{
  position:absolute;
  top:-4px; inset-inline-end:18px;
  min-width:20px; height:20px;
  padding:0 6px;
  background:var(--danger);
  color:#fff;
  border-radius:10px;
  font-size:12px;
  font-weight:700;
  display:grid; place-items:center;
  border:2px solid var(--surface);
  z-index:1;
}
@media (max-width:480px){
  .apps-page{ margin:-14px -12px; padding:30px 12px 50px; }
  .apps-grid-home{
    grid-template-columns:repeat(auto-fill, minmax(92px, 1fr));
    gap:18px 10px;
  }
  .app-tile-icon{ width:70px; height:70px; border-radius:18px; }
  .app-tile-icon .icon{ font-size:34px; }
  .app-tile-label{ font-size:12px; }
}

/* ════════════════════════════════════════════════════════════════
   بطاقات المراكز (Hub) — أسلوب Odoo 19 الموحَّد
   تُستعمل من: المحاسبة، نقطة البيع، المخزون، الموقع، الموظفون، الإدارة
   ════════════════════════════════════════════════════════════════ */
.hub-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:14px;
}
.hub-tile{
  display:flex; align-items:center; gap:14px;
  width:100%; text-align:start;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:16px 18px;
  cursor:pointer;
  font-family:inherit;
  color:var(--text);
  transition:transform .15s, box-shadow .2s, border-color .2s;
}
.hub-tile:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
  border-color:var(--border-strong);
}
.hub-ic{
  width:52px; height:52px; flex:none;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-alt);
  color:var(--text);
}
.hub-ic .icon{ font-size:26px; }
.hub-tx{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.hub-ti{ font-weight:700; font-size:15.5px; overflow-wrap:anywhere; }
.hub-de{ font-size:12px; color:var(--text-muted); line-height:1.5; overflow-wrap:anywhere; }
.hub-arrow{ color:var(--text-disabled); flex:none; font-size:20px; }
.hub-tile:hover .hub-arrow{ color:var(--primary); }
@media (max-width:560px){
  .hub-grid{ grid-template-columns:1fr; gap:10px; }
  .hub-tile{ padding:14px 14px; gap:12px; }
  .hub-ic{ width:46px; height:46px; }
}
/* ════════════════════════════════════════════════════════════════
   المكوّنات الموحَّدة — Button, Card, Modal, Input, Table, etc.
   ════════════════════════════════════════════════════════════════ */

/* ─── Button ─── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 16px;
  border:1px solid transparent;
  border-radius:var(--radius);
  background:transparent;
  color:var(--text);
  font-family:inherit;
  font-size:var(--font-size);
  font-weight:700;
  line-height:1.4;
  cursor:pointer;
  box-shadow:none;
  transition:background-color .14s, border-color .14s, color .14s, transform .14s, box-shadow .14s;
  white-space:nowrap;
  user-select:none;
}
.btn:hover:not(:disabled){ transform:translateY(-1px); }
.btn:active:not(:disabled){ transform:translateY(0); }
.btn:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }
.btn-link{ box-shadow:none; }
.btn-link:hover:not(:disabled){ transform:none; }

.btn-primary{
  background:var(--primary); color:var(--on-primary); border-color:var(--primary);
}
.btn-primary:hover:not(:disabled){ background:var(--primary-hover); border-color:var(--primary-hover); }
.btn-primary:active{ background:var(--primary-active); }

.btn-secondary{
  background:var(--surface); color:var(--text); border-color:var(--border-strong);
}
.btn-secondary:hover:not(:disabled){ background:var(--bg-alt); border-color:var(--border-strong); }

.btn-success{
  background:var(--success); color:#fff; border-color:var(--success);
}
.btn-success:hover:not(:disabled){ filter:brightness(.95); }

.btn-danger{
  background:var(--danger); color:#fff; border-color:var(--danger);
}
.btn-danger:hover:not(:disabled){ filter:brightness(.95); }

.btn-link{
  background:transparent; color:var(--primary); border-color:transparent;
  padding:4px 8px;
}
.btn-link:hover:not(:disabled){ background:var(--primary-bg); text-decoration:none; }

.btn-sm{ padding:4px 10px; font-size:var(--font-size-sm); }
.btn-lg{ padding:9px 20px; font-size:var(--font-size-lg); }
.btn-block{ width:100%; }

.btn-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ─── Input / Select / Textarea ─── */
.input, .select, .textarea,
input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="date"], input[type="search"], input[type="tel"],
select, textarea{
  display:block;
  width:100%;
  /* أكبر وأوضح للمس (جهاز الكاشير) */
  padding:10px 12px;
  min-height:44px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  color:var(--text);
  font-family:inherit;
  font-size:15px;
  line-height:1.4;
  outline:none;
  transition:border-color .12s, box-shadow .12s, background-color .12s;
}
/* القوائم المنسدلة: سهم واضح ومساحة لمس مريحة + لا لبس */
.select, select{
  cursor:pointer;
  font-weight:600;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 12px center;
  padding-left:38px;
}
.input:focus, .select:focus, .textarea:focus,
input:focus, select:focus, textarea:focus{
  border-color:var(--primary);
  box-shadow:var(--ring);
}
.input:disabled{ background:var(--bg-alt); color:var(--text-muted); }

textarea{ min-height:80px; resize:vertical; }

/* شاشات اللمس الصغيرة: أهداف لمس أكبر + منع تكبير iOS التلقائي عند التركيز */
@media (max-width:640px){
  .input, .select, .textarea,
  input[type="text"], input[type="number"], input[type="email"],
  input[type="password"], input[type="date"], input[type="search"], input[type="tel"],
  select, textarea{ min-height:48px; font-size:16px; }
}

/* ─── Form Field ─── */
.field{ margin-bottom:14px; }
.field-label{
  display:block;
  margin-bottom:4px;
  font-size:var(--font-size-sm);
  font-weight:500;
  color:var(--text-muted);
}
.field-hint{
  margin-top:4px;
  font-size:12px;
  color:var(--text-muted);
}
.field-error{
  margin-top:4px;
  font-size:12px;
  color:var(--danger);
}
.field-required::after{ content:' *'; color:var(--danger); }

/* ─── Card ─── */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  margin-bottom:var(--space-lg);
  box-shadow:none;
}
.card-header{
  margin:-16px -16px 14px;
  padding:10px 16px;
  border-bottom:1px solid var(--border);
  background:var(--bg-alt);
  font-weight:600;
  font-size:14px;
  border-radius:var(--radius) var(--radius) 0 0;
}
.card-body{ }
.card-footer{
  margin:14px -16px -16px;
  padding:10px 16px;
  border-top:1px solid var(--border);
  background:var(--bg-alt);
  display:flex; gap:8px; justify-content:flex-end;
  border-radius:0 0 var(--radius) var(--radius);
}

/* ─── Modal ─── */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(10,10,10,.44);
  z-index:var(--z-modal);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  animation:fadeIn .15s ease;
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

.modal{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow-modal);
  /* مقاس موحّد قياسي للنماذج في كل مكان */
  max-width:560px;
  width:100%;
  max-height:90vh;
  display:flex; flex-direction:column;
  animation:slideUp .2s ease;
}
@keyframes slideUp{ from{transform:translateY(14px); opacity:0} to{transform:none; opacity:1} }
.modal-lg{ max-width:720px; }
.modal-xl{ max-width:1040px; }

/* على الجوال: عرض شبه كامل وارتفاع موحّد لكل النوافذ */
@media (max-width:640px){
  .modal-backdrop{ padding:8px; align-items:flex-end; }
  .modal, .modal-lg, .modal-xl{ max-width:100%; max-height:94vh; border-radius:14px; }
}

.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  background:var(--bg-alt);
  border-bottom:1px solid var(--border);
  border-radius:var(--radius) var(--radius) 0 0;
  font-weight:600; font-size:14px;
}
.modal-close{
  width:28px; height:28px;
  display:grid; place-items:center;
  background:transparent; border:none; border-radius:50%;
  color:var(--text-muted);
  cursor:pointer; font-size:18px;
  transition:background-color .12s, color .12s;
}
.modal-close:hover{ background:var(--bg-alt); color:var(--text); }

.modal-body{
  padding:16px;
  overflow-y:auto;
  flex:1;
}
.modal-footer{
  display:flex; gap:8px; justify-content:flex-end;
  padding:10px 16px;
  background:var(--bg-alt);
  border-top:1px solid var(--border);
  border-radius:0 0 var(--radius) var(--radius);
}

/* ─── Status Pill ─── */
.pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 11px;
  border-radius:100px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
}
.pill::before{
  content:'●'; font-size:8px;
}
.pill-draft{ background:var(--warning-bg); color:var(--warning-text); }
.pill-pending{ background:var(--info-bg); color:var(--info-text); }
.pill-approved{ background:var(--success-bg); color:var(--success-text); }
.pill-posted{ background:var(--primary-bg); color:var(--text); }
.pill-rejected{ background:var(--danger-bg); color:var(--danger-text); }
/* كانتا مستخدمتين في الجرد/التحويلات دون تعريف (تظهران بلا لون) */
.pill-warning{ background:var(--warning-bg); color:var(--warning-text); }
.pill-info{ background:var(--info-bg); color:var(--info-text); }
/* محايدة (مسودّات رمادية) */
.pill-muted{ background:var(--bg-alt); color:var(--text-muted); }

/* ─── Table ─── */
.table{
  width:100%;
  border-collapse:collapse;
  background:var(--surface);
  font-size:var(--font-size);
}
.table thead{
  background:var(--bg-alt);
}
.table th{
  padding:11px 14px;
  text-align:start;
  font-size:12px;
  font-weight:800;
  letter-spacing:.3px;
  color:var(--text-muted);
  border-bottom:1px solid var(--border);
}
.table td{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
}
.table tbody tr:hover{ background:var(--surface-hover); }
.table tbody tr:last-child td{ border-bottom:none; }

/* ─── List items (replacement for old .item) ─── */
.list{ display:flex; flex-direction:column; gap:6px; }
.list-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
  background:var(--surface);
  border:1px solid var(--border-light);
  border-radius:var(--radius);
  transition:background-color .12s, border-color .12s;
}
.list-item:hover{
  background:var(--surface-hover);
  border-color:var(--border);
}
.list-item-icon{
  width:32px; height:32px;
  display:grid; place-items:center;
  background:var(--primary-bg); color:var(--primary);
  border-radius:50%;
  font-size:13px;
  flex-shrink:0;
}
.list-item-body{ flex:1; min-width:0; }
.list-item-title{ font-weight:500; color:var(--text); }
.list-item-meta{
  font-size:12px; color:var(--text-muted);
  margin-top:2px;
}
.list-item-actions{ display:flex; gap:6px; }

/* ─── Empty state ─── */
.empty{
  padding:50px 20px;
  text-align:center;
  color:var(--text-muted);
}
.empty-icon{
  font-size:42px;
  margin-bottom:12px;
  opacity:.5;
}
.empty-title{
  font-size:17px;
  font-weight:800;
  color:var(--text);
  margin-bottom:6px;
}
.empty-hint{
  font-size:13px;
  color:var(--text-muted);
}

/* ─── Toast ─── */
.toast{
  background:var(--primary); color:var(--on-primary);
  padding:10px 16px;
  border-radius:var(--radius);
  font-size:var(--font-size);
  box-shadow:var(--shadow-lg);
  min-width:220px;
  max-width:480px;
  pointer-events:auto;
  animation:toastIn .2s ease;
}
@keyframes toastIn{ from{transform:translateY(-10px); opacity:0} to{transform:none; opacity:1} }
.toast-success{ border-inline-start:4px solid var(--success); }
.toast-error{ border-inline-start:4px solid var(--danger); }
.toast-warn{ border-inline-start:4px solid var(--warning); }
.toast-info{ border-inline-start:4px solid var(--info); }

/* ─── Filter chips ─── */
.filters{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:8px 0 14px;
  border-bottom:1px solid var(--border-light);
  margin-bottom:14px;
}
/* .chip كانت بلا تنسيق إطلاقاً (أزرار عارية تختفي على الجوال/الداكن) — تعريف موحّد */
.chip{
  padding:7px 14px;
  border:1.5px solid var(--border);
  border-radius:100px;
  background:var(--surface);
  color:var(--text);
  font-size:13px; font-weight:700; font-family:inherit; line-height:1.2;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
  transition:border-color .12s, background-color .12s, color .12s;
}
.chip:hover{ border-color:var(--primary); }
.chip.active{ background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
.filter-chip{
  padding:4px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  color:var(--text-muted);
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:border-color .12s, color .12s;
}
.filter-chip:hover{
  border-color:var(--primary);
  color:var(--primary);
}
.filter-chip.active{
  background:var(--primary);
  color:var(--on-primary);
  border-color:var(--primary);
}

/* ─── Permission badge ─── */
.no-permission{
  display:flex;
  flex-direction:column; align-items:center;
  padding:60px 20px;
  text-align:center;
  color:var(--text-muted);
}
.no-permission-icon{ font-size:42px; margin-bottom:14px; opacity:.4; }
.no-permission-title{
  font-size:16px; font-weight:600; color:var(--text);
  margin-bottom:6px;
}
.no-permission-hint{ font-size:13px; }

/* ─── Loading spinner ─── */
.spinner{
  display:inline-block;
  width:18px; height:18px;
  border:2px solid var(--border);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:spin .6s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
/* ════════════════════════════════════════════════════════════════
   التجاوب الشامل — Mobile + Tablet + Desktop
   مثل Odoo 19: شبكة تتكيّف، أزرار كبيرة على اللمس، جداول قابلة للسحب
   ════════════════════════════════════════════════════════════════ */

/* ─── أَساسيّات الجَوال — تَحسين الـ scroll وَمَنع المَشاكل الشائعة ─── */
html, body {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain; /* مَنع pull-to-refresh المُزعِج */
}
* { -webkit-overflow-scrolling: touch; }

/* الأَزرار وَالـ tappable — تَحسين اللَّمس */
button, .btn, a[role="button"], [data-tab], .chip {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(22, 22, 22, 0.15);
}

/* ─── default: desktop-first ─── */
.settings-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.page-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.page-actions{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.filter-bar{
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.filter-chips{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ─── الجداول قابلة للتمرير أفقياً على كل المقاسات ─── */
.card > .table,
.table{
  width: 100%;
  border-collapse: collapse;
}
/* لفّ كل الجداول بـ scrollable container تلقائياً */
.card:has(> .table){
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table th, .table td{
  padding: 10px 12px;
  text-align: start;
  vertical-align: middle;
}

/* ─── Tablet ─── */
@media (max-width: 1024px){
  .app-main{ padding: 14px 16px; }
  .page-title{ font-size: 18px; }

  /* settings-layout: sidebar للأعلى */
  .settings-layout{
    grid-template-columns: 1fr !important;
  }
  .settings-sidebar{
    flex-direction: row;
    overflow-x: auto;
    max-height: none;
    padding: 6px 4px;
  }
  .settings-tab{
    white-space: nowrap;
  }
}

/* ─── Mobile (الجوال) ─── */
@media (max-width: 640px){
  /* المُحتوى الرَّئيسي: padding مَريح + safe-area للحَواف الجانبيَّة وَالسُّفليَّة */
  .app-main{
    padding:
      12px
      max(8px, env(safe-area-inset-right, 0))
      max(16px, env(safe-area-inset-bottom, 0))
      max(8px, env(safe-area-inset-left, 0));
  }
  /* تَجَنُّب القَفز عند ظُهور الـ keyboard على iOS */
  body { min-height: 100vh; min-height: -webkit-fill-available; }

  /* العناوين أصغر */
  .page-title{ font-size: 16px; }
  .page-subtitle{ font-size:12px; }

  /* الـ page-header يتكدّس عمودياً */
  .page-header{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .page-actions{
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .page-actions .btn{
    width: 100%;
    justify-content: center;
    min-height: 44px;      /* لمس مريح */
    font-size: 14px;
  }
  .page-actions select,
  .page-actions input{
    width: 100% !important;
    min-height: 44px;
  }

  /* الـ settings-grid عمود واحد */
  .settings-grid{
    grid-template-columns: 1fr;
  }
  .settings-grid .field[style*="grid-column"]{
    grid-column: 1 / -1 !important;
  }

  /* البطاقات بدون padding كبير */
  .card{
    padding: 12px;
    border-radius: 8px;
  }
  .card h3{ font-size: 14px; }

  /* الجداول: padding أقل + خط أصغر */
  .table th, .table td{
    padding: 8px 6px;
    font-size: 12px;
  }
  /* أعمدة الإجراءات يجب أن تبقى ضيّقة */
  .table th:last-child, .table td:last-child{
    padding: 6px 4px;
  }

  /* الـ filter-bar */
  .filter-bar{
    flex-direction: column;
    align-items: stretch;
  }
  .filter-bar select, .filter-bar input{
    width: 100% !important;
    min-height: 40px;
  }
  .filter-chips{
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .chip{ white-space: nowrap; }

  /* الـ Modals — كامل العرض على الجوال */
  .modal{
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
  .modal-body{
    padding: 12px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
  .modal-footer{
    flex-direction: column-reverse;
    gap: 6px;
  }
  .modal-footer .btn{
    width: 100%;
    min-height: 44px;
  }

  /* الـ Topbar مُكثَّف */
  .topbar{ padding: 0 8px; gap: 6px; }
  .topbar-brand{ font-size: 14px; }
  .topbar-breadcrumb{ font-size:12px; }
  .topbar-search-wrap{ display: none; }
  .topbar-user-name{ display: none; }

  /* الـ app tiles على الرئيسيّة */
  .apps-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
  .app-tile{
    padding: 14px 8px;
  }

  /* الأزرار الصغيرة في الجداول تبقى مرئيّة */
  .btn-sm{
    min-height: 32px;
    padding: 6px 8px;
  }

  /* البطاقات الإحصائية (statCard) */
  .card[style*="text-align:center"] > div[style*="font-size:32px"]{ font-size: 24px !important; }
  .card[style*="text-align:center"] > div[style*="font-size:22px"]{ font-size: 18px !important; }
}

/* ─── Mobile صغير جداً ─── */
@media (max-width: 380px){
  .apps-grid{
    grid-template-columns: 1fr !important;
  }
  .page-title{ font-size: 15px; }
}

/* ─── Desktop واسع جداً — استغلال المساحة ─── */
@media (min-width: 1600px){
  .app-main{
    max-width: 1500px;
    margin: 0 auto;
  }
}

/* ─── حماية global: أي input/button على الجوال له touch-friendly height ─── */
@media (max-width: 640px){
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="email"],
  input[type="date"],
  input[type="month"],
  input[type="search"],
  select,
  textarea{
    font-size: 16px !important;     /* يمنع تكبير iOS التلقائي */
    min-height: 40px;
  }
}

/* ─── طباعة (الباركودات) — لا تتأثّر بأي شيء ─── */
@media print{
  .topbar, .modal-backdrop, .toast{ display: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   تَحسينات سَلاسة الجَوال (Mobile UX polish)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px){
  /* الفِلتر-تشيبس: scroll أُفقي ناعم مع snapping */
  .filter-chips {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .filter-chips::-webkit-scrollbar { display: none; }
  .filter-chips .chip { scroll-snap-align: start; }

  /* الجَداول: scroll أُفقي مع مُؤَشِّر تَلميحي */
  .card:has(> .table){
    overflow-x: auto;
    scrollbar-width: thin;
    border-radius: 10px;
  }
  .card:has(> .table)::-webkit-scrollbar { height: 4px; }
  .card:has(> .table)::-webkit-scrollbar-thumb {
    background: rgba(22, 22, 22, 0.3);
    border-radius: 2px;
  }

  /* الـ modals: ثابتة بِسَلاسة + safe-area سُفلي */
  .modal {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 95vh !important;
    animation: slideUpModal 0.25s ease-out;
  }
  @keyframes slideUpModal {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .modal-body {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
    -webkit-overflow-scrolling: touch;
  }
  .modal-footer {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0)) !important;
    background: var(--surface);
    border-top: 1px solid var(--border);
    position: sticky;
    bottom: 0;
  }

  /* الـ Toast: لا يُغَطِّي حَواف iPhone */
  #toast-host {
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }

  /* الأَزرار اللَّمسيَّة الكَبيرة: تَحديد لون عَلَى الضَّغط */
  .btn:active,
  .chip:active,
  .settings-tab:active,
  button:active {
    transform: scale(0.97);
    transition: transform 0.1s;
  }

  /* الـ inputs: نُعومة + تَكبير عند التَّركيز */
  input, select, textarea {
    border-radius: 8px;
    transition: box-shadow 0.15s, border-color 0.15s;
  }
  input:focus, select:focus, textarea:focus {
    box-shadow: var(--ring);
    border-color: var(--primary);
    outline: none;
  }

  /* الـ page-header — يمرّ مع المحتوى (بلا sticky) حتى لا تنزلق البطاقة الأولى خلفه */
  .page-header {
    position: static;
    background: var(--surface);
    padding: 12px 14px;
    margin: 0 0 12px;
  }

  /* البِطاقات: ظِل ناعم + radius كَبير لِلمَظهَر الأنيق */
  .card {
    box-shadow: none;
    border-radius: 12px;
  }
}

/* ─── iPhone / iPad PWA mode (تَطبيق مُثَبَّت) ─── */
@media all and (display-mode: standalone) {
  body {
    /* لَوحة وُصول كاملة */
    min-height: 100vh;
    min-height: 100dvh; /* dynamic viewport */
  }
  /* الـ Topbar في وَضع PWA: نفس اللون المسطّح (بلا تدرّج) */
  .topbar { background: var(--topbar-bg); }
}

/* ─── سَلاسة الـ scrolling ───
   (كانت * {scroll-behavior:smooth} على كل عنصر — تُبطئ أي تمرير برمجي
    كإعادة الرسم والقفز لأعلى الصفحة؛ حُصرت في html للروابط الداخلية فقط) */
html { scroll-behavior: smooth; }
.app-main { -webkit-overflow-scrolling: touch; }
/* ============================================================
   polish.css — طبقة تلميع احترافية (غير كاسرة)
   تُضيف: انتقالات سلسة · رفع خفيف عند التحويم · تمرير أنيق ·
   حلقات تركيز · دخول ناعم للصفحات والنوافذ · لمسات تفاعلية.
   تحافظ على هوية Odoo (الألوان والزوايا) — تحسّن الإحساس فقط.
   ============================================================ */

/* ── حركة عامّة سلسة على العناصر التفاعلية ── */
.btn, .input, .select, .textarea, .card, .app-tile,
.pill, .vf-src-card, .vf-bank-pill, .vf-type-btn, .asst-tab {
  transition: background-color .16s ease, border-color .16s ease,
              box-shadow .18s ease, transform .12s ease, color .16s ease;
}

/* ── الأزرار: ضغطة لطيفة (بلا will-change ولا ظلال ثقيلة) ── */
.btn:not(:disabled):active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── البطاقات: مسطّحة بحدّ ناعم — لا ظلّ يتغيّر عند المرور ── */
.card { box-shadow: none; }

/* ── بلاطات الصفحة الرئيسية: رفع وحيوية ── */
.app-tile { border:1px solid var(--border); border-radius: var(--radius-lg); }
.app-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.app-tile:active { transform: translateY(-1px); }

/* ── الحقول: حلقة تركيز ناعمة ── */
.input:focus, .select:focus, .textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}

/* ── حلقة تركيز للوصول (لوحة المفاتيح) ── */
.btn:focus-visible, .app-tile:focus-visible, a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── صفوف الجداول: تحويم لطيف ── */
.table tbody tr { transition: background-color .12s ease; }
.table tbody tr:hover { background: var(--surface-hover); }

/* ── (أُزيلت حركة دخول الصفحة — كانت تتكرّر مع كل فلترة فتُحدث اهتزازاً) ── */

/* ── النوافذ المنبثقة: دخول ناعم (الصندوق فقط) ── */
.modal { animation: modalIn .18s ease both; }
.modal-backdrop { animation: fadeIn .18s ease both; }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── التنبيهات (toast): انزلاق ناعم ── */
.toast { animation: toastIn .2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── شريط أدوات تمرير أنيق (رفيع، بلون الهوية) ── */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 10px;
  border: 2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── الأقراص (pills) ألطف ── */
.pill { border-radius: 999px; }

/* ── المساعد العائم: تفاعل أنعم ── */
#asst-fab { transition: transform .15s ease, box-shadow .2s ease; }
#asst-fab:hover { transform: scale(1.04); box-shadow: var(--shadow-lg); }
#asst-fab:active { transform: scale(.96); }
#asst-panel { animation: modalIn .18s ease both; }

/* ── حقول الإدخال الرقمية: إزالة الأسهم القبيحة عند عدم التحويم ── */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { opacity: .35; }

/* ── روابط الـ Topbar: تحويم أوضح ── */
.topbar a, .topbar .nav-item { transition: background-color .15s ease, opacity .15s ease; }

/* ── صور المنتجات/الملصقات: زوايا ناعمة وتباين خفيف ── */
.card img { border-radius: var(--radius-lg); }

/* (تقليل الحركة: قاعدة واحدة في odoo-theme.css) */

/* ════════════════════════════════════════════════════════════
   توحيد لغة التصميم — يُطبَّق على كل الصفحات (نظام واحد)
   يستهدف الفئات المشتركة فقط (.page-header / .card / .empty ...)
   ════════════════════════════════════════════════════════════ */

/* ── رأس الصفحة: موحّد وحديث مع شريط لوني جانبي ── */
.page-header {
  border-radius: var(--radius);
  box-shadow: none;
  position: relative;
  margin-bottom: 16px;
}
.page-title { font-weight: 800; letter-spacing: -.2px; }

/* ── البطاقات: زوايا أحدث ومسافات موحّدة بين الأقسام ── */
.card { border-radius: var(--radius-lg); margin-bottom: 14px; }
.card:last-child { margin-bottom: 0; }

/* ── عناوين الأقسام داخل البطاقات (الموحّدة بالكلاس) ── */
.card > h3 { letter-spacing: -.1px; }

/* ── شبكة موحّدة لبطاقات المنتجات/العناصر (فئة مساعدة) ── */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.grid-cards-sm { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

/* ── حالة فارغة موحّدة وحديثة ── */
.empty { text-align: center; padding: 34px 16px; color: var(--text-muted); }
.empty .icon, .empty .empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--primary-bg); color: var(--primary);
  font-size: 32px; margin-bottom: 10px;
}
.empty-title { font-weight: 700; color: var(--text); margin-top: 6px; }
.empty-hint { font-size:13px; margin-top: 4px; }

/* ── هيكل تحميل موحّد (skeleton) — للاستعمال عند الجلب ── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-alt) 25%, var(--border-light) 37%, var(--bg-alt) 63%);
  background-size: 400% 100%; border-radius: 8px; animation: skel 1.2s ease infinite;
}
@keyframes skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ── الجداول: رأس موحّد أنظف ── */
.table thead th {
  text-transform: none; letter-spacing: 0; font-weight: 700;
  color: var(--text-muted); background: var(--bg-alt);
}
.table { border-radius: var(--radius); overflow: hidden; }

/* ── الأقراص (badges/pills): مظهر موحّد حديث ── */
.pill { padding: 3px 10px; font-size:12px; font-weight: 700; border-radius: 999px; }

/* ── الحقول: ارتفاع وراحة موحّدة ── */
.input, .select, .textarea { border-radius: var(--radius-sm); }

/* ── أزرار: زوايا موحّدة أنعم ── */
.btn { border-radius: var(--radius-sm); }

/* ── شبكة بطاقات KPI الموحّدة (تُستعمل في التقارير/المراقب) ── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }

/* ── أزرار الرجوع/التقدّم في الشريط العلوي (مثل أودوو) ── */
.topbar-nav { display: flex; gap: 2px; margin-inline-start: 4px; }
.topbar-nav-btn { opacity: .9; }
.topbar-nav-btn:hover { opacity: 1; }
@media (max-width: 640px){ .topbar-nav { display: none; } }

/* (الشريط العلوي: مصدره الوحيد layouts.css + luxe.css — لا تجاوزات هنا) */

/* شريط التحكّم (page-header): مسطّح (بلا شريط لوني جانبي) */
.page-header{ border:1px solid var(--border); }

/* خلفية المحتوى: رمادي فاتح هادئ مثل Odoo */
body{ background:var(--bg); }

/* تبويبات (notebook): السطر النشط بخطّ سفلي حبري */
.tabs .tab.active, .tab-active, .nav-tab.active{ border-bottom:2px solid var(--primary); color:var(--primary); }

/* ════════════════════════════════════════════════════════════
   تنقيح أعمق بطابع Odoo — حقول وأزرار ثانوية وتبويبات
   ════════════════════════════════════════════════════════════ */
/* تسميات الحقول: هادئة وأصغر (مثل Odoo) */
.field-label{ color:var(--text-muted); font-weight:600; font-size:12px; }
/* الأزرار الثانوية: أنظف بحدّ خفيف */
.btn-secondary{ background:var(--surface); }
.btn-secondary:hover:not(:disabled){ background:var(--bg-alt); }
/* شريط التحكّم: ارتفاع أهدأ وحدّ بدل ظلّ ثقيل */
.page-header{ padding:12px 16px; }
/* رؤوس البطاقات h3: وزن وحجم موحّد إن لم تُكتب inline */
.card > h3:first-child{ font-size:14.5px; font-weight:700; color:var(--text); }
/* الجداول: صفوف بحدود خفيفة ومحاذاة مريحة */
.table th, .table td{ padding:9px 12px; }
.table tbody tr{ border-bottom:1px solid var(--border-light); }
/* روابط أنيقة بلون التمييز */
a{ color:var(--primary); }
/* حقول الإدخال: ارتفاع مريح موحّد */
.input, .select{ min-height:34px; }

/* ════════════════════════════════════════════════════════════
   توحيد مقاسات الأزرار (ارتفاع/حشو/خط موحّد في كل مكان)
   min-height يضمن تساوي الارتفاع حتى مع اختلاف المحتوى.
   ════════════════════════════════════════════════════════════ */
.btn{
  min-height:36px;
  padding:6px 16px;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
}
.btn-sm{ min-height:30px; padding:4px 11px; font-size:12px; font-weight:600; }
.btn-lg{ min-height:44px; padding:10px 22px; font-size:15px; }
.btn .icon{ font-size:18px; }
.btn-sm .icon{ font-size:15px; }
/* اتّساق ألوان الأزرار الدلالية (تأكيد على متغيّرات الهوية) */
.btn-primary{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.btn-success{ background:var(--success); border-color:var(--success); color:#fff; }
.btn-danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-secondary{ background:var(--surface); border-color:var(--border-strong); color:var(--text); }

/* ════════════════════════════════════════════════════════════
   معرض المنتجات — بطاقات فئات أنيقة + ملاءمة الجوال
   ════════════════════════════════════════════════════════════ */
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
.cat-tile{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:18px 10px; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; cursor:pointer; font-family:inherit;
  transition:transform .15s ease, box-shadow .18s ease, border-color .15s ease;
}
.cat-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--border-strong); }
.cat-tile:active{ transform:translateY(-1px); }
.cat-tile-ic{
  width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:30px; background:var(--bg-alt);
}
.cat-tile-name{ font-weight:700; font-size:13px; color:var(--text); text-align:center; line-height:1.3; }

/* ملاءمة الجوال: شبكات أوضح ولمس أكبر */
@media (max-width:640px){
  .cat-grid{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .cat-tile-ic{ width:48px; height:48px; font-size:26px; }
  .cat-tile-name{ font-size:12px; }
  .grid-cards, .grid-cards-sm{ grid-template-columns:repeat(2,1fr) !important; gap:10px; }
  .page-header{ flex-direction:column; align-items:stretch; }
  .page-actions{ width:100%; }
}

/* ════════════════════════════════════════════════════════════════
   ✨ طبقة التجديد الحديثة 2026 — مظهر وسلاسة فقط (لا تمسّ أي منطق)
   تُحسّن: الشريط العلوي · الانتقال بين الصفحات · البطاقات والأزرار
   والجداول · التمرير · الأيقونات · إحساس اللمس. كل ذلك بلا تغيير بنية.
   ════════════════════════════════════════════════════════════════ */

/* تمرير ناعم عام + خطوط أنعم */
html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* (أُزيلت حركة دخول الصفحة — كانت تتكرّر مع كل تحديث/فلترة فتُحدث اهتزازاً) */
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* ── الأزرار: حديثة بضغط محسوس ── */
.btn{ border-radius:var(--radius-sm); font-weight:700; letter-spacing:.1px; }
.btn:active:not(:disabled){ transform:translateY(1px); }
.btn-sm{ border-radius:var(--radius-sm); }

/* ── البطاقات: ظلال ناعمة ورفع لطيف ── */
.card{ border-radius:var(--radius-lg); box-shadow:none; }
.page-title{ letter-spacing:-.3px; }

/* ── الجداول: صفوف بتحويم مريح وحواف مدوّرة ── */
.table{ border-collapse:separate; border-spacing:0; }
.table thead th{ background:var(--bg-alt); font-weight:700; }
.table tbody tr{ transition:background-color .14s ease; }
.table tbody tr:hover{ background:var(--surface-hover); }

/* ── الحقول: تركيز أوضح ── */
.input:focus, .select:focus, .textarea:focus, input:focus, select:focus, textarea:focus{
  box-shadow:var(--ring);
}

/* ── الأيقونات: امتلاء خفيف عند التفعيل لإحساس أحدث ── */
.app-tile:hover .icon, .hub-tile:hover .icon{ font-variation-settings:'FILL' 1; }
.icon{ transition:font-variation-settings .2s ease; }

/* ── الحبوب/الشارات: أنعم ── */
.pill, .badge{ border-radius:100px; }

/* ── شريط تمرير أنيق (مدعوم في معظم المتصفحات) ── */
*{ scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:100px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--text-disabled); background-clip:content-box; }

/* ── النوافذ: ظهور أنعم ── */
.modal{ border-radius:var(--radius-lg); }
.modal-backdrop{ backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }

/* ── المساعد العائم: لمسة أحدث ── */
#asst-fab{ box-shadow:var(--shadow-lg); }

/* ════════════════════════════════════════════════════════════════
   أيقونات موحّدة بهوية «متجر الرجل» — أسود الشعار على أبيض ناصع
   (تُلغي الألوان المتعدّدة وتوحّدها بلون الشعار)
   ════════════════════════════════════════════════════════════════ */
.app-tile-icon{ background:var(--surface); box-shadow:var(--shadow-sm); }
.app-tile-icon, .app-tile-icon .icon{ color:var(--text); }
/* (صفحة الدخول: هويّتها كاملة داخل Login.js) */

/* ════════════════════════════════════════════════════════════════
   توحيد احترافي للأزرار والبلاطات + ملاءمة الجوال (هويّة متجر الرجل)
   ════════════════════════════════════════════════════════════════ */
/* الأزرار الأساسيّة: لون الهوية (يعمل في الوضعين — أسود على فاتح، فاتح على داكن) */
.btn-primary{
  background:var(--primary);
  border-color:var(--primary);
}
.btn-primary:not(:disabled):hover{
  background:var(--primary-hover);
  border-color:var(--primary-hover);
}
/* بطاقات المراكز: ظلّ محايد على هويّة الأسود (بدل البنفسجي القديم) */
.hub-tile:hover{
  box-shadow:var(--shadow-md);
  border-color:var(--border-strong);
}

/* أهداف لمس مريحة وعناصر متجاوبة على الجوال */
@media (max-width:640px){
  .btn{ min-height:44px; }
  .btn.btn-sm{ min-height:38px; }
  .page-actions{ flex-wrap:wrap; gap:8px; }
  .page-actions .btn{ flex:1 1 auto; justify-content:center; }
  .hub-tile{ padding:14px; gap:12px; }
  .hub-ic{ width:46px; height:46px; }
}

/* (أُزيلت حركة دخول الصفحة العامّة — الموجّه يُضيف .route-anim عند تغيير الصفحة فقط، انظر luxe.css) */

/* ════════════════════════════════════════════════════════════════
   مراكز بأقسام منظّمة + لمسة لون راقية على أيقونات المراكز
   ════════════════════════════════════════════════════════════════ */
.hub-section{ margin-bottom:24px; }
.hub-section-title{
  font-size:13px; font-weight:800; color:var(--text-muted); letter-spacing:.6px;
  margin:0 2px 13px; display:flex; align-items:center; gap:12px;
}
.hub-section-title::after{ content:''; flex:1; height:1px; background:var(--border); }

/* أيقونة المركز — هوية أحادية: شريحة محايدة تنقلب لأسود/أبيض عند المرور (تعمل في الوضعين) */
.hub-ic{ background:var(--bg-alt); border:1px solid var(--border-light); transition:background-color .2s, color .2s, border-color .2s; }
.hub-ic, .hub-ic .icon{ color:var(--text); }
.hub-tile:hover .hub-ic{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.hub-tile:hover .hub-ic .icon{ color:var(--on-primary); }
.hub-tile:hover .hub-arrow{ color:var(--text); }

/* 📱 على اللمس: لا تبقَ حالة «المرور» عالقة (الأيقونة السوداء العالقة) — استجابة ضغط نظيفة بدلها */
@media (hover:none){
  .hub-tile:hover{ transform:none; box-shadow:none; border-color:var(--border); }
  .hub-tile:hover .hub-ic{ background:var(--bg-alt); border-color:var(--border-light); color:var(--text); transform:none; }
  .hub-tile:hover .hub-ic .icon{ color:var(--text); font-variation-settings:'FILL' 0; }
  .hub-tile:hover .hub-arrow{ color:var(--text-disabled); }
  .hub-tile:active{ background:var(--bg-alt); transform:scale(.99); transition:transform .08s; }
}

/* ════════════════════════════════════════════════════════════════
   وضوح حقول الإدخال في كل النظام (حدود أوضح + تركيز جليّ)
   ════════════════════════════════════════════════════════════════ */
.input, .select, .textarea,
input.input, select.select, textarea.input,
input[type="text"].input, input[type="number"].input, input[type="date"].input{
  border:1.5px solid var(--border-strong);
  background-color:var(--surface);   /* لا الاختصار background: كان يمحو سهم القائمة (background-image) ويجعله يتكرّر في الداكن */
  border-radius:10px;
}
.input::placeholder, .textarea::placeholder, textarea.input::placeholder{ color:var(--text-disabled); }
.input:focus, .select:focus, .textarea:focus, textarea.input:focus, select.select:focus{
  border-color:var(--primary);
  box-shadow:var(--ring);
  outline:none;
}
.input:hover:not(:focus), .select:hover:not(:focus), .textarea:hover:not(:focus){ border-color:var(--text-disabled); }
/* الحقول المعطّلة تبقى واضحة لكن باهتة */
.input:disabled, .select:disabled, .input[disabled]{ background:var(--bg-alt); border-color:var(--border); color:var(--text-muted); }
/* ════════════════════════════════════════════════════════════════
   تنسيقات صفحة القيود
   ════════════════════════════════════════════════════════════════ */

/* ─── القيد كصفحة كاملة (size:'full') — شاشة كاملة، عمودان على الكمبيوتر ─── */
.modal-backdrop-full{
  background:var(--surface,#fff) !important;
  padding:0 !important;
  align-items:stretch !important; justify-content:stretch !important;
}
.modal-full{
  width:100%; max-width:100%;
  height:100%; max-height:100%;
  display:flex; flex-direction:column;
  border-radius:0; overflow:hidden; box-shadow:none; background:var(--surface);
  animation:vfPageIn .24s ease;
}
@keyframes vfPageIn{ from{ opacity:0; } to{ opacity:1; } }

/* رأس الصفحة: شريط علوي ممتدّ */
.modal-full .modal-header{
  padding:16px 32px; font-size:18px; font-weight:800;
  border-bottom:1px solid var(--border);
  background:var(--surface); position:sticky; top:0; z-index:3;
}
/* جسم الصفحة: عرض واسع متوسّط */
.modal-full .modal-body{
  padding:28px 32px 40px; overflow-y:auto; flex:1 1 auto;
  background:var(--surface);
}
.modal-full .modal-body > *{ max-width:1160px; margin-inline:auto; }

/* تذييل ثابت: شريط أزرار في عمود متوسّط */
.modal-full .modal-footer{
  padding:14px 24px; gap:12px;
  border-top:1px solid var(--border);
  background:var(--surface); position:sticky; bottom:0; z-index:3;
  box-shadow:0 -4px 16px rgba(0,0,0,.05);
  justify-content:center;
}
.modal-full .modal-footer .btn{ padding:12px 22px; font-size:15px; font-weight:700; border-radius:12px; }
.modal-full .modal-footer .btn-primary{ flex:1; max-width:560px; }
.modal-full .modal-footer .btn-secondary{ min-width:140px; }

/* بطاقات المصدر — شبكة منضبطة بأعمدة متساوية (لا تمدّد عشوائي) */
.modal-full .vf-sources{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.modal-full .vf-src-card{ border-radius:14px; padding:14px 12px; transition:transform .12s ease, box-shadow .15s ease, border-color .15s ease; }
.modal-full .field{ margin-bottom:18px; }
@media (min-width:900px){ .modal-full .vf-sources{ grid-template-columns:repeat(4, 1fr); } }
@media (max-width:560px){
  .modal-full .vf-sources{ grid-template-columns:repeat(2, 1fr); gap:8px; }
  .vf-src-card{ white-space:normal; overflow:visible; text-overflow:clip; min-height:48px; align-items:center; }
}
@media (hover:hover){ .modal-full .vf-src-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); } }

/* ── الكمبيوتر: عمودان يملآن العرض ── */
@media (min-width:900px){
  .modal-full #vf-body{
    display:grid; grid-template-columns:1fr 1fr;
    column-gap:32px; row-gap:0; align-content:start;
  }
  /* تمتدّ على كامل العرض: شريط النوع، المصادر، الملاحظة، بطاقة الجزئي، الإخفاء */
  .modal-full #vf-body > div[style*="1fr 1fr"],
  .modal-full #vf-body > .field:has(.vf-sources),
  .modal-full #vf-body > .field:has(textarea),
  .modal-full #vf-body > .card,
  .modal-full #vf-body > details{ grid-column:1 / -1; }
}

@media (max-width:640px){
  .modal-full .modal-header{ padding:14px 18px; }
  .modal-full .modal-body{ padding:18px 16px 26px; overflow-x:hidden; }
  .modal-full .modal-footer .btn-primary{ max-width:none; }
  /* 📱 كل صفوف العمودين داخل النموذج → عمود واحد (يمنع خروج الحقول عن الشاشة) */
  .modal-full #vf-body div[style*="1fr 1fr"]{ grid-template-columns:1fr !important; }
  /* الحقول لا تتمدّد أبداً خارج حدود الشاشة */
  .modal-full input, .modal-full select, .modal-full textarea{
    min-width:0; max-width:100%; width:100%; box-sizing:border-box;
  }
}


/* أزرار النوع (داخل/خارج) */
.vf-type-btn{
  display:flex; align-items:center; justify-content:center;
  gap:8px; padding:14px 18px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  color:var(--text-muted);
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background-color .12s, border-color .12s, color .12s;
}
.vf-type-btn:hover{
  background:var(--bg-alt);
  border-color:var(--border-strong);
}
.vf-type-btn .icon{ font-size:22px !important; }
.vf-type-btn.active[data-type="in"]{
  background:var(--success-bg);
  border-color:var(--success);
  color:var(--success-text);
}
.vf-type-btn.active[data-type="out"]{
  background:var(--danger-bg);
  border-color:var(--danger);
  color:var(--danger-text);
}

/* شبكة المصادر — أعمدة منضبطة متساوية */
.vf-sources{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
}
@media (min-width:560px){ .vf-sources{ grid-template-columns:repeat(3, 1fr); } }
.vf-src-card{
  display:flex; align-items:center; gap:8px;
  padding:11px 12px; min-width:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  text-align:start;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:border-color .12s, background .12s, color .12s;
}
@media (hover:hover){
  .vf-src-card:hover{
    border-color:var(--primary);
    background:var(--primary-bg);
    color:var(--primary);
  }
}
.vf-src-card:active{ transform:scale(.98); }
.vf-src-card.active{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}
.vf-src-card.active .icon{ color:#fff; }
.vf-src-card .icon{ flex-shrink:0; }

/* أزرار البنوك (pills) */
.vf-banks{
  display:flex; flex-wrap:wrap; gap:6px;
}
.vf-bank-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  color:var(--text-muted);
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:background-color .12s, border-color .12s, color .12s;
}
.vf-bank-pill:hover{
  border-color:var(--primary);
  color:var(--primary);
}
.vf-bank-pill.active{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}
.vf-bank-pill.active .icon{ color:#fff; }

/* ───── مُحدِّد طريقة الدفع (نقد / بنكي) — مسؤول الفرع ───── */
.vf-method{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.vf-method-pill{
  display:flex; align-items:center; gap:10px;
  padding:14px 14px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:14px;
  color:var(--text);
  font-family:inherit;
  cursor:pointer;
  text-align:start;
  transition:border-color .15s, box-shadow .15s, background .15s, transform .15s;
}
.vf-method-pill:hover{ border-color:var(--primary); transform:translateY(-1px); }
.vf-method-pill .icon{ font-size:24px; color:var(--text-muted); }
.vf-method-txt{ display:flex; flex-direction:column; line-height:1.25; }
.vf-method-txt strong{ font-size:15px; font-weight:800; }
.vf-method-txt small{ font-size:12px; color:var(--text-muted); }
.vf-method-pill.active{
  border-color:var(--primary);
  background:var(--surface);
  box-shadow:0 8px 22px -14px rgba(20,20,20,.55), inset 0 0 0 1px var(--primary);
}
.vf-method-pill.active .icon{ color:var(--primary); }
@media (max-width:520px){
  .vf-method{ grid-template-columns:1fr; }
}

/* منتقي الجهات */
.vf-party-wrap{ position:relative; }
.vf-party-suggestions{
  position:absolute; top:100%; left:0; right:0;
  margin-top:2px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  z-index:1000;
  max-height:280px;
  overflow-y:auto;
  display:none;
}
.vf-party-item{
  display:flex; justify-content:space-between; align-items:center;
  width:100%; padding:8px 12px;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border-light);
  text-align:start;
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  color:var(--text);
}
.vf-party-item:last-child{ border-bottom:none; }
.vf-party-item:hover{ background:var(--bg-alt); }
.vf-party-name{ font-weight:500; }
.vf-party-meta{ font-size:12px; font-weight:500; }

/* لوحة رصيد الجهة */
.vf-party-balance{ margin-top:8px; }

/* شريط الإجراءات المجمَّعة */
.batch-bar{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:8px;
  padding:10px 16px;
  margin-bottom:14px;
  background:var(--primary);
  color:var(--on-primary);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
}
.batch-bar strong{ font-weight:600; }
.batch-bar .icon{ color:var(--on-primary); }
.batch-bar .btn-success{ background:var(--surface); color:var(--success-text); border-color:var(--surface); }
.batch-bar .btn-success:hover{ background:var(--surface); opacity:.9; }
.batch-bar .btn-primary{ background:color-mix(in srgb, var(--on-primary) 18%, transparent); color:var(--on-primary); border-color:color-mix(in srgb, var(--on-primary) 30%, transparent); }
.batch-bar .btn-primary:hover{ background:color-mix(in srgb, var(--on-primary) 28%, transparent); border-color:color-mix(in srgb, var(--on-primary) 50%, transparent); }
.batch-bar .btn-secondary{ background:transparent; color:var(--on-primary); border-color:color-mix(in srgb, var(--on-primary) 40%, transparent); }
.batch-bar .btn-secondary:hover{ background:color-mix(in srgb, var(--on-primary) 12%, transparent); }

/* صفّ محدَّد */
.row-selected{ background:var(--primary-bg) !important; }
.row-selected td:first-child{ border-inline-start:3px solid var(--primary); }
.row-checkbox{ cursor:pointer; }

/* فاصل بين مجموعات الفلاتر */
.filter-sep{
  width:1px;
  background:var(--border-light);
  align-self:stretch;
  margin:0 4px;
}

/* علامة "مستثنى من Odoo" */
.excluded-mark{
  font-size:12px;
  margin-inline-start:4px;
  opacity:.7;
  cursor:help;
}

/* تحذير في الـ batch bar */
.batch-warn{
  font-size:12px;
  padding:2px 8px;
  background:color-mix(in srgb, var(--on-primary) 20%, transparent);
  border-radius:10px;
  color:var(--on-primary);
  margin-inline-start:8px;
}

/* ════════════════════════════════════════════════════════════════
   تصميم فاخر لصفحة القيود اليوميّة (نطاق .vlx — لا يمسّ المنطق)
   ════════════════════════════════════════════════════════════════ */
.vlx .page-header{ border:1px solid var(--border) !important; border-radius:16px; }

/* الجدول */
.vlx .table{ border-collapse:separate; border-spacing:0; }
.vlx .table thead th{
  background:var(--surface-hover); color:var(--text-muted); font-weight:800; font-size:12px;
  letter-spacing:.4px; text-align:start; white-space:nowrap;
  padding:12px 14px; border-bottom:1px solid var(--border);
}
.vlx .table tbody td{
  padding:13px 14px; font-size:14px; vertical-align:middle;
  border-bottom:1px solid var(--border); color:var(--text);
}
.vlx .table tbody tr{ transition:background .14s; }
.vlx .table tbody tr:hover{ background:var(--surface-hover); }
.vlx .table tbody tr.row-selected{ background:var(--primary-bg); box-shadow:inset 3px 0 0 var(--primary); }
.vlx .table tbody tr:last-child td{ border-bottom:0; }

/* شارات الحالة أنعم */
.vlx .pill{ padding:3px 11px; border-radius:999px; font-size:12px; font-weight:700; }

/* فلاتر — حبوب أنيقة */
.vlx .filters{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.vlx .filter-chip{
  border:1px solid var(--border); background:var(--surface); color:var(--text-muted);
  border-radius:999px; padding:6px 14px; font-size:13px; font-weight:600;
  cursor:pointer; transition:background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.vlx .filter-chip:hover{ border-color:var(--border-strong); background:var(--surface-hover); }
.vlx .filter-chip.active{ background:var(--primary); border-color:var(--primary); color:var(--bg); box-shadow:0 5px 14px -7px rgba(20,20,20,.55); }
.vlx .filter-sep{ width:1px; align-self:stretch; min-height:22px; background:var(--border); margin:2px 4px; }

/* أزرار إجراءات الصفّ — مربّعات أنيقة متناسقة */
.vlx .table td .btn.btn-sm{ width:32px; height:32px; min-height:32px; padding:0; justify-content:center; border-radius:9px; }

@media (max-width:640px){
  .vlx .filter-chip{ padding:5px 11px; font-size:12px; }

  /* ─── تحويل صفوف الجدول إلى بطاقات أنيقة على الجوال ─── */
  .vlx .table thead{ display:none; }
  .vlx .table, .vlx .table tbody, .vlx .table tr, .vlx .table td{ display:block; width:auto; }
  .vlx .table > div, .vlx .card > div[style*="overflow"]{ overflow:visible !important; }
  .vlx .table tr{
    position:relative;
    background:var(--surface); border:1px solid var(--border); border-radius:15px;
    padding:14px 16px 10px; margin:0 0 12px;
    box-shadow:0 5px 16px -11px rgba(20,20,20,.16);
  }
  .vlx .table tr.row-selected{ box-shadow:inset 3px 0 0 var(--primary), 0 5px 16px -11px rgba(20,20,20,.16); border-color:var(--primary); }
  .vlx .table td{
    border:0 !important; padding:6px 0 !important;
    display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
    font-size:14px; text-align:start;
    min-width:0; overflow-wrap:anywhere; word-break:break-word;
  }
  .vlx .table td::before{
    content:attr(data-label); color:var(--text-muted); font-weight:700; font-size:12px; flex:none;
    overflow-wrap:normal; word-break:normal;
  }
  .vlx .table td[data-label]{ }
  .vlx .table td:not([data-label]):empty{ display:none; }   /* خليّة الاختيار الفارغة (قيد منشور) */

  /* المبلغ بارز كعنوان البطاقة */
  .vlx .table td.vlx-amt{ font-size:20px; font-weight:800 !important; text-align:start !important; padding-bottom:8px !important; }
  .vlx .table td.vlx-amt::before{ font-size:12px; align-self:center; }

  /* عمود السهم: مخفيّ في وضع البطاقات (البطاقة كلها قابلة للنقر) */
  .vlx .table td.vlx-chev{ display:none !important; }

  /* مربّع الاختيار: زاوية البطاقة */
  .vlx .table td.vlx-sel{ position:absolute; top:12px; inset-inline-start:14px; padding:0 !important; width:auto; }
  .vlx .table td.vlx-sel::before{ content:none; }
  .vlx .table td.vlx-sel:empty{ display:none; }

  /* الإجراءات: شريط سفلي بعرض كامل */
  .vlx .table td.vlx-actions{ margin-top:8px; padding-top:10px !important; border-top:1px solid var(--border) !important; }
  .vlx .table td.vlx-actions::before{ content:none; }
  .vlx .table td.vlx-actions > div{ width:100%; gap:6px; }
  .vlx .table td.vlx-actions .btn.btn-sm{ width:36px; height:36px; }
}

/* ════════════════════════════════════════════════════════════════
   تحسين فاخر لشاشة «قيد جديد» (VoucherForm) — مظهر فقط
   ════════════════════════════════════════════════════════════════ */
.modal-full #vf-body{ max-width:1040px; margin-inline:auto; }
.modal-full .field-label{ font-weight:700; color:var(--text-muted); }

/* المبلغ — بارز كحقل رئيسي */
.modal-full #vf-amount{ font-size:20px; font-weight:800; height:54px; border-radius:12px; }
.modal-full #vf-amount:focus{ border-color:var(--primary); box-shadow:0 0 0 4px rgba(20,20,20,.07); }

/* أزرار النوع — أوضح وأفخم */
.vf-type-btn{ padding:16px; border-radius:14px; font-size:15px; font-weight:700; }
.vf-type-btn.active[data-type="in"]{ box-shadow:0 10px 22px -12px rgba(45,159,45,.55); }
.vf-type-btn.active[data-type="out"]{ box-shadow:0 10px 22px -12px rgba(198,40,40,.5); }

/* بطاقات المصدر + حبوب البنك — لمسة عمق عند الاختيار */
.vf-src-card{ border-radius:13px; }
.vf-src-card.active{ box-shadow:0 9px 20px -10px rgba(20,20,20,.5); }
.vf-bank-pill{ border-radius:11px; }
.vf-bank-pill.active{ box-shadow:0 7px 16px -8px rgba(20,20,20,.5); }

/* ══════════════════════════════════════════════════════════════════
   الجوال: تحويل جدول القيود إلى بطاقات (بأقصى تحسين للمس)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .vl-table thead{ display:none; }
  .vl-table, .vl-table tbody, .vl-table tr, .vl-table td{ display:block; width:100%; }
  .vl-table tr{
    border:1px solid var(--border); border-radius:14px; margin-bottom:11px;
    padding:6px 13px; background:var(--surface); box-shadow:var(--shadow-sm);
  }
  .vl-table tr.row-selected{ border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-bg); }
  .vl-table td{
    border:none; display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:7px 0; text-align:start; min-height:34px;
  }
  .vl-table td + td{ border-top:1px solid var(--border-light,var(--border)); }
  .vl-table td[data-label]::before{
    content:attr(data-label); color:var(--text-muted); font-weight:700; font-size:12px; flex:none;
  }
  /* خانة التحديد وصف الإجراءات: بلا عنوان، عرض كامل */
  .vl-table td.vlx-sel{ display:none; }
  .vl-table td.vlx-actions{ border-top:1px solid var(--border); margin-top:3px; padding-top:9px; }
  .vl-table td.vlx-actions > div{ width:100%; justify-content:flex-start; }
  .vl-table td.vlx-actions .btn{ flex:0 0 auto; }
  /* المبلغ أبرز على الجوال */
  .vl-table td.vlx-amt{ font-size:15px; }
  /* أخفِ الخلايا الفارغة تماماً */
  .vl-table td[data-label]:empty{ display:none; }
}
/* ════════════════════════════════════════════════════════════════
   إعدادات النظام — الهوية 2 «حبرٌ على قماش»
   نطاق: .ss2 (داخل .v2-root فتُرث الرموز). المنطق في SystemSettings.js.
   القواعد هنا تتغلّب على .card/.btn/.input القديمة داخل الصفحة فقط.
   ════════════════════════════════════════════════════════════════ */
.ss2{ display:flex; flex-direction:column; gap:16px; max-width:1180px; margin:0 auto; }
.ss2 *, .ss2 *::before, .ss2 *::after{ box-sizing:border-box; }
.ss2 .num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; }

/* الرأس */
.ss-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:4px 2px 0; }
.ss-head h1{ margin:0 0 4px; font-size:24px; font-weight:800; letter-spacing:-.4px; line-height:1.2; }
.ss-head p{ margin:0; color:var(--text-muted); font-size:13.5px; }

/* التخطيط: قائمة الأقسام يميناً ثابتة + المحتوى */
.ss2 .settings-layout{ display:grid; grid-template-columns:228px minmax(0,1fr); gap:16px; align-items:start; }
.ss2 .settings-sidebar{ position:sticky; top:calc(var(--top-h) + 14px); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:6px; }
.ss2 .settings-tab{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; margin:0 0 2px; background:transparent; border:0; border-radius:10px;
  color:var(--text-muted); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; text-align:start; transition:background var(--dur), color var(--dur); }
.ss2 .settings-tab:hover{ background:var(--bg-alt); color:var(--text); }
.ss2 .settings-tab.active{ background:var(--primary); color:var(--on-primary); }
.ss2 .settings-tab .icon{ color:inherit; font-size:19px; }
.ss2 .settings-content{ display:flex; flex-direction:column; gap:16px; min-width:0; }
@media (max-width:899px){
  .ss2 .settings-layout{ grid-template-columns:1fr; }
  .ss2 .settings-sidebar{ position:static; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding:4px; border-radius:14px; background:var(--bg-alt); }
  .ss2 .settings-sidebar::-webkit-scrollbar{ display:none; }
  .ss2 .settings-tab{ width:auto; white-space:nowrap; margin:0; padding:9px 14px; }
  .ss2 .settings-tab.active{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
}

/* البطاقات */
.ss2 .settings-content .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg) !important; padding:18px; margin:0; box-shadow:none; }
.ss2 .settings-content .card:hover{ transform:none; box-shadow:none; }
.ss2 .settings-content .card > h3, .ss2 .settings-content .card h3:first-child{ display:flex; align-items:center; gap:10px; margin:0 0 6px; font-size:15px; font-weight:800; }
.ss2 .settings-content .card h3 .icon{ width:34px; height:34px; border-radius:10px; background:var(--bg-alt); color:var(--text); display:grid; place-items:center; font-size:19px; flex:none; }
.ss2 .settings-content .card h4{ font-size:13px; font-weight:800; color:var(--text-muted); }
.ss2 .field-hint{ color:var(--text-muted); font-size:12.5px; line-height:1.7; }
.ss2 .field-hint code{ font-family:var(--font-num); font-size:11.5px; background:var(--bg-alt); padding:1px 5px; border-radius:5px; }

/* الحقول */
.ss2 .field{ margin:0; }
.ss2 .field-label, .ss2 label.field-label{ display:block; font-size:12.5px; font-weight:700; color:var(--text-muted); line-height:20px; margin:0 0 6px; }
.ss2 .input, .ss2 .select, .ss2 select.select, .ss2 textarea.input{
  min-height:44px; padding:0 13px; font:inherit; font-size:14px; font-weight:600; color:var(--text); background:var(--surface);
  border:1px solid var(--border-strong); border-radius:10px !important; box-shadow:none; transition:border-color var(--dur), box-shadow var(--dur);
}
.ss2 textarea.input{ padding:10px 13px; line-height:1.7; min-height:88px; }
.ss2 .input:focus, .ss2 .select:focus, .ss2 textarea.input:focus{ outline:none; border-color:var(--primary); box-shadow:var(--ring); }
.ss2 .input::placeholder{ color:var(--text-faint); font-weight:500; }
.ss2 .input[dir=ltr], .ss2 .input[type=number], .ss2 .input[list]{ font-family:var(--font-num); }
.ss2 .input.ss-bad{ border-color:var(--danger); background:var(--danger-bg); color:var(--danger-text); }
.ss2 .settings-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:8px; }
.ss2 .settings-checkbox{ display:flex; align-items:center; gap:10px; padding:10px 12px; margin:6px 0 0; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); cursor:pointer; font-size:13.5px; font-weight:600; }
.ss2 .settings-checkbox input{ width:18px; height:18px; margin:0; accent-color:var(--primary); cursor:pointer; }

/* الأزرار */
.ss2 .btn{ display:inline-flex; align-items:center; gap:8px; border:1px solid transparent; border-radius:10px !important; padding:9px 16px; min-height:40px;
  font:inherit; font-size:13.5px; font-weight:700; line-height:1.3; cursor:pointer; text-decoration:none; box-shadow:none; }
.ss2 .btn .icon{ font-size:18px; }
.ss2 .btn-primary{ background:var(--primary); color:var(--on-primary); } .ss2 .btn-primary:hover{ background:var(--primary-hover); }
.ss2 .btn-secondary{ background:var(--surface); border-color:var(--border-strong); color:var(--text); } .ss2 .btn-secondary:hover{ background:var(--bg-alt); }
.ss2 .btn-danger{ background:var(--danger-bg); color:var(--danger-text); }
.ss2 .btn-sm{ padding:6px 12px; min-height:34px; font-size:12.5px; border-radius:8px !important; }
.ss2 .btn:disabled{ opacity:.5; cursor:not-allowed; }

/* الجداول */
.ss2 .table{ width:100%; border-collapse:collapse; margin:0; }
.ss2 .table th{ text-align:start; font-size:11.5px; font-weight:700; color:var(--text-muted); padding:9px 10px; border-bottom:1px solid var(--border); background:var(--surface-2); }
.ss2 .table td{ padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:middle; font-size:13px; }
.ss2 .table tbody tr:last-child td{ border-bottom:0; }

/* الشارات والصناديق الملوّنة داخل البطاقات */
.ss2 .pill{ display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:2px 10px; font-size:12px; font-weight:700; }
.ss2 .ss-noacc{ font-size:12px; font-weight:600; color:var(--success-text); background:var(--success-bg); padding:8px 10px; border-radius:10px; margin-bottom:8px; }

/* فحص الربط */
.ss2 .ss-check.ok{ border-color:var(--success); }
.ss2 .ss-check.ok h3 .icon{ background:var(--success-bg); color:var(--success-text); }
.ss2 .ss-check.bad{ border-color:var(--danger); }
.ss2 .ss-check.bad h3 .icon{ background:var(--danger-bg); color:var(--danger-text); }
.ss2 .ss-problems{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ss2 .ss-problems li{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:10px; background:var(--danger-bg); color:var(--danger-text); font-size:13px; font-weight:600; }
.ss2 .ss-problems li b{ font-weight:800; }

/* الكتالوج (بطاقة الحالة) — تُلوَّن من JS بخلفية نجاح/تحذير؛ نُبقيها هادئة */
.ss2 .settings-content .card[style*="success-bg"]{ background:var(--surface) !important; border-color:var(--success) !important; }
.ss2 .settings-content .card[style*="warning-bg"]{ background:var(--surface) !important; border-color:var(--warning) !important; }

@media (max-width:640px){
  .ss2 .settings-content .card{ padding:14px; }
  .ss2 .settings-grid{ grid-template-columns:1fr; }
}
/* ============================================================
   reports.css — كسوة فخمة موحّدة لصفحات التقارير والكشوف
   تُفعَّل بإضافة الصنف .rpx على حاوية الصفحة.
   لا تلمس المنطق إطلاقاً — تجميل فقط + ملاءمة للجوال.
   يشمل: السيولة، الربح والخسارة، الميزانية، التقارير المالية،
          تقارير المبيعات، تقارير المخزون.
   ============================================================ */

.rpx{
  /* موحّد مع متغيّرات المظهر — يعمل فاتح/داكن بلا كسر */
  --rpx-ink:var(--text);
  --rpx-muted:var(--text-muted);
  --rpx-line:var(--border);
  --rpx-line2:var(--border-light,var(--border));
  --rpx-accent:var(--primary);
  animation:rpxIn .4s cubic-bezier(.16,.84,.44,1);
}
@keyframes rpxIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

/* ───────── ترويسة الصفحة: موحّدة مع page-header المسطّح ───────── */
.rpx .page-header{
  position:relative;
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 16px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
/* بلا شريط لونيّ جانبيّ — موحّد مع باقي الصفحات */
.rpx .page-header::before{ display:none; }
.rpx .page-title{
  font-size:20px; font-weight:800; letter-spacing:-.2px; color:var(--text);
}
.rpx .page-subtitle{ font-size:13px; color:var(--rpx-muted); margin-top:3px; }
.rpx .page-actions{ gap:8px; }

/* ───────── البطاقات ───────── */
.rpx .card{
  border:1px solid var(--rpx-line);
  border-radius:16px;
  box-shadow:none;
  transition:border-color .25s ease;
}
.rpx .card:hover{ border-color:var(--border-strong); }
.rpx .card h3{ letter-spacing:-.2px; color:var(--rpx-ink); }

/* ───────── شبكة مؤشّرات KPI ───────── */
.rpx-kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;
  margin-bottom:14px;
}
.rpx-kpi{
  position:relative;
  background:var(--surface);
  border:1px solid var(--rpx-line);
  border-radius:16px;
  padding:16px 18px;
  box-shadow:none;
  overflow:hidden;
  transition:border-color .22s ease;
}
.rpx-kpi:hover{ border-color:var(--border-strong); }
/* علامة حبر قصيرة في أعلى البداية — كطابع أقسام الرئيسية في الهويّة 2 */
.rpx-kpi::after{
  content:""; position:absolute; inset-block-start:0; inset-inline-start:0; width:34px; height:2px;
  background:var(--rpx-accent); border-radius:2px;
}
.rpx-kpi .k-label{ font-size:12px; font-weight:700; color:var(--rpx-muted); letter-spacing:.2px; }
.rpx-kpi .k-value{ font-size:25px; font-weight:800; margin-top:6px; color:var(--rpx-ink); font-variant-numeric:tabular-nums; letter-spacing:-.5px; }
.rpx-kpi .k-sub{ font-size:12px; color:var(--rpx-muted); margin-top:3px; }
/* بطاقة بطل (هيرو) للإجمالي العام — بلاطة حبر مسطّحة */
.rpx-kpi.k-hero{ border-color:var(--primary); color:var(--on-primary); background:var(--primary); }
.rpx-kpi.k-hero::after{ background:var(--on-primary); opacity:.5; }
.rpx-kpi.k-hero .k-label{ color:var(--on-primary); opacity:.85; }
.rpx-kpi.k-hero .k-value{ color:var(--on-primary); }
.rpx-kpi.k-hero .k-sub{ color:var(--on-primary); opacity:.8; }

/* ───────── الجداول الفخمة ───────── */
.rpx .table{ font-variant-numeric:tabular-nums; }
.rpx .table thead{
  background:var(--bg-alt);
}
.rpx .table th{
  font-size:12px; font-weight:800; letter-spacing:.5px;
  color:var(--rpx-muted); padding:11px 14px;
  border-bottom:1px solid var(--rpx-line);
}
.rpx .table td{
  padding:11px 14px; font-size:13px; color:var(--rpx-ink);
  border-bottom:1px solid var(--rpx-line2);
}
.rpx .table tbody tr{ transition:background-color .15s ease; }
.rpx .table tbody tr:nth-child(even){ background:var(--surface-hover); }
.rpx .table tbody tr:hover{ background:var(--surface-hover); }
.rpx .table tfoot tr{ font-weight:800; }
.rpx .table tfoot td{ border-top:2px solid var(--border-strong); background:var(--surface-hover); }
/* غلاف تمرير أفقي أنيق للجداول الكثيفة */
.rpx .tbl-wrap, .rpx [style*="overflow-x:auto"]{
  border-radius:14px;
  border:1px solid var(--rpx-line);
  -webkit-overflow-scrolling:touch;
}

/* ───────── أزرار التحديث/التصدير داخل الترويسة ───────── */
.rpx .page-actions .input,
.rpx .page-actions .select{
  border:1.5px solid var(--border-strong); border-radius:10px; height:38px;
}
.rpx .page-actions .btn{ border-radius:10px; height:38px; }

/* ───────── صفّ قابل للنقر (سجلّ/تفصيل) ───────── */
.rpx [data-acc],
.rpx tr[data-move]{ transition:background-color .15s ease; }
.rpx [data-acc]:hover{ background:var(--bg-alt); border-radius:8px; }

/* ════════════════════════════════════════════════════════════
   الجوال — أناقة وملاءمة
   ════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .rpx .page-header{
    flex-direction:column; align-items:stretch; gap:12px;
    padding:14px 16px 14px 18px;
  }
  .rpx .page-title{ font-size:17px; }
  .rpx .page-actions{ width:100%; }
  .rpx .page-actions .input,
  .rpx .page-actions .select,
  .rpx .page-actions .btn{ flex:1 1 auto; width:auto; min-width:0; }
  .rpx .page-actions .input[type="date"]{ width:auto !important; }

  .rpx .card{ border-radius:14px; padding:14px; }
  .rpx-kpis{ grid-template-columns:1fr 1fr; gap:10px; }
  .rpx-kpi{ padding:13px 14px; border-radius:14px; }
  .rpx-kpi .k-value{ font-size:21px; }
  .rpx-kpi.k-hero{ grid-column:1 / -1; }

  /* الجداول الكثيفة: تمرير أفقي سلس مع رأس ثابت بصرياً */
  .rpx .table{ font-size:12px; }
  .rpx .table th,
  .rpx .table td{ padding:9px 10px; white-space:nowrap; }
}

@media (max-width:380px){
  .rpx-kpis{ grid-template-columns:1fr; }
}


/* 📱 جداول التقارير على الجوال: تمرير أفقي سلس بدل فيضان الصفحة */
@media (max-width: 700px) {
  .rpx table.table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}
/* ══════════════════════════════════════════════════════════════════
   modern.css — طبقة الشكل الجديد (الأنيق) القابلة لإعادة الاستخدام
   ──────────────────────────────────────────────────────────────
   فئات بادئة mx-* تعتمد متغيّرات المظهر الحاليّة (تعمل فاتح/داكن).
   الصفحات تتبنّاها تدريجياً (تبدأ بالتصنيع) دون أن تُغيّر ما لم يُحدَّث بعد.
   الأيقونات من components/icons.js (SVG أنيق، currentColor).
   ══════════════════════════════════════════════════════════════════ */

.mx { --mx-r:16px; --mx-r-sm:11px; }
.mx .ic{ display:inline-flex; vertical-align:middle; flex:none; }

/* ── ترويسة الصفحة: تُطابق page-header المسطّح تماماً (بلا شريط لونيّ جانبيّ) ── */
.mx-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:12px 16px; background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden; margin-bottom:16px;
}
.mx-head::before{ display:none; }
.mx-title{ margin:0; font-family:var(--font-heading,inherit); font-size:20px; font-weight:800; letter-spacing:-.2px; display:flex; align-items:center; gap:10px; color:var(--text); }
.mx-title .ic{ color:var(--primary); }
.mx-sub{ margin:2px 0 0; color:var(--text-muted); font-size:13px; }
.mx-head-actions{ display:flex; gap:9px; flex-wrap:wrap; }

/* توحيد أيقونات الترويسة: نعتمد الشريط اللونيّ الجانبيّ ونُخفي الأيقونات المتفرّقة داخل العناوين */
.page-title > .icon, .mx-title > .icon, .mx-title > .ic, .mx-title > svg{ display:none; }

/* توحيد شريط البحث/الفلاتر عبر كل الصفحات */
.filter-bar{ margin-bottom:16px; align-items:center; gap:8px; }
.filter-bar .input, .filter-bar .select, .filter-bar input[type="search"],
.page-actions input[type="search"], .page-actions .input{ height:38px; border-radius:10px; }
/* حقل البحث موحّد الارتفاع في كل الصفحات مهما كان موضعه (يعالج تفاوت 34/38/44) */
input[type="search"], .search-input, .search-box input, .input.search{
  height:38px; min-height:38px; border-radius:10px;
}

/* ── أزرار ── */
.mx-btn{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border); background:var(--surface); color:var(--text);
  border-radius:var(--mx-r-sm); padding:9px 15px; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
  transition:transform .15s, border-color .15s, background-color .15s, opacity .15s; box-shadow:none; }
.mx-btn:hover{ transform:translateY(-1px); border-color:var(--text); }
.mx-btn:active{ transform:translateY(0); }
.mx-btn:disabled{ opacity:.55; cursor:default; transform:none; }
.mx-btn-primary{ background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
.mx-btn-primary:hover{ opacity:.92; border-color:var(--primary); }
.mx-btn-sm{ padding:7px 11px; font-size:13px; }

/* ── حبّات فلترة ── */
.mx-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.mx-chip{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); background:var(--surface); color:var(--text-muted);
  border-radius:100px; padding:6px 13px; font-size:13px; font-weight:700; cursor:pointer; transition:background-color .15s, border-color .15s, color .15s; }
.mx-chip:hover{ color:var(--text); border-color:var(--border-strong,var(--border)); }
.mx-chip.on{ background:var(--primary); color:var(--on-primary); border-color:var(--primary); }

/* ── عنوان قسم بخطّ فاصل ── */
.mx-sec{ display:flex; align-items:center; gap:8px; margin:24px 2px 12px; font-size:13px; font-weight:800; color:var(--text-muted); }
.mx-sec::after{ content:""; flex:1; height:1px; background:var(--border); }

/* ── بطاقة عامّة بحدود واضحة ── */
.mx-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--mx-r); box-shadow:none; overflow:hidden; }
.mx-card-h{ padding:13px 18px; border-bottom:1px solid var(--border); font-weight:800; font-size:14px; display:flex; align-items:center; gap:8px; color:var(--text); }
.mx-card-h .ic{ color:var(--primary); }
.mx-card-b{ padding:18px; }

/* ── شبكة بطاقات ── */
.mx-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }

/* ── بطاقة إحصاء ── */
.mx-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:13px; margin-bottom:22px; }
.mx-stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--mx-r); padding:16px 17px; box-shadow:none; }
.mx-stat-lbl{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-muted); font-weight:600; }
.mx-stat-ci{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none; }
.mx-stat-val{ font-size:26px; font-weight:900; margin-top:9px; letter-spacing:-.5px; font-variant-numeric:tabular-nums; color:var(--text); }
.mx-stat-val small{ font-size:13px; color:var(--text-muted); font-weight:700; }

/* ── جدول أنيق بحدود صفوف واضحة ── */
.mx-table{ width:100%; border-collapse:collapse; }
.mx-table thead th{ background:var(--bg-alt,var(--bg)); text-align:right; font-size:12px; font-weight:800; color:var(--text-muted); padding:11px 16px; border-bottom:1px solid var(--border); }
.mx-table tbody td{ padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
.mx-table tbody tr:last-child td{ border-bottom:none; }
.mx-table tbody tr{ transition:background-color .12s; }
.mx-table tbody tr:hover{ background:var(--bg-alt,var(--bg)); }
.mx-ref{ font-weight:800; }
.mx-ref small{ display:block; color:var(--text-muted); font-weight:600; font-size:12px; margin-top:1px; }
.mx-who{ display:flex; align-items:center; gap:9px; }
.mx-av{ width:32px; height:32px; border-radius:9px; background:var(--bg-alt,var(--bg)); color:var(--text); display:grid; place-items:center; font-weight:800; font-size:13px; flex:none; }
.mx-amt{ font-weight:800; font-variant-numeric:tabular-nums; }

/* ── حبّة حالة ملوّنة ناعمة ── */
.mx-pill{ display:inline-flex; align-items:center; gap:5px; border-radius:100px; padding:3px 11px; font-size:12px; font-weight:700; }
.mx-pill .ic{ width:14px; height:14px; }
.mx-pill-info{ background:var(--info-bg); color:var(--info-text,var(--info)); }
.mx-pill-warn{ background:var(--warning-bg); color:var(--warning-text,var(--warning)); }
.mx-pill-ok{ background:var(--success-bg); color:var(--success-text,var(--success)); }
.mx-pill-danger{ background:var(--danger-bg); color:var(--danger-text,var(--danger)); }
.mx-pill-muted{ background:var(--bg-alt,var(--bg)); color:var(--text-muted); }

/* ── أزرار إجراء دائريّة في الصفوف ── */
.mx-row-actions{ display:flex; gap:5px; justify-content:flex-end; align-items:center; flex-wrap:wrap; }
.mx-ia{ width:32px; height:32px; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--text-muted);
  display:grid; place-items:center; cursor:pointer; transition:border-color .14s, color .14s, transform .14s; }
.mx-ia:hover{ border-color:var(--text); color:var(--text); transform:translateY(-1px); }
.mx-ia .ic{ width:17px; height:17px; }
.mx-ia-go{ background:var(--success); border-color:var(--success); color:#fff; }
.mx-ia-go:hover{ color:#fff; }
.mx-ia-danger:hover{ border-color:var(--danger); color:var(--danger); }

/* ── بحث أنيق ── */
.mx-search{ position:relative; display:flex; align-items:center; background:var(--surface); border:1.5px solid var(--border-strong,var(--border));
  border-radius:14px; padding:0 14px; height:48px; transition:border-color .18s, box-shadow .18s; }
.mx-search:focus-within{ border-color:var(--primary); box-shadow:var(--ring); }
.mx-search .ic{ color:var(--text-disabled,var(--text-muted)); transition:color .18s; }
.mx-search:focus-within .ic{ color:var(--primary); }
.mx-search input{ flex:1; border:0; outline:0; background:transparent; font-family:inherit; font-size:16px; color:var(--text); padding:0 12px; height:100%; }
.mx-search input::placeholder{ color:var(--text-disabled,var(--text-muted)); }

/* ── حالات (فراغ / خطأ / تحميل) ── */
.mx-state{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:44px 26px; }
.mx-state-ic{ width:74px; height:74px; border-radius:22px; display:grid; place-items:center; margin-bottom:16px; }
.mx-state-ic .ic{ width:38px; height:38px; }
.mx-state-ic.err{ background:var(--danger-bg); color:var(--danger-text,var(--danger)); }
.mx-state-ic.empty{ background:var(--bg-alt,var(--bg)); color:var(--text-muted); }
.mx-state h3{ margin:0 0 6px; font-size:18px; font-weight:800; color:var(--text); }
.mx-state p{ margin:0 0 18px; font-size:14px; color:var(--text-muted); max-width:360px; line-height:1.8; }
.mx-state .mx-state-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* ── دوّارة أنيقة + هياكل تحميل ── */
.mx-spin{ width:44px; height:44px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--primary); animation:mx-sp .8s linear infinite; }
@keyframes mx-sp{ to{ transform:rotate(360deg); } }
.mx-skl{ height:14px; border-radius:7px; background:linear-gradient(90deg,var(--bg-alt) 25%,var(--border-light) 37%,var(--bg-alt) 63%);
  background-size:400% 100%; animation:mx-sh 1.3s ease infinite; }
@keyframes mx-sh{ 0%{ background-position:100% 0; } 100%{ background-position:-100% 0; } }

/* ألوان خلفيّة ناعمة لأيقونات الإحصاء (تُستعمل inline أو عبر هذه الفئات) */
.mx-ci-warn{ background:var(--warning-bg); color:var(--warning-text,var(--warning)); }
.mx-ci-info{ background:var(--info-bg); color:var(--info-text,var(--info)); }
.mx-ci-ok{ background:var(--success-bg); color:var(--success-text,var(--success)); }
.mx-ci-danger{ background:var(--danger-bg); color:var(--danger-text,var(--danger)); }
.mx-ci-primary{ background:var(--primary-bg); color:var(--primary); }

@media (max-width:640px){
  .mx-title{ font-size:19px; }
  .mx-table thead{ display:none; }
  .mx-card-b{ padding:14px; }
}
/* ════════════════════════════════════════════════════════════════
   luxe.css — طبقة التوحيد النهائية «مونوكروم فاخر» v6
   تُحمَّل آخر ملف في الحزمة فتفرض الهوية على كل الصفحات دفعة واحدة.
   لا منطق هنا — مظهر وحركة فقط. المصدر: معاينة_الهوية_الموحدة.html
   ════════════════════════════════════════════════════════════════ */

/* ─── 1) الأساس ─── */
body{ -webkit-font-smoothing:antialiased; }
b, strong, th{ font-weight:700; }
::selection{ background:var(--primary); color:var(--on-primary); }

/* أرقام جدولية في كل الخلايا الرقمية الشائعة */
td, .num, input[type=number], .kpi b{ font-variant-numeric:tabular-nums; }
/* 🔢 الأرقام بخط Alexandria الهندسي — النص يبقى Cairo (زواج الخطوط) */
.num, td.num, .kpi b, input[type=number], #vf-amount, .amount, .money,
.stat-value, .kpi-value{ font-family:var(--font-num,'Alexandria','Cairo',sans-serif); }

/* ─── 2) دخول الصفحة + تتابع الأقسام ─── */
@keyframes luxePageIn{ from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none} }
@keyframes luxeFadeUp{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
/* تُضاف .route-anim من الموجّه عند "تغيير الصفحة" فقط — إعادة رسم المزامنة لا تتحرّك */
.app-main.route-anim > *{ animation:luxePageIn var(--d-enter,300ms) var(--e-luxe,cubic-bezier(.16,1,.3,1)) backwards; }
.app-main.route-anim > * > *:nth-child(2){ animation:luxeFadeUp .42s var(--e-luxe) .04s backwards; }
.app-main.route-anim > * > *:nth-child(3){ animation:luxeFadeUp .42s var(--e-luxe) .08s backwards; }
.app-main.route-anim > * > *:nth-child(4){ animation:luxeFadeUp .42s var(--e-luxe) .12s backwards; }

/* ─── 3) الأزرار ─── */
.btn{
  border-radius:var(--radius-sm) !important;
  font-weight:700;
  transition:transform var(--d-micro) var(--e-swift), background-color var(--d-micro),
             border-color var(--d-micro), box-shadow var(--d-micro), color var(--d-micro), opacity var(--d-micro);
}
.btn:active{ transform:translateY(1px); }
.btn-primary:hover{ background:var(--primary-hover); }
.btn-secondary:hover{ background:var(--bg-alt); border-color:var(--border-strong); box-shadow:none; }
.btn-danger{ background:var(--danger-bg); color:var(--danger-text); border-color:transparent; }
.btn-danger:hover{ background:var(--danger); color:#fff; }

/* ─── 4) البطاقات والأقسام ─── */
.card{
  border-radius:var(--radius-lg) !important;
  border:1px solid var(--border);
  box-shadow:none;
  transition:transform var(--d-std) var(--e-swift), box-shadow var(--d-std), border-color var(--d-std);
}
a .card:hover, .card[onclick]:hover, .card.clickable:hover, .hub-tile:hover{
  transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--border-strong);
}

/* ─── 5) الحقول — حلقة تركيز موحّدة ─── */
.input:focus, input:focus, select:focus, textarea:focus{
  outline:0 !important;
  border-color:var(--primary) !important;
  box-shadow:var(--ring) !important;
  transition:border-color var(--d-micro), box-shadow var(--d-micro);
}

/* ─── 6) الجداول ─── */
.table thead th{
  font-size:12px; font-weight:700; letter-spacing:.08em;
  color:var(--text-muted);
  background:transparent;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.table tbody td{ border-bottom:1px solid var(--border-light); }
.table tbody tr{ transition:background-color var(--d-micro); }
.table tbody tr:hover{ background:var(--surface-hover); }
.table tbody tr:last-child td{ border-bottom:0; }

/* ─── 7) المودال ─── */
@keyframes luxeMdlIn{ from{opacity:0; transform:translateY(14px) scale(.97)} to{opacity:1; transform:none} }
.modal{
  border-radius:var(--radius-xl,22px) !important;
  box-shadow:var(--shadow-modal) !important;
  border:1px solid var(--border);
  animation:luxeMdlIn var(--d-enter) var(--e-luxe);
}
.modal-backdrop{ backdrop-filter:blur(3px); background:rgba(10,10,10,.44); }
.modal-close{ transition:background-color var(--d-micro), color var(--d-micro); }
.modal-close:hover{ background:var(--bg-alt); color:var(--text); }

/* ─── 8) التوست — حبري موحّد، الحالة شريط لون جانبي ─── */
@keyframes luxeToastIn{ from{opacity:0; transform:translateY(-14px) scale(.95)} to{opacity:1; transform:none} }
.toast{
  border-radius:12px !important;
  box-shadow:var(--shadow-lg);
  font-weight:600;
  animation:luxeToastIn .3s var(--e-luxe);
  background:var(--primary); color:var(--on-primary);
  border-inline-start:4px solid var(--border-strong);
}
.toast-success{ border-inline-start-color:var(--success); }
.toast-error{   border-inline-start-color:var(--danger); }
.toast-warn{    border-inline-start-color:var(--warning); }
.toast-info{    border-inline-start-color:var(--info); }

/* ─── 9) الشريط العلوي ─── */
.topbar-icon-btn{ transition:background-color var(--d-micro), color var(--d-micro), transform var(--d-micro) var(--e-swift); }
.topbar-icon-btn:active{ transform:scale(.94); }

/* ─── 10) القائمة الجانبية — النشط بلاطة حبر (أسود/أبيض)، المرور --bg-alt ─── */
.sd-item{ border-radius:10px; transition:background-color var(--d-micro) var(--e-swift), color var(--d-micro); }
.sd-item.on{ background:var(--primary); color:var(--on-primary); font-weight:700; }
.sd-item.on .sd-ic, .sd-item.on .sd-lbl{ color:inherit; }
.sd-item.on .sd-badge{ background:var(--danger); color:#fff; }
/* شعار المتجر الحقيقي في رأس القائمة */
.sd-logo{ background:var(--surface); color:var(--text); border:1px solid var(--border); overflow:hidden; }
.sd-logo img{ width:82%; height:82%; object-fit:contain; mix-blend-mode:multiply; }
html[data-theme="dark"] .sd-logo img{ mix-blend-mode:normal; filter:invert(1); }
.sd-sec{ font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--text-muted);
         padding:16px 11px 5px !important; }
/* خيطٌ فاصلٌ فوقَ كلِّ مجموعةٍ إلّا الأولى */
.sd-sec:not(:first-of-type){ border-top:1px solid var(--border-light); margin-top:6px; }
.sd-nav{ gap:3px !important; }
.sd-item{ padding:9px 11px !important; font-size:13.5px; font-weight:650; }
.sd-item .sd-ic{ width:19px; height:19px; }

/* ─── 11) الأوسمة والحالات ─── */
.pill, .badge, .chip{ font-weight:700; border-radius:999px; }

/* ─── 12) أشرطة التقدّم — كشف حريري ─── */
.bar > span, .progress > span, [class*="tierbar"] > span{
  transition:width var(--d-slow) var(--e-luxe) !important;
}

/* ─── 13) الأرقام الحسّاسة — ستارة الخصوصية ─── */
.sens{ filter:blur(7px); transition:filter .28s var(--e-luxe); border-radius:4px; }
body.reveal .sens{ filter:blur(0); }

/* ─── 14) الهيكل العظمي (تحميل) ─── */
@keyframes luxeShimmer{ to{ transform:translateX(-100%);} }
.sk{ position:relative; overflow:hidden; background:var(--bg-alt); border-radius:8px; }
.sk::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform:translateX(100%); animation:luxeShimmer 1.3s infinite;
}
html[data-theme="dark"] .sk::after{ background:linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); }

/* ─── 15) خيط التحميل أعلى الشاشة (يُحرَّك من worker.js لاحقاً — جاهز) ─── */
#luxe-thread{ position:fixed; top:0; right:0; height:2px; width:0; background:var(--primary);
  z-index:9999; transition:width .35s var(--e-swift), opacity .3s; pointer-events:none; }

/* ─── 16) تمرير أنعم ─── */
*{ scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--text-disabled); border:2px solid transparent; background-clip:content-box; }


/* ════════════════════════════════════════════════════════════════
   الشريط العلوي v6 — شعار + مسار + بحث ⌘K + أدوات
   أبيض بحدّ سفلي (الهويّة 2) — كل الألوان من الرموز، لا أبيض ثابت ولا تدرّج
   ════════════════════════════════════════════════════════════════ */
.topbar.tb6{ display:flex; align-items:center; gap:10px; padding:0 14px; height:52px; }
.tb-logo{ display:flex; align-items:center; gap:9px; background:none; border:0; cursor:pointer; padding:4px 6px; border-radius:10px; font-family:inherit; color:var(--topbar-text); transition:background-color var(--d-micro); }
.tb-logo:hover{ background:var(--bg-alt); }
.tb-mark{ width:31px; height:31px; border-radius:9px; background:#fff; border:1px solid var(--border); display:grid; place-items:center; overflow:hidden; padding:2px; flex:none; }
.tb-mark img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.tb-name{ color:var(--topbar-text); font-size:14px; font-weight:800; white-space:nowrap; }
.tb-crumb{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-muted); white-space:nowrap; min-width:0; }
.tb-crumb b{ color:var(--text); font-weight:700; overflow:hidden; text-overflow:ellipsis; }
.tb-crumb-sep{ color:var(--text-faint); }
.tb-searchbtn{
  flex:1; max-width:430px; margin-inline:auto;
  display:flex; align-items:center; gap:9px;
  background:var(--surface); border:1px solid var(--border);
  color:var(--text-muted); border-radius:11px; height:36px; padding:0 12px;
  font-family:inherit; font-size:13px; cursor:pointer;
  transition:background-color var(--d-micro) var(--e-swift), border-color var(--d-micro), color var(--d-micro);
}
.tb-searchbtn:hover{ background:var(--bg-alt); border-color:var(--border-strong); color:var(--text); }
.tb-searchbtn kbd{ margin-inline-start:auto; font-family:var(--font-num); font-size:10.5px; color:var(--text-faint); border:1px solid var(--border); border-radius:6px; padding:1px 6px; }
.tb-acts{ display:flex; align-items:center; gap:5px; }
.topbar.tb6 .topbar-icon-btn{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:var(--text-muted); background:transparent; border:0; cursor:pointer; }
.topbar.tb6 .topbar-icon-btn:hover{ background:var(--bg-alt); color:var(--text); }
.topbar.tb6 .topbar-user{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:4px 6px 4px 10px; cursor:pointer; position:relative; transition:background-color var(--d-micro); color:var(--text); }
.topbar.tb6 .topbar-user:hover{ background:var(--bg-alt); }
.topbar.tb6 .topbar-user-avatar{ width:26px; height:26px; border-radius:8px; background:var(--primary); color:var(--on-primary); display:grid; place-items:center; font-weight:800; font-size:12px; }
.topbar.tb6 .topbar-user-name{ font-size:12.5px; font-weight:700; color:var(--text); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tb-spin svg{ animation:luxeRot 1s linear infinite; }
@keyframes luxeRot{ to{ transform:rotate(360deg); } }
@media (max-width:860px){ .tb-crumb, .tb-name, .tb-searchbtn-tx, .tb-searchbtn kbd{ display:none; } .tb-searchbtn{ flex:0 0 36px; width:36px; padding:0; justify-content:center; } }

/* ═══ ⌘K لوحة الأوامر ═══ */
.lx-cmd-ov{ position:fixed; inset:0; background:rgba(10,10,10,.4); backdrop-filter:blur(4px); z-index:900; display:flex; justify-content:center; padding:12vh 20px 0; opacity:0; transition:opacity var(--d-std); }
.lx-cmd-ov.open{ opacity:1; }
.lx-cmd{ background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-modal); width:min(560px,100%); height:fit-content; max-height:64vh; display:flex; flex-direction:column; overflow:hidden; transform:translateY(-12px) scale(.98); opacity:0; transition:transform var(--d-enter) var(--e-luxe), opacity var(--d-enter); }
.lx-cmd-ov.open .lx-cmd{ transform:none; opacity:1; }
.lx-cmd-in{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border-light); color:var(--text-muted); }
.lx-cmd-in input{ flex:1; border:0 !important; background:none; font-family:inherit; font-size:16px; color:var(--text); outline:0 !important; box-shadow:none !important; }
.lx-cmd-in kbd{ background:var(--bg-alt); border-radius:5px; padding:1px 7px; font-size:12px; font-family:inherit; }
.lx-cmd-list{ overflow-y:auto; padding:8px; }
.lx-cmd-sec{ font-size:12px; font-weight:700; letter-spacing:.15em; color:var(--text-muted); padding:10px 12px 4px; }
.lx-cmd-it{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px; cursor:pointer; font-size:13px; font-weight:600; color:var(--text); transition:background-color var(--d-micro); }
.lx-cmd-it:hover, .lx-cmd-it.sel{ background:var(--bg-alt); }
.lx-cmd-it small{ margin-inline-start:auto; color:var(--text-muted); font-size:12px; }
.lx-cmd-empty{ padding:24px; text-align:center; color:var(--text-muted); font-size:13px; }
.lx-cmd-foot{ border-top:1px solid var(--border-light); padding:8px 14px; display:flex; gap:14px; font-size:12px; color:var(--text-muted); }
.lx-cmd-foot kbd{ background:var(--bg-alt); border-radius:4px; padding:0 6px; font-family:inherit; }

/* ════════════════════════════════════════════════════════════════
   🪗 القائمة الجانبية المنطوية — أيقونات فقط (سطح المكتب)
   ════════════════════════════════════════════════════════════════ */
button#sd-min{ display:grid; place-items:center; width:28px; height:28px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text-muted); cursor:pointer; margin-inline-start:auto; padding:0; transition:border-color var(--d-micro) var(--e-swift), color var(--d-micro), background-color var(--d-micro); }
button#sd-min:hover{ border-color:var(--primary); color:var(--text); }
button#sd-min svg{ transition:transform var(--d-std) var(--e-luxe); }
body.sd-rail button#sd-min svg{ transform:rotate(180deg); }
@media (min-width:901px){
  body.sd-rail .app-side{ width:72px; padding:0 8px 10px; }
  body.sd-rail .sd-brand{ margin:0 -8px 8px; padding:0 10px; justify-content:center; gap:0; }
  body.sd-rail .sd-brand-tx, body.sd-rail .sd-lbl, body.sd-rail .sd-sec, body.sd-rail .sd-user-tx{ display:none; }
  body.sd-rail .sd-logo{ display:none; }
  body.sd-rail button#sd-min{ margin-inline-start:0; }
  body.sd-rail .sd-item{ position:relative; justify-content:center; padding:10px 0; }
  body.sd-rail .sd-badge{ position:absolute; top:4px; inset-inline-end:6px; width:8px; height:8px; padding:0; border-radius:99px; font-size:0; }
  body.sd-rail .sd-user{ justify-content:center; padding:8px 0; }
}
@media (max-width:900px){ button#sd-min{ display:none; } }

/* ════════════════════════════════════════════════════════════════
   📝 نافذة «قيد جديد» — تحديث المظهر (المنطق كما هو تماماً)
   ════════════════════════════════════════════════════════════════ */
.vf-type-btn{
  border-radius:10px !important; font-weight:800 !important;
  border:1.5px solid var(--border-strong) !important; background:var(--surface) !important;
  transition:background-color var(--d-micro) var(--e-swift), border-color var(--d-micro), color var(--d-micro), transform var(--d-micro) !important;
}
.vf-type-btn.active{
  background:var(--primary) !important; color:var(--on-primary) !important; border-color:var(--primary) !important;
}
.vf-src-card{
  border-radius:12px !important; border:1.5px solid var(--border) !important;
  transition:background-color var(--d-micro) var(--e-swift), border-color var(--d-micro), color var(--d-micro), transform var(--d-micro), box-shadow var(--d-micro) !important; font-weight:700 !important;
}
.vf-src-card:hover{ border-color:var(--border-strong) !important; transform:translateY(-1px); }
.vf-src-card.active, .vf-src-card.selected{
  background:var(--primary) !important; border-color:var(--primary) !important;
  color:var(--on-primary) !important;
}
.vf-src-card.active .icon, .vf-src-card.active span{ color:inherit !important; }
#vf-amount{
  font-size:22px !important; font-weight:800 !important; text-align:center !important;
  height:52px !important; border-radius:12px !important; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
/* ═══ سجِّل حركة — صندوقُ المبلغ ═══
   صارَ الحقلُ بلا إطارٍ داخلَ صندوقٍ مؤطَّرٍ بلونِ الاتّجاه (.vf-amt)،
   والقاعدةُ أعلاه تفرضُ عليه ٢٢ بكسل وتوسيطاً وإطاراً وارتفاعاً ثابتاً
   بـ!important — فَكانت تُبطِلُ الصندوقَ الجديدَ كلَّه ويبقى الرقمُ صغيراً
   في الوسط. يُستثنى هنا صراحةً، والتخصيصُ أعلى فَيفوز.
   (وتبقى القاعدةُ الأصليّةُ لحقلِ المبلغِ في القيدِ الشخصيّ — لم يتبدّل.) */
.vf-amt #vf-amount{
  font-size:30px !important; font-weight:900 !important; text-align:start !important;
  height:auto !important; min-height:44px !important; border:0 !important;
  border-radius:0 !important; background:none !important; padding:0 !important;
  box-shadow:none !important; letter-spacing:-.02em;
}
.vf-amt #vf-amount:focus{ box-shadow:none !important; border:0 !important; }
/* وكلُّ حقلِ مبلغٍ داخلَ صندوقٍ — لا #vf-amount وحدَه (الإجمالي · المدفوع الآن) */
.vf-amt input{
  font-size:30px; font-weight:900; text-align:start; border:0; background:none;
  padding:0; min-height:44px; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  direction:ltr; width:100%; min-width:0; outline:0; color:var(--text);
}
.vf-amt.vf-amt-sm input, .vf-amt.vf-amt-sm #vf-amount{ font-size:24px !important; min-height:40px !important; }
@media (max-width:560px){ .vf-amt #vf-amount{ font-size:34px !important; } }

/* ═══════════════════════════════════════════════════════════════
   قطعٌ مشتركةٌ بينَ الصفحات — تُكتَبُ مرّةً وتُستعمَلُ في كلِّ مكان
   ───────────────────────────────────────────────────────────────
   الشرائحُ وُلِدَت في «سجِّل حركة» داخلَ نمطٍ محلّيٍّ في الشاشةِ نفسِها،
   فَلمّا احتاجتْها «ورديّاتُ الكاشير» لم تجدْها. وهذا بعينِهِ ما يجعلُ
   الصفحاتِ تفترقُ: قطعةٌ تُكتَبُ حيثُ استُعمِلَت أوّلَ مرّة. صارتْ هنا،
   في آخرِ ملفٍّ من الحزمة، فَتصلُ كلَّ صفحةٍ بلا نسخ.
   ═══════════════════════════════════════════════════════════════ */
.vf-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.vf-chip{
  border:1px solid var(--border); background:var(--surface);
  border-radius:12px; padding:0 14px; min-height:46px;
  font-family:inherit; font-size:12.5px; font-weight:700;
  color:var(--text-muted); cursor:pointer; display:inline-flex;
  align-items:center; gap:6px; transition:background-color var(--d-micro) var(--e-swift), border-color var(--d-micro), color var(--d-micro);
}
.vf-chip:hover{ background:var(--bg-alt); }
.vf-chip.on{ background:var(--primary); color:var(--on-primary); border-color:var(--primary); }

/* نصُّ زرِّ الإجراءِ في الجدول: يظهرُ على الواسعِ ويختفي على الضيّقِ —
   فَيُعرَفُ زرُّ الطباعةِ بينَ أربعِ أيقوناتٍ متشابهة، ولا يتضخّمُ الصفُّ في الجوال. */
.btn-sm .btn-tx{ margin-inline-start:5px; font-size:12px; font-weight:700; }
@media (max-width:900px){ .btn-sm .btn-tx{ display:none; } }

/* لا كبسولات: الأركانُ مستديرةٌ باعتدالٍ كبطاقاتِ المصدرِ وصندوقِ المبلغ،
   فَتبقى الأشكالُ عائلةً واحدةً بدلَ حبّاتٍ بيضاويّةٍ تختلفُ عن جيرانِها. */
.vf-bank-pill, .vf-method-pill{ border-radius:12px !important; font-weight:700 !important; transition:background-color var(--d-micro) var(--e-swift), border-color var(--d-micro), color var(--d-micro) !important; }
.modal .field-label{ font-size:12px; font-weight:700; color:var(--text-muted); }


/* ════════════════════════════════════════════════════════════════
   🚪 بوابة الدخول — صارت بهوية 2 داخل src/pages/Login.js بالكامل
   (أُزيلت التجاوزات القديمة: ظلال البطاقة وخلفية الشعار البيضاء والحركات المتدرّجة)
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   🧷 توحيد أعمق — قواعد تفرض النسق على بقايا الصفحات القديمة
   ════════════════════════════════════════════════════════════════ */
/* رأس صفحة واحد في النظام كله */
.page-title{ font-size:21px !important; font-weight:800 !important; letter-spacing:-.01em; line-height:1.35; }
.page-subtitle{ font-size:12px !important; color:var(--text-muted) !important; font-weight:500; margin-top:3px; }
.page-header{ margin-bottom:18px; gap:14px; }

/* الزر الأخضر القديم → زر حبر موحّد (الفعل الرئيسي أسود دائماً) */
.btn-success{ background:var(--primary) !important; color:var(--on-primary) !important; border-color:var(--primary) !important; }
.btn-success:hover{ background:var(--primary-hover) !important; }

/* عناصر النماذج الأصغر — نفس الهوية في كل صفحة */
input[type="checkbox"], input[type="radio"]{ accent-color:var(--primary); }
.select, select.select, select.input{ border-radius:10px; }
summary{ transition:color var(--d-micro); }
summary:hover{ color:var(--text); }

/* بلاطات المراكز: سهم يظهر بانزلاق عند المرور + رفع */
.hub-tile{ transition:transform var(--d-std) var(--e-swift), box-shadow var(--d-std), border-color var(--d-std) !important; }
.hub-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.hub-tile .hub-arrow{ opacity:0; transform:translateX(6px); transition:opacity var(--d-std) var(--e-luxe), transform var(--d-std) var(--e-luxe); }
.hub-tile:hover .hub-arrow{ opacity:1; transform:none; }
.hub-ic{ border-radius:12px !important; }

/* بطاقات الإحصاء المتنوعة عبر الصفحات — أرقام كبيرة موحّدة */
.stat b, .kpi b, .stat-value, [class*="-total"] strong{ letter-spacing:-.02em; }

/* شارة العدّاد في القائمة الجانبية */
.sd-badge{ background:var(--danger) !important; color:#fff !important; font-weight:800; }

/* فواصل details/hr موحّدة */
hr{ border:0; border-top:1px solid var(--border-light); }


/* ════════════════════════════════════════════════════════════════
   🧱 توحيد الهيكل — عائلة mx-* (الطلبات/الورديات/التقارير القديمة)
   تُطابق الهيكل الموحّد بصرياً: نفس الرأس، نفس الرقائق، نفس البطاقات
   ════════════════════════════════════════════════════════════════ */
.mx-title{ font-size:21px !important; font-weight:800 !important; letter-spacing:-.01em; display:flex; align-items:center; gap:8px; }
.mx-title .icon{ color:var(--text) !important; font-size:22px; }
.mx-sub{ font-size:12px !important; color:var(--text-muted) !important; font-weight:500; margin-top:3px; }
.mx-head{ margin-bottom:18px; }
.mx-card{ border-radius:var(--radius-lg) !important; border:1px solid var(--border) !important; box-shadow:var(--shadow-sm) !important; background:var(--surface) !important; }
.mx-chip{
  border-radius:10px !important; font-weight:700 !important; font-size:12.3px !important;
  border:1px solid var(--border-strong) !important; background:var(--surface) !important; color:var(--text-muted) !important;
  transition:background-color var(--d-micro) var(--e-swift), border-color var(--d-micro), color var(--d-micro) !important;
}
.mx-chip:hover{ border-color:var(--primary) !important; color:var(--text) !important; }
.mx-chip.on{ background:var(--primary) !important; color:var(--on-primary) !important; border-color:var(--primary) !important; }
.mx-chip .icon, .mx-chip svg{ color:inherit !important; }

/* رقائق/فلاتر متفرقة بأسماء أخرى — نفس المظهر */
.filter-chip, .chip[data-filter]{
  border-radius:10px !important; font-weight:700 !important;
  border:1px solid var(--border-strong) !important; background:var(--surface) !important; color:var(--text-muted) !important;
}
.filter-chip.active, .filter-chip.on, .chip[data-filter].on{
  background:var(--primary) !important; color:var(--on-primary) !important; border-color:var(--primary) !important;
}


/* ════════════════════════════════════════════════════════════════
   🌙 حارس التباين — الوضع الداكن: كل «بلاطة حبر» ينقلب نصّها داكناً
   (اكتشفها فاحص التباين الآلي — يعمل قبل كل تسليم)
   ════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .pw-chip.on,
html[data-theme="dark"] .pw-num,
html[data-theme="dark"] .vf-bank-pill.active,
html[data-theme="dark"] .vf-bank-pill.active .icon,
html[data-theme="dark"] .hd-appr-total{ color:var(--on-primary) !important; }
/* المعطّل: تباين أوضح قليلاً في الفاتح */
.input:disabled, input:disabled{ color:var(--text-muted) !important; }


/* ════════════════════════════════════════════════════════════════
   📱 شريط التنقّل السفلي — الجوال (الكاشير يعيش على الهاتف)
   ════════════════════════════════════════════════════════════════ */
.lx-bnav{ display:none; }
/* ٩٠٠ لا ٦٤٠: القائمةُ الجانبيّةُ تصيرُ درجاً مخفيّاً عندَ ٩٠٠ (layouts.css)،
   فَلو بقيَ الشريطُ عندَ ٦٤٠ لَبقيَت نافذةُ ٦٤١–٩٠٠ — وهي مقاسُ الآيباد
   قائماً (٧٦٨) — بلا تنقّلٍ ظاهرٍ البتّة: لا شريطَ أسفلَ ولا قائمةَ جانباً،
   إلّا زرُّ الهامبرغر في كلِّ مرّة. */
@media (max-width:900px){
  .lx-bnav{
    display:flex; position:fixed; bottom:0; inset-inline:0; z-index:40;
    background:var(--surface); border-top:1px solid var(--border);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .lx-bnav-it{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:0; padding:6px 2px; border-radius:11px;
    color:var(--text-muted); font-family:inherit; cursor:pointer;
    transition:color var(--d-micro), background var(--d-micro);
  }
  .lx-bnav-it small{ font-size:11px; font-weight:700; letter-spacing:0; }
  /* الشارةُ تركبُ الأيقونةَ لا الخانة — فَلا تُزحزِحُ التسميةَ ولا تُغيّرُ
     ارتفاعَ الشريطِ حينَ تظهرُ أو تختفي. */
  .lx-bnav-ic{ position:relative; display:grid; place-items:center; }
  .lx-bnav-b{
    position:absolute; top:-5px; inset-inline-end:-8px;
    min-width:16px; height:16px; padding:0 4px; border-radius:9px;
    background:var(--danger); color:#fff; font-size:11px; font-weight:800;
    font-style:normal; display:grid; place-items:center; line-height:1;
    box-shadow:0 0 0 2px var(--surface); font-variant-numeric:tabular-nums;
  }
  .lx-bnav-it .sd-ic{ width:21px; height:21px; }
  .lx-bnav-it.on{ color:var(--text); background:var(--bg-alt); }
  .lx-bnav-it.on .sd-ic{ transform:translateY(-1px); }
  .lx-bnav-it:active{ transform:scale(.94); }
  /* أفسح للمحتوى فوق الشريط */
  .app-main{ padding-bottom:calc(82px + env(safe-area-inset-bottom, 0px)) !important; }

  /* ── الزرُّ الأوسط: «سجِّل حركة» ──
     مرفوعٌ ٢٢ بكسل فوقَ الشريط، وحولَهُ حلقةٌ بلونِ السطحِ تفصلُهُ عمّا
     يمرُّ تحتَه أثناءَ التمرير. الأربعةُ حولَهُ تنقلُك، وهو وحدَهُ يفعل. */
  .lx-bnav{ align-items:flex-end; overflow:visible; }
  .lx-bnav-fab{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
    background:none; border:0; padding:0 2px; font-family:inherit; cursor:pointer;
    position:relative; margin-top:-22px; -webkit-tap-highlight-color:transparent;
  }
  .lx-fab-c{
    width:54px; height:54px; border-radius:18px;
    background:var(--primary); color:var(--on-primary); display:grid; place-items:center;
    box-shadow:var(--shadow-md), 0 0 0 5px var(--surface);
    transition:transform var(--d-micro) var(--e-swift);
  }
  .lx-fab-c .sd-ic{ width:26px; height:26px; }
  .lx-bnav-fab small{ font-size:11px; font-weight:800; color:var(--text); letter-spacing:0; }
  .lx-bnav-fab:active .lx-fab-c{ transform:scale(.92); }

  /* على الجوالِ لا حاجةَ لِزرٍّ ثانٍ بنفسِ الفعلِ في رأسِ الصفحة */
  .hd-quick-rec{ display:none !important; }
}

/* ════════════════════════════════════════════════════════════════
   ➕ «سجِّل حركة» في رأسِ القائمةِ الجانبيّة — سطحُ المكتبِ لا شريطَ له
   ════════════════════════════════════════════════════════════════ */
.sd-rec{
  display:flex; align-items:center; gap:9px; justify-content:flex-start;
  width:calc(100% - 12px); margin:6px 6px 10px; padding:11px 12px;
  background:var(--primary); color:var(--on-primary); border:0; border-radius:11px;
  font-family:inherit; font-size:13px; font-weight:800; cursor:pointer;
  transition:transform var(--d-micro) var(--e-swift), background-color var(--d-micro);
}
.sd-rec .sd-ic{ width:18px; height:18px; flex:0 0 auto; }
.sd-rec:hover{ background:var(--primary-hover); }
.sd-rec:active{ transform:scale(.97); }
body.sd-rail .sd-rec{ justify-content:center; padding:11px 0; }
body.sd-rail .sd-rec .sd-lbl{ display:none; }

/* «رتِّبْ شريطي السفلي» — لا معنى له حيثُ لا شريطَ سفليّ */
.sd-org{ margin-top:10px; opacity:.85; }
@media (min-width:901px){ .sd-org{ display:none !important; } }

/* ════════════════════════════════════════════════════════════════
   🎛️ لوحةُ ترتيبِ الشريطِ السفلي
   ════════════════════════════════════════════════════════════════ */
.bo-hint{ margin:0 0 12px; font-size:13px; color:var(--text-muted); line-height:1.75; }
.bo-hint b{ color:var(--text); }
.bo-row{
  display:flex; align-items:center; gap:10px; padding:9px 10px;
  border:1px solid var(--border); border-radius:11px; margin-bottom:7px;
  background:var(--surface);
}
.bo-row.in{ border-color:var(--border-strong); background:var(--primary-bg); }
.bo-ic{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
        background:var(--bg-alt); color:var(--text-muted); flex:0 0 auto; }
.bo-row.in .bo-ic{ background:var(--surface); color:var(--text); }
.bo-ic .sd-ic{ width:18px; height:18px; }
.bo-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.bo-tx b{ font-size:13px; font-weight:800; }
.bo-tx small{ font-size:11px; color:var(--text-muted); }
.bo-b{
  width:34px; height:34px; border-radius:9px; flex:0 0 auto;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  font-size:15px; font-weight:800; cursor:pointer; font-family:inherit;
}
.bo-b:active{ transform:scale(.94); }
.bo-pin{
  min-width:62px; height:34px; padding:0 11px; border-radius:9px; flex:0 0 auto;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text-muted);
  font-size:12px; font-weight:800; cursor:pointer; font-family:inherit;
}
.bo-pin.on{ background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
.bo-pin:active{ transform:scale(.96); }

/* ════════════════════════════════════════════════════════════════
   📌 رؤوس الجداول تثبت أثناء التمرير (داخل أي حاوية متمرّرة)
   ════════════════════════════════════════════════════════════════ */
.table thead th{ position:sticky; top:0; background:var(--surface); z-index:2; }

/* ════════════════════════════════════════════════════════════════
   🖨️ الطباعة — التقرير يخرج كوثيقة دار نشر: المحتوى فقط، بلا واجهة
   ════════════════════════════════════════════════════════════════ */
@media print{
  .topbar, .app-side, .app-scrim, .lx-bnav, #luxe-thread, #luxe-saver, #luxe-splash,
  .topbar-user-menu, .lx-cmd-ov, .page-actions, .ph-acts, .mx-head-actions,
  .btn, button, .toast, #toast-host{ display:none !important; }
  .app-frame{ display:block !important; }
  .app-main{ padding:0 !important; overflow:visible !important; }
  body{ background:#fff !important; color:#111 !important; }
  .card, .mx-card, .hd-sec, .sec{ box-shadow:none !important; border:1px solid #ddd !important; break-inside:avoid; }
  .sens{ filter:none !important; }         /* المطبوع مكشوف — الطباعة فعل مقصود */
  .table thead th{ position:static; color:#555 !important; }
  a{ text-decoration:none; color:inherit; }
}


/* ════════════════════════════════════════════════════════════════
   🔨 الهدم الشامل — عائلة mx القديمة تلبس الهوية كاملة
   (أزرار، أوسمة، بلاطات إحصاء، أفاتارات، مبالغ) — يسري على
   تقرير المبيعات والطلبات وكل صفحة بقيت على النسق القديم
   ════════════════════════════════════════════════════════════════ */
.mx-btn{
  border-radius:10px !important; font-weight:700 !important; font-family:inherit;
  border:1px solid var(--border-strong) !important; background:var(--surface) !important; color:var(--text) !important;
  transition:transform var(--d-micro) var(--e-swift), border-color var(--d-micro), background var(--d-micro), box-shadow var(--d-micro) !important;
}
.mx-btn:hover{ border-color:var(--primary) !important; box-shadow:var(--shadow-sm); }
.mx-btn:active{ transform:scale(.97); }
.mx-btn-primary{ background:var(--primary) !important; color:var(--on-primary) !important; border-color:var(--primary) !important; }
.mx-btn-primary:hover{ background:var(--primary-hover) !important; }
.mx-btn-danger{ background:var(--danger-bg) !important; color:var(--danger-text) !important; border-color:transparent !important; }
.mx-btn-danger:hover{ background:var(--danger) !important; color:#fff !important; }

.mx-pill{ border-radius:999px !important; font-weight:700 !important; }
.mx-pill-ok{ background:var(--success-bg) !important; color:var(--success-text) !important; }
.mx-pill-warn{ background:var(--warning-bg) !important; color:var(--warning-text) !important; }
.mx-pill-info{ background:var(--info-bg) !important; color:var(--info-text) !important; }
.mx-pill-danger, .mx-pill-err{ background:var(--danger-bg) !important; color:var(--danger-text) !important; }

.mx-stat{ background:var(--surface) !important; border:1px solid var(--border) !important;
  border-radius:var(--radius-lg) !important; box-shadow:var(--shadow-sm) !important; }
.mx-stat-val{ font-family:var(--font-num,'Alexandria','Cairo',sans-serif) !important;
  font-variant-numeric:tabular-nums; font-weight:800 !important; letter-spacing:-.02em; }
.mx-stat-ci{ border-radius:10px !important; background:var(--bg-alt) !important; color:var(--text) !important; }
.mx-ci-info, .mx-ci-warn, .mx-ci-ok, .mx-ci-primary{ background:var(--bg-alt) !important; color:var(--text) !important; }

.mx-av{ background:var(--primary) !important; color:var(--on-primary) !important; border-radius:8px !important; font-weight:800; }
.mx-amt{ font-family:var(--font-num,'Alexandria','Cairo',sans-serif) !important; font-variant-numeric:tabular-nums; font-weight:800; }
.mx-table thead th{ font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--text-muted); border-bottom:1px solid var(--border); }
.mx-table tbody td{ border-bottom:1px solid var(--border-light); }
.mx-table tbody tr:hover{ background:var(--surface-hover); }
.mx-spin{ border-color:var(--border) !important; border-top-color:var(--primary) !important; }


/* ════════════════════════════════════════════════════════════════
   🖥️ عند طيّ القائمة: المحتوى يتمدد ويملأ الشاشة كاملة
   (حاويات الصفحات المعروفة + أي غلاف مباشر بعرض أقصى مضمّن)
   ════════════════════════════════════════════════════════════════ */
@media (min-width:641px){
  body.sd-rail .hd,
  body.sd-rail .usr,
  body.sd-rail .stf,
  body.sd-rail .rw,
  body.sd-rail .tof,
  body.sd-rail .atd,
  body.sd-rail .pf{ max-width:none !important; }
  body.sd-rail .app-main > [style*="max-width"],
  body.sd-rail .app-main > * > [style*="max-width:1"]{ max-width:none !important; }
}


/* ════════════════════════════════════════════════════════════════
   🏛️ الوصفة القانونية الواحدة — بلاطات الأرقام ورؤوس الأقسام
   كل عائلات البلاطات في النظام (hd-kpi للرئيسية، pf-bx للملف،
   mx-stat للتقارير، kpi العامة) تُصهر في قالب واحد لا ثاني له.
   ════════════════════════════════════════════════════════════════ */
/* البلاطة: بطاقة بيضاء، حدّ شعرة، زاوية 14، ظل ورقي، رفع خفيف */
.hd-kpi, .pf-bx, .kpi, .mx-stat{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:14px !important;
  padding:13px 15px !important;
  box-shadow:var(--shadow-sm) !important;
  transition:transform var(--d-std) var(--e-swift), box-shadow var(--d-std), border-color var(--d-std) !important;
}
.hd-kpi:hover, .pf-bx:hover, .kpi:hover, .mx-stat:hover{
  border-color:var(--border-strong) !important;
}
/* التسمية: 11 خافتة بتباعد أحرف (--text-muted لا --text-disabled: تباين ≥4.5 على الأبيض) */
.hd-kpi-t, .pf-bx small, .kpi small, .mx-stat-lbl{
  font-size:11px !important; font-weight:700 !important;
  color:var(--text-muted) !important; letter-spacing:.05em;
}
/* القيمة: 21 ثقيلة بخط الأرقام الهندسي */
.hd-kpi-v, .pf-bx b, .kpi b, .mx-stat-val{
  font-size:21px !important; font-weight:800 !important;
  font-family:var(--font-num,'Alexandria','Cairo',sans-serif) !important;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em !important;
  margin-top:4px;
}
/* القيم داخل شبكات الملف الشخصي الصغيرة تكبر لنفس المقاس */
.pf-grid .pf-bx b{ font-size:19px !important; }

/* رأس القسم: 14/800 في كل مكان — hd-sec-t وعناوين البطاقات */
.hd-sec-t, .card > h3, .card > h4, .mx-card > h3, .mx-card > h4,
.card h3:first-child, .mx-card h3:first-child{
  font-size:14px !important; font-weight:800 !important; letter-spacing:0;
}
/* أيقونة رأس القسم: بلاطة رمادية هادئة موحّدة (لا خلفيات ملوّنة) */
.hd-sec-ic{ background:var(--bg-alt) !important; color:var(--text) !important; border-radius:10px !important; }
/* جسم القسم الموحّد */
.hd-sec{ border-radius:var(--radius-lg) !important; box-shadow:none !important; }


/* رأس القائمة النحيف — زر الطي وحده (العلامة في الشريط الأسود فقط) */
.sd-brand-slim{ justify-content:flex-end; gap:0; }
.sd-brand-slim #sd-min{ margin-inline-start:0; }
body.sd-rail .sd-brand-slim{ justify-content:center; }


/* ════════════════════════════════════════════════════════════════
   🪟 طبقة النوافذ القانونية — كل نافذة في النظام نسخة واحدة
   (التحويلات، منتج جديد، التصنيع، صور المنتجات، وكل modal آخر)
   ════════════════════════════════════════════════════════════════ */
/* التسميات: 11.5 رمادية موحّدة */
.modal-body .field-label, .modal-body label.field-label{
  font-size:12px !important; font-weight:700 !important; color:var(--text-muted) !important;
}
/* الحقول: ارتفاع وزاوية موحّدان */
.modal-body .input, .modal-body .select, .modal-body select, .modal-body input[type="text"],
.modal-body input[type="number"], .modal-body input[type="date"], .modal-body input[type="tel"]{
  border-radius:10px !important; min-height:40px;
}
.modal-body textarea{ border-radius:10px !important; }
/* عناوين الأقسام داخل النوافذ: 14/800 دائماً */
.modal-body h3, .modal-body h4{
  font-size:14px !important; font-weight:800 !important; color:var(--text) !important;
}
/* قوائم الاقتراحات (موردون/منتجات/جهات): بطاقة واحدة بظل موحّد */
.modal-body [id$="-suggestions"], .modal-body [class*="suggestions"]{
  border-radius:12px !important; box-shadow:var(--shadow-md) !important; border:1px solid var(--border) !important;
}
/* الجداول داخل النوافذ: رؤوس خافتة وخطوط شعرية */
.modal-body table thead th{
  font-size:12px !important; font-weight:700 !important; letter-spacing:.08em;
  color:var(--text-muted) !important; background:var(--surface) !important;
  border-bottom:1px solid var(--border) !important;
}
.modal-body table tbody td{ border-bottom:1px solid var(--border-light) !important; }
/* شبكات الإعدادات داخل النوافذ: فراغ موحّد */
.modal-body .settings-grid{ gap:14px 18px !important; }
/* تذييل النافذة: الزر الرئيسي أولاً بمساحة مريحة */
.modal-footer{ gap:8px !important; padding-top:14px !important; }
/* رسائل الإجمالي/الملخّص القديمة العائمة تصير هادئة */
.modal-body [id$="-total"]{ font-family:var(--font-num,'Alexandria','Cairo',sans-serif); font-variant-numeric:tabular-nums; }


/* 📊 التقارير: قيم البلاطات أحادية دائماً — لا قوس قزح في صف الإحصاءات */
.mx-stat-val, .mx-stat-val *{ color:var(--text) !important; }
.mx-stat-lbl .icon, .mx-stat-ci .icon{ color:var(--text) !important; }
[class*="exa"] .kpi b, .exa-kpi b, .exa-kpi .v{ color:var(--text) !important; }

/* ════════════════════════════════════════════════════════════════
   🔔 جرس الإشعارات — الشريط العلوي (نقل تنبيهات اللوحة إلى الجرس)
   ════════════════════════════════════════════════════════════════ */
.tb-bell{ position:relative; }
.tb-bell-badge{
  position:absolute; top:1px; inset-inline-start:1px;
  min-width:15px; height:15px; padding:0 4px; border-radius:99px;
  background:var(--danger); color:#fff; font-size:11px; font-weight:800;
  display:grid; place-items:center; line-height:1;
  border:2px solid var(--topbar-bg); pointer-events:none;
}
.tb-ntf-panel{
  position:fixed;
  width:min(360px, calc(100vw - 24px)); max-height:min(70vh, 520px); overflow-y:auto;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow-lg);
  z-index:70; text-align:start; padding:6px;
  opacity:0; transform:translateY(-6px) scale(.98);
  transition:opacity var(--d-micro, .16s) var(--e-swift, ease), transform var(--d-micro, .16s) var(--e-swift, ease);
}
.tb-ntf-panel.open{ opacity:1; transform:none; }
.tb-ntf-head{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:800; padding:10px 12px 8px;
  border-bottom:1px solid var(--border-light);
}
.tb-ntf-total{
  background:var(--primary); color:var(--on-primary);
  border-radius:99px; min-width:20px; height:20px; padding:0 7px;
  display:grid; place-items:center; font-size:12px; font-weight:800;
}
.tb-ntf-sec{
  font-size:12px; font-weight:800; color:var(--text-muted);
  padding:10px 12px 4px;
}
.tb-ntf-panel button{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.tb-ntf-it{
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:0; border-radius:10px;
  padding:10px 12px; cursor:pointer; text-align:start;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--text);
  transition:background-color var(--d-micro, .16s) ease;
}
.tb-ntf-it:hover{ background:var(--bg-alt); }
.tb-ntf-it .icon{ font-size:17px; color:var(--text-muted); flex:none; }
.tb-ntf-danger .icon{ color:var(--danger-text); }
.tb-ntf-lbl{ flex:1; line-height:1.5; }
.tb-ntf-cnt{
  background:var(--primary); color:var(--on-primary);
  border-radius:99px; min-width:22px; height:20px; padding:0 7px;
  display:grid; place-items:center; font-size:12px; font-weight:800; flex:none;
}
.tb-ntf-danger .tb-ntf-cnt{ background:var(--danger); color:#fff; }
.tb-ntf-dev{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--border); border-radius:12px;
  padding:9px 12px; margin:4px 6px;
}
.tb-ntf-dev-tx{ flex:1; min-width:0; }
.tb-ntf-dev-tx b{ display:block; font-size:13px; }
.tb-ntf-dev-tx small{ display:block; font-size:12px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tb-ntf-dev-acts{ display:flex; gap:6px; flex:none; }
.tb-ntf-ok, .tb-ntf-no{
  width:30px; height:30px; border-radius:9px; border:1px solid var(--border);
  display:grid; place-items:center; cursor:pointer;
  background:var(--surface); color:var(--text);
  transition:background-color var(--d-micro, .16s) ease, border-color var(--d-micro, .16s) ease, color var(--d-micro, .16s) ease;
}
.tb-ntf-ok:hover{ background:var(--success-bg); color:var(--success-text); border-color:var(--success-text); }
.tb-ntf-no:hover{ background:var(--danger-bg); color:var(--danger-text); border-color:var(--danger-text); }
.tb-ntf-empty{
  text-align:center; padding:26px 14px; font-size:13px; color:var(--text-muted);
}
.tb-ntf-foot{
  display:block; width:calc(100% - 12px); margin:6px;
  background:var(--bg-alt); border:0; border-radius:10px;
  padding:9px 12px; cursor:pointer; text-align:center;
  font-family:inherit; font-size:12px; font-weight:700; color:var(--text);
}
.tb-ntf-foot:hover{ background:var(--border-light); }
@media (max-width:640px){
  .tb-ntf-panel{ position:fixed; top:calc(var(--tb-h, 56px) + 6px); inset-inline:12px; width:auto; }
}

/* ════════════════════════════════════════════════════════════════
   📎 لقطة الإثبات + 🧾 معاينة القيد الحيّة — نافذة قيد جديد
   ════════════════════════════════════════════════════════════════ */
.lx-proof{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lx-proof-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border:2px dashed var(--border); border-radius:14px;
  padding:16px 10px; cursor:pointer; text-align:center;
  background:var(--surface); color:var(--text);
  transition:background-color var(--d-micro, .16s) ease, border-color var(--d-micro, .16s) ease, transform var(--d-micro, .16s) ease;
}
.lx-proof-btn:hover{ border-color:var(--primary); background:var(--bg-alt); transform:translateY(-1px); }
.lx-proof-btn .icon{ font-size:26px; color:var(--text-muted); }
.lx-proof-btn:hover .icon{ color:var(--text); }
.lx-proof-btn b{ font-size:13px; font-weight:800; }
.lx-proof-btn small{ font-size:12px; color:var(--text-muted); }
.lx-proof-done{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border:2px solid var(--success-text); border-radius:14px;
  padding:10px 14px; background:var(--success-bg);
}
.lx-proof-done img{ width:72px; height:72px; object-fit:cover; border-radius:10px; border:1px solid var(--border); }
.lx-proof-done-tx{ flex:1; min-width:120px; }
.lx-proof-done-tx b{ display:block; font-size:13px; color:var(--success-text); }
.lx-proof-done-tx small{ font-size:12px; color:var(--text-muted); }

/* معاينة القيد: لوحة لاصقة أسفل النافذة — ظاهرة دائماً أثناء التعبئة */
.lx-ep{
  position:sticky; bottom:-1px; z-index:6;
  background:var(--surface);
  border:2px solid var(--primary); border-radius:16px;
  padding:12px 16px 13px; margin-top:14px;
  box-shadow:var(--shadow-lg);
}
.lx-ep-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.lx-ep-ic{
  width:26px; height:26px; border-radius:8px; flex:none;
  background:var(--primary); color:var(--on-primary);
  display:grid; place-items:center;
}
.lx-ep-ic .icon{ font-size:15px; }
.lx-ep-head b{ font-size:13px; font-weight:800; }
.lx-ep-live{
  font-size:11px; font-weight:800; color:var(--success-text);
  background:var(--success-bg); border-radius:99px; padding:2px 8px;
}
.lx-ep-head small{ margin-inline-start:auto; font-size:12px; color:var(--text-muted); font-weight:600; }
@media (max-width:640px){
  .lx-ep{ padding:10px 12px 11px; border-radius:14px; margin-inline:-2px; }
  .lx-proof-btn{ padding:13px 8px; }
}

/* ════════════════════════════════════════════════════════════════
   📱 سلاسة الجوال — v6.32
   على الشاشات الصغيرة: انتقال خفيف (تلاشٍ فقط، بلا إزاحات متدرّجة)
   وإلغاء رفع hover على شاشات اللمس — يزيل الاهتزاز والثقل نهائياً
   ════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .app-main.route-anim > *,
  .app-main.route-anim > * > *:nth-child(2),
  .app-main.route-anim > * > *:nth-child(3),
  .app-main.route-anim > * > *:nth-child(4){ animation:none !important; }
  .app-main.route-anim{ animation:lxMobFade .18s ease-out both; }
  /* درج القائمة: انزلاق أسرع وأخف على الجوال */
  .app-side{ transition:transform .2s ease-out, visibility .2s !important; }
}
@keyframes lxMobFade{ from{ opacity:.4; } to{ opacity:1; } }
@media (hover:none){
  .btn:hover, .card:hover, .hub-tile:hover, .hd-kpi:hover, .mx-stat:hover,
  .lx-proof-btn:hover, .sd-item:hover .sd-ic{ transform:none !important; }
}
.topbar, .app-side, .lx-bnav, .btn, .sd-item{ -webkit-tap-highlight-color:transparent; }

/* ════════════════════════════════════════════════════════════════
   🔒 قفل السحب الأفقي — v6.33
   لا شيء يتجاوز عرض النافذة، ولا مطّاطية سحب للمستند كاملاً
   ════════════════════════════════════════════════════════════════ */
html, body{ overscroll-behavior:none !important; width:100%; max-width:100%; }
.app-col, .app-main{ overflow-x:clip; }
.topbar{ overflow:visible; max-width:100vw; }

/* إصلاح: شارة الجرس كانت تظهر كنقطة حمراء فارغة رغم hidden — display:grid كان يتغلّب عليها */
.tb-bell-badge[hidden]{ display:none !important; }

/* ════════════════════════════════════════════════════════════════
   📱 قيد جديد في الجوال — v6.38: المصدر والنوع قائمة منسدلة
   (بدل شبكة البطاقات الطويلة) → شاشة أقصر وثابتة وأسلس
   ════════════════════════════════════════════════════════════════ */
.vf-src-select{ display:none; }
@media (max-width:640px){
  .vf-sources{ display:none !important; }
  .vf-src-select{
    display:block; width:100%; min-height:44px;
    font-weight:700; font-size:14px;
  }
  /* تكثيف عام لنافذة القيد في الجوال */
  #vf-body .field{ margin-bottom:10px; }
  #vf-body .field-hint{ font-size:12px; }
  .lx-proof-btn{ padding:11px 8px; }
  .lx-proof-btn .icon{ font-size:21px; }
}


/* ═══════════════════════════════════════════════════════════════
   ⚖️ توحيد ختاميّ v6.77 — لغةٌ بصريّةٌ واحدة لكلّ الصفحات
   المرجع: النسق القياسيّ (btn / page-header / page-title) لأنّه في ٣٠ صفحة.
   عائلة mx-* (٦ صفحات: التصنيع، تقرير المبيعات، الطلبات، السندات،
   طلبات الدفع، إغلاق الفرع) و .chip العارية تلحق به — لا العكس.
   لم أمسّ .btn ولا .page-header أنفسهم، فالثلاثون صفحة لا تتغيّر بحرف.
   ═══════════════════════════════════════════════════════════════ */

/* ١) الأزرار — mx-btn تطابق btn في المقاس والحشو والحركة
      (كانت 9px 15px بينما القياسيّ 7px 16px، فكان ارتفاعان مختلفان) */
.mx-btn{
  justify-content:center;
  gap:6px !important;
  padding:7px 16px !important;
  font-size:var(--font-size) !important;
  line-height:1.4 !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow-sm);
  white-space:nowrap;
  user-select:none;
}
.mx-btn:hover:not(:disabled){ transform:translateY(-1px) !important; }
.mx-btn:active:not(:disabled){ transform:translateY(0) !important; }
.mx-btn:disabled{ opacity:.5 !important; cursor:not-allowed; box-shadow:none; }
.mx-btn-sm{
  min-height:30px;
  padding:4px 11px !important;
  font-size:12px !important;
  font-weight:600 !important;
  border-radius:8px !important;
}
.mx-btn-sm .icon{ font-size:15px; }

/* ٢) الرقائق — عائلةٌ واحدة بدل ثلاث
      (كانت .chip حبّةً دائريّة 100px، و.filter-chip 4px/11.5px،
       و.mx-chip 6px/12.3px — ثلاثة أشكال لوظيفةٍ واحدة) */
button.chip, .filter-chip, .chip[data-filter], .mx-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 13px !important;
  border:1px solid var(--border-strong) !important;
  border-radius:10px !important;
  background:var(--surface) !important;
  color:var(--text-muted) !important;
  font-family:inherit;
  font-size:12.3px !important;
  font-weight:700 !important;
  line-height:1.2;
  cursor:pointer;
  transition:background-color var(--d-micro) var(--e-swift), border-color var(--d-micro), color var(--d-micro) !important;
}
button.chip:hover, .filter-chip:hover, .chip[data-filter]:hover, .mx-chip:hover{
  border-color:var(--primary) !important; color:var(--text) !important;
}
button.chip.active, button.chip.on,
.filter-chip.active, .filter-chip.on,
.chip[data-filter].active, .chip[data-filter].on,
.mx-chip.active, .mx-chip.on{
  background:var(--primary) !important; color:var(--on-primary) !important; border-color:var(--primary) !important;
}
/* شارة العدّ ‹span class="chip"› ليست فلتراً — تبقى حبّةً دائريّة */
span.chip{ border-radius:999px !important; }

/* ٣) ترويسة الصفحة — mx-head تطابق page-header
      (كانت تحمل ظلّاً لا تحمله الأخرى، وهامشاً 16 بدل 18) */
.mx-head{
  padding:12px 16px !important;
  gap:14px !important;
  margin-bottom:18px !important;
  border-radius:var(--radius) !important;
  box-shadow:none !important;
}
.mx-title{ line-height:1.35 !important; }
.mx-head-actions{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }

/* ٤) الجداول — نفس طريقة رسم الفواصل في كلّ صفحة */
.mx-table{ border-collapse:separate !important; border-spacing:0 !important; }


/* ════════════════════════════════════════════════════════════
   ✂️ قصّ الحروف v6.79 — حقلٌ بارتفاعٍ ثابت يخنق سطر نصّه
   ────────────────────────────────────────────────────────────
   القائمة في شريط الفلاتر ارتفاعها 38px مثبَّت، وعليها حدّان
   1.5px وحشوٌ عموديّ 10px فوق و10px تحت، فلا يبقى للنّصّ إلّا
   15px بينما سطره 21px — فتُقصّ أطراف الحروف العربيّة من فوق
   ومن تحت: «كلّ الفروع» تُقرأ «كلّ الفهء».
   العلاج: تصفير الحشو العموديّ ليتوسّط المتصفّح السّطر داخل
   الارتفاع نفسه. لا يتغيّر الارتفاع الموحَّد ولا الحشو الجانبيّ
   (‏38px يسار القائمة مساحةُ السّهم — تبقى كما هي).
   ════════════════════════════════════════════════════════════ */
.filter-bar .input, .filter-bar .select, .filter-bar select, .filter-bar input,
.page-actions .input, .page-actions .select, .page-actions select, .page-actions input,
.rpx .page-actions .input, .rpx .page-actions .select,
.topbar-search, input[type="search"], .search-input, .search-box input, .input.search,
.input.num, input.num{
  padding-top:0 !important;
  padding-bottom:0 !important;
  line-height:1.2 !important;
}

/* ووحّد المقاس مع ما جاوره: كان الحقل 15px وجارُه الزّرّ 13px والصفحة 13.5px.
   الجوّال مُستثنى: ما دون 16px يُكبّر iOS الصّفحة تلقائياً عند التّركيز. */
@media (min-width:641px){
  .filter-bar .input, .filter-bar .select, .filter-bar select, .filter-bar input,
  .page-actions .input, .page-actions .select, .page-actions select, .page-actions input,
  .rpx .page-actions .input, .rpx .page-actions .select{
    font-size:14px !important;
  }
}


/* ════════════════════════════════════════════════════════════
   📜 فتحٌ دائم v6.80 — صندوق نتائج البحث
   لمّا صارت المجموعات تُفتح دائماً، طال الصّندوق. فأُطيل حدُّه
   الأعلى، وثُبِّتت ترويسةُ كلّ قالبٍ فوق متغيّراته أثناء التّمرير
   حتّى يُعرَف في أيّ قالبٍ نحن.
   ════════════════════════════════════════════════════════════ */
#bf-product-suggestions, #tf-product-suggestions, .mf-pick-list{
  max-height:min(46vh, 360px) !important;
  overscroll-behavior:contain;
}
#bf-product-suggestions .bf-tpl-head,
#tf-product-suggestions .tf-tpl-head{
  position:sticky !important;
  top:0 !important;
  z-index:2;
}


/* ════════════════════════════════════════════════════════════════
   إصلاحاتٌ عامّةٌ للقوائمِ المنسدلة — 2026-08-12
   ════════════════════════════════════════════════════════════════ */

/* ⚠️ سهمُ القائمةِ مرسومٌ داخلَ الشيفرةِ بلونٍ داكنٍ ثابت (#161616)، ولا
   قاعدةَ تُبدِّلُهُ في الوضعِ الليليّ — فَيصيرُ سهماً داكناً على خلفيّةٍ
   داكنة، أي قائمةٌ بلا علامةٍ تدلُّ على أنّها قائمة. ولا يُلاحَظُ هذا
   نهاراً أبداً، فَيبقى كامناً حتى يُشعِلَ أحدُهم الوضعَ الليليّ.        */
html[data-theme="dark"] .select,
html[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F4F4F2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* القائمةُ في شريطِ التصفيةِ تأخذُ عرضَ محتواها لا عرضَ الصفحة: كانت
   قائمةُ «كل الفروع» في فواتيرِ الشراءِ تمتدُّ ١١٥٠ بكسل لأربعِ كلمات. */
.filter-bar > .select,
.filter-bar > select {
  width: auto;
  min-width: 130px;
  max-width: 220px;
}

/* ════════════════════════════════════════════════════════════════
   🪜 «سجِّل حركة» على محطّات — الجوّالُ والمكتبُ سواء
   الحقولُ تبقى في مكانِها من الشجرة؛ تُخفى غيرُ محطّةِ اليومِ فقط،
   فَلا تُلمَسُ حالةُ النموذجِ ولا مسارُ الحفظ.
   ════════════════════════════════════════════════════════════════ */
#vf-body.vf-stepped > [data-vstep]{ display:none !important; }
#vf-body.vf-stepped[data-cur="1"] > [data-vstep="1"],
#vf-body.vf-stepped[data-cur="2"] > [data-vstep="2"],
#vf-body.vf-stepped[data-cur="3"] > [data-vstep="3"]{ display:block !important; }

#vf-stepbar{ display:block !important; margin:0 0 14px; }
.vf-dots{ display:flex; gap:5px; margin:0 0 11px; }
.vf-dots i{ flex:1; height:3px; border-radius:2px; background:var(--border); transition:background .3s; }
.vf-dots i.on{ background:var(--primary); }
.vf-steph{ font-size:17px; font-weight:800; letter-spacing:-.3px; margin:0 0 8px; }
.vf-crumbs{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 4px; }
.vf-crumb{
  display:inline-flex; align-items:center; gap:5px; background:var(--bg-alt);
  border:1px solid var(--border); border-radius:999px; padding:5px 11px;
  font-family:inherit; font-size:11.5px; font-weight:800; color:var(--text); cursor:pointer;
  min-height:32px;
}
.vf-crumb:active{ transform:scale(.97); }
.vf-crumb::after{ content:"✎"; font-size:11px; opacity:.5; }

/* تذييلُ المحطّةِ يلتصقُ بأسفلِ النافذةِ — الإبهامُ لا يبحثُ عنه */
.vf-stepfoot{
  position:sticky; bottom:0; z-index:3; display:flex; gap:9px;
  margin:16px -14px -14px; padding:11px 14px calc(11px + env(safe-area-inset-bottom,0px));
  background:var(--surface); border-top:1px solid var(--border);
}
.vf-sbtn{
  flex:1; min-height:48px; border-radius:12px; font-family:inherit; font-size:14.5px;
  font-weight:800; cursor:pointer; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--text);
}
.vf-sbtn.pri{ background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
.vf-sbtn:active{ transform:scale(.985); }

/* ════════════════════════════════════════════════════════════════
   🧾 مُنتقي فاتورةِ نقطةِ البيع — «تأكيد التسليم بالفاتورة»
   ════════════════════════════════════════════════════════════════ */
.inv-reload{
  margin-inline-start:auto; background:none; border:1px solid var(--border-strong);
  border-radius:9px; padding:4px 10px; font-family:inherit; font-size:11px;
  font-weight:800; color:var(--text-muted); cursor:pointer; min-height:30px;
}
.inv-reload:hover{ border-color:var(--text-muted); color:var(--text); }
.inv-list{
  max-height:236px; overflow-y:auto; display:flex; flex-direction:column; gap:5px;
  border:1px solid var(--border); border-radius:12px; padding:6px; background:var(--bg-alt);
}
.inv-load{ font-size:12.5px; color:var(--text-muted); padding:10px 4px; font-weight:600; }
.inv-row{
  display:flex; align-items:center; gap:10px; width:100%; text-align:start;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:9px 10px; font-family:inherit; cursor:pointer; min-height:52px;
  transition:border-color var(--d-micro), background var(--d-micro);
}
.inv-row:hover:not(:disabled){ border-color:var(--border-strong); }
.inv-row.on{ border-color:var(--primary); background:var(--primary-bg); box-shadow:inset 0 0 0 1px var(--primary); }
.inv-row:disabled{ opacity:.5; cursor:not-allowed; }
.inv-l{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.inv-l b{ font-size:12.5px; font-weight:800; }
.inv-l small{ font-size:11px; color:var(--text-muted); font-weight:600; }
.inv-used{ font-size:11px; color:var(--danger-text); font-weight:800; font-style:normal; }
.inv-r{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:0 0 auto; }
.inv-r b{ font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
.inv-match{
  font-size:11px; font-style:normal; font-weight:800; color:var(--success-text);
  background:var(--success-bg); border-radius:999px; padding:2px 7px;
}
.inv-row.match{ border-color:var(--success); }

/* ════════════════════════════════════════════════════════════════
   🪜 محطّاتُ التصنيع — «أمرٌ جديد» على المكتبِ والجوّالِ معاً
   الحقولُ تبقى في مكانِها من الشجرة؛ تُخفى المحطّاتُ غيرُ الحاليّةِ فقط،
   فَيقرأُ الحفظُ والتحقّقُ كلَّ الحقولِ كما كانَ حرفاً بحرف.
   ════════════════════════════════════════════════════════════════ */
.mf-form[data-mcur] > [data-mstep]{ display:none !important; }
.mf-form[data-mcur="1"] > [data-mstep="1"],
.mf-form[data-mcur="2"] > [data-mstep="2"],
.mf-form[data-mcur="3"] > [data-mstep="3"],
.mf-form[data-mcur="4"] > [data-mstep="4"],
.mf-form[data-mcur="5"] > [data-mstep="5"]{ display:flex !important; grid-column:1 / -1 !important; }
.mf-form[data-mcur]{ grid-template-columns:1fr !important; }

.mf-rail{ display:flex; gap:8px; margin:0 0 16px; flex-wrap:wrap; }
.mf-rl{ flex:1; min-width:120px; display:flex; flex-direction:column; gap:7px;
        background:none; border:0; padding:0; cursor:pointer; font-family:inherit; text-align:start; }
.mf-rl-t{ display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:800;
          color:var(--text-muted); transition:color var(--d-std) var(--e-swift); }
.mf-rl.cur .mf-rl-t{ color:var(--text); }
.mf-rl.done .mf-rl-t{ color:var(--text-muted); }
.mf-rl-n{ width:18px; height:18px; border-radius:6px; background:var(--border-strong); color:var(--surface);
  display:grid; place-items:center; font-size:11px; font-style:normal; flex:0 0 auto;
  transition:background var(--d-std) var(--e-swift), transform var(--d-std) var(--e-luxe); }
.mf-rl.cur .mf-rl-n{ background:var(--primary); color:var(--on-primary); transform:scale(1.12); }
.mf-rl.done .mf-rl-n{ background:var(--success); }
.mf-rl-b{ display:block; height:3px; border-radius:2px; background:var(--border); overflow:hidden; }
.mf-rl-b i{ display:block; height:100%; width:0; background:var(--primary); border-radius:2px;
            transition:width .5s var(--e-luxe); }
.mf-rl.cur .mf-rl-b i, .mf-rl.done .mf-rl-b i{ width:100%; }
.mf-rl.done .mf-rl-b i{ background:var(--success); }

/* انزلاقُ المحطّة — يقولُ «تقدّمت» بلا كلمة */
.mf-form[data-mcur] > [data-mstep]{ animation:mfIn .3s var(--e-luxe); }
@keyframes mfIn{ from{ opacity:0; transform:translateX(-18px) } to{ opacity:1; transform:none } }
.mf-nav{ display:flex; gap:9px; margin:14px 0 0; }
.mf-nb{ flex:1; justify-content:center; min-height:48px; font-size:14.5px; font-weight:800; }
@media (min-width:901px){ .mf-nav{ justify-content:flex-end; } .mf-nb{ flex:0 0 auto; min-width:150px; } }

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

   ولا يُمَسُّ حقلٌ ولا يُنقَلُ من شجرتِه — كلُّ ما هنا لباسٌ فوقَ ما
   هو قائم. يقرأُ الحفظُ (saveDraft) والتحقّقُ والتوفّرُ (updateAvail)
   الحقولَ نفسَها بأسمائِها نفسِها حرفاً بحرف.
   ════════════════════════════════════════════════════════════════ */

/* المحطّةُ صارت صفحةً — فَلا إطارَ بطاقةٍ داخلَ بطاقة */
.mf-form[data-mcur] > .mf-sec{
  border:0 !important; box-shadow:none !important; background:none !important;
  padding:0 !important; gap:13px;
}
.mf-form[data-mcur] > .mf-sec::before{ display:none !important; }
.mf-form[data-mcur] > .mf-sec > .mf-sec-h{
  font-size:17px; letter-spacing:-.4px; margin:0 0 4px; gap:9px;
}
.mf-form[data-mcur] > .mf-sec > .mf-sec-h .ic,
.mf-form[data-mcur] > .mf-sec > .mf-sec-h .icon{ width:21px; height:21px; font-size:21px; }
@media (min-width:901px){
  .mf-form[data-mcur] > .mf-sec > .mf-sec-h{ font-size:21px; letter-spacing:-.5px; }
  /* حقولُ الأرقامِ تصطفُّ جنباً إلى جنبٍ على المكتب؛ وما عداها يأخذُ السطر */
  .mf-form[data-mcur] > .mf-sec{ flex-direction:row !important; flex-wrap:wrap !important; align-items:flex-start; }
  .mf-form[data-mcur] > .mf-sec > *{ flex:1 1 100%; min-width:0; }
  .mf-form[data-mcur] > .mf-sec > .mf-row{ flex:1 1 240px; }
}

/* ── خانةُ البحثِ: شريطُ تصفيةٍ، لا حقلَ نصٍّ باهت ────────────── */
.mf-form[data-mcur] .mf-pick-lbl{ display:none !important; }
.mf-form[data-mcur] .mf-pick-wrap > .input{
  min-height:52px; border-radius:14px; font-size:15px; font-weight:700;
  padding-inline:15px; background:var(--bg-alt);
  transition:background var(--d-std,.2s) var(--e-luxe), border-color var(--d-std,.2s) var(--e-luxe);
}
.mf-form[data-mcur] .mf-pick-wrap > .input:focus{ background:var(--surface); }

/* ── القائمةُ: بلاطاتٌ مفتوحةٌ لا قائمةٌ منسدلة ────────────────── */
.mf-form[data-mcur] .mf-pick-list{
  margin-top:10px !important; background:none !important; border:0 !important;
  border-radius:0 !important; box-shadow:none !important;
  max-height:min(56vh,520px) !important; overflow:auto !important;
  display:grid; gap:9px; grid-template-columns:1fr; padding:2px;
}
.mf-form[data-mcur] .mf-tpl{ border:0 !important; }
.mf-form[data-mcur] .mf-tpl-vars{ gap:9px; grid-template-columns:1fr; padding:8px 0 3px; }
.mf-form[data-mcur] .mf-tpl-head{
  background:none !important; border-bottom:0 !important; padding:7px 2px 2px !important;
  position:static !important; font-size:12px !important;
}
.mf-form[data-mcur] .mf-tpl-head:hover{ background:none !important; }
.mf-form[data-mcur] .mf-tpl-head > strong{ font-size:13.5px; font-weight:800; }
.mf-form[data-mcur] .mf-tpl-count{
  font-size:11px; font-weight:800; color:var(--text-muted);
  background:var(--bg-alt); border:1px solid var(--border); border-radius:999px; padding:1px 8px;
}
/* الشبكةُ تُقسَمُ على المكتب — بعدَ القواعدِ العامّةِ لا قبلَها،
   وإلّا غلبَها عمودُ الجوّالِ الواحدُ فبقيت البلاطاتُ سطراً سطراً. */
@media (min-width:901px){
  .mf-form[data-mcur] .mf-pick-list{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
  .mf-form[data-mcur] .mf-pick-list > .mf-tpl{ grid-column:1 / -1; }
  .mf-form[data-mcur] .mf-tpl-vars{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
}

/* البلاطةُ نفسُها */
.mf-form[data-mcur] .mf-opt{
  display:flex !important; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border);
  border-bottom:1px solid var(--border) !important;
  border-radius:13px; padding:12px !important; min-height:66px;
  font-size:13px !important; padding-inline-start:12px !important;
  position:relative; overflow:hidden; box-sizing:border-box;
  transition:border-color .18s var(--e-luxe), transform .18s var(--e-luxe), box-shadow .18s var(--e-luxe);
  animation:mfPop .32s var(--e-luxe) backwards;
}
.mf-form[data-mcur] .mf-tpl-vars .mf-opt{ padding-inline-start:12px !important; background:var(--surface); }
.mf-form[data-mcur] .mf-opt:hover{
  background:var(--surface); border-color:var(--border-strong);
  transform:translateY(-2px); box-shadow:var(--shadow-md);
}
.mf-form[data-mcur] .mf-opt:active{ transform:scale(.985); }
.mf-form[data-mcur] .mf-opt > strong{ flex:1; min-width:0; font-size:13px; font-weight:800; line-height:1.35; }
.mf-form[data-mcur] .mf-opt > span{
  float:none !important; flex:0 0 auto; text-align:end; line-height:1.5;
  font-size:11px !important; font-weight:700;
}
.mf-form[data-mcur] .mf-opt > span strong{ font-size:14px; letter-spacing:-.3px; font-variant-numeric:tabular-nums; }
@keyframes mfPop{ from{ opacity:0; transform:translateY(9px) } to{ opacity:1; transform:none } }
.mf-form[data-mcur] .mf-opt:nth-child(1){ animation-delay:.02s }
.mf-form[data-mcur] .mf-opt:nth-child(2){ animation-delay:.05s }
.mf-form[data-mcur] .mf-opt:nth-child(3){ animation-delay:.08s }
.mf-form[data-mcur] .mf-opt:nth-child(4){ animation-delay:.11s }
.mf-form[data-mcur] .mf-opt:nth-child(5){ animation-delay:.14s }
.mf-form[data-mcur] .mf-opt:nth-child(6){ animation-delay:.17s }
.mf-form[data-mcur] .mf-opt:nth-child(n+7){ animation-delay:.2s }

/* ── الحقلُ الرقميُّ: بطاقةٌ وعنوانٌ صغيرٌ ورقمٌ كبير ──────────── */
.mf-form[data-mcur] .mf-row{
  display:block !important; border:1px solid var(--border); border-radius:13px;
  padding:11px 13px; background:var(--surface); box-sizing:border-box;
  transition:border-color .2s var(--e-luxe);
}
.mf-form[data-mcur] .mf-row:focus-within{ border-color:var(--primary); }
.mf-form[data-mcur] .mf-row > span:first-child{
  display:block; font-size:11px; font-weight:800; color:var(--text-muted);
  letter-spacing:.07em; margin:0 0 6px; line-height:1.5;
}
.mf-form[data-mcur] .mf-row .input,
.mf-form[data-mcur] .mf-row .select{
  width:100% !important; border:0 !important; background:none !important;
  padding:0 !important; height:auto !important; min-height:0 !important;
  box-shadow:none !important; font-family:inherit; font-weight:800;
  font-size:22px !important; letter-spacing:-.6px; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.mf-form[data-mcur] .mf-row .input:focus,
.mf-form[data-mcur] .mf-row .select:focus{ outline:none; box-shadow:none !important; }
.mf-form[data-mcur] .mf-row .select,
.mf-form[data-mcur] .mf-row input[type="date"]{ font-size:15.5px !important; letter-spacing:0; }
.mf-form[data-mcur] .mf-row .select{ padding-inline-end:18px !important; }

/* ── الورشةُ: بلاطاتٌ تُضغَطُ. والقائمةُ باقيةٌ مخفيّةً يقرؤها الحفظ ── */
.mf-form[data-mcur] .mf-row.mf-wc-hidden{ display:none !important; }
.mf-wcg{ display:grid; gap:9px; grid-template-columns:1fr; }
@media (min-width:641px){ .mf-wcg{ grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); } }
.mf-wct{
  display:flex; align-items:center; gap:9px; min-height:58px; padding:11px 13px;
  border:1px solid var(--border); border-radius:13px; background:var(--surface);
  font-family:inherit; font-size:13px; font-weight:800; color:var(--text);
  cursor:pointer; text-align:start; box-sizing:border-box;
  transition:border-color .18s var(--e-luxe), transform .18s var(--e-luxe), box-shadow .18s var(--e-luxe);
  animation:mfPop .32s var(--e-luxe) backwards;
}
.mf-wct:hover{ border-color:var(--border-strong); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.mf-wct:active{ transform:scale(.985); }
.mf-wct.on{ border-color:var(--primary); background:var(--primary-bg); box-shadow:inset 0 0 0 1px var(--primary); }
.mf-wct.mf-wct-add{ border-style:dashed; justify-content:center; color:var(--text-muted); font-weight:700; }

/* ── المراجعةُ: ما اخترتَه في سطورٍ تُقرأُ قبلَ الحفظ ───────────── */
.mf-rev{ display:grid; gap:10px; margin:0 0 4px; }
@media (min-width:901px){ .mf-rev{ grid-template-columns:1.15fr .85fr; align-items:start; } }
.mf-sum{ border:1px solid var(--border); border-radius:13px; overflow:hidden; background:var(--surface); }
.mf-sum-r{
  display:flex; align-items:center; gap:10px; padding:11px 13px;
  border-bottom:1px solid var(--border-light); font-size:12.5px;
  animation:mfPop .3s var(--e-luxe) backwards;
}
.mf-sum-r:last-child{ border-bottom:0; }
.mf-sum-r > span{ color:var(--text-muted); font-weight:700; flex:0 0 auto; }
.mf-sum-r > b{
  margin-inline-start:auto; font-weight:800; text-align:end; min-width:0;
  overflow-wrap:anywhere; font-variant-numeric:tabular-nums;
}
.mf-rev-av{
  border:1px solid var(--border); border-radius:13px; padding:11px 13px;
  background:var(--bg-alt); font-size:12px; line-height:1.6;
}

/* صندوقُ الزبونِ (في طلبِ الزبون) محطّةٌ كاملةٌ — فَلا إطارَ حولَه */
.mf-form[data-mcur] > #mf-cust-box{ border:0 !important; background:none !important; padding:0 !important; }

/* ════════════════════════════════════════════════════════════════
   🖼️ منتقي المنتجِ النهائيِّ — طبقتان: القوالبُ ثمّ متغيّراتُها
   الصورةُ تظهرُ حينَ يصلُ الدورُ إليها، فَتنزلقُ ولا تُحمِّل.
   ════════════════════════════════════════════════════════════════ */
.mf-plvl{ grid-column:1 / -1; display:grid; gap:9px; animation:mfLvl .26s var(--e-luxe); }
@keyframes mfLvl{ from{ opacity:0; transform:translateX(16px) } to{ opacity:1; transform:none } }
@media (min-width:901px){ .mf-plvl1{ grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); } }

.mf-ptpl{
  display:flex; align-items:center; gap:11px; width:100%; min-height:74px; padding:10px 12px;
  border:1px solid var(--border); border-radius:14px; background:var(--surface);
  font-family:inherit; text-align:start; cursor:pointer; box-sizing:border-box; color:var(--text);
  transition:border-color .18s var(--e-luxe), transform .18s var(--e-luxe), box-shadow .18s var(--e-luxe);
  animation:mfPop .32s var(--e-luxe) backwards;
}
.mf-ptpl:hover{ border-color:var(--border-strong); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.mf-ptpl:active{ transform:scale(.99); }

.mf-pth{
  flex:0 0 auto; width:52px; height:52px; border-radius:12px; overflow:hidden;
  background:var(--bg-alt); border:1px solid var(--border-light);
  display:grid; place-items:center; color:var(--text-muted);
}
.mf-pth img{ width:100%; height:100%; object-fit:cover; display:block; animation:mfFade .3s var(--e-luxe); }
@keyframes mfFade{ from{ opacity:0 } to{ opacity:1 } }
.mf-pth .ic{ width:20px; height:20px; }

.mf-ptx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.mf-ptx b{ font-size:13px; font-weight:800; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mf-ptx small{ font-size:11px; color:var(--text-muted); font-weight:700; }
.mf-ptx small i{ font-style:normal; font-weight:800; }
.mf-ptx small i.ok{ color:var(--success); }
.mf-ptx small i.no{ color:var(--danger); }
.mf-ptc{ flex:0 0 auto; color:var(--text-muted); display:inline-flex; }
[dir="rtl"] .mf-ptc.nav .ic{ transform:rotate(180deg); }
.mf-ptc.ok{ color:var(--success); }
/* الرمزُ حينَ لا صورةَ — يملأُ المربّعَ بدلالةٍ لا برماد */
.mf-pmono{
  font-size:15px; font-weight:800; letter-spacing:-.4px; color:var(--text-muted);
  font-variant-numeric:tabular-nums; line-height:1;
}

/* رأسُ الطبقةِ الثانية — يقولُ أينَ أنتَ ويُعيدُك بضغطة */
.mf-pvh{
  display:flex; align-items:center; gap:11px; padding:10px 12px; margin:0 0 4px;
  border:1px solid var(--primary); border-radius:14px; background:var(--primary-bg);
  animation:mfPop .3s var(--e-luxe) backwards;
}
.mf-pvb{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:5px;
  border:1px solid var(--border-strong); background:var(--surface); border-radius:10px;
  padding:8px 12px; font-family:inherit; font-size:12px; font-weight:800; cursor:pointer; color:var(--text);
  transition:border-color .16s var(--e-luxe), transform .16s var(--e-luxe);
}
.mf-pvb:hover{ border-color:var(--primary); }
.mf-pvb:active{ transform:scale(.96); }
.mf-pvg{ display:grid; gap:9px; grid-template-columns:1fr; }
@media (min-width:901px){ .mf-pvg{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); } }

/* رقاقةُ الرمزِ، وسطرُ التلميحِ، وشاشةُ «لا نتائج» */
.mf-pcode{ /* لم يعُدْ مستعمَلاً في البلاطة — مُبقًى لئلّا ينكسرَ شيءٌ آخر */
  font-style:normal; font-weight:800; font-size:11px; letter-spacing:.02em;
  background:var(--bg-alt); border:1px solid var(--border); border-radius:5px;
  padding:0 5px; margin-inline-end:6px; color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
.mf-phint, .mf-pempty{
  grid-column:1 / -1; font-size:11.5px; font-weight:700; color:var(--text-muted);
  padding:9px 2px 2px; line-height:1.6;
}
.mf-pempty{
  text-align:center; padding:26px 14px; border:1px dashed var(--border-strong);
  border-radius:14px; background:var(--bg-alt); animation:mfPop .3s var(--e-luxe);
}
.mf-phint kbd, .mf-pempty kbd{
  font-family:inherit; font-size:11px; font-weight:800; color:var(--text);
  border:1px solid var(--border-strong); border-radius:5px; padding:1px 6px;
  background:var(--surface);
}

/* ── mf-clear-v2 · وضوحُ الكتابةِ داخلَ المحطّات ─────────────────
   عناوينُ الحقولِ كانت بلونِ --text-disabled (#B8B8B8) وحجمِ ١٠٫٥
   — تُقرأُ على شاشةِ مكتبٍ هادئةٍ ولا تُقرأُ في ضوءِ المحلّ. تُرفَعُ
   إلى --text-muted و١١٫٥، ويكبرُ ما اختيرَ فِعلاً. */
.mf-form[data-mcur] .mf-row > span:first-child{
  font-size:11.5px !important; color:var(--text-muted) !important; letter-spacing:.02em !important;
}
.mf-form[data-mcur] .mf-pick-wrap > .input{ font-size:15.5px; }
.mf-form[data-mcur] .mf-sec-done .mf-pick-wrap > .input{
  font-size:16px; font-weight:800; color:var(--text);
  background:var(--success-bg); border-color:var(--success) !important;
}
/* صندوقُ التوفّرِ: بطاقةٌ تُقرأُ لا سطورٌ سائبة */
.mf-form[data-mcur] #mf-fab-avail{
  border:1px solid var(--border); border-radius:13px; padding:10px 12px;
  background:var(--bg-alt); font-size:12.5px !important; line-height:1.75;
}
.mf-form[data-mcur] #mf-fab-avail:empty{ display:none; }
.mf-form[data-mcur] #mf-fab-avail > div{ font-size:12.5px !important; }
.mf-form[data-mcur] #mf-fab-avail strong{ font-size:13.5px; }
/* عنوانُ القالبِ الجاهزِ لا يزاحمُ المحطّةَ الأولى */
.mf-form[data-mcur] .mf-sec-tpl .mf-row > span:first-child{ font-size:11px !important; }

/* ── النقصُ يُرى قبلَ أن يُقرأ ─────────────────────────────────── */
.mf-form[data-mcur] .mf-row.mf-qty-bad{
  border-color:var(--danger) !important;
  background:var(--danger-bg) !important;
  box-shadow:inset 0 0 0 1px var(--danger);
}
.mf-form[data-mcur] .mf-row.mf-qty-bad > span:first-child{ color:var(--danger-text) !important; }
.mf-form[data-mcur] .mf-row.mf-qty-bad .input{ color:var(--danger-text) !important; }
.mf-form[data-mcur] #mf-fab-avail.mf-av-bad{
  border-color:var(--danger) !important; background:var(--danger-bg) !important;
}
.mf-form[data-mcur] #mf-fab-avail.mf-av-ok{
  border-color:var(--success) !important; background:var(--success-bg) !important;
}

/* ── الحقلُ المطلوبُ: حدٌّ أحمرُ وكلمةُ «مطلوب» ─────────────────
   الأحمرُ هنا يقولُ «لا يُترَكُ فارغاً»، لا «خطأ». ولذلك هو حدٌّ
   رفيعٌ بلا خلفيّة؛ أمّا حالةُ النقصِ (mf-qty-bad) فَتزيدُ خلفيّةً
   محمرّةً ونصّاً أحمرَ — فَيبقى الفرقُ بينَ «مطلوب» و«ممنوع» مرئيّاً. */
.mf-form[data-mcur] .mf-row.mf-req{ border-color:var(--danger); }
.mf-form[data-mcur] .mf-row.mf-req > span:first-child::after{
  content:'مطلوب'; display:inline-block; margin-inline-start:7px;
  font-size:9.5px; font-weight:800; letter-spacing:0;
  color:var(--danger-text); background:var(--danger-bg);
  border:1px solid var(--danger); border-radius:999px; padding:0 6px;
  vertical-align:1px;
}
.mf-form[data-mcur] .mf-row.mf-req:focus-within{ border-color:var(--danger); box-shadow:inset 0 0 0 1px var(--danger); }

/* ── هويّةُ قائمةِ التصنيع: صفوفٌ كالبطاقاتِ ووقتٌ بالساعةِ والدقيقة ──
   الصفوفُ كانت أسطراً في جدولٍ عاديّ؛ صارت بطاقاتٍ بنفسِ نصفِ قطرِ
   المحطّاتِ وحدودِها ورفعتِها عندَ المرور — فَتقرأُ الصفحةَ كأنّها
   امتدادُ الشاشةِ التي أنشأتَ منها الأمر. */
.mf-when{
  font-size:11px; font-weight:700; color:var(--text-muted);
  margin-top:4px; font-variant-numeric:tabular-nums; white-space:nowrap;
}
@media (min-width:901px){
  .mx-table tbody tr{ transition:box-shadow .18s var(--e-luxe), transform .18s var(--e-luxe); }
  .mx-table tbody tr:hover{ box-shadow:none; }
  .mx-table tbody tr > td:first-child{ border-start-start-radius:13px; border-end-start-radius:13px; }
  .mx-table tbody tr > td:last-child{ border-start-end-radius:13px; border-end-end-radius:13px; }
}

/* ── طلباتُ الدفع: هويّةُ النظامِ نفسُها ──────────────────────────
   كانت الصفحةُ آخرَ ما بقيَ على الشكلِ القديم: خطُّ أيقوناتِ جوجل،
   وأصنافُ أزرارٍ قديمةٌ (btn)، وشاراتٌ قديمةٌ (pill). صارت بطاقاتٍ
   بنصفِ قطرِ المحطّاتِ وحدودِها ورفعتِها عندَ المرور. */
.pr-list{ display:grid; gap:10px; }
.pr-card{
  border:1px solid var(--border); border-radius:16px; background:var(--surface);
  padding:14px 15px; display:flex; flex-direction:column; gap:9px;
  transition:border-color .18s var(--e-luxe), transform .18s var(--e-luxe), box-shadow .18s var(--e-luxe);
  animation:mfPop .32s var(--e-luxe) backwards;
}
.pr-card:hover{ border-color:var(--border-strong); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.pr-card.on{ border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary); }
.pr-top{ display:flex; align-items:center; gap:11px; }
.pr-ic{ color:var(--text-muted); }
.pr-r{ margin-inline-start:auto; text-align:end; flex:0 0 auto; line-height:1.9; }
.pr-amt{ font-size:19px; font-weight:800; letter-spacing:-.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pr-amt.big{ color:var(--danger-text); }
.prc{
  font-style:normal; font-weight:700; font-size:11px; color:var(--text-muted);
  background:var(--bg-alt); border:1px solid var(--border); border-radius:999px;
  padding:1px 8px; margin-inline-end:5px; display:inline-block;
}
.prc.ltr{ font-variant-numeric:tabular-nums; }
.pr-note{ font-size:12.5px; color:var(--text-muted); line-height:1.7; }
.pr-warn{
  display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
  color:var(--warning-text); background:var(--warning-bg); border:1px solid var(--warning);
  border-radius:11px; padding:8px 11px;
}
.pr-why{
  display:flex; align-items:center; gap:7px; font-size:12px;
  color:var(--danger-text); background:var(--danger-bg); border:1px solid var(--danger);
  border-radius:11px; padding:8px 11px;
}
.pr-acts{ display:flex; gap:8px; flex-wrap:wrap; }
@media (min-width:901px){
  .pr-list{ grid-template-columns:repeat(auto-fill,minmax(430px,1fr)); }
}

/* ── vf-stepped-desk · المحطّاتُ على المكتبِ بنفسِ شكلِ الجوّال ──────
   لا شكلَ جديدٌ للمكتب: هو هو، يكبرُ قليلاً لأنّ المسافةَ إلى الشاشةِ
   أبعد. والتذييلُ يُصحَّحُ هامشُه ليطابقَ حشوَ النافذةِ الكاملةِ
   (١٦ جانباً و٢٦ أسفل) بدلَ ١٤ الذي كانَ يُزيحُه بكسلَين. */
@media (min-width:901px){
  #vf-body.vf-stepped{ max-width:760px; margin-inline:auto; }
  .vf-steph{ font-size:21px; letter-spacing:-.5px; margin-bottom:10px; }
  .vf-dots{ margin-bottom:13px; }
  .vf-crumb{ font-size:12px; min-height:34px; padding:6px 13px; }
  .modal-full #vf-body.vf-stepped .vf-stepfoot{
    margin:18px -16px -26px; padding:13px 16px;
  }
  .vf-sbtn{ min-height:46px; font-size:14px; }
}

/* ── الملاحةُ تُدفَعُ إلى أسفلِ النموذجِ مهما قصُرَ محتواه ────────
   الجسمُ يصيرُ عموداً مرناً في وضعِ المحطّات، والملاحةُ تأخذُ
   `margin-top:auto` — فَتستقرُّ في الأسفلِ على الجوّالِ (حيثُ يُمرَّرُ)
   وعلى المكتبِ (حيثُ لا يُمرَّر) سواءً بسواء.

   ثمّ `sticky` على الملاحةِ نفسِها لا على جوفِها: حاويتُها الآنَ
   هي الجسمُ كلُّه، فَمداها كاملُ الصفحةِ — تبقى الأزرارُ ظاهرةً
   طَوالَ التمريرِ في النماذجِ الطويلة، ثمّ تستقرُّ في آخرِها.
   (كانت من قبلُ داخلَ شريطِ المحطّاتِ القصير، فَمداها بضعةُ
    عشراتٍ من البكسلاتِ ثمّ تختفي.) */
#vf-body.vf-stepped{ display:flex !important; flex-direction:column; min-height:100%; }
#vf-body.vf-stepped > #vf-stepbar{ flex:0 0 auto; }
#vf-body.vf-stepped > #vf-stepnav{
  flex:0 0 auto; margin-top:auto;
  position:sticky; bottom:0; z-index:6;
}
#vf-body.vf-stepped > #vf-stepnav > .vf-stepfoot{ position:static; }

#vf-body.vf-stepped{ flex:1 1 auto; }
#vf-body.vf-stepped > #vf-stepnav > .vf-stepfoot{ margin-bottom:0; }

/* ═══════════════════════════════════════════════════════════════
   🃏 بطاقةُ المصدرِ الكبيرة — الجوّالُ وسطحُ المكتبِ سواء
   كانت البطاقةُ صفّاً بارتفاعِ ٤٥ بكسلاً ونقطةً بلا معنى، وكان
   النموذجُ في وضعِ المحطّاتِ مقيَّداً بـ ٧٦٠ بكسلاً فَيبقى نصفُ
   الشاشةِ الكبيرةِ فارغاً. صارت البطاقةُ عموداً: أيقونةُ المصدرِ
   (وهي مكتوبةٌ في sources.js منذُ البداية ولم تكن تُعرَض)، ثمّ
   الاسمُ بحجمٍ يُقرأُ من بعيد، ثمّ شارةُ الاتّجاهِ ملوّنةً وعدّادُ
   الاستعمال. والارتفاعُ ١٠٤ فأكثرُ — أي أنّ كلَّ البطاقةِ هدفُ لمسٍ
   لا زاويةٌ منها.
   ═══════════════════════════════════════════════════════════════ */
.vf-src-card.big{
  position:relative; flex-direction:column; align-items:flex-start; gap:8px;
  min-height:104px; padding:14px 14px 12px; text-align:start;
  border-width:1.5px; border-radius:16px; font-size:15px;
}
.vf-src-card.big .vf-src-dot{ display:none; }
.vf-src-card.big .vf-src-ic{
  font-family:'Material Symbols Rounded'; font-size:20px; line-height:1;
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--bg-alt); border:1px solid var(--border-light);
  color:var(--text); flex:none; font-variation-settings:'FILL' 0;
}
/* الاسمُ يلتفُّ ولا يُقَصُّ بنقاط: البطاقةُ صارت تسعُه */
.vf-src-card.big .vf-src-nm{
  font-size:15px; font-weight:800; line-height:1.35; letter-spacing:-.2px;
  white-space:normal; overflow:visible; text-overflow:clip; min-width:0;
}
.vf-src-card.big.hasacts .vf-src-nm{ padding-inline-end:62px; }
.vf-src-card.big .vf-src-ft{
  margin-top:auto; display:flex; align-items:center; gap:7px; width:100%;
  overflow:visible;
}
.vf-src-card.big .vf-src-dir{
  font-size:11px; font-weight:900; border-radius:999px; padding:3px 9px;
  background:var(--bg-alt); color:var(--text-muted); flex:none;
}
.vf-src-card.big .vf-src-dir.in { background:var(--success-bg); color:var(--success); }
.vf-src-card.big .vf-src-dir.out{ background:var(--danger-bg);  color:var(--danger);  }
.vf-src-card.big .vf-src-n{ margin-inline-start:auto; flex:none; }
/* الدبّوسُ والإخفاءُ يعتليانِ الزاويةَ فَلا يزاحمانِ الاسم */
.vf-src-card.big .vf-src-acts{
  position:absolute; inset-inline-end:8px; inset-block-start:8px;
  display:flex; gap:1px; overflow:visible;
}
/* المُختارُ يقلبُ ألوانَه كلَّها لا حاشيتَه وحدَها */
.vf-src-card.big.active .vf-src-ic{
  background:color-mix(in srgb, var(--on-primary) 14%, transparent); border-color:color-mix(in srgb, var(--on-primary) 22%, transparent); color:var(--on-primary);
}
.vf-src-card.big.active .vf-src-dir{ background:color-mix(in srgb, var(--on-primary) 17%, transparent); color:var(--on-primary); }
/* المُبعَدُ يُشطَبُ اسمُه وحدَه — لا أيقونتُه ولا شارتُه */
.vf-src-card.big.off > span:not(.vf-src-nm){ text-decoration:none; }

/* ── الشبكةُ: عمودانِ في الجوّالِ وخمسةٌ في الشاشةِ الكبيرة ── */
.vf-sources{ gap:10px; }
@media (max-width:560px){ .modal-full .vf-sources, .vf-sources{ grid-template-columns:repeat(2,1fr); gap:10px; } }
@media (min-width:561px) and (max-width:899px){ .modal-full .vf-sources, .vf-sources{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px){  .modal-full .vf-sources{ grid-template-columns:repeat(4,1fr); gap:13px; } }
@media (min-width:1300px){ .modal-full .vf-sources{ grid-template-columns:repeat(5,1fr); } }

/* ── العرضُ يتبعُ المحتوى لا الشاشة ──────────────────────────
   محطّةُ المصادرِ فيها خمسةَ عشرَ خياراً فَتحتاجُ عرضاً،
   ومحطّةُ المبلغِ فيها رقمٌ واحدٌ فَلا يليقُ بها أن تُمدَّ.
   والسقفُ القديمُ ٧٦٠ كان واحداً للثلاثِ — فَخسِرتِ الأولى
   واستوت الأخريان. */
@media (min-width:900px){
  .modal-full #vf-body.vf-stepped{ max-width:1180px; }
  .modal-full #vf-body.vf-stepped[data-cur="2"]{ max-width:1000px; }
  .modal-full #vf-body.vf-stepped[data-cur="3"]{ max-width:1100px; }
  .vf-steph{ font-size:26px; letter-spacing:-.8px; margin-bottom:4px; }
}
.vf-stepsub{ font-size:13px; font-weight:600; color:var(--text-muted); margin:0 0 11px; line-height:1.7; }
@media (min-width:900px){ .vf-stepsub{ font-size:13.5px; margin-bottom:13px; } }

/* ═══════════════════════════════════════════════════════════════
   🧾 المحطّةُ الرابعة — وثيقةُ القيدِ قبلَ الترحيل
   تُقرأُ كوثيقةٍ محاسبيّةٍ لا كبطاقةِ تطبيق: رأسٌ فيه الدفترُ والتاريخُ
   والمرجع، ثمّ جدولُ حساباتٍ بعمودَي مدينٍ ودائنٍ بأرقامٍ جدوليّةٍ
   لاتينيّةِ الاتّجاهِ فَلا ترقصُ الأعمدة، ثمّ مجموعٌ وسطرُ توازن.
   ═══════════════════════════════════════════════════════════════ */
#vf-confirm{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; }
.vc-head{ margin-bottom:16px; }
.vc-cols{ display:grid; grid-template-columns:1fr; gap:16px; align-items:start; }
@media (min-width:900px){ .vc-cols{ grid-template-columns:1.45fr 1fr; gap:24px; } }
.vc-dim{ opacity:.5; pointer-events:none; }

.vc-doc{ background:var(--surface); border:1px solid var(--border-strong);
  border-radius:14px; overflow:hidden; }
.vc-dh{ display:flex; gap:18px; flex-wrap:wrap; padding:13px 15px;
  background:var(--bg-alt); border-bottom:1px solid var(--border); }
.vc-dh span{ min-width:0; }
.vc-dh i{ font-style:normal; font-size:11px; font-weight:800;
  color:var(--text-muted); display:block; }
.vc-dh b{ font-size:13.5px; font-weight:900; margin-top:3px; display:block; }
.vc-dh b.ltr, .vc-code, .vc-n, .vc-mv{ direction:ltr; font-variant-numeric:tabular-nums; }
.vc-t{ width:100%; border-collapse:collapse; }
.vc-t thead th{ font-size:11.5px; font-weight:900; color:var(--text-muted);
  padding:9px 14px; border-bottom:1px solid var(--border); text-align:start; }
.vc-t th.vc-n, .vc-t td.vc-n{ text-align:end; width:118px; }
.vc-t tbody td{ padding:12px 14px; border-bottom:1px solid var(--border-light);
  font-size:13.5px; vertical-align:top; }
.vc-t tbody td.vc-n{ font-weight:800; font-size:14.5px; }
.vc-t tbody td.vc-n.z{ color:var(--text-disabled); font-weight:600; }
.vc-acc{ font-weight:800; }
.vc-acc.bad{ color:var(--danger); }
.vc-code{ display:inline-block; background:var(--bg-alt); border:1px solid var(--border);
  border-radius:5px; padding:0 5px; font-size:12px; margin-inline-end:6px; }
.vc-acc.bad .vc-code{ border-color:var(--danger); color:var(--danger); }
.vc-ln{ display:block; font-size:11.5px; font-weight:700; color:var(--text-muted); margin-top:4px; }
.vc-t tfoot td{ padding:12px 14px; font-size:13px; font-weight:900;
  background:var(--bg-alt); border-top:1px solid var(--border); }
.vc-t tfoot td.vc-n{ font-size:15px; }
.vc-bal{ padding:10px 15px; font-size:12.5px; font-weight:800;
  color:var(--success); background:var(--success-bg); border-top:1px solid var(--border); }

.vc-side{ background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:15px 16px; }
.vc-side h4{ margin:0 0 11px; font-size:12.5px; font-weight:900; color:var(--text-muted); }
.vc-sr{ display:flex; gap:10px; padding:9px 0; font-size:13.5px;
  border-bottom:1px solid var(--border-light); }
.vc-sr:last-child{ border-bottom:0; }
.vc-sr .k{ color:var(--text-muted); font-weight:700; flex:none; min-width:70px; }
.vc-sr .v{ font-weight:800; margin-inline-start:auto; text-align:end; min-width:0; }
.vc-sr .v.big{ font-size:17px; direction:ltr; font-variant-numeric:tabular-nums; }
.vc-sr .v.nb{ font-weight:700; }
.vc-thumb{ margin-top:12px; padding:14px; border-radius:10px; background:var(--bg-alt);
  border:1px dashed var(--border-strong); font-size:12px; font-weight:800;
  color:var(--text-muted); text-align:center; }

.vc-warn{ background:var(--warning-bg); border:1px solid var(--warning);
  border-radius:12px; padding:12px 14px; margin-bottom:16px; }
.vc-warn.bad{ background:var(--danger-bg); border-color:var(--danger); }
.vc-warn h5{ margin:0 0 5px; font-size:13.5px; font-weight:900; color:var(--warning-text); }
.vc-warn.bad h5{ color:var(--danger); }
.vc-warn p{ margin:0; font-size:12.5px; line-height:1.85; color:var(--text-muted); }
.vc-warn p.ltr{ direction:ltr; text-align:start; font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* التذييلُ يلتصقُ بالأسفلِ كما في بقيّةِ المحطّات */
.vc-foot{ flex:0 0 auto; margin-top:auto; position:sticky; bottom:0; z-index:6;
  margin-inline:-16px; background:var(--surface); border-top:1px solid var(--border); }
@media (min-width:900px){ .vc-foot{ margin-inline:-30px; } }
.vc-bar{ height:3px; background:var(--border-light); position:relative; }
.vc-fill{ position:absolute; inset-block:0; inset-inline-start:0; width:100%;
  background:var(--primary); transform-origin:inline-end; }
.vc-foot.warn .vc-fill{ background:var(--warning); }
.vc-fill.vc-run{ transform:scaleX(.45); animation:vcRun 1.1s ease-in-out infinite alternate; }
@keyframes vcRun{ from{ transform:scaleX(.25); } to{ transform:scaleX(.75); } }
.vc-fin{ max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:11px;
  padding:12px 16px; flex-wrap:wrap; }
@media (min-width:900px){ .vc-fin{ padding:13px 30px; flex-wrap:nowrap; } }
.vc-msg{ font-size:12.5px; font-weight:700; color:var(--text-muted); }
.vc-msg b{ color:var(--text); font-variant-numeric:tabular-nums; }
.vc-fin .vf-sbtn{ flex:0 0 auto; padding:0 20px; }
.vc-fin .vf-sbtn.pri{ margin-inline-start:auto; padding:0 28px; }

.vc-ok{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:11px; padding:56px 20px; text-align:center; }
.vc-ring{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  background:var(--success-bg); color:var(--success); font-size:30px; font-weight:900; }
.vc-ok h3{ margin:0; font-size:20px; font-weight:900; letter-spacing:-.5px; }
.vc-ok p{ margin:0; font-size:13.5px; color:var(--text-muted); line-height:1.9; }
.vc-mv{ display:inline-block; background:var(--bg-alt); border:1px solid var(--border-strong);
  border-radius:7px; padding:3px 9px; font-size:14px; font-weight:900; }

/* ═══════════════════════════════════════════════════════════════
   👁️ وضوحُ حوافِّ الخانات — المتجرُ تحتَ إضاءةٍ قويّة
   رفعتُ من قبلُ تباينَ النصِّ ونسيتُ الحواف: كان حدُّ الخانةِ عند
   1.42:1 على الأبيض، ومعيارُ WCAG لحوافِّ العناصرِ التفاعليّةِ 3:1 —
   أي أنّ الحدَّ كان دونَ نصفِ المطلوب، فَتختفي الخانةُ في الضوء.
   صارَ حدُّ كلِّ ما يُلمَسُ أو يُكتَبُ فيه --border-strong (3:1)،
   والفواصلُ الزخرفيّةُ وحدَها تبقى خفيفة.
   ═══════════════════════════════════════════════════════════════ */
.input, .select, .textarea, select, textarea,
input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="date"], input[type="search"], input[type="tel"],
.vf-src-card, .vf-bank-pill, .vf-crumb, .vf-sbtn, .vf-save,
.lx-proof-btn, .vf-more, .mx-btn, .btn{
  border-color:var(--border-strong);
}
/* الحدُّ يغلُظُ قليلاً في الخاناتِ الكتابيّةِ وحدَها: هي التي يُبحَثُ عنها بالعين */
.input, .select, .textarea, select, textarea,
input[type="text"], input[type="number"], input[type="date"], input[type="tel"]{
  border-width:1.5px;
}

/* ── شاشةُ المراجعةِ تملأُ الواجهةَ ولا يعلوها سؤالُ المحطّةِ السابقة ──
   الشريطُ يُخفى بصنفٍ على الجسمِ لأنّ قاعدتَه الأصليّةَ !important،
   والعمودانِ يمتدّانِ إلى آخرِ المساحةِ فَلا يبقى نصفُ الشاشةِ خاوياً. */
#vf-body.vf-confirming > #vf-stepbar{ display:none !important; }
/* ⚠️ التمديدُ لسطحِ المكتبِ وحدَه: هناك عمودانِ جنباً إلى جنبٍ فَيملأُ كلٌّ
   منهما الارتفاع. أمّا الجوّالُ فَعمودٌ واحدٌ والكتلتانِ فوقَ بعضِهما —
   ولو مدَّدتُ كلَّاً منهما إلى ١٠٠٪ لَصارَ الطولُ ضِعفَينِ وفاضَ عن الشاشة. */
@media (min-width:900px){
  #vf-confirm .vc-cols{ flex:1 1 auto; align-items:stretch; }
  #vf-confirm .vc-cols > *{ height:100%; }
}
#vf-confirm .vc-side{ display:flex; flex-direction:column; }
#vf-confirm .vc-thumb{ margin-top:auto; }
#vf-confirm #vf-entry-preview{ display:flex; flex-direction:column; }
#vf-confirm #vf-entry-preview > table{ flex:0 0 auto; }
/* وتكبيرٌ يسيرٌ لأنّ هذه شاشةُ مراجعةٍ لا حقلَ إدخالٍ في زاوية */
@media (min-width:900px){
  #vf-confirm #vf-entry-preview{ font-size:15px; }
  #vf-confirm .vc-sr{ font-size:14.5px; padding:11px 0; }
  #vf-confirm .vc-side h4{ font-size:13.5px; }
}
/* ═══════════════════════════════════════════════════════════════
   v2.css — الهوية 2 «حبرٌ على قماش» (خلفية بيضاء) + هيكل النظام الجديد
   ─────────────────────────────────────────────────────────────
   • الرموز معرَّفة على .v2-root حتى لا تمسّ صفحات الإصدار القديم أثناء البناء.
   • لا !important، لا ألوان ثابتة في الصفحات — متغيّرات فقط.
   • لا حركات لانهائية. كل حركة خلف prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */
.v2-root{
  --ink:#0E0E0E; --ink-2:#2B2B2B;
  --bg:#FFFFFF; --bg-alt:#F3F3F1; --surface:#FFFFFF; --surface-2:#FAFAF8;
  --border:#E3E3DF; --border-strong:#C8C8C2;
  --text:#111111; --text-muted:#6B6B66; --text-faint:#A3A39E; --text-disabled:#8A8A85;
  --primary:#0E0E0E; --on-primary:#FFFFFF; --primary-hover:#000000; --primary-bg:#F3F3F1;
  --success:#1E7F4F; --success-bg:#E6F4EC; --success-text:#155C3A;
  --warning:#A86B00; --warning-bg:#FFF4DC; --warning-text:#7A4E00;
  --danger:#B42318;  --danger-bg:#FDECEA;  --danger-text:#8A1B12;
  --info:#2D5FA6;    --info-bg:#E9F0FA;    --info-text:#214A83;
  --ring:0 0 0 3px rgba(14,14,14,.10);
  --shadow-sm:0 1px 2px rgba(10,10,10,.05); --shadow-md:0 10px 30px -14px rgba(10,10,10,.16); --shadow-lg:0 20px 50px -20px rgba(10,10,10,.24);
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px;
  --sb-w:248px; --top-h:56px; --bn-h:60px;
  --font:'Cairo',system-ui,-apple-system,sans-serif; --font-num:'Alexandria','Cairo',sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1); --dur:160ms;
  color:var(--text); background:var(--bg); font-family:var(--font); font-size:14.5px; line-height:1.55;
}
html[data-theme="dark"] .v2-root{
  --ink:#F2F2EF; --ink-2:#D6D6D2;
  --bg:#101010; --bg-alt:#171717; --surface:#181818; --surface-2:#1E1E1E;
  --border:#2A2A2A; --border-strong:#3A3A3A;
  --text:#EDEDEA; --text-muted:#9C9C96; --text-faint:#63635F; --text-disabled:#6E6E69;
  --primary:#F2F2EF; --on-primary:#0E0E0E; --primary-hover:#FFFFFF; --primary-bg:#1E1E1E;
  --success:#3FB273; --success-bg:#12281B; --success-text:#8FE0B4;
  --warning:#E0A23A; --warning-bg:#2C2210; --warning-text:#F0C77E;
  --danger:#E0574B;  --danger-bg:#2E1613;  --danger-text:#F3A199;
  --info:#6C9BE0;    --info-bg:#14213A;    --info-text:#A9C6F2;
  --ring:0 0 0 3px rgba(242,242,239,.14);
  --shadow-md:0 10px 30px -14px rgba(0,0,0,.6); --shadow-lg:0 20px 50px -20px rgba(0,0,0,.7);
}
.v2-root *, .v2-root *::before, .v2-root *::after{ box-sizing:border-box; }
.v2-root .num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; }
.v2-root a{ color:inherit; }
.v2-root .v2-ic{ width:18px; height:18px; flex:none; }
.v2-root :focus-visible{ outline:none; box-shadow:var(--ring); border-radius:var(--r-sm); }

/* ── التخطيط ── */
.v2-root{ min-height:100vh; min-height:100dvh; display:flex; }
.v2-sb{ width:var(--sb-w); flex:none; position:sticky; top:0; height:100vh; height:100dvh; display:flex; flex-direction:column;
  background:var(--surface); border-inline-start:1px solid var(--border); }
.v2-col{ flex:1; min-width:0; display:flex; flex-direction:column; }
.v2-top{ position:sticky; top:0; z-index:30; height:var(--top-h); display:flex; align-items:center; gap:10px; padding:0 20px;
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--border); }
.v2-crumb{ min-width:0; display:flex; align-items:center; gap:8px; flex:none; }
.v2-crumb-root{ font-size:13px; color:var(--text-muted); text-decoration:none; white-space:nowrap; } .v2-crumb-root:hover{ color:var(--text); }
.v2-crumb-sep{ color:var(--text-faint); }
.v2-crumb-title{ font-weight:800; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v2-search{ flex:1; display:flex; justify-content:center; position:relative; min-width:0; }
.v2-search-box{ display:flex; align-items:center; gap:8px; width:min(460px,100%); height:38px; padding:0 10px 0 8px; border:1px solid var(--border); border-radius:11px; background:var(--surface); color:var(--text-muted); cursor:text; }
.v2-search-box:focus-within{ border-color:var(--primary); box-shadow:var(--ring); }
.v2-search-ic .v2-ic{ width:17px; height:17px; }
.v2-search-box input{ flex:1; min-width:0; border:0; background:transparent; font:inherit; font-size:13.5px; color:var(--text); outline:none; }
.v2-search-box input::placeholder{ color:var(--text-faint); }
.v2-search-box input::-webkit-search-cancel-button{ display:none; }
.v2-search-box kbd{ font-family:var(--font-num); font-size:10.5px; color:var(--text-faint); border:1px solid var(--border); border-radius:6px; padding:1px 6px; }
.v2-search-list{ position:absolute; top:44px; inset-inline:0; margin:0 auto; width:min(460px,100%); background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); padding:6px; z-index:50; }
.v2-search-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; text-decoration:none; color:var(--text); font-size:13.5px; font-weight:600; }
.v2-search-item .v2-ic{ width:18px; height:18px; color:var(--text-muted); }
.v2-search-item small{ margin-inline-start:auto; color:var(--text-faint); font-size:11px; }
.v2-search-item.on, .v2-search-item:hover{ background:var(--bg-alt); }
.v2-search-empty{ padding:10px; color:var(--text-muted); font-size:13px; }
.v2-badge{ position:absolute; top:5px; inset-inline-end:5px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--danger); color:#fff; font-size:10px; font-weight:800; display:grid; place-items:center; font-family:var(--font-num); }
.v2-user{ position:relative; margin-inline-start:4px; }
.v2-user-btn{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 8px 0 10px; border:1px solid var(--border); border-radius:11px; background:var(--surface); color:var(--text); font:inherit; font-weight:700; font-size:13px; cursor:pointer; }
.v2-user-btn:hover{ background:var(--bg-alt); }
.v2-ic-sm{ width:14px; height:14px; color:var(--text-faint); }
.v2-menu{ position:absolute; top:44px; inset-inline-end:0; min-width:190px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); padding:6px; z-index:50; display:grid; }
.v2-menu a, .v2-menu button{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; text-decoration:none; color:var(--text); font:inherit; font-size:13.5px; font-weight:600; background:transparent; border:0; cursor:pointer; text-align:start; }
.v2-menu a:hover, .v2-menu button:hover{ background:var(--bg-alt); }
.v2-menu .v2-ic{ width:18px; height:18px; color:var(--text-muted); }
.v2-top-actions{ display:flex; align-items:center; gap:8px; }
.v2-main{ flex:1; padding:22px 24px 40px; }
.v2-only-m{ display:none; }
.v2-scrim{ display:none; }

/* ── القائمة الجانبية ── */
.v2-sb-top{ display:flex; align-items:center; gap:8px; padding:14px 14px 8px; }
.v2-sb-top .v2-brand-link{ flex:1; min-width:0; }
.v2-sb-toggle .v2-ic{ transition:transform 200ms var(--ease); }
.v2-sb-quick{ margin:6px 14px 4px; justify-content:center; height:44px; border-radius:12px; font-size:14px; }
.v2-sb-quick .v2-ic{ width:18px; height:18px; }
/* الطيّ: شريط أيقونات */
.sb-min .v2-sb{ width:68px; }
.sb-min .v2-brand-link span, .sb-min .v2-nav-label, .sb-min .v2-nav-title, .sb-min .v2-user-meta, .sb-min .v2-sb-quick span, .sb-min .v2-soon{ display:none; }
.sb-min .v2-sb-top{ flex-direction:column; padding:12px 8px 6px; }
.sb-min .v2-sb-toggle .v2-ic{ transform:rotate(180deg); }
.sb-min .v2-sb-quick{ margin:6px 12px 4px; width:44px; padding:0; }
.sb-min .v2-nav-item{ justify-content:center; padding:10px 0; }
.sb-min .v2-nav-group{ margin-top:4px; }
.sb-min .v2-sb-user{ justify-content:center; padding:12px 8px; }
.v2-brand-link{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); }
.v2-brand-link svg{ width:40px; height:40px; flex:none; color:var(--text); }
.v2-brand-link b{ display:block; font-size:15px; font-weight:800; line-height:1.15; }
.v2-brand-link small{ display:block; font-family:var(--font-num); font-size:9.5px; letter-spacing:.24em; color:var(--text-muted); margin-top:2px; }
.v2-sb-nav{ flex:1; overflow-y:auto; padding:6px 10px 10px; scrollbar-width:thin; }
.v2-nav-group{ margin-top:10px; }
.v2-nav-title{ font-size:11px; font-weight:800; letter-spacing:.06em; color:var(--text-faint); padding:8px 10px 4px; }
.v2-nav-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; text-decoration:none; color:var(--text-muted);
  font-weight:600; font-size:13.5px; position:relative; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.v2-nav-item:hover{ background:var(--bg-alt); color:var(--text); }
.v2-nav-item.on{ background:var(--primary); color:var(--on-primary); font-weight:700; }
.v2-nav-item .v2-ic{ width:20px; height:20px; flex:none; }
.v2-nav-label{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v2-nav-item.soon{ color:var(--text-disabled); }
.v2-nav-item.soon .v2-ic{ opacity:.55; }
.v2-soon{ width:7px; height:7px; border-radius:50%; border:1.5px solid var(--border-strong); flex:none; }
.v2-nav-item.on .v2-soon{ border-color:var(--on-primary); }
.v2-sb-user{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-top:1px solid var(--border); text-decoration:none; color:var(--text); }
.v2-sb-user:hover{ background:var(--bg-alt); }
.v2-avatar.sm{ width:30px; height:30px; border-radius:9px; font-size:12px; }
.v2-avatar{ width:36px; height:36px; border-radius:11px; background:var(--primary); color:var(--on-primary); display:grid; place-items:center;
  font-weight:800; font-size:13px; flex:none; }
.v2-user-meta{ flex:1; min-width:0; }
.v2-user-meta b{ display:block; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v2-user-meta small{ display:block; font-size:11.5px; color:var(--text-muted); }
.v2-ibtn{ position:relative; width:36px; height:36px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--text-muted); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; transition:background var(--dur), color var(--dur); }
.v2-ibtn:hover{ background:var(--bg-alt); color:var(--text); }
.v2-ibtn .v2-ic{ width:20px; height:20px; }

/* ── شريط الجوال + الدرج ── */
@media (max-width:899px){
  .v2-only-m{ display:inline-flex; }
  .v2-sb{ position:fixed; inset:0 0 0 auto; right:0; z-index:60; width:min(300px,86vw); transform:translateX(100%);
    transition:transform 220ms var(--ease); box-shadow:none; }
  .v2-sb.open{ transform:none; box-shadow:var(--shadow-lg); }
  .v2-scrim{ display:block; position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.35); }
  .v2-scrim[hidden]{ display:none; }
  .v2-top{ padding:0 10px; gap:6px; }
  .v2-crumb-root, .v2-crumb-sep, .v2-user-name, .v2-user-btn .v2-ic-sm, .v2-search, [data-act="refresh"], [data-act="theme"]{ display:none; }
  .v2-crumb{ flex:1; }
  .v2-user-btn{ padding:0 4px; border:0; }
  .v2-main{ padding:14px 14px calc(var(--bn-h) + 24px); }
  .v2-bn{ position:fixed; bottom:0; inset-inline:0; z-index:40; height:calc(var(--bn-h) + env(safe-area-inset-bottom,0)); padding-bottom:env(safe-area-inset-bottom,0);
    display:grid; grid-template-columns:repeat(5,1fr); background:var(--surface); border-top:1px solid var(--border); }
  .v2-bn-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-decoration:none; color:var(--text-muted);
    font-size:10.5px; font-weight:700; border:0; background:transparent; font-family:inherit; cursor:pointer; min-height:44px; }
  .v2-bn-item .v2-ic{ width:22px; height:22px; }
  .v2-bn-item.on{ color:var(--text); }
  .v2-bn-item.on .v2-ic{ stroke-width:2.2; }
  .v2-bn-item.soon{ color:var(--text-disabled); }
}
@media (min-width:900px){ .v2-bn{ display:none; } }

/* ── عناصر الصفحات ── */
.v2-page{ max-width:1180px; margin:0 auto; }
.v2-hero{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; }
.v2-hero h1{ margin:2px 0 4px; font-size:26px; font-weight:800; letter-spacing:-.3px; line-height:1.2; }
.v2-eyebrow{ font-size:11.5px; color:var(--text-muted); font-weight:600; letter-spacing:.04em; }
.v2-muted{ color:var(--text-muted); margin:0; font-size:13.5px; }
.v2-section{ margin-bottom:26px; }
.v2-h2{ font-size:13px; font-weight:800; color:var(--text-faint); letter-spacing:.06em; margin:0 0 10px; }
.v2-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.v2-tile{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface);
  text-decoration:none; color:var(--text); transition:transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur); }
.v2-tile:hover{ transform:translateY(-2px); border-color:var(--border-strong); box-shadow:var(--shadow-md); }
.v2-tile-ic{ width:42px; height:42px; border-radius:12px; background:var(--bg-alt); display:grid; place-items:center; flex:none; color:var(--text);
  transition:background var(--dur), color var(--dur); }
.v2-tile:hover .v2-tile-ic{ background:var(--primary); color:var(--on-primary); }
.v2-tile-ic .v2-ic{ width:22px; height:22px; }
.v2-tile-t b{ display:block; font-size:14.5px; font-weight:700; }
.v2-tile-t small{ display:block; font-size:12px; color:var(--text-muted); }
.v2-tile.soon{ color:var(--text-disabled); background:var(--surface-2); }
.v2-tile.soon .v2-tile-ic{ color:var(--text-disabled); }
.v2-tile.soon:hover{ transform:none; box-shadow:none; }
.v2-tile.soon:hover .v2-tile-ic{ background:var(--bg-alt); color:var(--text-disabled); }

.v2-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; }
.v2-btn{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; border:1px solid transparent; border-radius:var(--r-sm); padding:9px 16px; font:inherit; font-weight:700;
  font-size:13.5px; cursor:pointer; line-height:1.3; text-decoration:none; transition:background var(--dur), transform 120ms; }
.v2-btn:active{ transform:translateY(1px); }
.v2-btn-p{ background:var(--primary); color:var(--on-primary); } .v2-btn-p:hover{ background:var(--primary-hover); }
.v2-btn-s{ background:var(--surface); border-color:var(--border-strong); color:var(--text); } .v2-btn-s:hover{ background:var(--bg-alt); }
.v2-btn-g{ background:transparent; color:var(--text-muted); } .v2-btn-g:hover{ background:var(--bg-alt); color:var(--text); }
.v2-btn-d{ background:var(--danger-bg); color:var(--danger-text); }
.v2-pill{ display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:2px 10px; font-size:12px; font-weight:700; line-height:1.5; }
.v2-pill i{ width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; }
.v2-p-info{ background:var(--info-bg); color:var(--info-text); } .v2-p-ink{ background:var(--primary); color:var(--on-primary); }
.v2-p-warn{ background:var(--warning-bg); color:var(--warning-text); } .v2-p-ok{ background:var(--success-bg); color:var(--success-text); }
.v2-p-dng{ background:var(--danger-bg); color:var(--danger-text); } .v2-p-mut{ background:var(--bg-alt); color:var(--text-muted); }

/* قيد البناء */
.v2-ub{ max-width:520px; margin:48px auto; text-align:center; padding:34px 24px; border:1px dashed var(--border-strong); border-radius:var(--r-xl); }
.v2-ub .v2-ic{ width:44px; height:44px; color:var(--text-faint); }
.v2-ub h2{ margin:12px 0 4px; font-size:20px; font-weight:800; }
.v2-ub p{ margin:0 0 16px; color:var(--text-muted); font-size:13.5px; }

@media (max-width:899px){
  .v2-tiles{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .v2-tile{ gap:10px; padding:12px; }
  .v2-tile-ic{ width:38px; height:38px; }
  .v2-hero h1{ font-size:22px; }
}
/* آخر القواعد: إخفاء عناصر الجوال على سطح المكتب (أعلى من .v2-ibtn في الترتيب) */
@media (min-width:900px){ .v2-root .v2-only-m{ display:none; } }
@media (pointer:coarse){ .v2-root .v2-btn, .v2-root button, .v2-root select, .v2-root input:not([type=checkbox]):not([type=radio]){ min-height:44px; } }
@media (prefers-reduced-motion:reduce){ .v2-root *{ transition:none !important; animation:none !important; } }

/* ═══════════════════════════════════════════════════════════════
   الرئيسية — نفس تقسيم اللوحة القديمة (أقسام مكدّسة بعرض الصفحة) بالهوية 2
   ═══════════════════════════════════════════════════════════════ */
.v2-root{ --br-capitale:#B8891D; --br-banbla:#2F6FB5; --br-sand:#178F55; }
.v2-root .good{ color:var(--success-text); } .v2-root .bad{ color:var(--danger-text); }
.v2-root .sens{ filter:blur(7px); border-radius:4px; transition:filter 220ms var(--ease); }
body.reveal .v2-root .sens{ filter:blur(0); }

.v2-home{ display:flex; flex-direction:column; gap:16px; }
.v2-home .v2-hero{ display:flex; align-items:baseline; justify-content:flex-start; gap:12px; flex-wrap:wrap; margin:4px 0 0; }
.v2-home .v2-hero h1{ margin:0; font-size:24px; font-weight:800; letter-spacing:-.4px; }
.v2-home .v2-eyebrow{ font-size:13px; font-weight:600; color:var(--text-muted); letter-spacing:0; }
.v2-quick{ display:flex; gap:10px; flex-wrap:wrap; }
.v2-quick .v2-btn{ padding:11px 18px; font-size:14px; font-weight:800; border-radius:12px; }
.v2-home-grid{ display:flex; flex-direction:column; gap:16px; }

/* قسم موحّد: بطاقة بيضاء بحدّ ناعم وعلامة حبر قصيرة في أعلى البداية — كطابع المطبعة */
.v2-sec{ position:relative; padding:14px 16px 16px; }
.v2-sec::before{ content:""; position:absolute; top:0; inset-inline-start:0; width:34px; height:2px; background:var(--primary); border-radius:2px; }
.v2-sec-h{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.v2-sec-h h2{ margin:0; font-size:15.5px; font-weight:800; flex:1; }
.v2-sec-sub{ font-weight:500; color:var(--text-muted); font-size:12.5px; }
.v2-sec-ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; }
.v2-sec-ic .v2-ic{ width:18px; height:18px; }
.v2-sec-ic.info{ background:var(--info-bg); color:var(--info); } .v2-sec-ic.ok{ background:var(--success-bg); color:var(--success-text); }
.v2-sec-ic.warn{ background:var(--warning-bg); color:var(--warning-text); } .v2-sec-ic.ink{ background:var(--bg-alt); color:var(--text); }
.v2-sec-tools{ display:flex; align-items:center; gap:8px; }
.v2-sec-tools .v2-ibtn{ border-color:var(--border); }
.v2-seg{ display:inline-flex; border:1px solid var(--border); border-radius:10px; padding:3px; background:var(--surface); }
.v2-seg button{ border:0; background:transparent; color:var(--text-muted); font:inherit; font-weight:700; font-size:13px; padding:5px 12px; border-radius:7px; cursor:pointer; }
.v2-seg button.on{ background:var(--primary); color:var(--on-primary); }
.v2-select{ height:36px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); font:inherit; font-weight:700; font-size:13px; padding:0 10px; }
.v2-link{ text-decoration:none; color:inherit; display:block; }
.v2-link:hover{ border-color:var(--border-strong); }
.v2-chev{ color:var(--text-faint); display:inline-flex; } .v2-chev .v2-ic{ width:18px; height:18px; }
.v2-loading{ display:flex; align-items:center; gap:10px; color:var(--text-muted); font-size:13px; padding:10px 2px; min-height:44px; }
.v2-spin{ width:18px; height:18px; border-radius:50%; border:2px solid var(--border-strong); border-top-color:var(--primary); animation:v2spin .9s linear infinite; }
@keyframes v2spin{ to{ transform:rotate(360deg); } }
.v2-dim{ color:var(--text-muted); font-size:13px; padding:8px 2px; }
.v2-dim.small{ font-size:12px; padding:6px 2px 0; }

/* الرقم السيّد */
.v2-hn{ padding:4px 2px 2px; }
.v2-hn-l{ font-size:12px; font-weight:700; color:var(--text-muted); }
.v2-hn-v{ text-align:start; font-size:38px; font-weight:700; letter-spacing:-1px; line-height:1.15; margin-top:2px; }
.v2-hn-z{ font-size:19px; font-weight:800; color:var(--text-muted); margin-top:4px; }
.v2-hn-m{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:7px; }
.v2-hn-i{ font-size:12.5px; font-weight:700; color:var(--text-muted); }
.v2-hn-p{ margin-top:9px; font-size:12.5px; color:var(--text-muted); font-weight:600; }
.v2-hn-p b{ color:var(--text); font-weight:800; }
.v2-sep{ margin:0 7px; opacity:.45; }

/* حصص الفروع */
.v2-brs{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.v2-br{ display:flex; flex-direction:column; gap:8px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface); text-align:start; font:inherit; color:var(--text); cursor:pointer; transition:transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur); }
.v2-br:hover{ transform:translateY(-2px); border-color:var(--border-strong); box-shadow:var(--shadow-md); }
.v2-br-h{ display:flex; align-items:center; gap:8px; }
.v2-br-h b{ font-size:14px; font-weight:800; } .v2-br-h small{ color:var(--text-muted); font-size:12px; flex:1; }
.v2-br-v{ font-weight:800; font-size:14px; }
.v2-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.v2-br-bar{ display:block; height:7px; border-radius:99px; background:var(--bg-alt); overflow:hidden; }
.v2-br-bar i{ display:block; height:100%; border-radius:99px; }
.v2-br-sh{ font-size:12px; color:var(--text-muted); font-weight:600; }

/* الاتجاه */
.v2-trend{ margin-top:14px; }
.v2-trend svg{ width:100%; height:54px; display:block; }
.v2-trend-x{ display:flex; justify-content:space-between; font-size:12px; color:var(--text-muted); font-weight:600; margin-top:4px; }
.v2-trend-x .good, .v2-trend-x .bad{ font-weight:800; }

/* المال */
.v2-liq{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; border-radius:12px; background:var(--success-bg); color:var(--success-text); font-weight:700; font-size:13.5px; margin-bottom:12px; }
.v2-liq span{ display:inline-flex; align-items:center; gap:8px; } .v2-liq .v2-ic{ width:16px; height:16px; }
.v2-liq strong{ font-size:18px; font-weight:800; }
.v2-money{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.v2-group{ border:1px solid var(--border); border-radius:12px; padding:12px 13px; background:var(--surface-2); }
.v2-group + .v2-group{ margin-top:10px; }
.v2-group-t{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; margin-bottom:10px; }
.v2-group-t .v2-ic{ width:16px; height:16px; color:var(--text-muted); }
.v2-mini{ margin-inline-start:auto; font-size:12px; font-weight:700; color:var(--text-muted); text-decoration:none; }
.v2-mini:hover{ color:var(--text); }
.v2-bxs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.v2-bxs.four{ grid-template-columns:repeat(4,1fr); }
.v2-bx{ display:grid; grid-template-columns:auto 1fr; grid-template-areas:"ic name" "val val"; column-gap:8px; row-gap:4px; align-items:center; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.v2-bi{ grid-area:ic; width:24px; height:24px; border-radius:7px; display:grid; place-items:center; }
.v2-bi .v2-ic{ width:14px; height:14px; }
.v2-bi.mut{ background:var(--bg-alt); color:var(--text-muted); } .v2-bi.info{ background:var(--info-bg); color:var(--info); } .v2-bi.ink{ background:var(--bg-alt); color:var(--text); }
.v2-bi.ok{ background:var(--success-bg); color:var(--success-text); } .v2-bi.warn{ background:var(--warning-bg); color:var(--warning-text); }
.v2-bxn{ grid-area:name; font-size:12.5px; font-weight:700; color:var(--text-muted); }
.v2-bv{ grid-area:val; font-size:15px; font-weight:800; }
.v2-total{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); font-size:13px; font-weight:700; color:var(--text-muted); }
.v2-total strong{ color:var(--text); font-size:15px; }

/* المصاريف والشريك */
.v2-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-bottom:10px; }
.v2-kpi{ border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--surface); }
.v2-kpi small{ display:block; font-size:12px; font-weight:700; color:var(--text-muted); }
.v2-kpi b{ display:block; font-size:20px; font-weight:800; margin-top:2px; }
.v2-kpi span{ display:block; font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.v2-row{ display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--border); }
.v2-row:last-of-type{ border-bottom:0; }
.v2-row-n{ width:120px; font-size:13px; font-weight:700; }
.v2-row-bar{ flex:1; height:8px; border-radius:99px; background:var(--bg-alt); overflow:hidden; }
.v2-row-bar i{ display:block; height:100%; border-radius:99px; background:var(--warning); }
.v2-row-v{ font-weight:800; flex:none; } .v2-row-p{ width:40px; text-align:end; font-size:12px; font-weight:800; color:var(--text-muted); }
.v2-shift{ text-align:center; padding:6px 0 8px; }
.v2-shift small{ display:block; font-size:12px; color:var(--text-muted); font-weight:600; }
.v2-shift strong{ font-size:32px; font-weight:800; letter-spacing:-.5px; }

@media (max-width:640px){
  .v2-brs{ grid-template-columns:1fr; } .v2-money{ grid-template-columns:1fr; } .v2-bxs.four{ grid-template-columns:1fr 1fr; }
  .v2-home .v2-hero h1{ font-size:21px; } .v2-quick .v2-btn{ flex:1; justify-content:center; }
  .v2-row-n{ width:96px; }
}

/* بطاقة ربط الوسيط */
.v2-setup{ border-color:var(--warning); }
.v2-setup-form{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.v2-input{ flex:1; min-width:220px; height:44px; border:1px solid var(--border-strong); border-radius:10px; padding:0 12px; font:inherit; font-family:var(--font-num); background:var(--surface); color:var(--text); direction:ltr; }
.v2-input:focus{ outline:none; border-color:var(--primary); box-shadow:var(--ring); }
/* المخفي مخفي — أعلى تخصيصاً من قواعد display للمكوّنات */
.v2-root [hidden]{ display:none; }

/* ════════════════════════════════════════════════════════════════
   التلميحات — .v2-tip  (بديلُ title= الأصليّة)
   ──────────────────────────────────────────────────────────────
   ⚠️ ما كانَ قبلَها: تلميحُ المتصفِّحِ نفسِه (title=). وهو أربعةُ عيوبٍ في
      صندوقٍ واحد: لا يعرِفُ ألوانَنا ولا خطَّنا فَيَشُذُّ عن كلِّ ما حولَه،
      ويظهرُ بعدَ ثانيةٍ كاملةٍ عندَ طرَفِ المؤشِّرِ لا عندَ الزرِّ الذي وُصِفَ،
      ويبقى أبيضَ في الوضعِ الليليّ، ولا يظهرُ باللمسِ أصلاً.
   ــ وهو عنصرٌ **واحدٌ** للنظامِ كلِّه يُنقَلُ ولا يُستنسَخ، ومُعلَّقٌ على
      <body> لا داخلَ القائمة — لأنّ ‎.v2-sb-nav‎ لها ‎overflow-y:auto‎
      فَتقُصُّ كلَّ ما خرجَ عن حدِّها، وتلميحُ الشريطِ المطويِّ خارجٌ عنه
      بطبيعتِه. (جرّبتُ ‎::after‎ داخلَ العنصرِ فَانقَصَّ نصفُه.)
   ــ ولونُهُ من ‎--primary/--on-primary‎: حبرٌ على قماشٍ نهاراً، وينقلبُ
      وحدَه ليلاً بلا قاعدةٍ ثانية.
   ════════════════════════════════════════════════════════════════ */
.v2-tip{
  position:fixed; z-index:2000; pointer-events:none;
  max-width:260px; padding:6px 10px; border-radius:9px;
  background:var(--primary); color:var(--on-primary);
  font-family:inherit; font-size:12px; font-weight:700; line-height:1.5;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  box-shadow:var(--shadow-md);
  opacity:0; transform:translateY(-3px);
  transition:opacity 130ms var(--ease), transform 130ms var(--ease);
}
.v2-tip.side{ transform:translateX(3px); }
.v2-tip.on{ opacity:1; transform:none; }
.v2-tip .k{ font-family:var(--font-num); font-weight:800; opacity:.6; margin-inline-start:7px; }
@media (prefers-reduced-motion:reduce){ .v2-tip{ transition:opacity 60ms linear; transform:none; } }
/* ═══════════════════════════════════════════════════════════════
   طلبات أونلاين — الهوية 2 «حبرٌ على قماش»
   نطاق: .ord2 (داخل .v2-root فتُرث الرموز من v2.css)
   المنطق في src/pages/Orders/Orders.js لم يتغيّر — هذا الملف مظهرٌ فقط.
   ═══════════════════════════════════════════════════════════════ */
.ord2{ display:flex; flex-direction:column; gap:16px; max-width:1180px; margin:0 auto; }
.ord2 *, .ord2 *::before, .ord2 *::after{ box-sizing:border-box; }
.ord2 .num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; }
.ord2 label{ display:block; font-size:12.5px; font-weight:700; color:var(--text-muted); line-height:20px; }

/* ── الحقول ── */
.ord2 .o-inp, .ord2 .o-sel, .ord2 .o-ta{
  display:block; width:100%; min-height:44px; margin-top:6px; padding:0 13px; font:inherit; font-size:14px; font-weight:600; color:var(--text);
  background:var(--surface); border:1px solid var(--border-strong); border-radius:10px; transition:border-color var(--dur), box-shadow var(--dur);
}
.ord2 .o-ta{ padding:10px 13px; min-height:88px; resize:vertical; line-height:1.7; }
.ord2 .o-inp:focus, .ord2 .o-sel:focus, .ord2 .o-ta:focus{ outline:none; border-color:var(--primary); box-shadow:var(--ring); }
.ord2 .o-inp::placeholder{ color:var(--text-faint); font-weight:500; }
.ord2 .o-inp[type=number], .ord2 .o-inp[dir=ltr]{ font-family:var(--font-num); }
.ord2 .o-inp.sm{ min-height:38px; width:auto; margin:0; }
.ord2 .o-inline{ display:inline-flex; align-items:center; gap:8px; margin:0; }

/* ── الأزرار الصغيرة ── */
.ord2 .v2-btn.sm{ padding:6px 12px; font-size:12.5px; border-radius:8px; }
.ord2 .v2-btn.sm .v2-ic{ width:15px; height:15px; }
.ord2 .v2-btn .v2-ic{ width:16px; height:16px; }
.ord2 .v2-btn:disabled{ opacity:.5; cursor:not-allowed; }
.ord2 .v2-btn-d{ border-color:transparent; }

/* ── الرأس ── */
.o-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:4px 2px 0; }
.o-head h1{ margin:0 0 4px; font-size:24px; font-weight:800; letter-spacing:-.4px; line-height:1.2; }
.o-head p{ margin:0; color:var(--text-muted); font-size:13.5px; }
.o-kpi{ display:flex; align-items:center; gap:14px; padding:12px 16px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); min-width:260px; }
.o-kpi-ic{ width:40px; height:40px; border-radius:12px; background:var(--success-bg); color:var(--success-text); display:grid; place-items:center; flex:none; }
.o-kpi-ic .v2-ic{ width:20px; height:20px; }
.o-kpi small{ display:block; font-size:11.5px; color:var(--text-muted); font-weight:600; }
.o-kpi b{ display:block; font-size:22px; font-weight:800; line-height:1.2; letter-spacing:-.3px; }
.o-kpi em{ display:block; font-style:normal; font-size:11.5px; color:var(--text-faint); font-weight:600; }
.o-kpi em strong{ color:var(--warning-text); font-weight:700; }

/* ── التبويبات: شريط مقسّم بعرض الصفحة ── */
.o-tabs{ display:flex; gap:4px; padding:4px; border:1px solid var(--border); border-radius:14px; background:var(--bg-alt); overflow-x:auto; scrollbar-width:none; }
.o-tabs::-webkit-scrollbar{ display:none; }
.o-tab{ display:inline-flex; align-items:center; gap:8px; flex:1; justify-content:center; white-space:nowrap; border:0; background:transparent; color:var(--text-muted);
  font:inherit; font-size:13.5px; font-weight:700; padding:9px 14px; border-radius:10px; cursor:pointer; transition:background var(--dur), color var(--dur); }
.o-tab:hover{ color:var(--text); }
.o-tab.on{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
.o-tab .v2-ic{ width:17px; height:17px; }
.o-tab .o-n{ font-family:var(--font-num); font-size:11px; font-weight:800; min-width:20px; padding:1px 6px; border-radius:999px; background:var(--primary); color:var(--on-primary); }
.o-tab:not(.on) .o-n{ background:var(--border-strong); color:var(--text); }

/* ── بطاقة عامّة ── */
.o-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; }
.o-card.tight{ padding:0; overflow:hidden; }
.o-card-h{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.o-card-h h2, .o-card-h h3{ margin:0; font-size:15px; font-weight:800; flex:1; }
.o-card-h .o-sub{ font-weight:500; color:var(--text-muted); font-size:12.5px; }
.o-card-ic{ width:34px; height:34px; border-radius:10px; background:var(--bg-alt); color:var(--text); display:grid; place-items:center; flex:none; }
.o-card-ic .v2-ic{ width:18px; height:18px; }
.o-card-ic.ok{ background:var(--success-bg); color:var(--success-text); }
.o-card-ic.warn{ background:var(--warning-bg); color:var(--warning-text); }
.o-card-ic.info{ background:var(--info-bg); color:var(--info-text); }

/* ── لوحة روابط العروض (details) ── */
.o-offers{ border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); }
.o-offers summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:14px 18px; }
.o-offers summary::-webkit-details-marker{ display:none; }
.o-offers summary b{ font-size:14.5px; font-weight:800; }
.o-offers summary .o-sub{ color:var(--text-muted); font-size:12.5px; font-weight:500; flex:1; }
.o-offers summary .o-chev{ color:var(--text-faint); transition:transform var(--dur) var(--ease); display:inline-flex; }
.o-offers[open] summary .o-chev{ transform:rotate(180deg); }
.o-offers[open] summary{ border-bottom:1px solid var(--border); }
.o-offers-b{ padding:16px 18px 18px; }
.o-offers-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin-top:14px; }
.o-offer{ border:1px solid var(--border); border-radius:12px; padding:11px 12px; background:var(--surface-2); display:flex; flex-direction:column; gap:9px; }
.o-offer b{ font-size:13px; font-weight:700; }
.o-offer-acts{ display:flex; gap:6px; }
.o-offer-acts button{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:5px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text);
  font:inherit; font-size:12px; font-weight:700; padding:6px 8px; border-radius:8px; cursor:pointer; min-height:34px; transition:background var(--dur); }
.o-offer-acts button:hover{ background:var(--bg-alt); }
.o-offer-acts button.wa{ background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
.o-offer-acts button .v2-ic{ width:14px; height:14px; }

/* ── شريط النصيحة ── */
.o-tip{ display:flex; align-items:center; gap:12px; padding:11px 16px; border:1px solid var(--border); border-radius:14px; background:var(--surface-2); }
.o-tip-ic{ width:32px; height:32px; border-radius:9px; background:var(--warning-bg); color:var(--warning-text); display:grid; place-items:center; flex:none; }
.o-tip-ic .v2-ic{ width:17px; height:17px; }
.o-tip-t{ flex:1; min-width:0; }
.o-tip-t small{ display:block; font-size:11.5px; font-weight:700; color:var(--warning-text); }
.o-tip-t span{ display:block; font-size:13px; font-weight:600; color:var(--text); }
.o-tip-dots{ display:flex; gap:4px; flex:none; }
.o-tip-dots i{ width:6px; height:6px; border-radius:50%; background:var(--text); opacity:.22; display:block; transition:opacity 220ms; }

/* ── الاستقبال: عمودان ── */
.o-intake{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:16px; align-items:start; }
.o-intake > .o-main{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.o-intake > .o-side{ position:sticky; top:calc(var(--top-h) + 14px); display:flex; flex-direction:column; gap:14px; }
/* الجوال: الملخّص وزرّ التسجيل مباشرةً تحت النموذج — لا بعد قائمة الطلبات */
@media (max-width:1023px){
  .o-intake{ grid-template-columns:1fr; }
  .o-intake > .o-main{ display:contents; }
  .o-intake > .o-side{ position:static; order:1; }
  .o-intake .o-recent{ order:2; }
}

/* اختيار نوع الطلب — ثلاث بطاقات */
.o-types{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.o-type{ display:flex; align-items:center; gap:11px; text-align:start; border:1px solid var(--border); background:var(--surface); border-radius:14px; padding:11px 13px; cursor:pointer; font:inherit; color:var(--text);
  transition:border-color var(--dur), background var(--dur), box-shadow var(--dur); }
.o-type:hover{ border-color:var(--border-strong); }
.o-type.on{ border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary); }
.o-type-ic{ width:38px; height:38px; border-radius:11px; background:var(--bg-alt); display:grid; place-items:center; flex:none; color:var(--text); }
.o-type.on .o-type-ic{ background:var(--primary); color:var(--on-primary); }
.o-type-ic .v2-ic{ width:19px; height:19px; }
.o-type b{ display:block; font-size:13.5px; font-weight:800; }
.o-type small{ display:block; font-size:11.5px; color:var(--text-muted); font-weight:500; }
@media (max-width:640px){ .o-types{ grid-template-columns:1fr; gap:8px; } }

.o-note{ display:flex; gap:10px; align-items:flex-start; padding:11px 13px; border-radius:12px; font-size:12.5px; font-weight:600; line-height:1.7; }
.o-note .v2-ic{ width:16px; height:16px; flex:none; margin-top:3px; }
.o-note.info{ background:var(--info-bg); color:var(--info-text); }
.o-note.ok{ background:var(--success-bg); color:var(--success-text); }
.o-note.warn{ background:var(--warning-bg); color:var(--warning-text); }
.o-note.dng{ background:var(--danger-bg); color:var(--danger-text); }

.o-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.o-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:640px){ .o-grid2, .o-grid3{ grid-template-columns:1fr; } }
.o-field{ position:relative; }
.o-field .o-ic{ position:absolute; inset-inline-start:12px; top:39px; color:var(--text-faint); pointer-events:none; display:inline-flex; }
.o-field .o-ic .v2-ic{ width:18px; height:18px; }
.o-field.has-ic .o-inp{ padding-inline-start:38px; }
.o-tag{ display:inline-flex; align-items:center; gap:5px; margin-top:6px; font-size:12px; font-weight:700; color:var(--success-text); }
.o-tag .v2-ic{ width:14px; height:14px; }

/* قوائم النتائج المنسدلة (زبون/منتج) */
.o-pop{ position:absolute; z-index:30; inset-inline:0; top:100%; margin-top:4px; background:var(--surface); border:1px solid var(--border-strong); border-radius:12px; max-height:280px; overflow:auto; box-shadow:var(--shadow-lg); display:none; }
.o-opt{ display:flex; align-items:center; gap:10px; padding:9px 12px; cursor:pointer; border-bottom:1px solid var(--border); font-size:13px; }
.o-opt:last-child{ border-bottom:0; }
.o-opt:hover{ background:var(--bg-alt); }
.o-opt b{ font-weight:700; }
.o-opt .o-dim{ color:var(--text-muted); font-size:12px; }
.o-opt img, .o-opt .o-ph{ width:36px; height:36px; border-radius:8px; border:1px solid var(--border); object-fit:cover; flex:none; background:var(--bg-alt); }
.o-pop-msg{ padding:11px 12px; color:var(--text-muted); font-size:13px; }
.o-pop-msg.dng{ color:var(--danger-text); }

/* المنتج المختار قبل الإضافة */
.o-pend{ margin-top:12px; border:1px solid var(--primary); border-radius:14px; padding:14px; background:var(--surface); }
.o-pend-h{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.o-pend-h b{ flex:1; font-size:14px; font-weight:800; }
.o-pend-h .o-code{ font-family:var(--font-num); font-size:12px; color:var(--text-muted); }
.o-pend-row{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.o-pend-row label{ margin:0; }
.o-pend-row .o-inp{ width:120px; }
.o-avail{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px; }
.o-av{ display:flex; flex-direction:column; gap:1px; min-width:108px; border:1px solid var(--border); border-radius:10px; padding:7px 11px; text-align:center; background:var(--surface-2); }
.o-av b{ font-size:12px; font-weight:700; }
.o-av span{ font-size:12px; font-weight:600; color:var(--text-muted); }
.o-av.has{ border-color:var(--success); background:var(--success-bg); } .o-av.has span{ color:var(--success-text); }
.o-av.out span{ color:var(--danger-text); }
.o-reward{ font-size:12px; font-weight:700; color:var(--success-text); }
.o-reward.dim{ color:var(--text-muted); font-weight:600; }

/* ملخّص الطلب (العمود الجانبي) */
.o-cart-list{ display:flex; flex-direction:column; gap:8px; }
.o-ci{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); }
.o-ci-ic{ width:30px; height:30px; border-radius:8px; background:var(--bg-alt); color:var(--text); display:grid; place-items:center; flex:none; }
.o-ci-ic .v2-ic{ width:15px; height:15px; }
.o-ci-t{ flex:1; min-width:0; }
.o-ci-t b{ display:block; font-size:13px; font-weight:700; }
.o-ci-t small{ display:block; font-size:11.5px; color:var(--text-muted); font-weight:500; line-height:1.6; }
.o-ci-x{ border:0; background:transparent; color:var(--text-faint); cursor:pointer; padding:4px; border-radius:6px; display:grid; place-items:center; }
.o-ci-x:hover{ background:var(--danger-bg); color:var(--danger-text); }
.o-ci-x .v2-ic{ width:15px; height:15px; }
.o-cart-empty{ text-align:center; padding:22px 12px; color:var(--text-muted); font-size:12.5px; line-height:1.8; border:1px dashed var(--border-strong); border-radius:12px; }
.o-cart-empty .v2-ic{ width:26px; height:26px; color:var(--text-faint); margin-bottom:6px; }
.o-cart-tot{ display:flex; justify-content:space-between; align-items:baseline; padding:12px 2px 0; margin-top:4px; border-top:1px solid var(--border); font-size:13px; font-weight:700; }
.o-cart-tot b{ font-size:17px; font-weight:800; }
.o-cart-acts{ display:flex; gap:8px; margin-top:12px; }
.o-cart-acts .v2-btn{ justify-content:center; }
.o-cart-acts .v2-btn-p{ flex:1; padding:12px 16px; font-size:14px; font-weight:800; border-radius:12px; }
.o-plan{ margin-top:10px; }
.o-plan-part{ display:flex; gap:8px; font-size:12px; padding:3px 0; }
.o-plan-part b{ flex:none; }

/* ── قسم بعنوان + عدّاد ── */
.o-sec-h{ display:flex; align-items:center; gap:10px; margin:4px 0 10px; }
.o-sec-h h3{ margin:0; font-size:14.5px; font-weight:800; }
.o-sec-h .o-count{ font-family:var(--font-num); font-size:11.5px; font-weight:800; padding:1px 8px; border-radius:999px; background:var(--bg-alt); color:var(--text-muted); border:1px solid var(--border); }
.o-sec-h .o-count.hot{ background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
.o-sec-h .o-spacer{ flex:1; }
.o-empty{ text-align:center; padding:18px 12px; color:var(--text-muted); font-size:12.5px; border:1px dashed var(--border); border-radius:12px; }
.o-empty.big{ padding:38px 16px; }
.o-empty .v2-ic{ width:30px; height:30px; color:var(--text-faint); margin-bottom:6px; }
.o-empty b{ display:block; font-size:14px; color:var(--text); margin-bottom:2px; }

/* ── بطاقة طلب ── */
.o-orders{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:12px; }
@media (max-width:640px){ .o-orders{ grid-template-columns:1fr; } }
.ord{ position:relative; display:flex; flex-direction:column; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px 16px 14px; transition:border-color var(--dur), box-shadow var(--dur); }
.ord:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-md); }
.ord::before{ content:""; position:absolute; top:14px; bottom:14px; inset-inline-start:-1px; width:3px; border-radius:0 3px 3px 0; background:var(--border-strong); }
.ord.pending::before{ background:var(--warning); } .ord.ready::before{ background:var(--info); } .ord.done::before{ background:var(--success); } .ord.cancelled::before{ background:var(--danger); }
.ord.cancelled{ opacity:.7; }
.ord-top{ display:flex; align-items:flex-start; gap:11px; }
.ord-av{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:none; background:var(--bg-alt); color:var(--text); }
.ord-av.mfg{ background:var(--info-bg); color:var(--info-text); }
.ord-av .v2-ic{ width:19px; height:19px; }
.ord-cust{ flex:1; min-width:0; }
.ord-cust b{ font-size:14.5px; font-weight:800; }
.ord-ph{ font-family:var(--font-num); font-size:12px; color:var(--text-muted); font-weight:600; white-space:nowrap; }
.ord-meta{ display:block; font-size:11.5px; color:var(--text-muted); font-weight:600; margin-top:1px; }
.ord-items{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:8px 12px; font-size:13px; font-weight:600; display:flex; flex-direction:column; gap:3px; }
.ord-items > div{ display:flex; gap:8px; }
.ord-items > div::before{ content:"•"; color:var(--text-faint); }
.ord-note{ font-size:12px; color:var(--text-muted); }
.ord-inc{ font-size:12px; color:var(--text-muted); font-weight:600; }
.ord-inc strong{ color:var(--success-text); }
.ord-inv{ font-size:12px; color:var(--success-text); font-weight:700; display:flex; align-items:center; gap:5px; }
.ord-inv .v2-ic{ width:15px; height:15px; }
.ord-acts{ display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; margin-top:auto; padding-top:4px; }
.ord .v2-pill{ flex:none; }

/* ── تقارير ── */
.o-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; }
.o-kpi2{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:13px 15px; }
.o-kpi2 small{ display:block; font-size:12px; color:var(--text-muted); font-weight:600; }
.o-kpi2 b{ display:block; font-size:21px; font-weight:800; letter-spacing:-.4px; margin-top:2px; }
.o-kpi2 b.ok{ color:var(--success-text); } .o-kpi2 b.info{ color:var(--info-text); }
.o-rep-cols{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:760px){ .o-rep-cols{ grid-template-columns:1fr; } }
.o-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; }
.o-row:last-child{ border-bottom:0; }
.o-row .o-lbl{ min-width:64px; font-weight:700; }
.o-row .o-bar{ flex:1; height:6px; border-radius:3px; background:var(--bg-alt); overflow:hidden; }
.o-row .o-bar i{ display:block; height:100%; background:var(--primary); border-radius:3px; }
.o-row .o-val{ font-family:var(--font-num); font-weight:800; }
.o-row .o-grow{ flex:1; min-width:0; }
.o-row .o-grow small{ display:block; color:var(--text-muted); font-size:12px; font-weight:500; }
.o-rank{ width:30px; height:30px; border-radius:9px; background:var(--bg-alt); color:var(--text); display:grid; place-items:center; font-weight:800; flex:none; }
.o-rank.top{ background:var(--primary); color:var(--on-primary); }

/* ── مكتملة / كوبون ── */
.o-done{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.o-done-r{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.o-done-acts{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.o-done-meta{ font-size:12px; color:var(--text-muted); margin-top:2px; }
.o-done-st{ display:flex; align-items:center; gap:6px; margin-top:6px; flex-wrap:wrap; }

/* ── طلبات الموقع ── */
.wo-bar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:12px 16px; }
.wo-bar2{ padding-top:0; gap:7px; }
.wo-search{ position:relative; flex:1; min-width:200px; }
.wo-search .o-ic{ position:absolute; inset-inline-start:12px; top:50%; transform:translateY(-50%); color:var(--text-faint); pointer-events:none; display:inline-flex; }
.wo-search .o-inp{ margin:0; padding-inline-start:38px; font-family:var(--font-num); }
.wo-f{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); background:transparent; color:var(--text-muted); border-radius:999px;
  padding:5px 12px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; transition:background var(--dur), color var(--dur), border-color var(--dur); }
.wo-f:hover{ background:var(--bg-alt); }
.wo-f.on{ background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
.wo-f .wo-n{ font-family:var(--font-num); font-size:11.5px; opacity:.7; font-weight:800; }
.wo-live{ margin-inline-start:auto; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-faint); white-space:nowrap; font-weight:600; }
.wo-live i{ width:7px; height:7px; border-radius:50%; background:var(--success); display:inline-block; }
.wo-note{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-muted); }
.wo-link{ border:0; background:none; padding:0; font:inherit; font-weight:800; color:var(--text); cursor:pointer; text-decoration:underline; }
.wo-err{ margin:0 16px 12px; padding:10px 12px; border-radius:10px; background:var(--danger-bg); color:var(--danger-text); font-size:13px; font-weight:600; }
.wo-table{ width:100%; border-collapse:collapse; margin:0; }
.wo-table th{ text-align:start; font-size:11.5px; font-weight:700; color:var(--text-muted); letter-spacing:.02em; padding:9px 14px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface-2); }
.wo-table td{ padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:middle; font-size:13px; }
.wo-table tbody tr{ cursor:pointer; transition:background .12s; }
.wo-table tbody tr:last-child td{ border-bottom:0; }
.wo-table tbody tr:hover, .wo-table tbody tr:focus-visible{ background:var(--bg-alt); outline:none; }
.wo-table tbody tr:focus-visible{ box-shadow:inset 0 0 0 2px var(--primary); }
.wo-date{ white-space:nowrap; font-size:12px; color:var(--text-muted); }
.wo-cust{ line-height:1.35; }
.wo-name{ display:block; font-weight:600; }
.wo-phone{ display:block; font-size:11.5px; color:var(--text-muted); text-align:end; direction:ltr; }
.wo-table td.wo-total{ text-align:end; font-weight:800; white-space:nowrap; }
.wo-table th.end{ text-align:end; }
.wo-table td.wo-go{ color:var(--text-faint); width:1%; text-align:end; }
.wo-go .v2-ic{ width:18px; height:18px; }
.wo-head-total{ display:none; }
.wo-load{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:34px 14px; color:var(--text-muted); font-size:13px; }
@media (max-width:620px){
  .wo-search{ flex:1 0 100%; }
  .wo-bar .v2-btn-p{ flex:1; justify-content:center; }
  .wo-live{ display:none; }
  .wo-table thead{ display:none; }
  .wo-head-total{ display:inline; font-weight:800; }
  .wo-table td.wo-total, .wo-table td.wo-go{ display:none; }
  .wo-table, .wo-table tbody, .wo-table tr, .wo-table td{ display:block; width:auto; }
  .wo-table tr{ border:1px solid var(--border); border-radius:12px; padding:11px 13px; margin:0 0 9px; }
  .wo-table td{ border:none !important; padding:0 !important; }
  .wo-table td[data-k]{ display:flex; align-items:baseline; gap:8px; margin-top:5px; }
  .wo-table td[data-k]::before{ content:attr(data-k); font-size:11px; color:var(--text-muted); min-width:52px; font-weight:600; flex:none; }
  .wo-table td.wo-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .wo-cust .wo-name, .wo-cust .wo-phone{ display:inline; }
  .wo-cust .wo-phone{ margin-inline-start:8px; text-align:start; }
  .wo-table tbody{ padding:0 12px 12px; }
}

/* ── الجوال ── */
@media (max-width:640px){
  .o-head{ align-items:stretch; }
  .o-kpi{ min-width:0; width:100%; }
  .o-card{ padding:14px; }
  .o-tab{ flex:none; }
  .o-offers summary .o-sub{ display:none; }
}
/* ════════════════════════════════════════════════════════════════
   legacy.css — الهوية 2 لكل صفحات الإصدار القديم داخل هيكل v2
   ─────────────────────────────────────────────────────────────
   الصفحات القديمة (القيود، الإقفال المسائي، طلبات الدفع، ورديات الكاشير،
   التحويلات، الفواتير، …) تستعمل .card و.btn و.mx- و.table. بدل إعادة كتابة
   كل صفحة، تُوحَّد هنا مع الهوية المعتمدة في الطلبات والإعدادات:
   رأس بلا صندوق، بطاقات 18px، تبويبات مقسّمة، حقول 44px، أزرار حبر.
   النطاق: .v2-root #page-content (لا يمسّ النوافذ المنبثقة ولا صفحة الدخول).
   يُحمَّل آخر الحزمة فيتغلّب على luxe/modern (بنفس !important حيث لزم).
   ════════════════════════════════════════════════════════════════ */

/* ── الرأس: عنوان حرّ كالطلبات، لا بطاقة ── */
.v2-root #page-content .page-header,
.v2-root #page-content .mx-head{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:4px 2px 0 !important; margin:0 0 16px !important; border-radius:0 !important;
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.v2-root #page-content .page-title,
.v2-root #page-content .mx-title{
  margin:0 0 4px !important; font-size:24px !important; font-weight:800 !important; letter-spacing:-.4px; line-height:1.2;
  display:flex; align-items:center; gap:10px; color:var(--text);
}
.v2-root #page-content .mx-title > .icon,
.v2-root #page-content .mx-title > svg,
.v2-root #page-content .page-title > .icon{ display:none; }   /* الأيقونة في العنوان — الهوية 2 بلا أيقونة أمام العنوان */
.v2-root #page-content .page-subtitle,
.v2-root #page-content .mx-sub{ margin:0 !important; color:var(--text-muted) !important; font-size:13.5px !important; font-weight:500; }
.v2-root #page-content .mx-head-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ── البطاقات ── */
.v2-root #page-content .card,
.v2-root #page-content .mx-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg,18px) !important;
  box-shadow:none !important; transition:border-color var(--dur), box-shadow var(--dur);
}
.v2-root #page-content .card{ padding:18px; }
.v2-root #page-content .card.clickable:hover, .v2-root #page-content a .card:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-md) !important; }
.v2-root #page-content .card > h3:first-child,
.v2-root #page-content .card > h4:first-child{ margin:0 0 12px; font-size:15px; font-weight:800; display:flex; align-items:center; gap:10px; }
.v2-root #page-content .card > h3:first-child > .icon{ width:34px; height:34px; border-radius:10px; background:var(--bg-alt); color:var(--text); display:grid; place-items:center; font-size:19px; flex:none; }
.v2-root #page-content .mx-card-h{ padding:14px 18px; font-size:15px; font-weight:800; }
.v2-root #page-content .mx-card-b{ padding:18px; }
.v2-root #page-content .mx-sec{ margin:20px 2px 10px; font-size:13px; font-weight:800; color:var(--text-faint); letter-spacing:.04em; }
.v2-root #page-content .mx-sec::after{ background:var(--border); }

/* ── التبويبات المقسّمة (كانت رقائق منفصلة) ── */
.v2-root #page-content .mx-chips,
.v2-root #page-content .vf-chips{
  display:inline-flex !important; gap:4px !important; padding:4px; margin:0 0 16px;
  background:var(--bg-alt); border:1px solid var(--border); border-radius:14px; max-width:100%; overflow-x:auto; scrollbar-width:none;
}
.v2-root #page-content .mx-chips::-webkit-scrollbar, .v2-root #page-content .vf-chips::-webkit-scrollbar{ display:none; }
.v2-root #page-content .mx-chip,
.v2-root #page-content .vf-chip{
  border:0 !important; background:transparent !important; color:var(--text-muted) !important; box-shadow:none !important;
  font:inherit; font-size:13.5px !important; font-weight:700 !important; padding:8px 14px !important; border-radius:10px !important;
  white-space:nowrap; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:background var(--dur), color var(--dur); transform:none !important;
}
.v2-root #page-content .mx-chip:hover, .v2-root #page-content .vf-chip:hover{ color:var(--text) !important; }
.v2-root #page-content .mx-chip.on, .v2-root #page-content .mx-chip.active,
.v2-root #page-content .vf-chip.on, .v2-root #page-content .vf-chip.active{
  background:var(--surface) !important; color:var(--text) !important; box-shadow:var(--shadow-sm) !important;
}
/* فاصل الشرائح «|» القديم داخل الرقائق */
.v2-root #page-content .mx-chips > .sep, .v2-root #page-content .mx-chips > i{ width:1px; align-self:stretch; background:var(--border-strong); margin:4px 2px; }

/* ── الأزرار ── */
.v2-root #page-content .btn,
.v2-root #page-content .mx-btn{
  display:inline-flex; align-items:center; gap:8px; border:1px solid transparent; border-radius:10px !important; padding:9px 16px; min-height:40px;
  font:inherit; font-size:13.5px !important; font-weight:700 !important; line-height:1.3; cursor:pointer; text-decoration:none; box-shadow:none !important; transform:none !important;
  background:var(--surface); border-color:var(--border-strong); color:var(--text); transition:background var(--dur), border-color var(--dur);
}
.v2-root #page-content .btn:hover, .v2-root #page-content .mx-btn:hover{ background:var(--bg-alt); border-color:var(--border-strong) !important; }
.v2-root #page-content .btn-primary, .v2-root #page-content .mx-btn-primary{ background:var(--primary) !important; color:var(--on-primary) !important; border-color:var(--primary) !important; }
.v2-root #page-content .btn-primary:hover, .v2-root #page-content .mx-btn-primary:hover{ background:var(--primary-hover) !important; }
.v2-root #page-content .btn-danger, .v2-root #page-content .mx-btn-danger{ background:var(--danger-bg) !important; color:var(--danger-text) !important; border-color:transparent !important; }
.v2-root #page-content .btn-ghost, .v2-root #page-content .mx-btn-ghost{ background:transparent; border-color:transparent; color:var(--text-muted); }
.v2-root #page-content .btn-sm, .v2-root #page-content .mx-btn-sm{ padding:6px 12px !important; min-height:34px !important; font-size:12.5px !important; border-radius:8px !important; }
.v2-root #page-content .btn:disabled, .v2-root #page-content .mx-btn:disabled{ opacity:.5 !important; cursor:not-allowed; }
.v2-root #page-content .btn .icon, .v2-root #page-content .mx-btn .icon{ font-size:18px; }
.v2-root #page-content .btn-sm .icon, .v2-root #page-content .mx-btn-sm .icon{ font-size:16px; }
/* أزرار الأيقونة الصغيرة في الجداول (طباعة/عرض/تراجع) */
.v2-root #page-content .btn-icon, .v2-root #page-content .mx-ia{ width:34px; height:34px; padding:0 !important; justify-content:center; border-radius:8px !important; }

/* ── الحقول ── */
.v2-root #page-content .input,
.v2-root #page-content .select,
.v2-root #page-content select.select,
.v2-root #page-content textarea.input{
  min-height:44px; padding:0 13px; font:inherit; font-size:14px; font-weight:600; color:var(--text); background:var(--surface);
  border:1px solid var(--border-strong); border-radius:10px !important; box-shadow:none; transition:border-color var(--dur), box-shadow var(--dur);
}
.v2-root #page-content textarea.input{ padding:10px 13px; line-height:1.7; min-height:88px; }
.v2-root #page-content .input:focus, .v2-root #page-content .select:focus, .v2-root #page-content textarea.input:focus{ outline:none; border-color:var(--primary); box-shadow:var(--ring); }
.v2-root #page-content .input::placeholder{ color:var(--text-faint); font-weight:500; }
.v2-root #page-content .field-label{ display:block; font-size:12.5px; font-weight:700; color:var(--text-muted); line-height:20px; margin:0 0 6px; }
.v2-root #page-content .field-hint{ color:var(--text-muted); font-size:12.5px; line-height:1.7; }

/* ── الجداول ── */
.v2-root #page-content .table, .v2-root #page-content .mx-table{ width:100%; border-collapse:collapse; margin:0; }
.v2-root #page-content .table th, .v2-root #page-content .mx-table thead th{
  text-align:start; font-size:11.5px !important; font-weight:700 !important; color:var(--text-muted) !important; letter-spacing:.02em;
  padding:9px 14px; border-bottom:1px solid var(--border) !important; background:var(--surface-2) !important;
}
.v2-root #page-content .table td, .v2-root #page-content .mx-table tbody td{ padding:10px 14px; border-bottom:1px solid var(--border) !important; vertical-align:middle; font-size:13px; }
.v2-root #page-content .table tbody tr:last-child td, .v2-root #page-content .mx-table tbody tr:last-child td{ border-bottom:0 !important; }
.v2-root #page-content .table tbody tr:hover, .v2-root #page-content .mx-table tbody tr:hover{ background:var(--bg-alt); }

/* ── الشارات ── */
.v2-root #page-content .pill, .v2-root #page-content .mx-pill{
  display:inline-flex; align-items:center; gap:6px; border-radius:999px !important; padding:2px 10px !important; font-size:12px !important; font-weight:700 !important; line-height:1.5;
}

/* ── مؤشّرات KPI (ورديات الكاشير وغيرها) ── */
.v2-root #page-content .mx-kpis, .v2-root #page-content .kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.v2-root #page-content .mx-kpi, .v2-root #page-content .kpi{ background:var(--surface); border:1px solid var(--border); border-radius:14px !important; padding:13px 15px; box-shadow:none !important; }
.v2-root #page-content .mx-kpi b, .v2-root #page-content .kpi b, .v2-root #page-content .mx-kpi .v, .v2-root #page-content .kpi .v{ font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:21px; font-weight:800; letter-spacing:-.4px; }

/* ── الحالات الفارغة ── */
.v2-root #page-content .empty, .v2-root #page-content .mx-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:38px 16px; color:var(--text-muted); font-size:12.5px; border:1px dashed var(--border-strong); border-radius:14px; background:transparent;
}
.v2-root #page-content .card > .empty, .v2-root #page-content .card > .mx-state{ border:0; }
.v2-root #page-content .empty-title, .v2-root #page-content .mx-state h3{ font-size:14px; font-weight:800; color:var(--text); margin:6px 0 2px; }
.v2-root #page-content .empty-hint, .v2-root #page-content .mx-state p{ font-size:12.5px; color:var(--text-muted); margin:0; }
.v2-root #page-content .mx-state-ic{ width:56px; height:56px; border-radius:16px; margin:0 auto 10px; }
.v2-root #page-content .mx-state-ic .icon{ font-size:28px !important; }
.v2-root #page-content .empty > .icon{ font-size:30px; color:var(--text-faint); display:block; margin-bottom:6px; }

/* ── الصناديق الملوّنة (تنبيهات داخل البطاقات) ── */
.v2-root #page-content .alert, .v2-root #page-content .mx-alert{ border-radius:12px !important; padding:11px 13px; font-size:12.5px; font-weight:600; line-height:1.7; }

/* ── الجوال ── */
@media (max-width:640px){
  .v2-root #page-content .page-header, .v2-root #page-content .mx-head{ align-items:stretch; }
  .v2-root #page-content .mx-head-actions .btn, .v2-root #page-content .mx-head-actions .mx-btn{ flex:1; justify-content:center; }
  .v2-root #page-content .card{ padding:14px; }
}
/* ════════════════════════════════════════════════════════════════
   pages.css — عُدّة الصفحات الموحّدة (الهوية 2 «حبرٌ على قماش»)
   ─────────────────────────────────────────────────────────────
   مكوّنات عامّة تُستعمل في كل صفحة أُعيد تصميمها (الورديات، الإقفال المسائي،
   طلبات الدفع، القيود، …) حتى تتطابق مع «طلبات أونلاين» والإعدادات حرفياً:
   رأس حرّ، مؤشّرات، شريط مقسّم، بطاقات 18px، جداول هادئة، حالات فارغة.
   البادئة: .pg-  — تعمل داخل الهيكل وفي النوافذ المنبثقة (الرموز من :root).
   ════════════════════════════════════════════════════════════════ */
:root{ --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px; --dur:160ms; --ease:cubic-bezier(.2,.7,.2,1); --ring:0 0 0 3px rgba(14,14,14,.10); }

.pg{ display:flex; flex-direction:column; gap:16px; max-width:1180px; margin:0 auto; }
.pg *, .pg *::before, .pg *::after{ box-sizing:border-box; }
.pg .num, .pg-num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; }

/* ── الرأس ── */
.pg-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:4px 2px 0; }
.pg-head h1{ margin:0 0 4px; font-size:24px; font-weight:800; letter-spacing:-.4px; line-height:1.2; }
.pg-head p{ margin:0; color:var(--text-muted); font-size:13.5px; }
.pg-head-acts{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ── المؤشّرات ── */
.pg-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.pg-kpi{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:13px 15px; display:flex; flex-direction:column; gap:2px; }
.pg-kpi small{ font-size:11.5px; color:var(--text-muted); font-weight:600; }
.pg-kpi b{ font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:22px; font-weight:800; letter-spacing:-.4px; line-height:1.2; unicode-bidi:plaintext; }
.pg-kpi em{ font-style:normal; font-size:11.5px; color:var(--text-faint); font-weight:600; }
.pg-kpi.warn{ border-color:var(--warning); } .pg-kpi.warn b{ color:var(--warning-text); }
.pg-kpi.bad{ border-color:var(--danger); }   .pg-kpi.bad b{ color:var(--danger-text); }
.pg-kpi.ok b{ color:var(--success-text); }
.pg-kpi.info b{ color:var(--info-text); }
.pg-kpi.ink{ background:var(--primary); border-color:var(--primary); } .pg-kpi.ink small, .pg-kpi.ink em{ color:var(--on-primary); opacity:.75; } .pg-kpi.ink b{ color:var(--on-primary); }

/* ── الشريط المقسّم ── */
.pg-seg{ display:inline-flex; gap:4px; padding:4px; border:1px solid var(--border); border-radius:14px; background:var(--bg-alt); max-width:100%; overflow-x:auto; scrollbar-width:none; }
.pg-seg.full{ display:flex; } .pg-seg.full > button{ flex:1; justify-content:center; }
.pg-seg::-webkit-scrollbar{ display:none; }
.pg-seg > button{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; border:0; background:transparent; color:var(--text-muted);
  font:inherit; font-size:13.5px; font-weight:700; padding:8px 14px; border-radius:10px; cursor:pointer; transition:background var(--dur), color var(--dur); }
.pg-seg > button:hover{ color:var(--text); }
.pg-seg > button.on{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
.pg-seg > button .n{ font-family:var(--font-num); font-size:11px; font-weight:800; min-width:20px; padding:1px 6px; border-radius:999px; background:var(--border-strong); color:var(--text); }
.pg-seg > button.on .n{ background:var(--primary); color:var(--on-primary); }
.pg-seg > i{ width:1px; align-self:stretch; background:var(--border-strong); margin:4px 2px; }
.pg-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pg-toolbar .spacer{ flex:1; }

/* ── البطاقات ── */
.pg-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; }
.pg-card.tight{ padding:0; overflow:hidden; }
.pg-card.sub{ background:var(--surface-2); }
.pg-card-h{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.pg-card.tight > .pg-card-h{ margin:0; padding:14px 18px; border-bottom:1px solid var(--border); }
.pg-card-h h2, .pg-card-h h3{ margin:0; font-size:15px; font-weight:800; flex:1; min-width:0; }
.pg-card-h .sub{ font-weight:500; color:var(--text-muted); font-size:12.5px; }
.pg-card-h .tools{ display:flex; align-items:center; gap:8px; }
.pg-ic{ width:34px; height:34px; border-radius:10px; background:var(--bg-alt); color:var(--text); display:grid; place-items:center; flex:none; }
.pg-ic .v2-ic, .pg-ic svg{ width:18px; height:18px; }
.pg-ic.ok{ background:var(--success-bg); color:var(--success-text); }
.pg-ic.warn{ background:var(--warning-bg); color:var(--warning-text); }
.pg-ic.info{ background:var(--info-bg); color:var(--info-text); }
.pg-ic.dng{ background:var(--danger-bg); color:var(--danger-text); }
.pg-ic.ink{ background:var(--primary); color:var(--on-primary); }
.pg-ic.sm{ width:28px; height:28px; border-radius:8px; } .pg-ic.sm .v2-ic, .pg-ic.sm svg{ width:15px; height:15px; }
.pg-ic.lg{ width:44px; height:44px; border-radius:12px; } .pg-ic.lg .v2-ic, .pg-ic.lg svg{ width:22px; height:22px; }

/* ── عناوين الأقسام ── */
.pg-sec-h{ display:flex; align-items:center; gap:10px; margin:4px 0 10px; }
.pg-sec-h h3{ margin:0; font-size:14.5px; font-weight:800; }
.pg-sec-h .count{ font-family:var(--font-num); font-size:11.5px; font-weight:800; padding:1px 8px; border-radius:999px; background:var(--bg-alt); color:var(--text-muted); border:1px solid var(--border); }
.pg-sec-h .count.hot{ background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
.pg-sec-h .spacer{ flex:1; }
.pg-sec-h .sub{ font-size:12px; color:var(--text-muted); font-weight:500; }

/* ── الجداول ── */
.pg-table-wrap{ overflow-x:auto; }
.pg-table{ width:100%; border-collapse:collapse; margin:0; }
.pg-table th{ text-align:start; font-size:11.5px; font-weight:700; color:var(--text-muted); letter-spacing:.02em; padding:9px 14px; border-bottom:1px solid var(--border); background:var(--surface-2); white-space:nowrap; }
.pg-table td{ padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:middle; font-size:13px; }
.pg-table tbody tr:last-child td{ border-bottom:0; }
.pg-table tbody tr:hover{ background:var(--bg-alt); }
.pg-table tbody tr.clickable{ cursor:pointer; }
.pg-table .end{ text-align:end; }
.pg-table .center{ text-align:center; }
.pg-table .muted{ color:var(--text-muted); font-size:12px; }
.pg-table .dim{ color:var(--text-disabled); }
.pg-table td.act{ text-align:end; white-space:nowrap; }
.pg-table td.act .v2-btn + .v2-btn{ margin-inline-start:6px; }
/* الجوال: كل صفّ بطاقة — العنوان من data-label */
@media (max-width:640px){
  .pg-table.cards thead{ display:none; }
  .pg-table.cards, .pg-table.cards tbody, .pg-table.cards tr, .pg-table.cards td{ display:block; width:100%; }
  .pg-table.cards tr{ border:1px solid var(--border); border-radius:14px; margin:0 0 10px; padding:6px 13px; background:var(--surface); }
  .pg-table.cards tbody tr:hover{ background:var(--surface); }
  .pg-table.cards td{ border:0 !important; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; }
  .pg-table.cards td + td{ border-top:1px solid var(--border) !important; }
  .pg-table.cards td[data-label]::before{ content:attr(data-label); color:var(--text-muted); font-weight:700; font-size:12px; flex:none; }
  .pg-table.cards td.act{ padding-top:10px; }
  .pg-table.cards td.act .v2-btn{ width:100%; justify-content:center; }
  .pg-table.cards td.act .v2-btn + .v2-btn{ margin:6px 0 0; }
}

/* ── الحقول ── */
.pg-field{ position:relative; }
.pg-field label, .pg-label{ display:block; font-size:12.5px; font-weight:700; color:var(--text-muted); line-height:20px; margin:0 0 6px; }
.pg-inp, .pg-sel, .pg-ta{ display:block; width:100%; min-height:44px; padding:0 13px; font:inherit; font-size:14px; font-weight:600; color:var(--text);
  background:var(--surface); border:1px solid var(--border-strong); border-radius:10px; transition:border-color var(--dur), box-shadow var(--dur); }
.pg-ta{ padding:10px 13px; min-height:88px; resize:vertical; line-height:1.7; }
.pg-inp:focus, .pg-sel:focus, .pg-ta:focus{ outline:none; border-color:var(--primary); box-shadow:var(--ring); }
.pg-inp::placeholder{ color:var(--text-faint); font-weight:500; }
.pg-inp[type=number], .pg-inp[dir=ltr], .pg-inp.num{ font-family:var(--font-num); }
.pg-inp.sm, .pg-sel.sm{ min-height:38px; width:auto; }
.pg-inp.bad{ border-color:var(--danger); background:var(--danger-bg); }
.pg-field .ic{ position:absolute; inset-inline-start:12px; top:39px; color:var(--text-faint); pointer-events:none; display:inline-flex; }
.pg-field .ic .v2-ic{ width:18px; height:18px; }
.pg-field.has-ic .pg-inp{ padding-inline-start:38px; }
.pg-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pg-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:640px){ .pg-grid2, .pg-grid3{ grid-template-columns:1fr; } }
.pg-check{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); cursor:pointer; font-size:13.5px; font-weight:600; }
.pg-check input{ width:18px; height:18px; margin:0; accent-color:var(--primary); cursor:pointer; }

/* ── الملاحظات الملوّنة ── */
.pg-note{ display:flex; gap:10px; align-items:flex-start; padding:11px 13px; border-radius:12px; font-size:12.5px; font-weight:600; line-height:1.7; }
.pg-note .v2-ic{ width:16px; height:16px; flex:none; margin-top:3px; }
.pg-note.info{ background:var(--info-bg); color:var(--info-text); }
.pg-note.ok{ background:var(--success-bg); color:var(--success-text); }
.pg-note.warn{ background:var(--warning-bg); color:var(--warning-text); }
.pg-note.dng{ background:var(--danger-bg); color:var(--danger-text); }
.pg-note.mut{ background:var(--bg-alt); color:var(--text-muted); }
.pg-note b{ font-weight:800; }

/* ── الحالات الفارغة ── */
.pg-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:38px 16px; color:var(--text-muted); font-size:12.5px; border:1px dashed var(--border-strong); border-radius:14px; }
.pg-card.tight > .pg-empty, .pg-card > .pg-empty{ border:0; }
.pg-empty .v2-ic{ width:30px; height:30px; color:var(--text-faint); margin-bottom:6px; }
.pg-empty b{ display:block; font-size:14px; color:var(--text); margin-bottom:2px; }
.pg-loading{ display:flex; align-items:center; justify-content:center; gap:10px; color:var(--text-muted); font-size:13px; padding:26px 12px; }
.pg-spin{ width:18px; height:18px; border-radius:50%; border:2px solid var(--border-strong); border-top-color:var(--primary); animation:pgspin .9s linear infinite; }
@keyframes pgspin{ to{ transform:rotate(360deg); } }

/* ── الأشخاص/الفروع ── */
.pg-av{ width:28px; height:28px; border-radius:8px; background:var(--bg-alt); color:var(--text); display:inline-grid; place-items:center; font-size:12px; font-weight:800; flex:none; }
.pg-av.ink{ background:var(--primary); color:var(--on-primary); }
.pg-who{ display:inline-flex; align-items:center; gap:9px; }
.pg-who b{ font-weight:700; }

/* ── الصفوف (قوائم بطاقية) ── */
.pg-list{ display:flex; flex-direction:column; gap:10px; }
.pg-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--surface); border:1px solid var(--border); border-radius:14px; transition:border-color var(--dur), box-shadow var(--dur); }
.pg-row:hover{ border-color:var(--border-strong); }
.pg-row.on{ border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary); }
.pg-row .t{ flex:1; min-width:0; }
.pg-row .t b{ display:block; font-size:14px; font-weight:800; }
.pg-row .t small{ display:block; font-size:12px; color:var(--text-muted); font-weight:500; line-height:1.6; }
.pg-row .r{ text-align:end; flex:none; }
.pg-row .amt{ font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:18px; font-weight:800; letter-spacing:-.4px; white-space:nowrap; }
.pg-row .amt.bad{ color:var(--danger-text); } .pg-row .amt.ok{ color:var(--success-text); }
.pg-row-acts{ display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }

/* ── الخلاصة (مفتاح/قيمة) ── */
.pg-kv{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; }
.pg-kv:last-child{ border-bottom:0; }
.pg-kv span{ color:var(--text-muted); font-weight:600; }
.pg-kv b{ font-family:var(--font-num); font-variant-numeric:tabular-nums; font-weight:800; unicode-bidi:plaintext; }
.pg-kv.total{ border-top:1px solid var(--border-strong); margin-top:4px; padding-top:12px; font-size:14px; }
.pg-kv.total b{ font-size:18px; }

/* ── أزرار: نستعمل .v2-btn من v2.css — إضافات ── */
.pg .v2-btn.sm, .pg-btn-sm{ padding:6px 12px; font-size:12.5px; border-radius:8px; }
.pg .v2-btn .v2-ic{ width:16px; height:16px; }
.pg .v2-btn.sm .v2-ic{ width:15px; height:15px; }
.pg .v2-btn:disabled{ opacity:.5; cursor:not-allowed; }
.pg .v2-btn.wide{ width:100%; justify-content:center; padding:12px 16px; font-size:14px; font-weight:800; border-radius:12px; }
.v2-btn-w{ background:var(--warning-bg); color:var(--warning-text); }   /* تحذيري */
.v2-btn-ok{ background:var(--success-bg); color:var(--success-text); }

/* ── الجوال ── */
@media (max-width:640px){
  .pg-head{ align-items:stretch; }
  .pg-head-acts .v2-btn{ flex:1; justify-content:center; }
  .pg-card{ padding:14px; }
  .pg-kpis{ grid-template-columns:repeat(2,1fr); }
}

/* ════════════════════════════════════════════════════════════════
   القيود اليوميّة وصندوق الكاشير (.vl2 / .vl-*) — إضافات خاصّة بالصفحة
   ════════════════════════════════════════════════════════════════ */
/* لوحة الأرصدة: بلاطة لكل قناة — تُفتح على كشف الحساب */
.vl-banks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; padding:14px 18px; }
.vl-bank{ display:flex; align-items:center; gap:10px; width:100%; text-align:start; font:inherit; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:10px 12px; cursor:pointer; transition:border-color var(--dur), transform var(--dur), box-shadow var(--dur); }
.vl-bank:hover:not(:disabled){ border-color:var(--primary); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.vl-bank:disabled{ cursor:not-allowed; opacity:.55; border-style:dashed; }
.vl-bank .t{ flex:1; min-width:0; }
.vl-bank small{ display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:11.5px; color:var(--text-muted); font-weight:600; }
.vl-bank small .v2-ic{ width:13px; height:13px; color:var(--text-faint); }
.vl-bank b{ display:block; font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:16px; font-weight:800; letter-spacing:-.3px; margin-top:2px; direction:ltr; text-align:start; }
.vl-bank b.neg{ color:var(--danger-text); } .vl-bank b.dim{ color:var(--text-faint); font-weight:600; }
.vl-cashier{ border-top:1px solid var(--border); padding:14px 18px 16px; background:var(--surface-2); display:flex; flex-direction:column; gap:12px; }
.vl-chs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.vl-ch{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px 13px; }
.vl-ch.cash{ border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary); }
.vl-ch.empty{ border-style:dashed; opacity:.6; }
.vl-ch-h{ display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.vl-ch-h b{ font-size:13.5px; font-weight:800; }
.vl-ch-h code{ font-family:var(--font-num); font-size:11px; color:var(--text-faint); direction:ltr; }
.vl-ch-h .v2-pill{ margin-inline-start:auto; }
.vl-ch-bal{ font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:21px; font-weight:800; letter-spacing:-.4px; direction:ltr; text-align:start; }
.vl-ch-bal.neg{ color:var(--danger-text); }
.vl-ch-rows{ margin-top:9px; padding-top:9px; border-top:1px dashed var(--border); display:flex; flex-direction:column; gap:4px; font-size:11.5px; }
.vl-ch-rows div{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.vl-ch-rows span{ color:var(--text-muted); font-weight:600; }
.vl-ch-rows b{ font-family:var(--font-num); font-variant-numeric:tabular-nums; font-weight:700; direction:ltr; }
.vl-ch-rows b.up{ color:var(--success-text); } .vl-ch-rows b.down{ color:var(--danger-text); }

/* شريط التحديد المتعدّد — حبر على الصفحة */
.vl-batch{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 14px 10px 18px; background:var(--primary); color:var(--on-primary); border-radius:14px; }
.vl-batch strong{ font-size:13.5px; font-weight:800; display:inline-flex; align-items:center; gap:8px; }
.vl-batch .spacer{ flex:1; }
.vl-batch .v2-pill{ background:color-mix(in srgb, var(--on-primary) 16%, transparent); color:var(--on-primary); }
.vl-batch .v2-btn-p{ background:var(--on-primary); color:var(--primary); }
.vl-batch .v2-btn-p:hover{ background:var(--on-primary); opacity:.9; }
.vl-batch .v2-btn-g{ color:var(--on-primary); border-color:color-mix(in srgb, var(--on-primary) 35%, transparent); }
.vl-batch .v2-btn-g:hover{ background:color-mix(in srgb, var(--on-primary) 12%, transparent); color:var(--on-primary); }

/* الفلاتر فوق الجدول */
.vl-filters{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 18px; border-bottom:1px solid var(--border); background:var(--surface-2); }
.vl-filters .pg-seg > button{ padding:6px 12px; font-size:12.5px; }
.vl-odoo{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vl-odoo .pg-inp, .vl-odoo .pg-sel{ min-height:36px; font-size:12.5px; padding:0 10px; width:auto; }
.vl-odoo .pg-sel{ max-width:180px; }
.vl-live{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:9px 18px; background:var(--info-bg); color:var(--info-text); font-size:12.5px; font-weight:600; border-bottom:1px solid var(--border); }
.vl-live b{ font-family:var(--font-num); font-weight:800; }

/* الجدول */
.vl-table td.sel{ width:36px; padding-inline-end:0; }
.vl-table td.sel input, .vl-table th input{ width:16px; height:16px; accent-color:var(--primary); cursor:pointer; margin:0; display:block; }
.vl-table tr.on td{ background:var(--surface-2); }
.vl-table tr.on td:first-child{ box-shadow:inset 3px 0 0 var(--primary); }
.vl-table .no{ font-family:var(--font-num); font-weight:800; white-space:nowrap; }
.vl-table td.nw{ white-space:nowrap; }
.vl-table .no .v2-ic{ width:12px; height:12px; color:var(--text-faint); vertical-align:-1px; margin-inline-start:3px; }
.vl-table .amt{ font-family:var(--font-num); font-variant-numeric:tabular-nums; font-weight:800; font-size:14px; white-space:nowrap; direction:ltr; display:inline-block; }
.vl-table .amt.in{ color:var(--success-text); } .vl-table .amt.out{ color:var(--danger-text); }
.vl-table .sub{ display:flex; align-items:center; gap:4px; font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.vl-table .sub .v2-ic{ width:13px; height:13px; }
.vl-table .src{ display:inline-flex; align-items:center; gap:6px; }
.vl-table .src .v2-ic{ color:var(--text-faint); }
.vl-table .arrow{ color:var(--text-faint); padding:0 3px; }
.vl-acts{ display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.vl-acts .v2-btn{ width:32px; height:32px; padding:0; justify-content:center; border-radius:9px; }
.vl-acts .v2-btn.lbl{ width:auto; padding:0 10px; }
.vl-acts .v2-btn-s{ border-color:var(--border); }
.vl-acts .v2-btn.warn{ background:var(--warning-bg); color:var(--warning-text); }
@media (max-width:640px){
    .vl-table.pg-table.cards td.sel{ width:100%; padding:7px 0; }
  .vl-table.pg-table.cards td.sel::before{ content:'تحديد للنشر'; color:var(--text-muted); font-weight:700; font-size:12px; }
  .vl-table.pg-table.cards td.sel input{ width:20px; height:20px; }
  .vl-table.pg-table.cards td.sel:empty{ display:none; }
  .vl-table.pg-table.cards td.sel:empty + td{ border-top:0 !important; }
  #odoo-balances-card .pg-card-h h2{ flex:1 1 100%; }
  #odoo-balances-card .pg-card-h .tools{ flex:1; } #odoo-balances-card .pg-card-h .tools .pg-sel{ flex:1; }
  .vl-table.pg-table.cards td.amtc .amt{ font-size:19px; }
  .vl-table.pg-table.cards td.act{ display:block; }
  .vl-table.pg-table.cards td.act .vl-acts{ justify-content:flex-start; }
  .vl-table.pg-table.cards td.act .vl-acts .v2-btn{ width:40px; height:38px; margin:0; flex:none; }
  .vl-table.pg-table.cards td.act .vl-acts .v2-btn.lbl{ width:auto; flex:1; }
}

/* صندوق الكاشير */
.vl-cs{ display:grid; grid-template-columns:1fr; gap:16px; align-items:start; }
.vl-cs-main{ min-width:0; display:flex; flex-direction:column; gap:16px; }
.vl-cs-side{ display:flex; flex-direction:column; gap:12px; }
@media (min-width:1040px){ .vl-cs{ grid-template-columns:1fr 320px; } .vl-cs-side{ position:sticky; top:12px; } }
.vl-open-h{ display:flex; align-items:center; gap:10px; padding:12px 18px; background:var(--primary); color:var(--on-primary); }
.vl-open-h b{ flex:1; font-size:13.5px; font-weight:800; display:inline-flex; align-items:center; gap:8px; }
.vl-open-h .live{ width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px color-mix(in srgb, var(--success) 30%, transparent); flex:none; }
.vl-open-h .v2-btn{ background:color-mix(in srgb, var(--on-primary) 14%, transparent); color:var(--on-primary); border-color:color-mix(in srgb, var(--on-primary) 30%, transparent); }
.vl-amt-wrap{ padding:16px 18px 6px; }
.vl-amt-l{ font-size:11.5px; font-weight:800; color:var(--text-muted); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.vl-amt-l em{ font-style:normal; font-weight:600; color:var(--text-faint); }
.vl-amt-l .v2-btn{ margin-inline-start:auto; }
.vl-amt{ display:flex; align-items:center; gap:12px; border:2px solid var(--primary); border-radius:16px; padding:8px 16px; background:var(--surface); }
.vl-amt b{ flex:1; min-width:0; font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:32px; font-weight:800; letter-spacing:-.8px; direction:ltr; text-align:start; line-height:1.2; }
.vl-amt small{ font-size:13px; font-weight:800; color:var(--text-muted); flex:none; }
.vl-amt-eq{ font-size:11.5px; color:var(--text-muted); margin:8px 2px 0; line-height:1.7; }
.vl-amt-eq b{ font-family:var(--font-num); color:var(--text); }
.vl-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:10px 18px 16px; }
.vl-stat{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:10px 12px; }
.vl-stat small{ display:flex; align-items:center; gap:5px; font-size:11px; color:var(--text-muted); font-weight:600; }
.vl-stat b{ display:block; font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:16px; font-weight:800; margin-top:3px; direction:ltr; text-align:start; }
.vl-stat.up b{ color:var(--success-text); } .vl-stat.down b{ color:var(--danger-text); }
@media (max-width:560px){ .vl-stats{ grid-template-columns:1fr; } .vl-amt b{ font-size:30px; } }
/* حوار فتح الوردية */
.vl-opt{ display:flex; align-items:center; gap:12px; width:100%; text-align:start; font:inherit; color:var(--text); background:var(--surface); border:1px solid var(--border-strong); border-radius:14px; padding:13px; cursor:pointer; transition:border-color var(--dur), box-shadow var(--dur); }
.vl-opt.rec{ border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary); }
.vl-opt:hover:not(:disabled){ border-color:var(--primary); }
.vl-opt:disabled{ opacity:.5; cursor:not-allowed; border-style:dashed; }
.vl-opt .t{ flex:1; min-width:0; }
.vl-opt .t > b{ display:flex; align-items:center; gap:6px; font-size:14px; font-weight:800; }
.vl-opt .t > small{ display:block; font-size:11.5px; color:var(--text-muted); margin-top:2px; line-height:1.6; }
.vl-opt .amt{ font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:19px; font-weight:800; direction:ltr; flex:none; }
/* حوار الإغلاق — عُدَّ الدرج */
.vl-count{ display:flex; align-items:center; gap:10px; border:2px solid var(--border-strong); border-radius:16px; padding:6px 14px; background:var(--surface); transition:border-color var(--dur); }
.vl-count.ok{ border-color:var(--success); } .vl-count.up{ border-color:var(--warning); } .vl-count.down{ border-color:var(--danger); }
.vl-count input{ border:0; outline:0; background:none; font-family:var(--font-num); color:var(--text); font-size:30px; font-weight:800; width:100%; min-width:0; padding:0; min-height:46px; text-align:start; direction:ltr; font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
.vl-count input::-webkit-outer-spin-button, .vl-count input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.vl-count small{ font-size:13px; font-weight:800; color:var(--text-muted); flex:none; }
/* كشف الحساب */
.vl-ledger{ max-height:55vh; overflow:auto; border:1px solid var(--border); border-radius:14px; }
.vl-ledger thead th{ position:sticky; top:0; z-index:2; }
.vl-att{ display:flex; flex-direction:column; gap:6px; align-items:center; }
.vl-att img{ width:110px; height:110px; object-fit:cover; border-radius:12px; border:1px solid var(--border); display:block; }

/* ══════════════════════════════════════════════════════════════
   سهمُ القائمةِ المنسدلة (.pg-sel)
   ──────────────────────────────────────────────────────────────
   ⚠️ عطبٌ مزدوجٌ اكتُشِفَ بالقياسِ لا بالنظر: القاعدةُ المشتركةُ أعلاه
      تكتبُ ‎background:var(--surface)‎ **مُختصَراً**، والمختصَرُ يمسحُ
      ‎background-image‎ و‎repeat‎ و‎position‎ معاً. فَكانَت النتيجةُ:
        · نهاراً — لا سهمَ أصلاً، قائمةٌ لا يُعرَفُ أنّها قائمة.
        · ليلاً — قاعدةُ ‎html[data-theme=dark] select‎ تُعيدُ الصورةَ وحدَها
          (خاصّيّةٌ مفردةٌ أعلى نوعيّةً)، فَتَرِثُ ‎repeat‎ من المختصَرِ
          فَيتبلَّطُ السهمُ جداراً من الأسهمِ عبرَ القائمةِ كلِّها.
      قِستُهُ في المتصفِّح: ‎background-repeat: repeat‎ و‎background-size: auto‎.
   والإصلاحُ هنا لا في الصفحة: ‎.pg-sel‎ عُدّةٌ يستعملُها كلُّ ما أُعيدَ بناؤُه.
   ══════════════════════════════════════════════════════════════ */
.pg-sel{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 12px center;
  background-size:16px 16px;
  padding-left:38px;
}
html[data-theme="dark"] .pg-sel{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F4F4F2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}