/* ROP Design System — رموز التصميم الموحدة (V1 المرحلة 3)
   مصدر واحد للألوان والمقاييس لكل الواجهات: الموظفين (POS/المطبخ/الطاولات/اللوحة)، تطبيق العميل، شاشة المطبخ الكبيرة، شاشة الزبون.
   لا يُكتب لون أو استدارة أو ظل أو مسافة مباشرة في الشاشات — يُستخدم الرمز. */
:root{
  /* الأسطح والنص */
  --bg:#f6f5f2;--surface:#fff;--surface2:#efece7;--panel:#faf9f6;--line:#e6e3dd;--line2:#eeebe6;
  --ink:#1f1d1a;--ink2:#4b4741;--muted:#6d6862;--faint:#a39d95;
  /* العلامة */
  --accent:#157a72;--accent-strong:#0f5f59;--accent-soft:#e3f1ef;--accent-tint:#f4faf9;--accent-line:#bfe0dc;
  --accent-grad:linear-gradient(135deg,#1a8a80,#0f5f59);
  /* لغة الحالات: سليم · انتباه · حرج · معلومة */
  --ok:#2f9c60;--ok-ink:#1d6b41;--ok-soft:#e4f4ea;
  --warn:#d4891a;--warn-ink:#8a5410;--warn-soft:#fdf1dc;
  --crit:#c8433a;--crit-ink:#8f2a23;--crit-soft:#fbe9e7;--crit-deep:#7f1d18;
  --info:#2b6cb0;--info-ink:#2b5391;--info-soft:#e6eef9;
  --star:#d9a400;--toast-bg:#1f1d1a;--toast-err:#8f2a23;
  /* الاستدارة */
  --r-xs:4px;--r-sm:6px;--r-ctl:10px;--r-card:14px;--r-lg:18px;--r-pill:999px;
  /* الظلال */
  --shadow-sm:0 1px 2px rgba(31,29,26,.05),0 1px 3px rgba(31,29,26,.06);--shadow-md:0 6px 20px rgba(31,29,26,.10);--shadow-lg:8px 0 40px rgba(31,29,26,.18);
  /* المسافات (4px) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
  /* الخطوط */
  --font:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-xs:11px;--fs-sm:13px;--fs-md:15px;--fs-lg:18px;--fs-xl:22px;--fs-2xl:28px;
  /* الطبقات */
  --z-sticky:20;--z-nav:40;--z-sheet:80;--z-modal:90;--z-toast:100;
  /* الحركة: تخدم الاستخدام ولا تبطئه */
  --t-fast:.12s;--t-base:.2s;
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
[hidden]{display:none!important}
/* مكوّنات مشتركة */
.p-card{padding:var(--sp-3) 14px}
.panel-soft{background:var(--panel);border-radius:var(--r-card);padding:var(--sp-3) 14px}
.sel-card{border-color:var(--accent-line)!important;background:var(--accent-tint)!important}
.stack{display:flex;flex-direction:column;gap:var(--sp-3)}.stack.tight{gap:var(--sp-2)}
.row-gap{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.pill.muted{background:var(--surface2);color:var(--muted)}
/* حالة الفراغ الموحدة: أيقونة في دائرة + عنوان مفهوم + شرح قصير + إجراء — في كل الواجهات */
.empty{padding:32px 20px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.empty .ic{width:56px;height:56px;border-radius:var(--r-card);background:var(--surface2);color:var(--faint);display:grid;place-items:center}
.empty .et{font-size:var(--fs-md);font-weight:700;color:var(--ink);margin:0}
.empty .es{font-size:var(--fs-sm);color:var(--muted);margin:0;max-width:420px}
/* الزر أثناء التنفيذ: يُعطَّل ويظهر مؤشر — يمنع الدفع أو الإرسال مرتين */
.btn.busy{position:relative;cursor:progress}
.btn.busy::after{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-inline-end-color:transparent;animation:rop-spin .7s linear infinite;margin-inline-start:6px}
@keyframes rop-spin{to{transform:rotate(360deg)}}
/* شريط حالة الاتصال (الموظفين): غير متصل · مزامنة · فشل مزامنة */
#offlinebar{position:sticky;top:0;z-index:var(--z-nav);padding:8px var(--sp-4);font-size:var(--fs-sm);font-weight:600;text-align:center;cursor:pointer}
#offlinebar.offline{background:var(--crit-soft);color:var(--crit-ink)}
#offlinebar.syncing{background:var(--info-soft);color:var(--info-ink)}
#offlinebar.failed{background:var(--warn-soft);color:var(--warn-ink)}
/* V1 (اختبار المستخدم): الشريط العلوي لا يوسّع الصفحة أبداً — التبويبات الكثيرة تمرَّر داخل صفّها (كان 1437px على شاشة 1024 فتختفي الفئات) */
.topbar{min-width:0;max-width:100vw;overflow:hidden}
#topnav{min-width:0;flex:1 1 auto;overflow-x:auto;scrollbar-width:none}
#topnav::-webkit-scrollbar{display:none}
html,body{overflow-x:clip}