@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap'); /* خط عربي اختياري؛ الواجهة تملك بدائل محلية. */
:root { /* ألوان ومسافات النظام المشتركة. */
  color-scheme: dark; /* عرض الحقول بلون داكن مناسب للوحة. */
  --bg: #0b0d12; /* خلفية الصفحة الأساسية. */
  --panel: rgba(20, 23, 32, .78); /* لون الزجاج الشفاف. */
  --panel-strong: #151923; /* سطح البطاقات المتين. */
  --border: rgba(255, 255, 255, .085); /* حد رقيق حول الزجاج. */
  --muted: #9aa1b3; /* لون النصوص الثانوية. */
  --text: #f4f5fa; /* لون النص الأساسي. */
  --purple: #9c7bff; /* بنفسجي النيون. */
  --mint: #4ce2c1; /* تركوازي التنبيه. */
  --tenant-primary: #7c5cff; /* اللون الذي يختاره المقهى للمنيو. */
  --tenant-accent: #35e0c1; /* لون إبراز المقهى. */
  --font: 'IBM Plex Sans Arabic', 'Tahoma', sans-serif; /* عائلة الخط العربي. */
  font-family: var(--font); /* تطبيق الخط على جميع الصفحات. */
  font-synthesis: none; /* منع المتصفح من تصنيع أوزان غير موجودة. */
} /* نهاية المتغيرات العامة. */
* { box-sizing: border-box; } /* احتساب الحشو ضمن أبعاد العناصر. */
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font); } /* خلفية ونص موحدان. */
button, input, select { font: inherit; } /* توحيد الخط داخل الحقول والأزرار. */
button { color: inherit; } /* الحفاظ على لون النص داخل الزر. */
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--tenant-accent); outline-offset: 2px; } /* إبراز لوحة المفاتيح والوصول. */
.is-hidden { display: none !important; } /* إخفاء عنصر عند تبديل الشاشات. */
.muted { color: var(--muted); } /* تطبيق لون الوصف الثانوي. */
.small-note { font-size: 12px; line-height: 1.7; } /* ملاحظات قصيرة مقروءة. */
.eyebrow { margin: 0 0 8px; color: #a995ff; font-size: 12px; font-weight: 700; letter-spacing: .04em; } /* عنوان تمهيدي صغير. */
.glass-panel { border: 1px solid var(--border); background: linear-gradient(145deg, rgba(24, 28, 39, .84), rgba(15, 17, 24, .73)); box-shadow: 0 18px 54px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .035); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); } /* تأثير الزجاج المعتم. */
.ambient { position: fixed; z-index: -1; width: 420px; height: 420px; border-radius: 50%; filter: blur(95px); opacity: .2; pointer-events: none; } /* وهج الخلفية الناعم. */
.ambient-one { top: -170px; right: 24%; background: #643df1; } /* إضاءة بنفسجية أعلى الصفحة. */
.ambient-two { bottom: -230px; left: 10%; background: #087f72; opacity: .15; } /* إضاءة تركوازية أسفل الصفحة. */
.brand-mark { color: var(--text); font-size: 26px; font-weight: 700; letter-spacing: -.07em; } /* علامة المنصة النصية. */
.brand-mark span { color: var(--mint); font-size: 13px; letter-spacing: .08em; margin-right: 5px; } /* تمييز اختصار المنصة. */
.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: 13px; padding: 0 16px; font-weight: 700; cursor: pointer; transition: transform .18s ease, background .18s ease, border .18s ease; } /* شكل موحد للأزرار. */
.button:hover { transform: translateY(-1px); } /* استجابة بسيطة عند المرور. */
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; } /* حالة الزر غير المتاح. */
.button-primary { color: #0b1115; background: linear-gradient(110deg, #5ce8c7, #9ff1dd); box-shadow: 0 7px 24px rgba(54, 217, 181, .15); } /* زر الإجراء الأساسي المضيء. */
.button-primary:hover { background: linear-gradient(110deg, #7bf2d5, #b1ffe9); } /* تفتيح الزر الأساسي عند المرور. */
.button-soft { color: #e5e6ef; border-color: var(--border); background: rgba(255, 255, 255, .045); } /* زر ثانوي هادئ. */
.button-soft:hover { border-color: rgba(164, 142, 255, .45); background: rgba(153, 129, 255, .1); } /* إظهار حد بنفسجي للزر الثانوي. */
.button-danger { color: #fff; background: #d84c69; } /* زر إجراء خطير مثل الإلغاء. */
.button-small { min-height: 34px; border-radius: 10px; padding: 0 11px; font-size: 12px; } /* زر مضغوط داخل البطاقة. */
.button-row { display: flex; gap: 9px; } /* جمع أزرار متجاورة. */
.full-button { width: 100%; margin-top: 18px; } /* زر يملأ عرض الفاتورة. */
.icon-button { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 13px; color: var(--muted); background: rgba(255, 255, 255, .035); cursor: pointer; } /* زر أيقونة صغير. */
.topbar-actions > .icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* رسم أيقونات التنبيه وأمان الحساب بخط واضح. */
.icon-button:hover, .icon-button.is-active { color: #fff; border-color: rgba(163, 139, 255, .45); background: rgba(143, 112, 255, .14); } /* تمييز حالة الأيقونة. */
.small-icon { width: 32px; height: 32px; border-radius: 9px; } /* تصغير أيقونة الصفوف. */
.stack-form { display: grid; gap: 15px; } /* ترتيب حقول النماذج رأسياً. */
.stack-form label, .settings-form label { display: grid; gap: 8px; color: #d8d9e3; font-size: 13px; font-weight: 600; } /* تنسيق تسميات الحقول. */
.file-field input[type="file"] { min-height: auto; border: 1px dashed rgba(255, 255, 255, .15); padding: 10px; color: var(--muted); background: rgba(255, 255, 255, .025); font-size: 10px; } /* حقل رفع صورة محمية. */
.upload-image-preview { width: 96px; height: 96px; border: 1px solid var(--border); border-radius: 14px; object-fit: cover; background: var(--panel-strong); } /* إظهار معاينة صورة الصنف بعد الرفع أو عند التعديل. */
.image-upload-status { margin: -8px 0 0; color: #8fe8d3; font-size: 11px; line-height: 1.7; } /* إبقاء نتيجة الرفع وتعليمات الحفظ ظاهرة بجانب الصورة. */
.image-upload-status.is-error { color: #ff91a1; } /* تمييز خطأ الرفع أو مسار الصورة. */
.stack-form input:not([type="checkbox"]):not([type="radio"]), .stack-form select, .settings-form input:not([type="checkbox"]):not([type="radio"]) { width: 100%; min-height: 46px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: 0 13px; color: var(--text); background: rgba(7, 9, 14, .5); } /* شكل حقول الإدخال النصية دون تمديد مربعات الاختيار. */
.stack-form select { appearance: none; padding-inline: 13px 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23aeb4c3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 14px center; cursor: pointer; } /* قائمة منسدلة متناسقة مع الواجهة الداكنة. */
.stack-form textarea, .settings-form textarea { width: 100%; min-height: 112px; resize: vertical; border: 1px solid rgba(255, 255, 255, .1); border-radius: 13px; padding: 12px 14px; color: var(--text); background: rgba(7, 9, 14, .5); font: inherit; line-height: 1.75; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } /* توحيد مربعات الوصف والسبب مع بقية حقول اللوحة. */
.stack-form input::placeholder, .stack-form textarea::placeholder, .settings-form input::placeholder, .settings-form textarea::placeholder { color: #747c8d; opacity: 1; } /* تباين هادئ للنص الإرشادي. */
.stack-form input:not([type="checkbox"]):not([type="radio"]):focus, .stack-form select:focus, .stack-form textarea:focus, .settings-form input:not([type="checkbox"]):not([type="radio"]):focus, .settings-form textarea:focus { border-color: rgba(109, 232, 203, .6); outline: 0; background: rgba(7, 9, 14, .78); box-shadow: 0 0 0 3px rgba(76, 226, 193, .08); } /* توهج التركيز للحقول النصية. */
.stack-form select option { color: #f2f3f7; background: #181b24; } /* تحسين خلفية اختيارات القوائم. */
.stack-form input[type="checkbox"], .settings-form input[type="checkbox"] { flex: 0 0 18px; width: 18px; min-width: 18px; min-height: 18px; height: 18px; padding: 0; accent-color: var(--tenant-accent); } /* تثبيت حجم مربعات الاختيار في النماذج والإعدادات. */
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; } /* توسيط شاشة الدخول. */
.login-card { width: min(100%, 430px); border-radius: 28px; padding: 38px; } /* بطاقة الدخول الواسعة. */
.login-card h1 { margin: 4px 0 8px; font-size: 30px; } /* عنوان الترحيب. */
.login-card > .muted { margin: 0 0 25px; font-size: 14px; } /* وصف شاشة الدخول. */
.login-help { margin: -7px 0; font-size: 11px; line-height: 1.7; } /* إبراز طريقة الدخول المناسبة للمالك والموظف. */
.login-card .brand-mark { margin-bottom: 34px; } /* فصل العلامة عن العنوان. */
.login-credit { display: flex; align-items: center; gap: 9px; margin: -24px 0 24px; color: #9ba4b5; font-size: 10px; } /* إظهار اعتماد الجهة المصممة قرب شعار الدخول. */
.login-credit a, .sidebar-credit a { color: #a6f2df; font-weight: 800; text-decoration: none; } /* إبراز رابط الجهة المصممة. */
.login-footnote { margin-top: 21px; color: var(--muted); text-align: center; font-size: 12px; } /* تلميح حسابات الفريق. */
.login-footnote a { color: #a6f2df; font-weight: 800; text-decoration: none; } /* إبراز رابط التواصل مع الجهة المصممة. */
.login-link-button { display: block; margin: 14px auto 0; border: 0; padding: 7px 10px; color: #94edda; background: transparent; font: inherit; font-size: 12px; cursor: pointer; } /* رابط أنيق للانتقال بين الدخول واستعادة الحساب. */
.login-link-button:hover { color: #c4fff2; text-decoration: underline; text-underline-offset: 4px; } /* إبراز رابط الاستعادة عند المرور. */
.reset-panel { padding-top: 12px; } /* مساحة نماذج الاستعادة داخل بطاقة الدخول. */
.reset-icon { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 0 22px auto; border: 1px solid rgba(159, 130, 255, .28); border-radius: 18px; color: #c0aaff; background: radial-gradient(circle at 30% 25%, rgba(150, 119, 255, .25), rgba(89, 62, 161, .09)); box-shadow: 0 0 30px rgba(131, 103, 255, .13); font-size: 24px; } /* أيقونة بسيطة ومتوهجة للاستعادة. */
.reset-panel h1 { margin: 5px 0 9px; font-size: 27px; line-height: 1.35; } /* عنوان خطوة الاستعادة. */
.reset-panel > .muted { margin: 0 0 24px; font-size: 13px; line-height: 1.8; } /* شرح الخطوة بلغة واضحة. */
.form-message { min-height: 20px; margin: 0; color: #8fe8d3; font-size: 12px; line-height: 1.7; } /* نتيجة إرسال الرابط أو حفظ كلمة المرور. */
.form-message.is-error { color: #ff91a1; } /* لون رسائل التعذر. */
.form-error { min-height: 16px; margin: 0; color: #ff8294; font-size: 12px; } /* مكان خطأ تسجيل الدخول. */
.install-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 70% 0%, rgba(112, 72, 235, .18), transparent 42%), var(--bg); } /* خلفية صفحة التثبيت. */
.install-card { width: min(100%, 460px); border-radius: 28px; padding: 36px; } /* بطاقة معالج التثبيت. */
.install-card h1 { margin: 0 0 8px; font-size: 27px; } /* عنوان التثبيت. */
.install-card > .muted { margin: 0 0 22px; } /* شرح خطوة التثبيت. */
.alert-error { margin: 14px 0; border: 1px solid rgba(255, 112, 135, .35); border-radius: 11px; padding: 12px; color: #ff9aa8; background: rgba(255, 68, 100, .08); } /* صندوق رسائل التثبيت. */
.app-shell { min-height: 100vh; } /* إطار لوحة الإدارة. */
.sidebar { position: fixed; z-index: 5; inset: 18px 18px 18px auto; width: 252px; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: rgba(160, 145, 220, .45) transparent; border-radius: 25px; padding: 20px 14px 14px; } /* إبقاء القائمة الجانبية قابلة للتمرير عندما يكون ارتفاع الشاشة قصيراً. */
.sidebar > * { flex-shrink: 0; } /* منع ضغط عناصر القائمة؛ يظهر الزائد بالتمرير بدلاً من إخفائه. */
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 6px 7px 20px; } /* صف هوية المقهى. */
.sidebar-brand strong { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } /* قص اسم طويل في الشريط. */
.sidebar-brand small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; } /* وصف حساب المقهى. */
.sidebar-credit { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -10px 6px 15px; border: 1px solid rgba(166,242,223,.12); border-radius: 11px; padding: 8px 10px; color: #9ba4b5; background: rgba(92,232,199,.035); font-size: 9px; } /* بطاقة اعتماد ثابتة تحت اسم المقهى. */
.brand-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(129, 107, 255, .3); border-radius: 13px; color: #c2b5ff; background: radial-gradient(circle at 30% 20%, rgba(158, 127, 255, .35), rgba(75, 48, 151, .12)); box-shadow: 0 0 23px rgba(128, 99, 255, .13); } /* أيقونة نيون مربعة. */
.branch-picker { min-height: 42px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 12px; padding: 0 11px; color: #d9dbe4; background: rgba(255, 255, 255, .035); font-size: 11px; } /* حقل الفرع الجاري. */
.branch-picker .chevron { margin-right: auto; color: var(--muted); } /* سهم تحديد الفرع. */
.status-dot, .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 11px rgba(76, 226, 193, .7); } /* مؤشر اتصال حي. */
.primary-nav { display: grid; gap: 5px; margin-top: 24px; } /* قائمة التنقل الرأسية. */
.nav-link { min-height: 46px; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 12px; padding: 0 12px; color: #a7adbd; background: transparent; text-align: right; cursor: pointer; font-size: 13px; transition: .18s ease; } /* رابط وحدة في الشريط. */
.nav-link > span { width: 18px; color: #848b9f; text-align: center; font-size: 17px; } /* رمز الوحدة. */
.nav-link b { min-width: 21px; margin-right: auto; border-radius: 8px; padding: 2px 6px; color: #8beed8; background: rgba(56, 220, 184, .1); font-size: 10px; text-align: center; } /* عداد الطلبات. */
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, .045); } /* استجابة التنقل للمرور. */
.nav-link.is-active { color: #fff; background: linear-gradient(100deg, rgba(139, 112, 255, .2), rgba(81, 65, 137, .1)); box-shadow: inset -2px 0 #a28aff; } /* تمييز الوحدة الحالية. */
.nav-link.is-active > span { color: #baacff; } /* تلوين رمز الوحدة المفتوحة. */
.sidebar-bottom { margin-top: auto; } /* تثبيت محتوى المساعدة أسفل الشريط. */
@media (max-height: 850px) and (min-width: 761px) { .sidebar { padding-top: 13px; padding-bottom: 10px; } .sidebar-brand { padding-bottom: 12px; } .sidebar-credit { margin-bottom: 9px; } .primary-nav { gap: 3px; margin-top: 12px; } .nav-link { min-height: 40px; } } /* تقليل الفراغات على شاشات اللابتوب القصيرة مع الإبقاء على التمرير. */
.support-card { display: grid; gap: 6px; margin: 12px 2px; border: 1px solid rgba(118, 96, 215, .19); border-radius: 15px; padding: 14px 12px; background: linear-gradient(135deg, rgba(100, 76, 174, .17), rgba(35, 32, 54, .1)); } /* بطاقة دعم داخلية هادئة. */
.support-card strong { font-size: 11px; } /* عنوان بطاقة الدعم. */
.support-card small { color: var(--muted); font-size: 9px; } /* وصف بطاقة الدعم. */
.support-orb { color: #b9a8ff; font-size: 19px; } /* رمز بطاقة الدعم. */
.logout-button { width: 100%; min-height: 40px; border: 0; border-radius: 11px; color: #aeb4c3; background: transparent; text-align: right; cursor: pointer; } /* زر تسجيل الخروج. */
.logout-button:hover { color: #ff99a8; background: rgba(247, 76, 103, .07); } /* إشارة بصرية للخروج. */
.main-panel { min-height: 100vh; margin-right: 286px; padding: 27px 34px 20px 36px; } /* مساحة العمل بجانب التنقل. */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 32px; } /* رأس عنوان الوحدة. */
.topbar h1 { margin: 0; font-size: 25px; font-weight: 600; } /* عنوان لوحة التحكم. */
.topbar .eyebrow { margin-bottom: 3px; color: var(--muted); } /* تاريخ اليوم فوق العنوان. */
.topbar-actions { display: flex; align-items: center; gap: 10px; } /* أدوات التنبيه والملف. */
.profile-chip { display: grid; grid-template-columns: 35px auto; grid-template-rows: 18px 15px; align-items: center; column-gap: 9px; min-width: 140px; border: 1px solid var(--border); border-radius: 15px; padding: 6px 9px; background: rgba(255, 255, 255, .035); } /* شارة المستخدم الحالي. */
.profile-chip .avatar { grid-row: 1 / 3; } /* تثبيت الصورة المصغرة عبر صفين. */
.profile-chip span { font-size: 11px; font-weight: 700; } /* اسم المستخدم في الرأس. */
.profile-chip small { color: var(--muted); font-size: 9px; } /* دور المستخدم. */
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #d8ceff; background: rgba(142, 118, 255, .17); font-weight: 700; } /* صورة حساب بأول حرف. */
.workspace { min-width: 0; min-height: 70vh; } /* مساحة عرض بيانات الوحدة دون فرض تمدد أفقي. */
.view-zoom-viewport { position: relative; width: 100%; min-width: 0; overflow: hidden; overflow-x: clip; } /* تثبيت إطار الصفحات المصغرة داخل عرض لوحة التحكم. */
.view-zoom-content { position: absolute; top: 0; right: 0; width: 100%; min-width: 0; transform-origin: top right; } /* تثبيت الحافة اليمنى ومنع تمدد الصفحة أفقياً عند التصغير. */
.view-zoom-toolbar { width: max-content; display: flex; align-items: center; gap: 4px; margin: 0 0 12px auto; border: 1px solid var(--border); border-radius: 12px; padding: 4px; background: rgba(20, 23, 33, .76); box-shadow: 0 8px 22px rgba(0, 0, 0, .14); } /* أداة صغيرة للتحكم في حجم صفحات الطاولات والطلبات. */
.view-zoom-label { padding-inline: 7px; color: var(--muted); font-size: 10px; font-weight: 600; } /* وصف مستوى العرض. */
.view-zoom-button { width: 29px; height: 29px; display: inline-grid; place-items: center; border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; color: #e5e6ef; background: rgba(255, 255, 255, .045); font-size: 16px; line-height: 1; cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease; } /* زر تكبير أو تصغير أو إعادة الضبط. */
.view-zoom-button:hover:not(:disabled) { border-color: rgba(164, 142, 255, .45); color: #c6b6ff; background: rgba(153, 129, 255, .12); } /* إظهار حالة التفاعل مع التحكم. */
.view-zoom-button:disabled { opacity: .4; cursor: not-allowed; } /* توضيح بلوغ حد التكبير أو التصغير. */
.view-zoom-value { min-width: 39px; color: #bdf5e6; font-size: 10px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } /* عرض النسبة الحالية بوضوح. */
.view-zoom-reset { font-size: 15px; } /* تمييز زر استعادة الحجم الافتراضي. */
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; } /* مقدمة الصفحات الداخلية. */
.section-heading h2 { margin: 0 0 6px; font-size: 22px; } /* عنوان الوحدة. */
.section-heading .muted { margin: 0; font-size: 12px; } /* شرح الوحدة. */
.wave { color: #f3cb73; font-size: 18px; } /* لمسة زخرفية لعنوان الترحيب. */
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; } /* شبكة مؤشرات اليوم. */
.metric-card { position: relative; min-height: 160px; overflow: hidden; border-radius: 19px; padding: 17px; } /* بطاقة المؤشر اليومية. */
.metric-top { display: flex; align-items: center; justify-content: space-between; color: #b3b8c6; font-size: 11px; } /* عنوان ورمز المؤشر. */
.metric-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; font-size: 17px; } /* مربع أيقونة المؤشر. */
.metric-icon.mint { color: #67ebcb; background: rgba(61, 221, 185, .12); } /* لون مبيعات اليوم. */
.metric-icon.purple { color: #b8a5ff; background: rgba(145, 115, 255, .13); } /* لون الطلبات. */
.metric-icon.amber { color: #efc775; background: rgba(226, 175, 86, .12); } /* لون الطاولات. */
.metric-icon.blue { color: #7caeff; background: rgba(88, 146, 234, .12); } /* لون الطلبات المفتوحة. */
.metric-card > strong { display: block; position: relative; z-index: 1; margin: 14px 0 5px; font-size: clamp(23px, 2.2vw, 31px); letter-spacing: -.04em; } /* قيمة المؤشر. */
.metric-card > small { display: block; position: relative; z-index: 1; font-size: 10px; } /* وصف المؤشر. */
.metric-card .total-of { color: var(--muted); font-size: 15px; } /* إجمالي عدد الطاولات. */
.trend { font-size: 10px; font-weight: 700; } /* مقارنة المبيعات بالأمس. */
.trend span { color: var(--muted); font-weight: 400; } /* القيمة المرجعية للأمس. */
.trend-up { color: #57e2bd; } /* تحسن الأداء. */
.trend-down { color: #ff8594; } /* انخفاض الأداء. */
.sparkline { position: absolute; inset: auto 0 0; height: 34px; display: flex; align-items: end; justify-content: space-around; padding: 0 12px; opacity: .23; } /* شريط رسم زخرفي. */
.sparkline i { width: 9%; border-radius: 4px 4px 0 0; background: linear-gradient(#3ce3bd, transparent); } /* أعمدة خط مبيعات مصغر. */
.sparkline i:nth-child(1) { height: 29%; } /* ارتفاع العمود الأول. */
.sparkline i:nth-child(2) { height: 44%; } /* ارتفاع العمود الثاني. */
.sparkline i:nth-child(3) { height: 34%; } /* ارتفاع العمود الثالث. */
.sparkline i:nth-child(4) { height: 67%; } /* ارتفاع العمود الرابع. */
.sparkline i:nth-child(5) { height: 52%; } /* ارتفاع العمود الخامس. */
.sparkline i:nth-child(6) { height: 78%; } /* ارتفاع العمود السادس. */
.sparkline i:nth-child(7) { height: 100%; } /* ارتفاع العمود الأخير. */
.metric-decoration { position: absolute; left: -25px; bottom: -55px; width: 130px; height: 130px; border: 1px solid currentColor; border-radius: 50%; opacity: .12; } /* دوائر زخرفية خافتة. */
.purple-decoration { color: #a88dff; box-shadow: 0 0 0 16px rgba(145, 115, 255, .07), 0 0 0 34px rgba(145, 115, 255, .035); } /* زخرفة بنفسجية. */
.amber-decoration { color: #efc775; box-shadow: 0 0 0 16px rgba(226, 175, 86, .07), 0 0 0 34px rgba(226, 175, 86, .035); } /* زخرفة ذهبية. */
.blue-decoration { color: #7caeff; box-shadow: 0 0 0 16px rgba(88, 146, 234, .07), 0 0 0 34px rgba(88, 146, 234, .035); } /* زخرفة زرقاء. */
.content-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 15px; } /* توزيع اللوحات الرئيسة. */
.panel { border-radius: 19px; padding: 18px; } /* سطح داخلي للبيانات. */
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; } /* رأس لوحة البيانات. */
.panel-heading h3 { margin: 0 0 5px; font-size: 15px; } /* عنوان القسم الصغير. */
.panel-heading p { margin: 0; color: var(--muted); font-size: 10px; } /* شرح القسم الصغير. */
.text-button { border: 0; color: #b5a6ff; background: transparent; cursor: pointer; font-size: 11px; } /* رابط نصي لإظهار المزيد. */
.recent-list { display: grid; } /* ترتيب الطلبات الحديثة. */
.recent-row { display: flex; align-items: center; gap: 11px; min-height: 59px; border-bottom: 1px solid rgba(255, 255, 255, .055); } /* صف طلب حديث. */
.recent-row:last-child { border-bottom: 0; } /* إزالة حد آخر صف. */
.table-avatar { width: 37px; height: 37px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 12px; color: #d1c6ff; background: rgba(142, 118, 255, .14); font-weight: 700; } /* شارة رقم الطاولة. */
.recent-copy { min-width: 0; display: grid; gap: 4px; } /* تفاصيل العميل في الصف. */
.recent-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; } /* قص اسم طويل. */
.recent-copy small { color: var(--muted); font-size: 9px; } /* وقت وموقع الطلب. */
.recent-row > b { margin-right: auto; font-size: 11px; white-space: nowrap; } /* مبلغ الطلب في نهاية الصف. */
.mini-table-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; } /* مخطط طاولات مصغر. */
.mini-table { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(76, 226, 193, .15); border-radius: 13px; color: #a0e7d6; background: rgba(45, 207, 169, .07); font-size: 12px; } /* رمز طاولة متاحة. */
.mini-table i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); } /* نقطة الطاولة المتاحة. */
.mini-table.is-busy { border-color: rgba(237, 174, 76, .17); color: #ebc67e; background: rgba(208, 151, 58, .075); } /* لون الطاولة المشغولة. */
.mini-table.is-busy i { background: #eab962; } /* نقطة الطاولة المشغولة. */
.table-summary { display: flex; flex-wrap: wrap; gap: 22px; margin: -5px 0 16px; color: var(--muted); font-size: 11px; } /* ملخص حالات الطاولات. */
.table-summary span { display: inline-flex; align-items: center; gap: 7px; } /* صف حالة الطاولة. */
.table-filter-control { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; color: var(--muted); } /* مرشح حالة الطاولات إلى جانب ملخص الفرع. */
.table-filter-control select { min-height: 34px; border: 1px solid var(--border); border-radius: 9px; padding: 0 10px; color: var(--text); background: var(--panel-strong); font: inherit; } /* اختيار عرض كل الطاولات أو المتاحة أو المشغولة. */
.table-search-control { display: inline-flex; align-items: center; gap: 8px; min-width: min(100%, 330px); color: var(--muted); }
.table-search-control input { min-width: 0; width: min(330px, 36vw); min-height: 34px; border: 1px solid var(--border); border-radius: 9px; padding: 0 10px; color: var(--text); background: var(--panel-strong); font: inherit; }
.table-invoice-references { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 9px; color: var(--muted); font-size: 10px; }
.table-invoice-references b { border: 1px solid rgba(109, 232, 203, .22); border-radius: 8px; padding: 3px 7px; color: #91ead8; background: rgba(67, 215, 188, .08); font-variant-numeric: tabular-nums; }
.table-card[hidden] { display: none !important; }
.table-search-empty[hidden] { display: none !important; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; } /* نقطة توضيح الحالة. */
.occupied-dot { background: #ebb964; } /* لون الطاولة المشغولة. */
.available-dot { background: var(--mint); } /* لون الطاولة المتاحة. */
.tables-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; } /* شبكة مرنة تعرض بطاقات أكثر على الشاشات الواسعة. */
.table-card { min-width: 0; border-radius: 16px; padding: 13px; transition: transform .18s ease, border-color .18s ease; } /* بطاقة طاولة مستقلة بحجم أكثر اتزاناً. */
.table-card:hover { transform: translateY(-2px); } /* رفع البطاقة عند المرور. */
.table-busy { border-color: rgba(226, 175, 86, .19); } /* حد مميز للطاولة المشغولة. */
.table-free { border-color: rgba(76, 226, 193, .12); } /* حد هادئ للطاولة المتاحة. */
.table-card-top { display: flex; align-items: center; justify-content: space-between; } /* رأس بطاقة الطاولة. */
.table-number { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid rgba(162, 136, 255, .18); border-radius: 12px; color: #d2c8ff; background: rgba(132, 102, 241, .1); font-size: 13px; font-weight: 700; } /* رقم الطاولة. */
.table-state { display: inline-flex; align-items: center; gap: 6px; color: #8ee8d2; font-size: 10px; } /* حالة الطاولة النصية. */
.table-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); } /* نقطة الحالة المتاحة. */
.table-busy .table-state { color: #efc77b; } /* حالة مشغولة بلون دافئ. */
.table-busy .table-state i { background: #edb854; box-shadow: 0 0 9px rgba(237, 184, 84, .5); } /* توهج نقطة الانشغال. */
.table-card h3 { margin: 13px 0 4px; font-size: 14px; } /* اسم الطاولة. */
.table-card p { margin: 0; color: var(--muted); font-size: 10px; } /* الفرع وعدد الطلبات. */
.table-total { display: block; margin-top: 11px; font-size: 17px; } /* إجمالي الحساب المفتوح. */
.table-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; } /* أزرار التحكم بالطاولة. */
.table-actions .button-primary { margin-right: auto; } /* إبراز إنهاء الحساب. */

.table-bulk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: -4px 0 14px; border-radius: 14px; padding: 10px 12px; }
.table-bulk-summary { display: flex; align-items: center; gap: 12px; color: var(--text); font-size: 12px; }
.table-bulk-summary span { color: var(--muted); }
.table-bulk-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.table-select-control { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 999px; padding: 4px 8px; color: var(--muted); background: rgba(12, 16, 27, .58); font-size: 10px; cursor: pointer; }
.table-select-control input, .table-batch-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--mint); cursor: pointer; }
.table-bulk-toolbar .button-danger:disabled { opacity: .5; cursor: not-allowed; }
.table-batch-option { display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; color: var(--text); background: rgba(255, 255, 255, .025); cursor: pointer; }
.table-batch-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border: 1px solid var(--border); border-radius: 13px; padding: 12px; background: rgba(255, 255, 255, .025); }
.table-batch-fields .field-help { grid-column: 1 / -1; }
.table-batch-fields[hidden], [data-single-table-field][hidden] { display: none !important; }
@media (max-width: 620px) {
  .table-bulk-toolbar { align-items: stretch; }
  .table-bulk-summary { justify-content: space-between; }
  .table-bulk-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .table-bulk-actions button { width: 100%; }
  .table-bulk-actions [data-table-select-visible] { grid-column: 1 / -1; }
  .table-batch-fields { grid-template-columns: 1fr; }
  .table-select-control span { display: none; }
}

.stock-alert { width: 100%; margin: -12px 0 20px; border: 1px solid rgba(238, 184, 84, .28); border-radius: 13px; padding: 12px 15px; color: #f0cc82; background: rgba(213, 156, 55, .09); text-align: right; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; } /* تنبيه قابل للنقر عند وجود أصناف غير متاحة. */
.stock-alert:hover { border-color: rgba(238, 184, 84, .55); background: rgba(213, 156, 55, .14); } /* إبراز رابط مراجعة المنيو عند المرور. */
.orders-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 12px; } /* شبكة مرنة للطلبات والفواتير المحفوظة. */
.receipt-filters { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(160px, .42fr) auto; align-items: end; gap: 12px; margin: 16px 0; padding: 16px; border: 1px solid var(--border); border-radius: 20px; background: rgba(20, 23, 33, .72); } /* ترتيب حقول البحث في أرشيف الفواتير. */
.receipt-filters label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; } /* إظهار وصف كل فلتر. */
.receipt-filters input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-strong); color: var(--text); } /* تنسيق حقول البحث والتاريخ. */
.receipt-filters .button-row { display: flex; gap: 8px; } /* وضع أزرار البحث والمسح بجانب بعضها. */
.closed-order-card .order-actions { justify-content: flex-start; } /* وضع زر إعادة الطباعة باتجاه بداية بطاقة الفاتورة. */
.receipt-refund-note { display: grid; gap: 6px; margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(255, 190, 100, .25); border-radius: 12px; color: #ffd58d; background: rgba(255, 190, 100, .07); font-size: 10px; } /* تمييز تسوية الفاتورة دون إخفاء أصلها. */
.receipt-refund-note small { color: var(--muted); line-height: 1.7; } /* عرض سبب التصحيح وتاريخه للمالك. */
.receipt .receipt-refund-note { color: #6b4d13; border-color: #e5d19d; background: #fff8e6; } /* إبقاء ملاحظة الاسترداد واضحة في نسخة الفاتورة المطبوعة. */
.receipt .receipt-refund-note small { color: #625b50; } /* تباين مريح لسجل الاسترداد على ورق أبيض. */
.order-card { min-width: 0; border-radius: 17px; padding: 14px; } /* بطاقة الطلب المفتوح. */
.order-card-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } /* رأس بطاقة الطلب. */
.large-avatar { width: 42px; height: 42px; } /* تكبير رقم الطاولة في الطلب. */
.order-title { display: grid; gap: 4px; min-width: 0; } /* تنظيم اسم الطاولة والعميل. */
.order-title strong { font-size: 13px; } /* اسم الطاولة. */
.order-title small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; } /* بيانات العميل المختصرة. */
.live-badge { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; border-radius: 8px; padding: 5px 8px; color: #69dfbf; background: rgba(54, 219, 181, .085); font-size: 9px; } /* شارة حالة مفتوح. */
.live-badge i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); } /* نقطة تنبيه الطلب المفتوح. */
.order-lines { display: grid; gap: 7px; padding: 13px 0; } /* قائمة الأصناف داخل الطلب. */
.order-line { display: flex; align-items: center; justify-content: space-between; gap: 9px; } /* صف صنف داخل الطلب. */
.order-line > div:first-child { display: grid; gap: 3px; } /* اسم وسعر الصنف. */
.order-line strong { font-size: 11px; } /* اسم الصنف. */
.order-line small { color: var(--muted); font-size: 9px; } /* سعر الوحدة. */
.line-actions { display: inline-flex; align-items: center; gap: 7px; } /* أزرار كمية الصنف. */
.line-actions button { width: 25px; height: 25px; border: 1px solid var(--border); border-radius: 8px; color: #d3d5df; background: rgba(255, 255, 255, .04); cursor: pointer; } /* زر زيادة أو تقليل. */
.line-actions { flex-wrap: wrap; justify-content: end; } /* السماح بزر حالة التقديم بعرض نصه على الشاشات الضيقة. */
.line-actions button[data-line-delivery] { width: auto; min-width: 90px; height: auto; min-height: 29px; padding: 4px 9px; color: #a5f0df; white-space: nowrap; } /* إظهار زر تأكيد وصول الصنف كاملاً. */
.line-actions button:hover { border-color: rgba(76, 226, 193, .4); } /* تمييز أزرار الكمية. */
.line-actions b { min-width: 15px; font-size: 10px; text-align: center; } /* رقم الكمية. */
.line-actions .line-cancel { color: #ff8b9a; } /* لون إلغاء الصنف. */
.line-cancelled { opacity: .45; text-decoration: line-through; } /* إظهار الصنف الملغى في السجل. */
.order-card-foot { display: flex; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 12px; color: var(--muted); font-size: 10px; } /* وقت وإجمالي الطلب. */
.order-card-foot strong { color: var(--text); font-size: 14px; } /* إبراز الإجمالي. */
.order-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; } /* أوامر الحساب السريعة. */
.order-actions .button-primary { margin-right: auto; } /* إبراز إجراء إنهاء الحساب. */
.menu-admin-layout { display: grid; grid-template-columns: minmax(230px, .65fr) minmax(0, 1.35fr); align-items: start; gap: 15px; overflow-anchor: none; } /* فصل الأقسام عن الأصناف ومنع تمدد اللوحة أو قفز موضع الصفحة. */
.category-list { display: grid; gap: 5px; } /* ترتيب الأقسام رأسياً. */
.category-admin-row { display: flex; align-items: center; gap: 7px; min-height: 54px; padding: 3px 5px; border: 1px solid transparent; border-radius: 12px; transition: background .18s ease, border-color .18s ease; } /* صف تفاعلي لقسم المنيو. */
.category-admin-row.is-selected { border-color: rgba(65, 222, 190, .28); background: linear-gradient(110deg, rgba(54, 218, 182, .12), rgba(150, 119, 255, .07)); } /* تمييز القسم الذي يعرض أصنافه. */
.category-filter-button { display: flex; align-items: center; flex: 1 1 auto; gap: 10px; min-width: 0; min-height: 46px; padding: 5px 8px; border: 0; border-radius: 9px; color: inherit; background: transparent; text-align: start; font: inherit; cursor: pointer; } /* مساحة نقر واضحة لاختيار القسم. */
.category-filter-button:hover { background: rgba(255, 255, 255, .035); }
.category-filter-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.category-filter-copy { display: grid; gap: 4px; min-width: 0; }
.category-filter-copy small { color: var(--muted); font-size: 9px; }
.category-mark { color: #b6a6ff; font-size: 18px; } /* رمز القسم. */
.category-admin-row strong { font-size: 11px; } /* اسم القسم. */
.category-admin-row small { color: var(--muted); font-size: 9px; } /* حالة القسم. */
.category-admin-row > .category-actions { display: flex; gap: 6px; margin-inline-start: auto; } /* تثبيت أدوات القسم في نهاية الصف. */
.category-admin-row > .category-actions button { margin: 0; }
.category-delete-button { color: #ff93a4; }
.category-delete-button:hover { border-color: rgba(255, 115, 137, .42); background: rgba(220, 65, 92, .14); }
.search-box { display: flex; align-items: center; gap: 7px; width: 185px; min-height: 35px; border: 1px solid var(--border); border-radius: 10px; padding: 0 9px; color: var(--muted); background: rgba(7, 9, 14, .3); } /* حقل بحث مدمج. */
.search-box input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font: inherit; font-size: 10px; } /* نص البحث. */
.admin-items-list { display: grid; align-content: start; overflow-anchor: none; } /* ارتفاع القائمة يتبع عدد الأصناف دون فراغ أو تمرير داخلي. */
.admin-item-row { display: flex; align-items: center; gap: 10px; min-height: 60px; border-bottom: 1px solid rgba(255, 255, 255, .055); } /* صف صنف في لوحة الإدارة. */
.admin-item-row:last-child { border-bottom: 0; } /* إزالة حد آخر صنف. */
.item-thumb { width: 40px; height: 40px; display: grid; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 11px; color: #b6a4ff; background: linear-gradient(135deg, rgba(143, 115, 255, .16), rgba(67, 216, 184, .1)); } /* صورة أو رمز افتراضي للصنف. */
.item-thumb img { width: 100%; height: 100%; object-fit: cover; } /* قص الصورة داخل المربع. */
.item-main { min-width: 0; display: grid; gap: 4px; } /* بيانات الصنف. */
.item-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; } /* اسم الصنف. */
.item-main small { color: var(--muted); font-size: 9px; } /* وصف قسم الصنف. */
.item-price { margin-right: auto; white-space: nowrap; font-size: 11px; } /* سعر الصنف. */
.availability { border-radius: 7px; padding: 4px 7px; color: #7de7ca; background: rgba(57, 218, 179, .08); font-size: 9px; white-space: nowrap; } /* شارة التوفر. */
.availability.is-off { color: #ff9ba7; background: rgba(255, 90, 117, .09); } /* حالة نفاد الصنف. */
.item-delete-button { flex: 0 0 auto; color: #ff9aaa; }
.item-delete-button:hover { border-color: rgba(255, 115, 137, .42); background: rgba(220, 65, 92, .14); }
.compact-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* تصغير شبكة إحصاء العملاء. */
.compact-metrics .metric-card { min-height: 125px; } /* تقليل ارتفاع بطاقة العملاء. */
.integration-status { font-size: 18px !important; } /* حجم حالة ربط واتساب. */
.integration-status.ready { color: #73e6c9; } /* لون حالة التكامل عند ضبط بياناته. */
.customer-panel { margin-top: 16px; } /* فصل جدول العملاء عن المؤشرات. */
.table-scroll { overflow-x: auto; } /* جعل جدول العملاء قابلاً للتمرير. */
.data-table { width: 100%; border-collapse: collapse; text-align: right; white-space: nowrap; } /* جدول إداري ممتد. */
.data-table th { padding: 11px 9px; color: var(--muted); font-size: 10px; font-weight: 500; } /* رؤوس الجدول. */
.data-table td { border-top: 1px solid rgba(255, 255, 255, .05); padding: 13px 9px; color: #e1e3eb; font-size: 11px; } /* بيانات الجدول. */
.data-table code { color: #bbacff; font-size: 10px; } /* روابط الحسابات المختصرة. */
.empty-cell { color: var(--muted) !important; text-align: center; } /* رسالة جدول فارغ. */
.consent-pill { display: inline-flex; border-radius: 8px; padding: 5px 8px; font-size: 9px; } /* شارة حالة موافقة الرسائل. */
.consent-yes { color: #74e4c8; background: rgba(56, 217, 181, .1); } /* عميل وافق على التذكير. */
.consent-no { color: #a5aabb; background: rgba(255, 255, 255, .06); } /* عميل لم يوافق. */
.settings-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 15px; } /* عمودا إعدادات المقهى والفريق. */
.settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; } /* شبكة حقول إعدادات الهوية. */
.wide-field { grid-column: 1 / -1; } /* حقل إعداد يمتد على العرض كاملاً. */
.field-help { color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.6; } /* شرح موجز يميز الاسم الداخلي عن ظهوره على الفاتورة. */
.receipt-name-option { min-height: 46px; align-self: end; border: 1px solid rgba(166,242,223,.12); border-radius: 12px; padding: 0 10px; background: rgba(92,232,199,.035); } /* إبقاء خيار إظهار الاسم بجوار اسم الحساب. */
.settings-form input[type="color"] { min-height: 46px; padding: 4px 8px; cursor: pointer; } /* حقل اختيار اللون. */
.settings-form select { width: 100%; min-height: 46px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: 0 12px; color: var(--text); background: rgba(7, 9, 14, .5); font: inherit; } /* حقل اختيار تخطيط المنيو. */
.settings-form input[type="range"] { accent-color: var(--tenant-accent); cursor: pointer; } /* متحكم استدارة البطاقات. */
.branch-panel { margin-top: 15px; } /* فصل إدارة الفروع عن بقية الإعدادات. */
.zatca-setup-panel { margin-top: 15px; overflow: hidden; background: radial-gradient(ellipse at 0% 0%, rgba(53, 224, 193, .075), transparent 46%), linear-gradient(145deg, rgba(21, 25, 35, .94), rgba(13, 16, 25, .96)); }
.zatca-setup-panel .panel-heading { align-items: flex-start; gap: 16px; }
.zatca-setup-panel .panel-heading h3 { margin: 3px 0 6px; }
.zatca-setup-badge { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px; color: var(--muted); background: rgba(255, 255, 255, .035); font-size: 11px; font-weight: 700; }
.zatca-setup-badge.is-ready { border-color: rgba(53, 224, 193, .35); color: #8cebd7; background: rgba(53, 224, 193, .09); box-shadow: 0 0 18px rgba(53, 224, 193, .08); }
.zatca-setup-badge.is-pending { border-color: rgba(255, 191, 95, .24); color: #f2cc8d; background: rgba(255, 191, 95, .06); }
.zatca-setup-panel input[readonly] { color: #91e9d8; border-color: rgba(53, 224, 193, .18); background: rgba(53, 224, 193, .045); }
.zatca-readiness { border: 1px solid rgba(255, 255, 255, .075); border-radius: 15px; padding: 14px 16px; background: rgba(7, 9, 14, .24); }
.zatca-readiness-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--text); font-size: 12px; }
.zatca-readiness-head span { color: #8cebd7; direction: ltr; font-variant-numeric: tabular-nums; }
.zatca-readiness ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.zatca-readiness li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.zatca-readiness li i { display: grid; flex: 0 0 18px; width: 18px; height: 18px; place-items: center; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; color: var(--muted); font-size: 10px; font-style: normal; }
.zatca-readiness li.is-complete { color: #b5f2e6; }
.zatca-readiness li.is-complete i { border-color: rgba(53, 224, 193, .35); color: #071813; background: #55dfc3; }
.zatca-workflow { border: 1px solid rgba(174, 145, 255, .18); border-radius: 15px; padding: 15px 16px; background: linear-gradient(135deg, rgba(116, 88, 190, .09), rgba(7, 9, 14, .24)); }
.zatca-workflow-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text); font-size: 12px; }
.zatca-workflow-heading span { border: 1px solid rgba(255, 191, 95, .22); border-radius: 999px; padding: 5px 9px; color: #f2cc8d; background: rgba(255, 191, 95, .06); font-size: 10px; }
.zatca-workflow > p { margin: 9px 0 12px; color: var(--muted); font-size: 10px; line-height: 1.8; }
.zatca-workflow ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; counter-reset: zatca-step; }
.zatca-workflow li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; border: 1px solid rgba(255, 255, 255, .055); border-radius: 10px; padding: 7px 10px; color: var(--text); background: rgba(255, 255, 255, .025); font-size: 10px; }
.zatca-workflow li::before { counter-increment: zatca-step; content: counter(zatca-step); display: grid; flex: 0 0 22px; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #c7b6ff; background: rgba(153, 125, 255, .12); font-size: 10px; }
.zatca-workflow li span { flex: 1; }
.zatca-workflow li small { color: var(--muted); font-size: 9px; }
.zatca-workflow .zatca-workflow-note { margin: 12px 0 0; border-top: 1px solid rgba(255, 255, 255, .07); padding-top: 10px; color: #f2cc8d; }
.zatca-compliance-request { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 220px) auto; align-items: end; gap: 12px; border: 1px solid rgba(53, 224, 193, .2); border-radius: 14px; padding: 15px; background: linear-gradient(135deg, rgba(53, 224, 193, .07), rgba(153, 125, 255, .05)); }
.zatca-compliance-request strong { display: block; color: var(--text); font-size: 12px; }
.zatca-compliance-request p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.zatca-server-readiness { display: block; margin-top: 8px; font-size: 10px; line-height: 1.7; }
.zatca-server-readiness.is-ready { color: #8cebd7; }
.zatca-server-readiness.is-missing { color: #f2cc8d; }
.zatca-server-capabilities { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.zatca-server-capabilities span { border: 1px solid var(--border); border-radius: 999px; padding: 4px 8px; color: var(--muted); background: rgba(255, 255, 255, .025); font-size: 9px; }
.zatca-server-capabilities span.is-ready { border-color: rgba(53, 224, 193, .22); color: #8cebd7; background: rgba(53, 224, 193, .06); }
.zatca-server-capabilities span.is-missing { border-color: rgba(255, 191, 95, .22); color: #f2cc8d; background: rgba(255, 191, 95, .05); }
.zatca-compliance-request label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; }
.zatca-compliance-request input { direction: ltr; text-align: center; letter-spacing: .22em; }
.zatca-compliance-request button { min-height: 42px; white-space: nowrap; }
.zatca-compliance-request button:disabled { cursor: not-allowed; opacity: .55; }
.zatca-csid-status { grid-column: 1 / -1; color: #8cebd7; font-size: 10px; }
.zatca-setup-error { border: 1px solid rgba(255, 111, 137, .25); border-radius: 12px; padding: 12px 14px; color: #ff9cae; background: rgba(255, 82, 115, .07); font-size: 12px; line-height: 1.75; }
@media (max-width: 700px) { .zatca-setup-panel .panel-heading { flex-direction: column; } .zatca-readiness ul { grid-template-columns: 1fr; } .zatca-compliance-request { grid-template-columns: 1fr; } .zatca-compliance-request button { width: 100%; } }
.settings-note { grid-column: 1 / -1; border: 1px solid rgba(231, 189, 99, .15); border-radius: 12px; padding: 12px; color: #d7c18d; background: rgba(218, 164, 59, .06); font-size: 10px; line-height: 1.8; } /* ملاحظة حساب الفاتورة والإعداد. */
.receipt-qr-warning { border-color: rgba(255, 106, 132, .42); color: #ffd1da; background: rgba(196, 54, 83, .12); }
.staff-list { display: grid; } /* قائمة أعضاء الفريق. */
.staff-row { display: flex; align-items: center; gap: 9px; min-height: 57px; border-bottom: 1px solid rgba(255, 255, 255, .05); } /* صف موظف. */
.staff-row > div:nth-child(2) { display: grid; gap: 4px; } /* اسم الموظف وبريده. */
.staff-row strong { font-size: 10px; } /* اسم المستخدم. */
.staff-row small { color: var(--muted); font-size: 9px; } /* بريد الدخول. */
.role-chip { margin-right: auto; border-radius: 8px; padding: 5px 8px; color: #c6baff; background: rgba(145, 115, 255, .1); font-size: 9px; } /* شارة دور الموظف. */
.app-footer { display: flex; justify-content: flex-end; gap: 15px; margin-top: 30px; color: #71798b; font-size: 9px; } /* إبقاء حالة الاتصال دون رابط موقع في تذييل الصفحات. */
.app-footer #connection-status { display: inline-flex; align-items: center; gap: 6px; } /* حالة الخادم. */
.credit-group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 9px; } /* ترتيب اعتماد الجهة المصممة. */
.app-footer i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); } /* نقطة الاتصال الحالية. */
.app-footer .offline-dot { background: #ff7488; } /* نقطة انقطاع الاتصال. */
.app-modal { width: min(92vw, 480px); max-height: 88vh; overflow-y: auto; border: 1px solid rgba(255, 255, 255, .12); border-radius: 23px; padding: 22px; color: var(--text); background: #161923; box-shadow: 0 30px 100px rgba(0, 0, 0, .62); } /* نافذة النماذج الزجاجية. */
.screen-lock-dialog { width: min(92vw, 430px); max-height: min(90dvh, 620px); overflow-y: auto; margin: auto; border: 1px solid rgba(162, 138, 255, .27); border-radius: 27px; padding: 0; color: var(--text); background: radial-gradient(ellipse at 15% 0%, rgba(121, 85, 224, .2), transparent 48%), #11141d; box-shadow: 0 32px 110px rgba(0, 0, 0, .72), 0 0 42px rgba(120, 91, 228, .13); }
.screen-lock-dialog::backdrop { background: rgba(3, 5, 10, .88); backdrop-filter: blur(12px); }
.screen-lock-card { display: grid; gap: 18px; padding: clamp(22px, 5vw, 34px); text-align: center; }
.screen-lock-brand { width: 58px; height: 58px; display: grid; place-items: center; justify-self: center; border: 1px solid rgba(162, 138, 255, .38); border-radius: 19px; color: #c8b9ff; background: rgba(133, 103, 232, .15); box-shadow: 0 0 28px rgba(143, 112, 255, .14); }
.screen-lock-brand svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.screen-lock-card h2 { margin: 0; font-size: clamp(20px, 5vw, 25px); }
.screen-lock-card > p { margin: -10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.screen-lock-form { display: grid; gap: 13px; text-align: right; }
.screen-lock-form label { display: grid; gap: 7px; color: #d9dce7; font-size: 12px; font-weight: 650; }
.screen-lock-form input { width: 100%; min-height: 48px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 13px; padding: 0 13px; color: var(--text); background: rgba(6, 8, 14, .68); font: inherit; font-size: 16px; }
.screen-lock-form input:focus { outline: 0; border-color: rgba(109, 232, 203, .55); box-shadow: 0 0 0 3px rgba(76, 226, 193, .07); }
.screen-lock-form input.pin-input { text-align: center; letter-spacing: .5em; font-size: 23px; font-weight: 750; }
.screen-lock-message { min-height: 20px; margin: 0; color: #99e9d6; font-size: 11px; line-height: 1.7; }
.screen-lock-message.is-error { color: #ff9cac; }
.screen-lock-actions { display: grid; gap: 9px; }
.screen-lock-actions .button { width: 100%; min-height: 46px; }
.screen-lock-link { border: 0; padding: 8px; color: #b8a9ff; background: none; cursor: pointer; font: inherit; font-size: 11px; }
.screen-lock-dialog[data-locked="1"] { width: min(92vw, 390px); }
.screen-lock-dialog[data-locked="1"] .screen-lock-card { min-height: 360px; align-content: center; }
.app-modal { scrollbar-width: thin; scrollbar-color: rgba(162, 138, 255, .55) transparent; } /* شريط تمرير خفيف داخل النوافذ الطويلة. */
.app-modal::-webkit-scrollbar, .refund-item-options::-webkit-scrollbar { width: 8px; } /* عرض شريط التمرير دون تشويش المحتوى. */
.app-modal::-webkit-scrollbar-thumb, .refund-item-options::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 10px; background: rgba(162, 138, 255, .45); background-clip: padding-box; } /* لون شريط التمرير من ألوان الهوية. */
.refund-item-picker { position: relative; } /* مرجع القائمة المخصصة للصنف المسترد. */
.refund-item-trigger { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 13px; padding: 0 14px; color: var(--text); background: rgba(7, 9, 14, .58); text-align: right; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.refund-item-trigger:hover, .refund-item-trigger[aria-expanded="true"] { border-color: rgba(109, 232, 203, .55); background: rgba(7, 9, 14, .82); box-shadow: 0 0 0 3px rgba(76, 226, 193, .06); }
.refund-item-trigger::after { width: 8px; height: 8px; flex: 0 0 auto; border-right: 2px solid #aeb4c3; border-bottom: 2px solid #aeb4c3; content: ""; transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; }
.refund-item-trigger[aria-expanded="true"]::after { transform: rotate(225deg) translate(-2px, -1px); }
.refund-item-options { position: absolute; z-index: 30; inset: calc(100% + 7px) 0 auto; display: grid; gap: 4px; max-height: min(250px, 34vh); overflow-y: auto; border: 1px solid rgba(162, 138, 255, .27); border-radius: 15px; padding: 6px; background: #171a24; box-shadow: 0 18px 44px rgba(0, 0, 0, .48); }
.refund-item-options[hidden] { display: none; }
.refund-item-option { width: 100%; min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid transparent; border-radius: 10px; padding: 8px 11px; color: #dfe1e9; background: transparent; text-align: right; cursor: pointer; font: inherit; }
.refund-item-option:hover, .refund-item-option:focus-visible { outline: 0; border-color: rgba(109, 232, 203, .22); background: rgba(76, 226, 193, .08); }
.refund-item-option[aria-selected="true"] { border-color: rgba(109, 232, 203, .28); color: #b9f3e4; background: rgba(76, 226, 193, .12); }
.refund-item-option small { flex: 0 0 auto; border-radius: 999px; padding: 4px 8px; color: #c5b8ff; background: rgba(162, 138, 255, .12); font-size: 10px; }
.app-modal.order-add-dialog { width: min(92vw, 540px); max-height: min(88vh, 760px); }
.order-add-modal { display: grid; gap: 14px; }
.order-add-modal .modal-heading { margin-bottom: 0; }
.order-add-modal .modal-heading .muted { margin: 5px 0 0; font-size: 11px; }
.order-add-form { display: grid; gap: 13px; }
.order-add-search { display: grid; gap: 7px; color: #d8d9e3; font-size: 12px; font-weight: 650; }
.order-add-search input { width: 100%; min-height: 44px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 0 13px; color: var(--text); background: rgba(7, 9, 14, .58); font: inherit; font-size: 12px; }
.order-add-search input:focus { outline: 0; border-color: rgba(109, 232, 203, .55); box-shadow: 0 0 0 3px rgba(76, 226, 193, .07); }
.order-add-category-bar { position: sticky; top: 0; z-index: 5; display: flex; gap: 7px; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid rgba(255, 255, 255, .1); border-radius: 15px; padding: 7px; background: rgba(20, 23, 33, .82); box-shadow: 0 10px 24px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .06); backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%); scrollbar-width: none; }
.order-add-category-bar::-webkit-scrollbar { display: none; }
.order-add-category { flex: 0 0 auto; min-height: 35px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 999px; padding: 0 11px; color: #c9cbd6; background: rgba(255, 255, 255, .035); cursor: pointer; font: inherit; font-size: 10px; font-weight: 700; transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.order-add-category:hover, .order-add-category:focus-visible { outline: 0; transform: translateY(-1px); border-color: rgba(109, 232, 203, .32); color: #edfff9; background: rgba(76, 226, 193, .09); }
.order-add-category[aria-selected="true"] { border-color: rgba(109, 232, 203, .48); color: #07231e; background: linear-gradient(115deg, #5be5c6, #a3f1dd); box-shadow: 0 0 18px rgba(76, 226, 193, .2), inset 0 1px 0 rgba(255, 255, 255, .48); }
.order-add-category-count { min-width: 19px; height: 19px; display: inline-grid; place-items: center; border-radius: 999px; padding: 0 5px; color: #b7f4e4; background: rgba(76, 226, 193, .12); font-size: 9px; line-height: 1; }
.order-add-category[aria-selected="true"] .order-add-category-count { color: #0c4c40; background: rgba(7, 79, 66, .12); }
.order-add-options { display: grid; gap: 6px; max-height: min(290px, 34vh); overflow-y: auto; border: 1px solid rgba(255, 255, 255, .075); border-radius: 15px; padding: 7px; background: rgba(7, 9, 14, .38); scrollbar-width: thin; scrollbar-color: rgba(162, 138, 255, .45) transparent; }
.order-add-option { width: 100%; min-height: 54px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 11px; padding: 6px 8px; color: var(--text); background: transparent; text-align: right; cursor: pointer; font: inherit; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.order-add-option:hover, .order-add-option:focus-visible { outline: 0; border-color: rgba(109, 232, 203, .22); background: rgba(76, 226, 193, .075); }
.order-add-option:active { transform: scale(.99); }
.order-add-option[aria-selected="true"] { border-color: rgba(109, 232, 203, .35); background: linear-gradient(100deg, rgba(76, 226, 193, .12), rgba(162, 138, 255, .08)); box-shadow: inset 0 0 0 1px rgba(76, 226, 193, .045); }
.order-add-thumb { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, .09); border-radius: 11px; color: #bdaeff; background: rgba(162, 138, 255, .1); font-size: 19px; }
.order-add-thumb img { width: 100%; height: 100%; object-fit: cover; }
.order-add-option-copy { min-width: 0; display: grid; gap: 4px; }
.order-add-option-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.order-add-option-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.order-add-price { border: 1px solid rgba(109, 232, 203, .14); border-radius: 999px; padding: 5px 8px; color: #a8f1de; background: rgba(76, 226, 193, .06); font-size: 10px; white-space: nowrap; }
.order-add-empty { display: grid; min-height: 82px; place-items: center; color: var(--muted); font-size: 12px; }
.order-add-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid rgba(162, 138, 255, .15); border-radius: 14px; padding: 11px 13px; background: linear-gradient(120deg, rgba(162, 138, 255, .075), rgba(76, 226, 193, .045)); }
.order-add-selection { min-width: 0; display: grid; gap: 4px; }
.order-add-selection small, .order-add-quantity { color: var(--muted); font-size: 10px; }
.order-add-selection strong { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.order-add-selection span { color: #9aedd8; font-size: 11px; font-weight: 700; }
.order-add-quantity { display: grid; gap: 7px; text-align: center; }
.quantity-control { display: flex; align-items: center; gap: 5px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 11px; padding: 4px; background: rgba(7, 9, 14, .45); }
.quantity-control button { width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; color: #c9c0ff; background: rgba(162, 138, 255, .1); cursor: pointer; font-size: 17px; }
.quantity-control input { width: 38px; min-height: 30px; border: 0; outline: 0; padding: 0; color: var(--text); background: transparent; text-align: center; font: inherit; font-weight: 700; appearance: textfield; }
.quantity-control input::-webkit-inner-spin-button, .quantity-control input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.order-add-actions { display: grid; grid-template-columns: minmax(100px, .75fr) minmax(0, 1.25fr); gap: 9px; }
@media (max-width: 480px) { .order-add-footer { grid-template-columns: minmax(0, 1fr); } .order-add-quantity { grid-template-columns: 1fr auto; align-items: center; text-align: right; } .order-add-options { max-height: 32vh; } }
.app-modal.manual-order-dialog { width: min(95vw, 980px); max-height: 92vh; } /* توسيع نافذة الطلب اليدوي لتعرض المنيو والسلة جنباً إلى جنب. */
.manual-order-picker { min-width: 0; } /* إبقاء محتوى المنيو ضمن عرض النافذة. */
.manual-order-picker form { display: grid; gap: 13px; } /* ترتيب حقول الطلب اليدوي ومحتوى المنيو. */
.manual-order-toolbar { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(180px, 1fr) minmax(145px, .7fr); gap: 10px; } /* صف اسم الزبون والبحث والقسم. */
.manual-order-toolbar label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; } /* تسميات عناصر التصفية. */
.manual-order-toolbar input, .manual-order-toolbar select, .manual-item-size { width: 100%; min-height: 40px; border: 1px solid var(--border); border-radius: 11px; padding: 0 10px; color: var(--text); background: #10131b; font: inherit; } /* حقول البحث والقسم والحجم. */
.manual-order-toolbar select option, .manual-item-size option { color: #161923; } /* وضوح خيارات القوائم. */
.manual-order-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .42fr); align-items: start; gap: 12px; } /* تقسيم المنيو والسلة على سطح المكتب. */
.manual-catalog-panel, .manual-cart-panel { min-width: 0; border: 1px solid var(--border); border-radius: 15px; padding: 12px; background: rgba(8, 10, 16, .48); } /* حاوية قائمة الأصناف وسلة الطلب. */
.manual-catalog-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 9px; margin: 0 0 8px; } /* عنوان المنيو وإرشاد الاستخدام. */
.manual-catalog-heading strong, .manual-cart-panel h3 { margin: 0; font-size: 12px; } /* إبراز عناوين المنيو والسلة. */
.manual-catalog-heading span { color: var(--muted); font-size: 9px; } /* وصف موجز لاستخدام قائمة الأصناف. */
.manual-menu-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 47vh; overflow: auto; padding: 2px; } /* تمرير قائمة المنتجات دون إخفاء زر الطلب. */
.manual-menu-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px; padding: 8px; background: rgba(255, 255, 255, .025); } /* بطاقة صنف مناسبة لاختيار الموظف بسرعة. */
.manual-menu-image { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: rgba(145, 115, 255, .12); } /* توحيد صور المنتجات داخل المنيو اليدوي. */
.manual-menu-placeholder { display: grid; place-items: center; color: #bdaeff; font-size: 20px; } /* رمز مؤقت للصنف دون صورة. */
.manual-menu-details { display: grid; gap: 3px; min-width: 0; } /* ترتيب اسم الصنف وقسمه وسعره. */
.manual-menu-details strong { overflow: hidden; color: var(--text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } /* إبقاء أسماء المنتجات الطويلة بسطر واحد. */
.manual-menu-details small, .manual-menu-price { color: var(--muted); font-size: 9px; } /* تفاصيل السعر والقسم. */
.manual-menu-details .manual-menu-special { color: #f0c979; } /* إبراز وسم العرض. */
.manual-item-size { min-height: 30px; padding: 0 7px; font-size: 9px; } /* اختيار الحجم داخل بطاقة الصنف. */
.manual-add-button { white-space: nowrap; } /* منع انقسام زر إضافة الصنف. */
.manual-category-pills { display: flex; gap: 7px; min-width: 0; overflow-x: auto; padding: 2px 1px 7px; scrollbar-width: thin; }
.manual-category-pill { flex: 0 0 auto; min-height: 35px; border: 1px solid rgba(161,143,255,.2); border-radius: 999px; padding: 0 14px; color: var(--muted); background: rgba(255,255,255,.035); cursor: pointer; font: inherit; font-size: 10px; font-weight: 750; transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.manual-category-pill:hover { color: var(--text); border-color: rgba(92,232,199,.45); background: rgba(92,232,199,.08); transform: translateY(-1px); }
.manual-category-pill.is-active { color: #071712; border-color: rgba(129,247,221,.72); background: linear-gradient(110deg,#87f3d8,#4bdcc0); box-shadow: 0 5px 18px rgba(54,215,183,.16); }
.manual-menu-item { grid-template-columns: 58px minmax(0,1fr) auto; border-color: rgba(175,185,215,.11); background: linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018)); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.manual-menu-item:hover { transform: translateY(-2px); border-color: rgba(92,232,199,.32); background: linear-gradient(145deg,rgba(92,232,199,.07),rgba(255,255,255,.025)); box-shadow: 0 10px 22px rgba(0,0,0,.2), 0 0 15px rgba(92,232,199,.06); }
.manual-menu-image { width: 58px; height: 58px; object-fit: contain; object-position: center; padding: 3px; border: 1px solid rgba(255,255,255,.08); background: rgba(8,10,16,.68); }
.manual-add-button { min-height: 34px; }
@media (max-width: 640px) { .manual-category-pill { min-height: 34px; padding-inline: 12px; } .manual-menu-item { grid-template-columns: 48px minmax(0,1fr) auto; gap: 7px; padding: 7px; } .manual-menu-image { width: 48px; height: 48px; } .manual-menu-details strong { font-size: 9px; } .manual-add-button { min-height: 32px; padding-inline: 8px; font-size: 9px; } }
.manual-menu-empty { grid-column: 1 / -1; padding: 22px 10px; } /* توسيط رسالة البحث الفارغ. */
.manual-cart-panel { position: sticky; top: 0; } /* إبقاء السلة ظاهرة أثناء تصفح أصناف المنيو. */
.manual-cart-panel h3 { margin-bottom: 9px; } /* فصل عنوان السلة عن محتوياتها. */
.manual-cart-lines { display: grid; gap: 7px; max-height: 30vh; overflow: auto; } /* تمرير سطور الطلب عند اختيار أصناف كثيرة. */
.manual-cart-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgba(255, 255, 255, .06); padding: 7px 0; } /* تفاصيل كل سطر في السلة. */
.manual-cart-line > div:first-child { display: grid; gap: 3px; min-width: 0; } /* ترتيب اسم السطر وسعره. */
.manual-cart-line strong { overflow-wrap: anywhere; font-size: 10px; } /* اسم الصنف والحجم المختار. */
.manual-cart-line small { color: var(--muted); font-size: 9px; } /* سعر الوحدة وكمية السطر. */
.manual-quantity { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; } /* أزرار سريعة لتغيير كمية الصنف. */
.manual-quantity button { width: 25px; height: 25px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: rgba(255,255,255,.05); cursor: pointer; } /* أزرار زيادة الكمية وتقليلها. */
.manual-quantity span { min-width: 14px; text-align: center; font-size: 10px; } /* رقم الكمية في السلة. */
.manual-cart-empty { margin: 0; font-size: 10px; } /* رسالة السلة الفارغة. */
.manual-cart-total { display: grid; gap: 5px; margin: 9px 0; border-top: 1px solid var(--border); padding-top: 9px; } /* إظهار المجموع الفرعي والتنبيه الضريبي. */
.manual-cart-total span { color: var(--muted); font-size: 10px; } /* تسمية المجموع الفرعي. */
.manual-cart-total strong { color: var(--mint); font-size: 15px; } /* إبراز إجمالي الأصناف قبل الضرائب. */
.manual-cart-total small { color: var(--muted); font-size: 9px; line-height: 1.6; } /* توضيح احتساب الضريبة في الفاتورة. */
.app-modal::backdrop { background: rgba(4, 5, 9, .74); backdrop-filter: blur(7px); } /* تعتيم الخلفية وراء النافذة. */
.modal-heading { display: flex; align-items: start; justify-content: space-between; gap: 15px; margin-bottom: 20px; } /* رأس النافذة. */
.modal-heading h2 { margin: 0; font-size: 20px; } /* عنوان النموذج. */
.modal-heading .eyebrow { margin-bottom: 4px; } /* عنوان تمهيدي للنافذة. */
.checkbox-field { display: flex !important; align-items: center; grid-template-columns: auto 1fr; gap: 9px !important; } /* صف خيار الصنف. */
.checkbox-field input[type="checkbox"], .consent-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: 0 0 18px; width: 18px; min-width: 18px; min-height: 18px; height: 18px; padding: 0; margin: 0; border: 1px solid rgba(255,255,255,.32); border-radius: 5px; background: #10131b; cursor: pointer; } /* ضبط حجم مربع الاختيار الصغير. */
.checkbox-field input[type="checkbox"]:checked, .consent-row input[type="checkbox"]:checked { border-color: var(--mint); background: var(--mint); box-shadow: 0 0 12px rgba(92,232,199,.22); } /* إظهار الخيار المحدد بلون الهوية. */
.checkbox-field input[type="checkbox"]:checked::after, .consent-row input[type="checkbox"]:checked::after { content: "✓"; display: grid; place-items: center; color: #07100e; font-size: 13px; font-weight: 900; line-height: 16px; } /* رسم علامة الاختيار المتناسقة. */
.language-toggle { min-height: 34px; border: 1px solid rgba(92,232,199,.28); border-radius: 11px; padding: 0 11px; color: #bff8e9; background: rgba(92,232,199,.08); cursor: pointer; font-size: 10px; font-weight: 700; } /* زر اختيار لغة واجهة واحدة في كل مرة. */
.login-language { display: block; margin: -16px 0 20px auto; } /* وضع زر اللغة أعلى بطاقة الدخول. */
.branch-picker { min-height: 44px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 14px; padding: 0 12px; } /* تنسيق محدد الفرع. */
.branch-picker select { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font: inherit; cursor: pointer; } /* جعل قائمة الفرع جزءاً من الشريط الجانبي. */
.branch-picker option { color: #161923; } /* وضوح خيارات الفرع داخل القائمة. */
.topbar-actions { flex-wrap: wrap; } /* إتاحة زر اللغة وكلمة المرور دون ازدحام. */
.eu-credit { display: inline-flex; align-items: center; gap: 2px; color: #a6f2df; text-decoration: none; font-size: 11px; font-weight: 800; letter-spacing: .02em; } /* علامة اعتماد مصمم النظام. */
.eu-credit > span { color: #fff; } /* إبراز الحرفين داخل العلامة. */
.eu-credit small { margin-inline-start: 6px; color: #8c94a6; font-size: 9px; font-weight: 500; } /* إظهار وصف الاعتماد بهدوء. */
.customer-header-actions { display: flex; align-items: center; gap: 8px; } /* تجميع رقم الطاولة واللغة. */
.customer-brand-mark { display: grid; place-items: center; color: #07100e; background: linear-gradient(135deg, #73ebd0, #c0f7e9) !important; font-size: 10px; font-weight: 900; letter-spacing: -.05em; } /* رمز صغير أنيق بدلاً من الأيقونة الزخرفية الكبيرة. */
.customer-bottom-nav { position: fixed; z-index: 8; inset-inline: 50% auto; bottom: 0; transform: translateX(50%); width: min(100%, 560px); min-height: calc(68px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: .72fr .72fr 1.05fr 1.65fr; align-items: stretch; gap: 4px; border: 1px solid rgba(255,255,255,.1); border-bottom: 0; border-radius: 20px 20px 0 0; padding: 7px 10px max(9px, env(safe-area-inset-bottom)); background: rgba(17,20,29,.94); box-shadow: 0 -12px 36px rgba(0,0,0,.32); backdrop-filter: blur(20px); } /* شريط تنقل سفلي يتضمن المنيو والطلبات والسلة. */
.customer-bottom-nav > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; border-radius: 12px; color: #a2a9bb; background: transparent; cursor: pointer; } /* أزرار صفحات المنيو. */
.customer-bottom-nav > button > span { font-size: 17px; line-height: 1.1; } /* رمز كل صفحة. */
.customer-bottom-nav small { font-size: 9px; } /* عناوين التنقل المختصرة. */
.customer-bottom-nav #cart-fab { position: relative; flex-direction: row; gap: 8px; border: 1px solid rgba(92,232,199,.28); color: #07100e; background: linear-gradient(100deg,#5ce8c7,#a4f1dd); font-weight: 800; } /* إبراز زر السلة والإجمالي. */
.customer-bottom-nav #cart-fab small { color: inherit; font-size: 10px; } /* إظهار اسم السلة والعدد. */
.customer-bottom-nav #cart-count { display: inline-grid; min-width: 18px; height: 18px; place-items: center; border-radius: 7px; padding: 0 4px; color: #fff; background: #1c685d; font-size: 9px; } /* عداد عدد الأصناف المضافة. */
.customer-bottom-nav #customer-order-fab { gap: 3px; } /* إبراز مدخل متابعة الطلب في شريط الزبون. */
.customer-bottom-nav #customer-order-count { display: inline-grid; min-width: 16px; height: 16px; place-items: center; margin-inline-start: 2px; border-radius: 6px; padding: 0 3px; color: #e8e3ff; background: rgba(145,115,255,.2); font-size: 8px; } /* عدد الطلبات المفتوحة على الطاولة. */
.customer-bottom-nav #cart-fab { gap: 4px; padding-inline: 6px; } /* ضغط السلة قليلاً لتناسب عناصر التنقل على الهاتف. */
.customer-bottom-nav #cart-fab small { font-size: 9px; white-space: nowrap; } /* إبقاء اسم السلة والعدد في سطر واحد. */
.customer-bottom-nav #cart-total { font-size: 9px; } /* إظهار الإجمالي بحجم مناسب للشاشات الصغيرة. */
.customer-bottom-nav #cart-total { margin-inline-start: auto; font-size: 10px; white-space: nowrap; } /* إجمالي السلة الحالي. */
.customer-credit { width: min(100% - 32px, 900px); display: flex; justify-content: space-between; gap: 12px; margin: 18px auto 90px; color: #778092; font-size: 9px; } /* اعتماد المصمم أسفل المنيو. */
.confirm-panel { text-align: center; } /* محاذاة نافذة التأكيد المخصصة في المنتصف. */
.confirm-panel .confirm-icon { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 14px; border: 1px solid rgba(255,190,100,.2); border-radius: 17px; color: #ffd18b; background: rgba(255,190,100,.09); font-size: 22px; } /* رمز بصري صغير لتأكيد إغلاق الحساب. */
.confirm-panel .confirm-actions { display: flex; justify-content: center; gap: 10px; margin-top: 22px; } /* وضع أزرار المتابعة والإلغاء بجوار بعضها. */
.payment-choice { display: grid; gap: 8px; max-width: 320px; margin: 18px auto 0; text-align: start; } /* اختيار نقد أو بطاقة في نافذة الإغلاق الوسطية. */
.payment-choice select, .shift-form input, .report-filter input, .report-filter select { min-height: 44px; padding: 10px 12px; border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 12px; color: inherit; background: rgba(8,10,16,.72); } /* توحيد حقول الدفع والتقارير والورديات. */
.shift-panel { margin-bottom: 20px; } /* فصل أدوات الوردية عن الجداول. */
.shift-difference { color: var(--muted); font-size: 11px; } /* إظهار فرق النقد المتوقع والمعدود بجانب نموذج الإغلاق. */
.shift-difference.has-difference { color: #f0cc82; font-weight: 700; } /* إبراز وجود فرق مسجل في الصندوق. */
.audit-panel { margin-top: 14px; } /* إضافة سجل التغييرات بعد تقارير اليوم. */
.audit-list { display: grid; gap: 8px; max-height: 440px; overflow-y: auto; } /* تمرير سجل طويل من دون إطالة التقرير. */
.audit-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--border); padding: 10px 0; } /* صف واضح لكل تغيير ومصدره. */
.audit-row:last-child { border-bottom: 0; } /* إزالة الحد الأخير من السجل. */
.audit-row > div { min-width: 0; display: grid; gap: 4px; } /* تنظيم نوع الحدث وتفاصيله. */
.audit-row strong { font-size: 12px; } /* إبراز نوع الحدث. */
.audit-row small, .audit-row > span { color: var(--muted); font-size: 10px; line-height: 1.6; } /* وصف التغيير وهوية المنفذ ووقته. */
.audit-row > span { flex: 0 0 auto; text-align: left; } /* تثبيت بيانات المصدر بجانب الحدث. */
.shift-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } /* ترتيب صاحب الوردية ونموذج فتحها أو إغلاقها. */
.shift-summary h3 { margin: 0; } /* إبقاء اسم صاحب الوردية واضحاً. */
.shift-form, .report-filter { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; } /* وضع الحقول والأزرار بجوار بعضها على الشاشات الكبيرة. */
.shift-form label, .report-filter label { display: grid; gap: 7px; min-width: 190px; } /* توضيح الحقول الرقمية والتاريخية. */
.report-filter { justify-content: end; margin: 0 0 18px; } /* وضع اختيار تاريخ التقرير أعلى النتائج. */
.report-filter-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.report-archive-note { margin: -8px 0 16px; color: var(--muted); text-align: right; font-size: .9rem; }
.report-export-action { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 10px; margin: -8px 0 18px; } /* إظهار خياري التقرير الكامل جنباً إلى جنب مع التفاف مناسب للموبايل. */
.report-export-note { flex-basis: 100%; color: var(--muted); text-align: right; font-size: 12px; }
.report-tax-item-detail { margin: 16px 0; }
.report-metrics { margin: 18px 0; } /* فصل أرقام البيع حسب الدفع. */
.report-period-timeline { grid-column: 1 / -1; } /* يمتد تفصيل الأيام أو الأشهر على عرض التقرير كاملاً. */
.report-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; } /* تقسيم جداول الأصناف والورديات. */
.report-grid > .panel { min-width: 0; } /* منع خروج جدول طويل عن البطاقة. */
.live-shift-panel { margin: 16px 0; overflow: hidden; }
.live-shift-panel > .panel-heading { align-items: center; }
.live-shift-indicator, .live-shift-role { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; border: 1px solid rgba(92,232,199,.22); border-radius: 999px; padding: 6px 10px; color: #aaf3df; background: rgba(92,232,199,.08); font-size: 10px; font-weight: 800; }
.live-shift-indicator i { width: 7px; height: 7px; border-radius: 50%; background: #55e3bf; box-shadow: 0 0 12px rgba(85,227,191,.8); }
.live-shift-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 14px 0; }
.live-shift-summary article { min-width: 0; display: grid; gap: 6px; border: 1px solid var(--border); border-radius: 15px; padding: 13px 15px; background: linear-gradient(135deg,rgba(92,232,199,.07),rgba(162,138,255,.045)); }
.live-shift-summary article > span, .live-shift-summary article > small { color: var(--muted); font-size: 10px; }
.live-shift-summary article > strong { color: var(--text); font-size: clamp(18px,2vw,25px); }
.live-shift-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.live-shift-group { min-width: 0; border: 1px solid var(--border); border-radius: 15px; padding: 13px; background: rgba(8,10,16,.24); }
.live-shift-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.live-shift-group-head h4 { margin: 0; font-size: 13px; }
.live-shift-group-head > span { color: var(--muted); font-size: 10px; }
.live-shift-list { display: grid; gap: 9px; }
.live-shift-card { min-width: 0; border: 1px solid rgba(255,255,255,.075); border-radius: 13px; padding: 11px; background: rgba(255,255,255,.025); }
.live-shift-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.live-shift-card-head > div { min-width: 0; display: grid; gap: 4px; }
.live-shift-card-head strong { overflow-wrap: anywhere; font-size: 12px; }
.live-shift-card-head small { color: var(--muted); font-size: 9px; }
.live-shift-role { border-color: rgba(162,138,255,.2); color: #c9bfff; background: rgba(162,138,255,.08); }
.cashier-role { border-color: rgba(92,232,199,.22); color: #aaf3df; background: rgba(92,232,199,.08); }
.live-shift-values { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.live-shift-values span { display: flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; padding: 5px 8px; color: var(--muted); font-size: 9px; }
.live-shift-values b { color: var(--text); font-size: 10px; }
.live-shift-money { display: grid; gap: 6px; border-top: 1px solid rgba(255,255,255,.07); margin-top: 10px; padding-top: 8px; }
.live-shift-money p { display: flex; justify-content: space-between; gap: 10px; margin: 0; color: var(--muted); font-size: 9px; }
.live-shift-money strong { color: var(--text); white-space: nowrap; font-size: 10px; }
.live-shift-card-actions { display: flex; justify-content: flex-start; border-top: 1px solid rgba(255,255,255,.07); margin-top: 10px; padding-top: 9px; } /* فتح تفاصيل وردية النادل من بطاقة المتابعة المباشرة. */
.live-shift-empty { margin: 0; border: 1px dashed var(--border); border-radius: 11px; padding: 14px; color: var(--muted); text-align: center; font-size: 10px; }
.live-shift-updated { margin: 10px 2px 0; color: var(--muted); text-align: left; font-size: 9px; }
.receipt-qr { text-align: center; padding: 8px; } /* محاذاة رمز الفاتورة في منتصف الطباعة. */
.receipt-qr img { display: block; width: 128px; height: 128px; margin: 8px auto; image-rendering: pixelated; } /* تكبير معاينة QR لتسهيل التحقق قبل الطباعة. */
.receipt-qr small { display: block; } /* وضع شرح مسح QR تحت الرمز. */
@media (max-width: 760px) { .report-grid, .live-shift-groups, .live-shift-summary { grid-template-columns: 1fr; } .shift-summary { align-items: stretch; } .shift-form, .report-filter { align-items: stretch; width: 100%; } .shift-form label, .report-filter label { flex: 1 1 100%; } .report-filter-actions { width: 100%; } .report-filter-actions .button { flex: 1 1 auto; } }
.button-danger { color: #fff; background: linear-gradient(110deg,#c83d60,#ed6178); } /* لون مميز لتأكيد الإغلاق أو الحذف. */
.order-tabs { display: flex; gap: 8px; margin: 0 0 17px; } /* تبويبات المفتوح والمغلق اليوم. */
.order-tabs .is-active { border-color: rgba(92,232,199,.45); color: #bff8e9; background: rgba(92,232,199,.1); } /* إبراز تبويب الطلبات المختار. */
.closed-order-meta { display: flex; flex-wrap: wrap; gap: 8px 15px; border-top: 1px solid var(--border); margin-top: 12px; padding-top: 11px; color: var(--muted); font-size: 10px; } /* عرض تاريخ الإغلاق واسم الموظف. */
.customer-success { padding: 12px 5px 5px; text-align: center; } /* تنسيق رسالة تأكيد الطلب. */
.customer-success-mark { width: 68px; height: 68px; display: grid; place-items: center; margin: 0 auto 18px; border: 1px solid rgba(92,232,199,.4); border-radius: 22px; color: #07110e; background: linear-gradient(135deg,#5ce8c7,#a4f1dd); box-shadow: 0 12px 40px rgba(92,232,199,.2); font-size: 34px; font-weight: 900; } /* علامة نجاح صغيرة وواضحة. */
.customer-success h2 { margin: 7px 0; font-size: 21px; line-height: 1.65; } /* نص النجاح الرئيسي. */
.success-order-number { display: flex; align-items: center; justify-content: space-between; margin: 22px 0; border: 1px solid var(--border); border-radius: 14px; padding: 13px 16px; color: var(--muted); background: rgba(255,255,255,.025); } /* إبراز رقم الطلب للعميل. */
.success-order-number strong { color: #a6f2df; font-size: 18px; } /* رقم الطلب. */
.customer-success-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; } /* اختيار واضح لمتابعة الطلب أو إضافة المزيد. */
.customer-success-actions .button { min-height: 46px; padding-inline: 8px; font-size: 11px; } /* ضبط زري التأكيد للهواتف. */
.order-confirmation-dialog { width: min(90vw, 430px); } /* تحديد عرض نافذة التأكيد المركزية. */
.customer-order-dialog { width: min(94vw, 560px); max-height: min(86vh, 760px); overflow: auto; } /* عرض سجل الطلب داخل نافذة قابلة للتمرير. */
.customer-order-empty { display: grid; justify-items: center; gap: 12px; padding: 24px 8px 8px; text-align: center; } /* رسالة واضحة قبل أول طلب أو بعد إغلاق الحساب. */
.customer-order-empty > span { color: #b9a6ff; font-size: 34px; } /* رمز سجل الطلب. */
.customer-order-empty p { max-width: 380px; margin: 0; color: var(--muted); line-height: 1.8; } /* نص حالة سجل الطاولة. */
.customer-order-list { display: grid; gap: 12px; max-height: 55vh; overflow: auto; } /* تمرير الطلبات إذا امتد السجل. */
.customer-order-card { border: 1px solid var(--border); border-radius: 15px; padding: 13px; background: rgba(255,255,255,.025); } /* بطاقة مستقلة لكل إرسال محفوظ. */
.customer-order-card > header, .customer-order-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* ترتيب بيانات الطلب ومجموعه. */
.customer-order-card > header { border-bottom: 1px solid var(--border); padding-bottom: 10px; } /* فصل رقم الطلب عن الأصناف. */
.customer-order-card > header > div { display: grid; gap: 4px; } /* وضع رقم الطلب ووقته في سطرين. */
.customer-order-card > header strong { color: #c8baff; font-size: 12px; } /* إبراز الرقم المسجل. */
.customer-order-card > header small, .customer-order-line small { color: var(--muted); font-size: 9px; } /* عرض وقت الإرسال بهدوء. */
.customer-order-card > header > span { color: var(--muted); font-size: 10px; } /* اسم العميل الذي أرسل الطلب. */
.customer-order-card ul { display: grid; gap: 9px; margin: 0; padding: 11px 0; list-style: none; } /* قائمة ثابتة بلا عناصر قابلة للتعديل. */
.customer-order-line { display: flex; justify-content: space-between; gap: 12px; } /* ترتيب اسم الصنف والكمية والسعر. */
.customer-order-line-main, .customer-order-line-side { display: grid; gap: 4px; } /* ترتيب تفاصيل السطر. */
.customer-order-line-main strong { font-size: 11px; } /* إظهار اسم الصنف والحجم. */
.customer-order-line-side { justify-items: end; text-align: end; white-space: nowrap; } /* إبقاء السعر وحالة التجهيز بجوار السطر. */
.customer-order-line-side > strong { font-size: 10px; } /* مبلغ الصنف المحفوظ. */
.customer-order-status { color: #ffd58d; font-size: 9px; } /* حالة التحضير. */
.customer-order-status.is-served { color: #87e7cb; } /* حالة الصنف المقدم. */
.customer-order-card > footer { border-top: 1px solid var(--border); padding-top: 10px; color: var(--muted); font-size: 10px; } /* إجمالي الطلب المحفوظ. */
.customer-order-card > footer strong { color: #a6f2df; } /* توضيح قيمة الطلب. */
.customer-order-readonly { margin: 13px 0; color: var(--muted); font-size: 10px; line-height: 1.7; text-align: center; } /* تأكيد أن الطلب المسجل للقراءة فقط. */
.order-confirmation-row { align-items: start !important; line-height: 1.65; } /* منح الزبون مساحة لقراءة إقرار الطلب. */
.order-confirmation-row input { margin-top: 2px !important; } /* محاذاة مربع التأكيد مع بداية النص. */
.table-timer { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(92,232,199,.18); border-radius: 9px; padding: 5px 8px; color: #a5f0df; background: rgba(92,232,199,.06); font-size: 10px; font-variant-numeric: tabular-nums; } /* ساعة مدة الجلوس على الطاولة. */
.table-timer::before { content: "◷"; color: currentColor; font-size: 12px; } /* علامة الساعة بجوار المدة. */
.table-session-clock { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 9px; border: 1px solid rgba(92,232,199,.14); border-radius: 12px; padding: 9px 11px; color: var(--muted); background: rgba(92,232,199,.035); font-size: 10px; } /* فصل ساعة جلوس الزبون في بطاقة الطاولة. */
.table-session-clock strong { min-width: 66px; justify-content: center; font-size: 12px; } /* إبراز مدة الجلسة المتزايدة. */
.table-timer.is-late { border-color: rgba(255,117,132,.5); color: #ff9aa7; background: rgba(255,92,115,.1); animation: late-pulse 1.4s ease-in-out infinite; } /* تنبيه الطاولة المتأخرة بلون واضح. */
@keyframes late-pulse { 50% { box-shadow: 0 0 16px rgba(255,92,115,.18); } } /* نبضة خفيفة لعداد التأخير. */
.fulfillment-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 8px; padding: 4px 7px; font-size: 9px; font-weight: 700; } /* شارة حالة تقديم الصنف. */
.fulfillment-pill.is-pending { color: #ffd58d; background: rgba(255,190,100,.1); } /* تمييز الأصناف قيد التحضير. */
.fulfillment-pill.is-served { color: #8df0d8; background: rgba(92,232,199,.1); } /* تمييز الأصناف التي وصلت للزبون. */
.order-line-alert { border-radius: 10px; background: rgba(255,89,115,.075); } /* تمييز الصنف الذي تجاوز مهلة التقديم. */
.late-alert-banner { min-height: 36px; box-sizing: border-box; margin: 0 0 14px; border: 1px solid rgba(255,117,132,.28); border-radius: 13px; padding: 10px 13px; color: #ffc1c9; background: rgba(255,92,115,.08); font-size: 11px; } /* رسالة التأخير أعلى قائمة الطلبات. */
.schema-health-notice { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin: 0 0 18px; border: 1px solid rgba(255,117,132,.34); border-radius: 18px; padding: 16px 18px; color: #f7e5e8; background: linear-gradient(120deg, rgba(100,28,47,.76), rgba(39,24,43,.82)); box-shadow: 0 12px 34px rgba(0,0,0,.2), 0 0 24px rgba(255,85,120,.08); } /* تنبيه توافق قاعدة البيانات للمالك فقط. */
.schema-health-notice.is-loading { border-color: rgba(76,226,193,.32); background: rgba(22,35,42,.8); } /* حالة الفحص الجارية. */
.schema-health-copy { min-width: 0; display: grid; gap: 6px; line-height: 1.65; } /* نص التوافق والتنبيهات المطلوبة. */
.schema-health-copy > strong { font-size: 15px; } /* عنوان التنبيه. */
.schema-health-copy > span, .schema-health-copy li small { color: #c1c4d0; font-size: 12px; } /* شرح الخطوات والعناصر الناقصة. */
.schema-health-copy ul { display: grid; gap: 8px; margin: 4px 0; padding-inline-start: 20px; } /* قائمة الميزات التي تحتاج ترقية. */
.schema-health-copy li b, .schema-health-copy li small { display: block; } /* فصل اسم الميزة عن تفاصيل النقص. */
.schema-health-copy li small { overflow-wrap: anywhere; } /* إبقاء أسماء الأعمدة ظاهرة على الجوال. */
.schema-health-copy p { margin: 0; color: #c1c4d0; font-size: 12px; } /* إظهار ملفات SQL اللازمة. */
.schema-health-copy code { display: inline-block; margin: 3px 4px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; padding: 2px 7px; color: #9ef1dc; direction: ltr; } /* إبراز اسم ملف الترقية. */
.schema-health-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
@media (max-width: 720px) { .schema-health-notice { flex-direction: column; } .schema-health-notice > .button { width: 100%; } } /* ترتيب التنبيه وزر إعادة الفحص على الهاتف. */
@media (max-width: 720px) { .schema-health-actions { width: 100%; } .schema-health-actions .button { width: 100%; } }
.unassigned-waiter-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; border: 1px solid rgba(255, 181, 88, .42); border-radius: 15px; padding: 12px 14px; color: #ffe4b7; background: linear-gradient(110deg, rgba(112, 65, 20, .26), rgba(39, 31, 53, .72)); box-shadow: 0 10px 28px rgba(0, 0, 0, .16), inset 0 1px rgba(255,255,255,.04); }
.unassigned-waiter-banner > div { display: grid; gap: 4px; min-width: 0; }
.unassigned-waiter-banner strong { font-size: 13px; }
.unassigned-waiter-banner span { color: #c5b8a7; font-size: 11px; }
.unassigned-waiter-banner .button { flex: 0 0 auto; }
.staff-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; margin-inline-start: auto; } /* ترتيب أزرار كلمة المرور ورمز الاستراحة وإزالة حساب الفريق. */
.staff-row.is-disabled { opacity: .55; } /* تمييز حساب الموظف المعطل. */
@media (max-width: 720px) { .staff-row { flex-wrap: wrap; padding-block: 8px; } .staff-actions { width: 100%; margin-inline-start: 0; } .staff-actions .button { flex: 1 1 auto; } } /* إتاحة أزرار الفريق على الشاشات الصغيرة. */
.branch-picker select, .branch-picker option { direction: inherit; } /* ضبط اتجاه أسماء الفروع حسب اللغة. */
html[dir="ltr"] .app-shell { direction: ltr; } /* قلب تخطيط لوحة الإدارة للإنجليزية والهولندية. */
html[dir="ltr"] .sidebar-brand, html[dir="ltr"] .branch-picker, html[dir="ltr"] .nav-link { text-align: left; } /* محاذاة عناصر الشريط الجانبي إلى اليسار. */
html[dir="ltr"] .customer-bottom-nav { transform: translateX(-50%); } /* تمركز شريط الزبون في اتجاه اليسار إلى اليمين. */
html[dir="ltr"] .customer-header { direction: ltr; } /* قلب رأس المنيو للغات اللاتينية. */
html[dir="ltr"] .customer-menu-grid, html[dir="ltr"] .menu-hero { direction: ltr; } /* ضبط بطاقات المنيو الإنجليزية والهولندية. */
@media (max-width: 600px) { .customer-header-actions { gap: 5px; } .customer-table-pill { font-size: 9px; padding-inline: 8px; } .customer-bottom-nav { border-radius: 16px 16px 0 0; } .customer-credit { width: calc(100% - 24px); } .eu-credit small { display: none; } } /* تحسين ظهور شريط الهاتف والتذييل على الشاشات الصغيرة. */
.qr-content { display: grid; justify-items: center; gap: 13px; text-align: center; } /* مركز بطاقة QR. */
.qr-canvas { min-height: 220px; display: grid; place-items: center; border-radius: 17px; padding: 5px; background: #fff; } /* سطح أبيض صريح لقراءة QR. */
.qr-content p { margin: 0; color: #c5c8d2; font-size: 12px; line-height: 1.8; } /* شرح رمز QR. */
.qr-content code { max-width: 100%; overflow-wrap: anywhere; color: #a99aff; font-size: 9px; } /* رابط QR العام. */
.receipt { max-width: 360px; margin: 0 auto; border: 1px solid var(--border); border-radius: 15px; padding: 16px; background: rgba(0, 0, 0, .18); } /* ورقة الفاتورة داخل المعاينة. */
.receipt-brand, .receipt-row, .receipt-total, .receipt-lines > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed rgba(255, 255, 255, .11); padding: 9px 0; font-size: 11px; } /* صفوف بيانات الفاتورة. */
.receipt-lines { display: grid; gap: 3px; }
.receipt-item { display: grid; gap: 4px; padding: 9px 0 11px; border-bottom: 1px dashed rgba(255, 255, 255, .18); }
.receipt-item-main, .receipt-line-tax-detail { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.receipt-item-main { font-size: 11px; line-height: 1.55; }
.receipt-item-main span { min-width: 0; overflow-wrap: anywhere; }
.receipt-item-main strong { flex: 0 0 auto; white-space: nowrap; }
.receipt-item-tax { display: grid; gap: 2px; padding-inline-start: 10px; }
.receipt-line-tax-detail { color: var(--muted, #98a2b3); font-size: 9px; line-height: 1.6; }
.receipt-line-tax-detail b { flex: 0 0 auto; font-weight: 500; white-space: nowrap; } /* فصل قيمة كل بند ضريبي مع مسافة واضحة بين الأصناف. */
.receipt-invoice-heading { display: grid; justify-items: center; gap: 3px; padding: 9px 0; border-bottom: 1px dashed rgba(255,255,255,.22); text-align: center; }
.receipt-invoice-heading strong { color: var(--text); font-size: 14px; }
.receipt-invoice-heading small { color: var(--muted); font-size: 10px; }
.receipt-ticket { margin: 4px 0; }
.receipt-timing { padding: 4px 0; border-bottom: 1px dashed var(--border); }
.receipt-timing p { margin: 3px 0; }
.receipt-seller-tax { margin: 5px 0; text-align: center; }
.receipt-barcode { display: grid; justify-items: center; gap: 3px; width: 100%; margin: 12px auto 8px; color: #f2f4f7; }
.receipt-barcode svg { display: block; width: min(100%, 320px); height: 46px; fill: currentColor; }
.receipt-barcode small { font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; }
.receipt .receipt-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; gap: 8px; margin: 0 auto; padding: 8px 0 12px; border-bottom: 1px solid rgba(255, 255, 255, .14); color: #c5b4ff; font-size: 16px; text-align: center; } /* وضع الاسم الاختياري والشعار ومعلومات التواصل في عمود بمنتصف الفاتورة. */
.receipt-brand strong { max-width: 100%; color: #c5b4ff; font-size: 17px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; } /* إبراز اسم المقهى من دون إجبار عرضه على الفاتورة. */
.receipt .receipt-logo { display: block; align-self: center; width: 82px; height: 82px; flex: 0 0 auto; margin: 0 auto; border-radius: 12px; object-fit: contain; background: #fff; } /* تكبير الشعار قليلاً وإبقاؤه في منتصف الفاتورة. */
.receipt .receipt-contact { display: grid; align-self: center; justify-items: center; gap: 2px; width: 100%; color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.5; text-align: center; overflow-wrap: anywhere; } /* ترتيب الهاتف والعنوان في سطرين وسط الفاتورة. */
.receipt-phone-line { display: flex; align-items: center; justify-content: center; gap: 4px; direction: ltr; } /* وضع أيقونة الهاتف بمحاذاة الرقم دون قلب اتجاه الأرقام. */
.receipt-phone-line svg { width: 13px; height: 13px; flex: 0 0 auto; } /* ضبط أيقونة الهاتف لحجم واضح في المعاينة. */
.receipt-contact [dir="ltr"] { direction: ltr; unicode-bidi: embed; } /* إبقاء رقم الهاتف مقروءاً بترتيبه الطبيعي داخل الفاتورة العربية. */
.sound-settings { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 16px; background: rgba(255,255,255,.025); } /* تجميع رفع النغمة ومعاينتها في بطاقة إعداد متناسقة. */
.sound-settings > strong { grid-column: 1 / -1; color: var(--text); font-size: 14px; } /* عنوان واضح لإعداد الصوت. */
.sound-settings audio { width: 100%; min-width: 0; height: 38px; border-radius: 10px; } /* جعل مشغل الصوت مناسباً لعرض البطاقة. */
.sound-settings .file-field { min-width: 0; margin: 0; } /* إبقاء وصف اختيار الملف ملاصقاً لأداة الرفع. */
.sound-settings .file-field input[type="file"] { width: 100%; min-height: 42px; border: 1px dashed rgba(255,255,255,.18); border-radius: 11px; padding: 8px; background: rgba(8,10,15,.35); } /* تحسين مظهر اختيار ملف الصوت. */
.sound-settings .file-field input[type="file"]::file-selector-button { margin-inline-end: 9px; border: 0; border-radius: 8px; padding: 7px 10px; color: #08100e; background: var(--mint); font: inherit; font-weight: 700; cursor: pointer; } /* زر اختيار ملف واضح وبسيط. */
.sound-settings [data-action="test-sound"] { justify-self: start; } /* تثبيت زر التجربة تحت عناصر الصوت. */
.receipt p, .receipt > small { display: block; color: var(--muted); text-align: center; font-size: 9px; } /* بيانات وقت الحساب والتنبيه. */
.receipt-total { border-bottom: 0; color: #8cebd4; font-size: 15px; font-weight: 700; } /* الإجمالي النهائي. */
.toast-region { position: fixed; z-index: 30; inset: 22px 22px auto auto; display: grid; gap: 9px; max-height: calc(100vh - 44px); overflow: auto; padding: 2px; pointer-events: none; scrollbar-width: none; } /* موضع الإشعارات مع تمرير داخلي إذا اجتمعت عدة رسائل. */
.toast-region::-webkit-scrollbar { display: none; }
.toast { width: min(420px, calc(100vw - 36px)); display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: start; gap: 12px; border: 1px solid rgba(91, 230, 198, .25); border-radius: 15px; padding: 13px 14px; color: #d8fff4; background: rgba(22, 55, 50, .97); box-shadow: 0 14px 44px rgba(0, 0, 0, .34); font-size: 12px; line-height: 1.8; pointer-events: auto; animation: toast-in .2s ease-out both; } /* إشعار واضح يظل أطول ويمكن إغلاقه. */
.toast-message { min-width: 0; overflow-wrap: anywhere; }
.toast-dismiss { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; color: inherit; background: rgba(255,255,255,.07); font-size: 19px; line-height: 1; cursor: pointer; }
.toast-dismiss:hover { background: rgba(255,255,255,.14); }
.toast-error { border-color: rgba(255, 115, 137, .36); color: #ffe0e5; background: rgba(77, 25, 37, .97); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
.empty-state { border: 1px dashed rgba(255, 255, 255, .12); border-radius: 13px; padding: 24px 14px; color: var(--muted); text-align: center; font-size: 11px; } /* حالة عدم وجود بيانات. */
.customer-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } /* شبكة أصناف الزبون. */
.menu-body { min-height: 100vh; overflow-x: hidden; background: radial-gradient(ellipse at 50% -15%, color-mix(in srgb, var(--tenant-primary) 20%, transparent), transparent 49%), var(--tenant-background, #0c0e14); } /* خلفية المنيو حسب لون المقهى. */
.menu-glow { position: fixed; z-index: -1; top: 38%; left: -180px; width: 300px; height: 300px; border-radius: 50%; background: color-mix(in srgb, var(--tenant-accent) 10%, transparent); filter: blur(70px); } /* وهج لوني خفيف. */
.customer-header { position: sticky; z-index: 4; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 64px; border-bottom: 1px solid var(--border); padding: 10px max(18px, calc((100vw - 920px) / 2)); background: rgba(11, 13, 19, .78); backdrop-filter: blur(18px); } /* رأس ثابت عند تمرير المنيو. */
.customer-brand { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-weight: 700; } /* علامة المقهى في الهاتف. */
.customer-brand .brand-icon { width: 33px; height: 33px; border-radius: 11px; } /* رمز مصغر للمقهى. */
.customer-logo { width: 32px; height: 32px; border-radius: 10px; object-fit: cover; } /* شعار المقهى المرفوع عبر الرابط. */
.customer-table-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(76, 226, 193, .16); border-radius: 20px; padding: 7px 11px; color: #a7eddb; background: rgba(58, 218, 182, .07); font-size: 10px; } /* شارة رقم الطاولة للزبون. */
.customer-table-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--tenant-accent); box-shadow: 0 0 9px var(--tenant-accent); } /* نقطة تعريف الطاولة. */
.customer-main { width: min(100% - 32px, 900px); margin: 0 auto; padding: 35px 0 110px; } /* مساحة محتوى منيو الزبون. */
.menu-hero { margin-bottom: 22px; } /* مساحة رأس قائمة الطعام. */
.menu-hero h1 { margin: 0 0 6px; font-size: clamp(27px, 7vw, 37px); } /* عنوان المنيو الكبير. */
.menu-hero .muted { margin: 0; font-size: 12px; } /* وصف المقهى. */
.menu-hero .eyebrow { color: var(--tenant-accent); } /* لون العلامة الترويجية حسب المقهى. */
.daily-specials { margin: 0 0 24px; border: 1px solid color-mix(in srgb, var(--tenant-accent) 30%, var(--border)); border-radius: 22px; padding: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--tenant-accent) 10%, var(--tenant-surface)), color-mix(in srgb, var(--tenant-primary) 10%, var(--tenant-background))); box-shadow: 0 16px 42px color-mix(in srgb, var(--tenant-accent) 8%, transparent); } /* إطار عروض اليوم بألوان هوية المقهى. */
.specials-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; } /* عنوان قسم العروض. */
.specials-heading .eyebrow { margin: 0 0 4px; color: var(--tenant-accent); font-size: 10px; } /* تمييز نوع القسم. */
.specials-heading h2 { margin: 0; font-size: 18px; } /* عنوان العروض. */
.specials-heading .muted { margin: 4px 0 0; font-size: 10px; } /* وصف العروض والمناسبة. */
.specials-sparkle { display: grid; width: 39px; height: 39px; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb, var(--tenant-accent) 35%, transparent); border-radius: 14px; color: var(--tenant-accent); background: color-mix(in srgb, var(--tenant-accent) 10%, transparent); text-shadow: 0 0 18px var(--tenant-accent); font-size: 22px; } /* زخرفة بصرية لقسم العروض. */
.daily-special-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* شبكة مدمجة للأصناف المميزة. */
.special-item-badge { position: absolute; z-index: 1; top: 9px; right: 9px; max-width: calc(100% - 18px); overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; padding: 5px 8px; color: #10151a; background: var(--tenant-accent); box-shadow: 0 5px 18px color-mix(in srgb, var(--tenant-accent) 24%, transparent); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 800; } /* شارة العرض أو عنوان المناسبة. */
.customer-item.is-special-item { border-color: color-mix(in srgb, var(--tenant-accent) 34%, var(--border)); } /* إبراز البطاقة المميزة. */
.discount-price { display: grid; gap: 2px; justify-items: end; color: var(--tenant-accent) !important; } /* لون السعر بعد الخصم. */
.discount-price del { color: var(--muted); font-size: 9px; font-weight: 400; } /* إظهار السعر الأصلي مشطوباً. */
.category-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 17px; padding: 2px 1px 8px; scrollbar-width: none; } /* شريط أقسام أفقي للهاتف. */
.category-tabs::-webkit-scrollbar { display: none; } /* إخفاء شريط التمرير البصري. */
.category-tab { flex: 0 0 auto; min-height: 37px; border: 1px solid var(--border); border-radius: 12px; padding: 0 14px; color: #b7bdcc; background: rgba(255, 255, 255, .035); cursor: pointer; font-size: 11px; } /* زر تصنيف المنيو. */
.category-tab.is-active { border-color: color-mix(in srgb, var(--tenant-accent) 40%, transparent); color: #eafff9; background: color-mix(in srgb, var(--tenant-accent) 13%, transparent); } /* اختيار التصنيف الحالي. */
.customer-item { overflow: hidden; border: 1px solid var(--border); border-radius: var(--tenant-card-radius, 19px); background: linear-gradient(145deg, rgba(26, 29, 39, .91), rgba(17, 19, 26, .94)); box-shadow: 0 14px 40px rgba(0, 0, 0, .16); } /* بطاقة صنف للزبون. */
.customer-menu-grid.menu-list-layout { grid-template-columns: 1fr; } /* عرض أصناف المنيو كقائمة طويلة. */
.menu-list-layout .customer-item { display: grid; grid-template-columns: minmax(120px, 32%) 1fr; align-items: stretch; } /* عرض صورة الصنف بجوار التفاصيل. */
.menu-list-layout .customer-item-image { height: 100%; min-height: 125px; } /* جعل الصورة تملأ عمود القائمة. */
.customer-item-image { position: relative; height: 140px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--tenant-primary) 26%, transparent), rgba(15, 17, 25, .8) 68%); } /* صورة الصنف أو الخلفية الافتراضية. */
.customer-item-image img { width: 100%; height: 100%; object-fit: cover; } /* ملاءمة صورة الصنف. */
.dish-symbol { color: color-mix(in srgb, var(--tenant-accent) 65%, #fff); text-shadow: 0 0 25px var(--tenant-primary); font-size: 40px; } /* زخرفة صحن عند غياب الصورة. */
.add-item-button { position: absolute; left: 11px; bottom: 11px; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 13px; color: #08110e; background: var(--tenant-accent); box-shadow: 0 6px 22px color-mix(in srgb, var(--tenant-accent) 25%, transparent); cursor: pointer; font-size: 24px; line-height: 1; } /* زر إضافة الصنف للسلة. */
.add-item-button:active { transform: scale(.94); } /* استجابة لمسية للإضافة. */
.customer-item-copy { display: flex; justify-content: space-between; gap: 12px; padding: 13px; } /* وصف وسعر الصنف. */
.customer-item-copy h2 { margin: 0 0 5px; font-size: 13px; } /* اسم الصنف في المنيو. */
.customer-item-copy p { max-width: 210px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; } /* وصف الصنف. */
.customer-item-copy > strong { align-self: end; color: #ddfff5; white-space: nowrap; font-size: 12px; } /* السعر بالريال. */
.cart-fab { position: fixed; z-index: 5; right: 50%; bottom: max(18px, env(safe-area-inset-bottom)); width: min(100% - 28px, 480px); min-height: 57px; display: flex; align-items: center; gap: 12px; transform: translateX(50%); border: 1px solid rgba(255, 255, 255, .13); border-radius: 17px; padding: 8px 14px; color: #08110e; background: linear-gradient(100deg, #5ce8c7, #a4f1dd); box-shadow: 0 15px 45px rgba(44, 224, 185, .18); cursor: pointer; font-size: 12px; } /* زر السلة الثابت. */
.cart-fab b { min-width: 23px; border-radius: 8px; padding: 4px; background: rgba(6, 18, 15, .12); text-align: center; } /* عدد الطلبات في السلة. */
.cart-fab strong { margin-right: auto; font-size: 13px; } /* إجمالي السلة. */
.cart-dialog { width: min(94vw, 480px); } /* عرض نافذة الطلب على الهاتف. */
.cart-lines { display: grid; gap: 9px; max-height: 230px; overflow-y: auto; } /* تمرير أصناف السلة الطويلة. */
.cart-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); padding: 10px 0; } /* صف سلة واحد. */
.cart-line > div:first-child { display: grid; gap: 4px; } /* اسم وسعر سطر السلة. */
.cart-line strong { font-size: 11px; } /* اسم السلة. */
.cart-line small { color: var(--muted); font-size: 9px; } /* السعر للوحدة. */
.quantity-stepper { display: flex; align-items: center; gap: 8px; } /* عناصر تغيير كمية السلة. */
.quantity-stepper button { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 9px; color: #fff; background: rgba(255, 255, 255, .06); cursor: pointer; } /* زر خطوة الكمية. */
.quantity-stepper b { min-width: 15px; text-align: center; font-size: 11px; } /* العدد الحالي في السلة. */
.cart-total-row { display: flex; justify-content: space-between; margin: 14px 0; color: #e5e7ef; font-size: 12px; } /* إجمالي السلة التقديري. */
.cart-total-row strong { color: #8df0d7; } /* إبراز قيمة الطلب. */
.consent-row { display: flex !important; grid-template-columns: auto 1fr; align-items: start; gap: 8px !important; color: var(--muted) !important; font-size: 10px !important; font-weight: 400 !important; line-height: 1.7; } /* موافقة اختيارية مستقلة. */
.consent-row input { flex: 0 0 auto; margin-top: 2px; } /* مربع الموافقة. */
@media (max-width: 1100px) { /* تعديل لوحة التحكم للشاشات المتوسطة. */
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* تقليل عدد الأعمدة للمؤشرات. */
  .tables-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* تقليل أعمدة الطاولات. */
  .main-panel { padding-inline: 24px; } /* تقليل الهوامش الجانبية. */
} /* نهاية استجابة الشاشات المتوسطة. */
@media (max-width: 760px) { /* ترتيب لوحة التحكم والزبون على الهاتف. */
  .sidebar { position: static; width: auto; min-height: auto; margin: 10px; padding: 11px; border-radius: 18px; } /* تحويل التنقل إلى شريط أعلى الهاتف. */
  .sidebar-brand { padding: 3px 5px 10px; } /* تصغير رأس الحساب. */
  .sidebar-brand .brand-icon { width: 33px; height: 33px; } /* تصغير رمز المقهى. */
  .branch-picker { display: none; } /* توفير ارتفاع الهاتف. */
  .primary-nav { display: flex; gap: 5px; overflow-x: auto; margin-top: 0; padding-bottom: 2px; scrollbar-width: none; } /* جعل التنقل أفقياً. */
  .nav-link { min-height: 39px; flex: 0 0 auto; gap: 6px; padding: 0 10px; font-size: 10px; } /* تصغير روابط الهاتف. */
  .nav-link > span { font-size: 13px; } /* تصغير رموز التنقل. */
  .nav-link b { min-width: 17px; padding: 1px 4px; } /* تقليل عداد الطلبات. */
  .sidebar-bottom { display: none; } /* إخفاء بطاقة الدعم لتوفير المساحة. */
  .main-panel { margin-right: 0; padding: 14px 13px 16px; } /* توسيع مساحة العمل للهاتف. */
  .topbar { align-items: start; margin-bottom: 22px; } /* تصغير رأس الهاتف. */
  .topbar h1 { font-size: 19px; } /* تصغير عنوان الوحدة. */
  .topbar-actions { gap: 5px; } /* تقليل الفراغ بين الأزرار. */
  .topbar-actions .icon-button { width: 34px; height: 34px; border-radius: 11px; } /* تصغير أزرار التنبيه. */
  .profile-chip { min-width: auto; grid-template-columns: 29px auto; column-gap: 5px; padding: 4px 6px; } /* تقليل مساحة المستخدم. */
  .profile-chip .avatar { width: 28px; height: 28px; } /* تصغير رمز الحساب. */
  .profile-chip span { max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; } /* قص الاسم على الهاتف. */
  .profile-chip small { display: none; } /* إخفاء الدور عند ضيق العرض. */
  .section-heading { align-items: start; gap: 12px; } /* تكديس عنوان القسم. */
  .section-heading h2 { font-size: 18px; } /* تصغير عنوان الوحدة. */
  .section-heading .button { min-height: 37px; padding-inline: 10px; font-size: 10px; } /* تصغير أزرار العنوان. */
  .metrics-grid { gap: 9px; } /* تضييق فواصل البطاقات. */
  .metric-card { min-height: 133px; padding: 13px; } /* تقليل ارتفاع البطاقة. */
  .metric-card > strong { margin-top: 11px; font-size: 23px; } /* ضبط قيمة المؤشر. */
  .metric-top { font-size: 9px; } /* تصغير اسم المؤشر. */
  .metric-icon { width: 27px; height: 27px; } /* تصغير الأيقونة. */
  .content-grid, .orders-grid, .menu-admin-layout, .settings-layout { grid-template-columns: 1fr; } /* تحويل الأعمدة إلى عمود واحد. */
  .receipt-filters { grid-template-columns: 1fr; } /* ترتيب فلاتر الفاتورة عمودياً على الهاتف. */
  .content-grid { gap: 10px; } /* تقليل المسافة بين اللوحات. */
  .tables-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } /* توزيع الطاولات في عمودين. */
  .table-card { padding: 12px; } /* تصغير بطاقة الطاولة. */
  .table-actions .button { flex: 1 1 auto; } /* توزيع أدوات الطاولة. */
  .unassigned-waiter-banner { align-items: stretch; flex-direction: column; }
  .unassigned-waiter-banner .button { width: 100%; }
  .orders-grid { gap: 10px; } /* تقليل المسافة بين الطلبات. */
  .panel { padding: 14px; } /* تقليل حشو اللوحات. */
  .panel-heading { align-items: start; } /* محاذاة عناوين اللوحات أعلى. */
  .search-box { width: 140px; } /* تصغير حقل البحث. */
  .admin-item-row { gap: 7px; } /* تضييق صفوف المنيو. */
  .item-thumb { width: 34px; height: 34px; } /* تصغير صورة الصنف. */
  .item-price { font-size: 9px; } /* تصغير سعر الصنف الإداري. */
  .availability { padding: 4px 5px; font-size: 8px; } /* تصغير شارة التوفر. */
  .settings-form { grid-template-columns: 1fr; } /* عرض حقول الإعدادات متتابعة. */
  .wide-field, .settings-note { grid-column: auto; } /* إعادة الحقول الممتدة إلى عمود الهاتف. */
  .app-footer { font-size: 8px; } /* تصغير التذييل. */
  .customer-header { min-height: 57px; padding-inline: 14px; } /* تقليل رأس صفحة الزبون. */
  .customer-main { width: min(100% - 24px, 520px); padding-top: 25px; } /* جعل المنيو مريحاً بيد واحدة. */
  .customer-item-image { height: 125px; } /* تصغير صورة الصنف. */
  .customer-item-copy { padding: 10px; } /* تقليل فراغ الوصف. */
  .customer-item-copy h2 { font-size: 11px; } /* ضبط عنوان البطاقة. */
  .customer-item-copy p { font-size: 9px; } /* ضبط وصف البطاقة. */
  .customer-item-copy > strong { font-size: 10px; } /* ضبط السعر. */
  .toast-region { inset: 10px 10px auto auto; } /* تقريب التنبيه من أعلى الهاتف. */
} /* نهاية تعديل الهاتف. */
@media (max-width: 390px) { /* تحسين العرض للأجهزة الصغيرة جداً. */
  .customer-menu-grid { grid-template-columns: 1fr; } /* عرض الصنف بعرض كامل للهاتف الضيق. */
  .daily-special-grid { grid-template-columns: 1fr; } /* الحفاظ على وضوح بطاقات العرض على الهاتف الضيق. */
  .customer-item-image { height: 165px; } /* مساحة صورة أكبر في العمود الواحد. */
  .profile-chip { grid-template-columns: 27px auto; } /* ضغط شارة الحساب. */
  .profile-chip span { max-width: 52px; } /* قص اسم أطول في الهاتف الضيق. */
} /* نهاية تعديل العرض الضيق. */
.menu-presets { min-width: 0; margin: 0; border: 1px solid var(--border); border-radius: 15px; padding: 12px; } /* إطار مجموعة القوالب الجاهزة. */
.menu-presets legend { padding: 0 7px; color: var(--muted); font-size: 11px; } /* عنوان لوحات الألوان. */
.menu-preset-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } /* توزيع ست لوحات جاهزة بشكل واضح. */
.menu-preset-list button { min-height: 54px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 12px; padding: 8px; color: var(--text); background: rgba(255,255,255,.035); cursor: pointer; font-size: 10px; } /* زر اختيار لوحة ألوان. */
.menu-preset-list button:hover, .menu-preset-list button.is-selected { border-color: var(--tenant-accent); background: color-mix(in srgb, var(--tenant-accent) 10%, transparent); } /* إبراز اللوحة المختارة. */
.menu-preset-list i { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 10px; background: linear-gradient(135deg, var(--swatch-a), var(--swatch-b)); box-shadow: 0 0 15px color-mix(in srgb, var(--swatch-a) 26%, transparent); } /* معاينة اللونين الرئيسيين للقالب. */
.menu-body { color: var(--tenant-text, #f4f5fa); } /* تطبيق لون النص الذي اختاره المقهى. */
.menu-body .customer-item { color: var(--tenant-text, #f4f5fa); background: linear-gradient(145deg, color-mix(in srgb, var(--tenant-surface, #151923) 96%, white), var(--tenant-surface, #151923)); } /* تطبيق سطح البطاقة مع الحفاظ على العمق. */
.menu-body .customer-item-copy > strong { color: var(--tenant-text, #f4f5fa); } /* توحيد لون السعر مع هوية القالب. */
.menu-body .customer-header { background: color-mix(in srgb, var(--tenant-background) 88%, transparent); } /* مزج الرأس مع خلفية القالب. */
.menu-body[data-menu-theme="editorial"] { --muted: color-mix(in srgb, var(--tenant-text) 62%, var(--tenant-background)); color-scheme: light; } /* قالب تحريري دافئ للمنيو. */
.menu-body[data-menu-theme="editorial"] .customer-header { border-color: color-mix(in srgb, var(--tenant-text) 13%, transparent); backdrop-filter: blur(14px); } /* رأس خفيف للقالب التحريري. */
.menu-body[data-menu-theme="editorial"] .menu-hero { border-inline-start: 3px solid var(--tenant-accent); padding-inline-start: 15px; } /* لمسة تحريرية حول عنوان القائمة. */
.menu-body[data-menu-theme="editorial"] .customer-item { box-shadow: 0 12px 28px rgba(67, 43, 25, .09); } /* ظل لطيف على خلفية فاتحة. */
.menu-body[data-menu-theme="minimal"] { --muted: #64748b; color-scheme: light; } /* قالب بسيط فاتح عالي الوضوح. */
.menu-body[data-menu-theme="minimal"] .customer-item { border-color: color-mix(in srgb, var(--tenant-text) 10%, transparent); box-shadow: 0 8px 22px rgba(20, 35, 45, .07); } /* بطاقة مسطحة للقالب البسيط. */
.menu-body[data-menu-theme="minimal"] .category-tab { color: var(--tenant-text); background: var(--tenant-surface); } /* أزرار أقسام متباينة في القالب الفاتح. */
.menu-body[data-menu-theme="warm"] { --muted: color-mix(in srgb, var(--tenant-text) 68%, var(--tenant-background)); } /* قالب بألوان القهوة الدافئة. */
.menu-body[data-menu-theme="warm"] .customer-item { box-shadow: 0 14px 32px rgba(0, 0, 0, .24); } /* عمق ناعم للقالب الدافئ. */
.menu-body[data-menu-theme="forest"] { --muted: color-mix(in srgb, var(--tenant-text) 65%, var(--tenant-background)); } /* قالب أخضر هادئ مستوحى من الطبيعة. */
.menu-body[data-menu-theme="forest"] .customer-item-image { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--tenant-accent) 22%, transparent), var(--tenant-surface) 70%); } /* خلفية صور خضراء للقالب الطبيعي. */
.menu-body[data-menu-theme="royal"] { --muted: color-mix(in srgb, var(--tenant-text) 66%, var(--tenant-background)); } /* قالب ملكي بتدرجات بنفسجية ووردية. */
.menu-body[data-menu-theme="royal"] .menu-hero .eyebrow { text-shadow: 0 0 18px color-mix(in srgb, var(--tenant-accent) 48%, transparent); } /* وهج محدود فوق العنوان الملكي. */
/* Modern glass menu: responsive polish, clear actions, and tenant-colored neon accents. */
.menu-body { background-image: radial-gradient(ellipse at 82% 8%, color-mix(in srgb, var(--tenant-primary) 20%, transparent), transparent 36%), radial-gradient(ellipse at 8% 48%, color-mix(in srgb, var(--tenant-accent) 9%, transparent), transparent 34%), linear-gradient(160deg, color-mix(in srgb, var(--tenant-background) 94%, #111827), var(--tenant-background)); }
.customer-header { border-color: color-mix(in srgb, var(--tenant-accent) 17%, var(--border)); background: color-mix(in srgb, var(--tenant-background) 76%, transparent); box-shadow: 0 8px 30px rgba(0,0,0,.12); backdrop-filter: blur(22px) saturate(145%); -webkit-backdrop-filter: blur(22px) saturate(145%); }
.customer-brand, .customer-header-actions { min-width: 0; }
.customer-brand #cafe-name { max-width: min(40vw, 230px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-table-pill, .language-toggle { box-shadow: inset 0 1px rgba(255,255,255,.07), 0 0 18px color-mix(in srgb, var(--tenant-accent) 9%, transparent); }
.menu-hero { position: relative; isolation: isolate; margin-bottom: 24px; animation: menu-rise .48s cubic-bezier(.2,.75,.25,1) both; }
.menu-hero::after { content: ""; position: absolute; z-index: -1; inset: -18px -14px -12px; border-radius: 25px; background: radial-gradient(ellipse at 80% 30%, color-mix(in srgb, var(--tenant-primary) 15%, transparent), transparent 68%); pointer-events: none; }
.menu-hero .eyebrow { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; text-shadow: 0 0 20px color-mix(in srgb, var(--tenant-accent) 38%, transparent); }
.menu-hero .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tenant-accent); box-shadow: 0 0 13px var(--tenant-accent); }
.menu-hero h1 { letter-spacing: -.035em; text-wrap: balance; }
.menu-search { min-height: 48px; display: flex; align-items: center; gap: 10px; margin: 0 0 15px; border: 1px solid color-mix(in srgb, var(--tenant-accent) 17%, var(--border)); border-radius: 16px; padding: 0 13px; color: var(--muted); background: color-mix(in srgb, var(--tenant-surface) 76%, transparent); box-shadow: inset 0 1px rgba(255,255,255,.055), 0 8px 26px rgba(0,0,0,.1); backdrop-filter: blur(15px); transition: border-color .2s, box-shadow .2s, transform .2s; }
.menu-search:focus-within { border-color: color-mix(in srgb, var(--tenant-accent) 64%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tenant-accent) 12%, transparent), 0 0 23px color-mix(in srgb, var(--tenant-accent) 13%, transparent); }
.menu-search > span { color: var(--tenant-accent); font-size: 23px; line-height: 1; }
.menu-search input { width: 100%; min-width: 0; height: 44px; border: 0; outline: 0; color: var(--tenant-text); background: transparent; font: inherit; font-size: 12px; }
.menu-search input::placeholder { color: var(--muted); opacity: .78; }
.menu-search button { width: 29px; height: 29px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 9px; color: var(--tenant-text); background: rgba(255,255,255,.06); cursor: pointer; }
.menu-search button[hidden] { display: none; }
.daily-specials { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--tenant-accent) 34%, var(--border)); background: linear-gradient(130deg, color-mix(in srgb, var(--tenant-accent) 10%, var(--tenant-surface)), color-mix(in srgb, var(--tenant-primary) 12%, var(--tenant-background)) 70%); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 18px 46px color-mix(in srgb, var(--tenant-accent) 10%, transparent); backdrop-filter: blur(18px); }
.daily-specials::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tenant-accent) 70%, white), transparent); opacity: .6; }
.specials-sparkle { box-shadow: 0 0 25px color-mix(in srgb, var(--tenant-accent) 16%, transparent), inset 0 1px rgba(255,255,255,.1); animation: sparkle-breathe 3s ease-in-out infinite; }
.category-tabs { scroll-snap-type: x proximity; mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
.category-tab { position: relative; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--tenant-surface) 74%, transparent); backdrop-filter: blur(12px); transition: color .18s, background .18s, border-color .18s, transform .18s, box-shadow .18s; scroll-snap-align: start; }
.category-tab:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--tenant-accent) 43%, var(--border)); }
.category-tab.is-active { border-color: color-mix(in srgb, var(--tenant-accent) 68%, transparent); color: var(--tenant-text); background: color-mix(in srgb, var(--tenant-accent) 15%, var(--tenant-surface)); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 0 20px color-mix(in srgb, var(--tenant-accent) 12%, transparent); }
.customer-menu-grid { align-items: start; }
.customer-item { position: relative; isolation: isolate; border-color: color-mix(in srgb, var(--tenant-accent) 13%, var(--border)); background: linear-gradient(145deg, color-mix(in srgb, var(--tenant-surface) 91%, white), color-mix(in srgb, var(--tenant-surface) 96%, var(--tenant-background))); box-shadow: inset 0 1px rgba(255,255,255,.075), 0 15px 38px rgba(0,0,0,.19); backdrop-filter: blur(16px); animation: menu-rise .38s cubic-bezier(.2,.75,.25,1) both; transition: border-color .2s, box-shadow .2s, transform .22s; }
.customer-item::before { content: ""; position: absolute; z-index: 1; inset: 0 12% auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent); pointer-events: none; }
.customer-item:hover { z-index: 1; transform: translateY(-3px); border-color: color-mix(in srgb, var(--tenant-accent) 43%, var(--border)); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 18px 42px rgba(0,0,0,.23), 0 0 22px color-mix(in srgb, var(--tenant-accent) 9%, transparent); }
.customer-item.is-special-item { border-color: color-mix(in srgb, var(--tenant-accent) 43%, var(--border)); }
.customer-item-image { background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--tenant-accent) 18%, transparent), color-mix(in srgb, var(--tenant-surface) 88%, var(--tenant-background)) 72%); }
.customer-item-image img { transition: transform .45s cubic-bezier(.2,.75,.25,1), filter .35s; }
.customer-item:hover .customer-item-image img { transform: scale(1.045); filter: saturate(1.08); }
.add-item-button { display: grid; place-items: center; border-color: color-mix(in srgb, var(--tenant-accent) 70%, white); box-shadow: 0 7px 23px color-mix(in srgb, var(--tenant-accent) 32%, transparent), inset 0 1px rgba(255,255,255,.3); transition: transform .18s, box-shadow .18s, background .18s; }
.add-item-button:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 9px 26px color-mix(in srgb, var(--tenant-accent) 44%, transparent), inset 0 1px rgba(255,255,255,.35); }
.add-item-button.is-added { color: #06110e; background: #9af5d9; box-shadow: 0 0 0 5px color-mix(in srgb, var(--tenant-accent) 17%, transparent), 0 0 27px color-mix(in srgb, var(--tenant-accent) 56%, transparent); animation: add-pop .32s cubic-bezier(.2,.9,.3,1.4); }
.customer-item-copy { align-items: end; min-height: 83px; }
.customer-item-copy > div { min-width: 0; }
.customer-item-copy h2 { font-size: 13px; line-height: 1.5; }
.customer-item-copy > strong { text-shadow: 0 0 15px color-mix(in srgb, var(--tenant-accent) 16%, transparent); }
.special-item-badge { border: 1px solid rgba(255,255,255,.3); box-shadow: 0 6px 22px color-mix(in srgb, var(--tenant-accent) 34%, transparent), inset 0 1px rgba(255,255,255,.26); }
.customer-bottom-nav { border-color: color-mix(in srgb, var(--tenant-accent) 20%, var(--border)); background: color-mix(in srgb, var(--tenant-background) 79%, transparent); box-shadow: 0 -12px 38px rgba(0,0,0,.34), 0 0 28px color-mix(in srgb, var(--tenant-primary) 9%, transparent); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); }
.customer-bottom-nav > button:not(#cart-fab) { transition: color .18s, background .18s, transform .18s; }
.customer-bottom-nav > button:not(#cart-fab):hover { color: var(--tenant-accent); background: color-mix(in srgb, var(--tenant-accent) 9%, transparent); }
.customer-bottom-nav #cart-fab { border-color: color-mix(in srgb, var(--tenant-accent) 58%, white); box-shadow: 0 8px 25px color-mix(in srgb, var(--tenant-accent) 24%, transparent), inset 0 1px rgba(255,255,255,.38); transition: transform .2s, box-shadow .2s; }
.customer-bottom-nav #cart-fab.is-pulsing { animation: cart-pulse .48s ease-out; }
.menu-size-picker select { border-color: color-mix(in srgb, var(--tenant-accent) 22%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--tenant-background) 75%, var(--tenant-surface)); }
.menu-empty-state { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--tenant-accent) 25%, var(--border)); background: color-mix(in srgb, var(--tenant-surface) 64%, transparent); }
@keyframes menu-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sparkle-breathe { 50% { transform: scale(1.045); box-shadow: 0 0 30px color-mix(in srgb, var(--tenant-accent) 23%, transparent), inset 0 1px rgba(255,255,255,.12); } }
@keyframes add-pop { 50% { transform: scale(1.13); } }
@keyframes cart-pulse { 50% { transform: scale(1.035); box-shadow: 0 0 0 6px color-mix(in srgb, var(--tenant-accent) 13%, transparent), 0 9px 28px color-mix(in srgb, var(--tenant-accent) 36%, transparent); } }
.menu-body[data-menu-theme="cyber"] .customer-item { box-shadow: inset 0 1px rgba(255,255,255,.11), 0 15px 38px rgba(0,0,0,.22), 0 0 24px color-mix(in srgb, var(--tenant-accent) 10%, transparent); }
.menu-body[data-menu-theme="cyber"] .daily-specials { background: linear-gradient(130deg, color-mix(in srgb, var(--tenant-accent) 12%, var(--tenant-surface)), color-mix(in srgb, var(--tenant-primary) 16%, var(--tenant-background))); }
.menu-body[data-menu-theme="ocean"] .menu-hero h1 { text-shadow: 0 0 28px color-mix(in srgb, var(--tenant-primary) 33%, transparent); }
.menu-body[data-menu-theme="ocean"] .customer-table-pill { border-color: color-mix(in srgb, var(--tenant-primary) 37%, transparent); color: color-mix(in srgb, var(--tenant-accent) 75%, white); }
.menu-body[data-menu-theme="rose"] .specials-sparkle { border-radius: 50%; }
.menu-body[data-menu-theme="rose"] .customer-item { box-shadow: inset 0 1px rgba(255,255,255,.08), 0 15px 38px rgba(0,0,0,.2), 0 0 20px color-mix(in srgb, var(--tenant-primary) 10%, transparent); }
.menu-body[data-menu-theme="sand"] { --muted: color-mix(in srgb, var(--tenant-text) 62%, var(--tenant-background)); color-scheme: light; }
.menu-body[data-menu-theme="sand"] .customer-header { border-color: color-mix(in srgb, var(--tenant-text) 12%, transparent); }
.menu-body[data-menu-theme="sand"] .customer-item { box-shadow: inset 0 1px rgba(255,255,255,.72), 0 12px 28px rgba(76,48,20,.09); }
.menu-body[data-menu-theme="sand"] .category-tab { color: var(--tenant-text); }
.menu-preset-list { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
@media (max-width: 760px) {
  .customer-main { padding-top: 22px; }
  .menu-hero { margin-bottom: 19px; }
  .menu-hero h1 { font-size: clamp(29px, 8vw, 37px); }
  .daily-specials { border-radius: 22px; padding: 14px; }
  .daily-special-grid { display: flex; gap: 11px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--tenant-accent) 34%, transparent) transparent; padding-bottom: 5px; }
  .daily-special-grid .customer-item { flex: 0 0 min(82vw, 350px); scroll-snap-align: start; }
  .customer-item-image { height: clamp(132px, 39vw, 175px); }
  .customer-bottom-nav { padding-inline: 8px; }
  .customer-bottom-nav small { font-size: 8px; }
  .customer-bottom-nav #cart-fab { gap: 4px; }
}
@media (max-width: 390px) { .daily-special-grid .customer-item { flex-basis: min(84vw, 330px); } }
@media (prefers-reduced-motion: reduce) {
  .menu-hero, .customer-item, .specials-sparkle, .add-item-button.is-added, .customer-bottom-nav #cart-fab.is-pulsing { animation: none !important; }
  .customer-item, .customer-item-image img, .add-item-button, .category-tab, .menu-search, .customer-bottom-nav > button { transition: none !important; }
  html:focus-within { scroll-behavior: auto; }
}
@media (max-width: 760px) { /* ترتيب شاشة الطلب اليدوي على الأجهزة اللوحية والهواتف. */
  .app-modal.manual-order-dialog { width: min(96vw, 620px); padding: 16px; } /* إبقاء النافذة كاملة ضمن الشاشة الصغيرة. */
  .manual-order-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* توزيع الحقول على عمودين. */
  .manual-order-toolbar label:last-child { grid-column: 1 / -1; } /* جعل تصفية القسم بعرض كامل. */
  .manual-order-layout { grid-template-columns: minmax(0, 1fr); } /* وضع السلة أسفل المنيو على الهاتف. */
  .manual-menu-catalog { max-height: 35vh; } /* تحديد ارتفاع قائمة الأصناف لتبقى السلة وزر الإرسال ظاهرين. */
  .manual-cart-panel { position: static; } /* إلغاء التثبيت في الشاشة الضيقة. */
  .manual-cart-lines { max-height: 20vh; } /* ضغط سطور السلة مع إتاحة التمرير. */
} /* نهاية تنسيق الطلب اليدوي للأجهزة الصغيرة. */
@media (max-width: 460px) { /* تحسين تفاصيل الصنف لهواتف الاستخدام اليومي. */
  .manual-menu-catalog { grid-template-columns: minmax(0, 1fr); } /* جعل كل بطاقة بعرض كامل على الهاتف. */
  .manual-order-toolbar { grid-template-columns: minmax(0, 1fr); } /* عرض حقول الاسم والبحث والقسم بالتتابع. */
  .manual-order-toolbar label:last-child { grid-column: auto; } /* إعادة حقل القسم إلى التدفق الطبيعي. */
  .manual-catalog-heading { align-items: start; flex-direction: column; gap: 3px; } /* فصل إرشاد المنيو عند صغر العرض. */
} /* نهاية تحسين شاشة الهاتف. */
@media (max-width: 600px) { /* تحسين بطاقات الطعام لشاشة الهاتف. */
  .customer-main { width: min(100% - 26px, 540px); padding-top: 22px; } /* ترك مساحة متوازنة على جانبي الهاتف. */
  .customer-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* تحويل القائمة إلى بطاقات تطبيق مدمجة. */
  .customer-item-image { height: clamp(100px, 31vw, 142px); } /* ضبط الصور بحسب عرض الهاتف. */
  .customer-item-copy { min-height: 82px; flex-direction: column; align-items: stretch; gap: 7px; padding: 10px; } /* ترتيب تفاصيل البطاقة بشكل واضح. */
  .customer-item-copy h2 { font-size: 12px; } /* جعل اسم الصنف مقروءاً على شاشة صغيرة. */
  .customer-item-copy p { max-width: none; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.5; } /* اختصار الوصف الطويل دون تشويه البطاقة. */
  .customer-item-copy > strong { align-self: flex-start; font-size: 12px; } /* تثبيت السعر أسفل وصف الصنف. */
  .menu-list-layout .customer-item { grid-template-columns: 38% 1fr; } /* الحفاظ على خيار القائمة الجانبية على الهاتف. */
  .menu-list-layout .customer-item-copy { flex-direction: row; align-items: end; } /* إظهار تفاصيل القائمة بجانب الصورة. */
} /* نهاية تحسين بطاقات الهاتف. */
@media (max-width: 360px) { /* معالجة الهواتف شديدة الضيق. */
  .customer-menu-grid { grid-template-columns: 1fr; } /* إعطاء البطاقات مساحة كاملة على الشاشات الصغيرة جداً. */
} /* نهاية معالجة الهاتف الضيق. */
#print-receipt-root { display: none; } /* إبقاء نسخة الطباعة مخفية في العرض العادي. */
@media print { /* عزل الفاتورة عن لوحة التحكم عند فتح معاينة الطباعة. */
  @page { margin: 2mm; } /* ترك هامش صغير يناسب الطابعة الحرارية. */
  @page receipt-58 { size: 58mm auto; margin: 2mm; } /* ضبط ورقة الفاتورة على رول 58 مم. */
  @page receipt-80 { size: 80mm auto; margin: 2mm; } /* ضبط ورقة الفاتورة على رول 80 مم. */
  html, body { width: 100% !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: #fff !important; color: #111 !important; } /* إزالة تخطيط الخلفية الداكنة والهوامش الافتراضية. */
  body.printing-receipt { display: block !important; overflow: visible !important; font-family: Arial, Tahoma, sans-serif !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* جعل جسم المستند مساحة طباعة عادية. */
  body.printing-receipt > :not(#print-receipt-root) { display: none !important; } /* إخفاء لوحة التحكم والحوار وكل محتوى الصفحة. */
  body.printing-receipt dialog[open] { display: none !important; } /* إخفاء نافذة الفاتورة المعروضة على الشاشة. */
  body.printing-receipt #print-receipt-root { display: block !important; width: 54mm !important; max-width: 100% !important; page: receipt-58; margin: 0 auto !important; padding: 0 !important; background: #fff !important; color: #111 !important; font: 10px/1.45 Arial, Tahoma, sans-serif !important; direction: inherit; } /* إظهار نسخة الفاتورة وحدها بعرض الطابعة الحرارية. */
  body.printing-receipt.paper-80mm #print-receipt-root { width: 76mm !important; page: receipt-80; } /* توسيع مساحة الفاتورة عند اختيار رول 80 مم. */
  #print-receipt-root .receipt { box-sizing: border-box !important; width: 100% !important; max-width: none !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: #fff !important; color: #111 !important; box-shadow: none !important; } /* إزالة شكل البطاقة الداكنة من الورقة. */
  #print-receipt-root .receipt-brand, #print-receipt-root .receipt-row, #print-receipt-root .receipt-total, #print-receipt-root .receipt-lines > div { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 5px !important; border-bottom: 1px dashed #aaa !important; padding: 5px 0 !important; color: #111 !important; font-size: 9px !important; } /* طباعة أسماء المنتجات والمجاميع بوضوح. */
  #print-receipt-root .receipt-lines { display: block !important; }
  #print-receipt-root .receipt-item { display: block !important; padding: 2mm 0 2.5mm !important; border-bottom: 1px dashed #aaa !important; }
  #print-receipt-root .receipt-item-main, #print-receipt-root .receipt-line-tax-detail { display: flex !important; justify-content: space-between !important; align-items: baseline !important; gap: 3px !important; border: 0 !important; padding: 1px 0 !important; color: #111 !important; font-size: 8px !important; line-height: 1.4 !important; }
  #print-receipt-root .receipt-item-tax { display: grid !important; gap: 1px !important; padding-inline-start: 2mm !important; }
  #print-receipt-root .receipt-line-tax-detail { color: #333 !important; font-size: 7px !important; }
  #print-receipt-root .receipt-line-tax-detail b { color: #111 !important; font-weight: 400 !important; white-space: nowrap !important; } /* طباعة اسم الصنف وسعره ثم كل ضريبة في سطر مستقل. */
  #print-receipt-root .receipt-invoice-heading { display: grid !important; justify-items: center !important; gap: 1mm !important; padding: 2mm 0 !important; border-bottom: 1px dashed #888 !important; color: #111 !important; }
  #print-receipt-root .receipt-invoice-heading strong { color: #111 !important; font-size: 11px !important; }
  #print-receipt-root .receipt-invoice-heading small { color: #333 !important; font-size: 8px !important; }
  #print-receipt-root .receipt-barcode { margin: 2mm auto !important; color: #111 !important; }
  #print-receipt-root .receipt-barcode svg { width: 90% !important; height: 13mm !important; fill: #111 !important; }
  #print-receipt-root .receipt-barcode small { color: #111 !important; font-size: 8px !important; }
  #print-receipt-root .receipt .receipt-brand { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; gap: 2mm !important; margin: 0 auto 2mm !important; padding: 2mm 0 3mm !important; border-bottom: 1px solid #aaa !important; font-size: 13px !important; text-align: center !important; }
  #print-receipt-root .receipt-brand strong { max-width: 100% !important; font-size: 13px !important; line-height: 1.35 !important; } /* الحفاظ على قراءة الاسم الاختياري في أعلى الفاتورة المطبوعة. */
  #print-receipt-root .receipt .receipt-logo { display: block !important; align-self: center !important; width: 21mm !important; height: 21mm !important; flex-basis: auto !important; margin: 0 auto !important; object-fit: contain !important; } /* زيادة حجم الشعار قليلاً وضمان ظهوره على الطابعة الحرارية. */
  #print-receipt-root .receipt .receipt-contact { display: grid !important; align-self: center !important; justify-items: center !important; gap: 1mm !important; width: 100% !important; color: #333 !important; font-size: 8px !important; font-weight: 400 !important; text-align: center !important; } /* طباعة الهاتف والعنوان بوضوح تحت الشعار. */
  #print-receipt-root .receipt-phone-line { display: flex !important; align-items: center !important; justify-content: center !important; gap: 1mm !important; direction: ltr !important; } /* طباعة الأيقونة بجوار رقم الهاتف بترتيب سليم. */
  #print-receipt-root .receipt-phone-line svg { width: 3mm !important; height: 3mm !important; } /* تكبير أيقونة الهاتف للطابعة الصغيرة. */
  #print-receipt-root .receipt p, #print-receipt-root .receipt > small, #print-receipt-root .receipt-qr small { display: block !important; color: #333 !important; text-align: center !important; font-size: 8px !important; } /* جعل وقت الطلب ورقم الفاتورة مقروءاً على الورق. */
  #print-receipt-root .receipt-total { border: 0 !important; font-size: 12px !important; font-weight: 700 !important; } /* تمييز الإجمالي النهائي. */
  #print-receipt-root .receipt-qr { padding: 4px 0 !important; text-align: center !important; } /* توسيط رمز الفاتورة العام. */
  #print-receipt-root .receipt-qr img, #print-receipt-root .receipt-qr canvas { display: block !important; width: 32mm !important; height: 32mm !important; margin: 4px auto !important; image-rendering: pixelated; } #print-receipt-root .receipt-qr-public img { width: 20mm !important; height: 20mm !important; } body.printing-receipt.paper-80mm #print-receipt-root .receipt-qr-tax img { width: 42mm !important; height: 42mm !important; } /* زيادة مساحة QR الضريبي وطباعته أكبر على رول 80 مم. */
  #print-receipt-root img { max-width: 100% !important; } /* منع الصور من تجاوز عرض الورق. */
} /* نهاية تنسيق الطباعة المعزول. */

/* شاشة تثبيت التطبيق وتشغيل النادل محلياً أثناء انقطاع الاتصال. */
.login-install-button { margin: 14px 0 22px; min-height: 42px; font-size: 13px; }
.shift-report-row { align-items: center; gap: 14px; flex-wrap: wrap; }
.shift-report-row > div { display: grid; gap: 5px; flex: 1 1 150px; }
.shift-report-row > div small { color: var(--muted); }
@media (max-width: 760px) { .shift-report-row { align-items: stretch; } .shift-report-row > .button { width: 100%; } }
.app-modal.shift-report-dialog { width: min(94vw, 1120px); max-height: 92vh; }
.shift-report-preview { display: grid; gap: 14px; min-width: 0; }
.shift-report-preview .modal-heading { margin-bottom: 0; }
.shift-report-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid rgba(109, 232, 203, .15); border-radius: 14px; padding: 11px 14px; background: rgba(76, 226, 193, .045); }
.shift-report-toolbar p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.shift-report-toolbar .button { flex: 0 0 auto; }
.shift-report-document { min-width: 0; border: 1px solid var(--border); border-radius: 17px; padding: clamp(16px, 2.5vw, 28px); color: var(--text); background: #10131b; font: 13px/1.7 Arial, Tahoma, sans-serif; }
.shift-report-header { border-bottom: 2px solid rgba(109, 232, 203, .42); padding-bottom: 14px; margin-bottom: 16px; }
.shift-report-header h1 { margin: 3px 0 8px; font-size: clamp(19px, 3vw, 26px); }
.shift-report-header p { margin: 4px 0; color: var(--muted); }
.shift-report-counts, .shift-report-metrics { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.shift-report-counts span, .shift-report-metrics p { margin: 0; border: 1px solid var(--border); border-radius: 11px; padding: 8px 11px; color: var(--muted); background: rgba(255,255,255,.025); }
.shift-report-counts b, .shift-report-metrics b { color: var(--text); }
.shift-report-section { min-width: 0; break-inside: avoid; margin: 14px 0; border: 1px solid var(--border); border-radius: 13px; padding: 13px; }
.shift-report-section h3 { margin: 0 0 5px; font-size: 14px; }
.shift-report-section > p { margin: 0 0 8px; color: var(--muted); font-size: 11px; }
.shift-report-table-wrap { max-width: 100%; overflow-x: auto; }
.shift-report-document table { width: 100%; border-collapse: collapse; margin: 9px 0; font-size: 11px; }
.shift-report-document th, .shift-report-document td { border-bottom: 1px solid var(--border); padding: 7px; text-align: right; vertical-align: top; }
.shift-report-document th { color: #c8c2e3; background: rgba(162, 138, 255, .09); }
.shift-report-footer { margin: 18px 0 0; color: var(--muted); font-size: 10px; }
.thermal-shift-report { width: min(100%, 420px); margin-inline: auto; padding: 20px !important; border-color: rgba(109, 232, 203, .28) !important; color: #17191d !important; background: #fff !important; font: 12px/1.55 Arial, Tahoma, sans-serif !important; }
.thermal-report-header { display: grid; justify-items: center; gap: 3px; padding-bottom: 11px; border-bottom: 1px dashed #777; text-align: center; }
.thermal-report-header strong { font-size: 17px; }
.thermal-report-header span { overflow-wrap: anywhere; }
.thermal-report-header h1 { margin: 9px 0 3px; font-size: 16px; }
.thermal-report-logo { width: 66px; height: 66px; margin-bottom: 4px; object-fit: contain; }
.thermal-report-section { margin: 10px 0; padding: 0 0 8px; border-bottom: 1px dashed #777; break-inside: avoid; }
.thermal-report-section h3 { margin: 0 0 6px; font-size: 12px; }
.thermal-report-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2px 0; }
.thermal-report-row span { min-width: 0; overflow-wrap: anywhere; }
.thermal-report-row b { flex: 0 0 auto; text-align: left; font-variant-numeric: tabular-nums; }
.thermal-report-row.is-total { border-top: 1px dotted #999; margin-top: 3px; padding-top: 5px; font-weight: 700; }
.thermal-report-section table { font-size: 9px !important; }
.thermal-report-section th, .thermal-report-section td { padding: 4px 2px !important; overflow-wrap: anywhere; }
.thermal-report-note { margin: 5px 0 0; color: #4a4a4a; font-size: 9px; }
.thermal-report-invoice { display: grid; gap: 2px; padding: 6px 0; border-bottom: 1px dotted #aaa; break-inside: avoid; }
.thermal-report-invoice > div { display: flex; justify-content: space-between; gap: 6px; }
.thermal-report-invoice span, .thermal-report-invoice small { overflow-wrap: anywhere; }
.thermal-report-footer { margin-top: 10px; padding-top: 7px; border-top: 1px dashed #777; text-align: center; font-size: 8px; }
#shift-print-root { display: none; }
@media (max-width: 620px) {
  .app-modal.shift-report-dialog { width: min(96vw, 560px); padding: 15px; }
  .shift-report-toolbar { align-items: stretch; flex-direction: column; }
  .shift-report-toolbar .button { width: 100%; }
  .shift-report-document { padding: 13px; }
  .table-search-control { order: 3; width: 100%; }
  .table-search-control input { flex: 1; width: 100%; }
}
#owner-report-print-root { display: none; }
@media print {
  @page thermal-shift-58 { size: 58mm auto; margin: 2mm; }
  @page thermal-shift-80 { size: 80mm auto; margin: 2mm; }
  @page shift-report-page { size: A4 portrait; margin: 0; }
  @page { size: A4 portrait; margin: 12mm; }
  @page owner-report-page { size: A4 portrait; margin: 0; }
  html, body { width: auto !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: #fff !important; color: #111 !important; }
  body.printing-shift-report { display: block !important; overflow: visible !important; font: 10pt/1.45 Arial, Tahoma, sans-serif !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  body.printing-shift-report > :not(#shift-print-root) { display: none !important; }
  body.printing-shift-report #shift-print-root { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; color: #17202a !important; background: #fff !important; direction: rtl !important; }
  #shift-print-root .shift-report-document { width: 100% !important; min-width: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; padding: 10mm !important; box-sizing: border-box !important; box-decoration-break: clone; -webkit-box-decoration-break: clone; color: #17202a !important; background: #fff !important; box-shadow: none !important; font: 10pt/1.45 Arial, Tahoma, sans-serif !important; }
  #shift-print-root .shift-report-document:not(.thermal-shift-report) { page: shift-report-page; }
  #shift-print-root .shift-report-header { border-color: #253746 !important; }
  #shift-print-root .shift-report-header h1, #shift-print-root .shift-report-section h3, #shift-print-root .shift-report-counts b, #shift-print-root .shift-report-metrics b { color: #17202a !important; }
  #shift-print-root .shift-report-header p, #shift-print-root .shift-report-footer, #shift-print-root .shift-report-section > p, #shift-print-root .shift-report-counts span, #shift-print-root .shift-report-metrics p { color: #45515e !important; }
  #shift-print-root .shift-report-counts span, #shift-print-root .shift-report-metrics p, #shift-print-root .shift-report-section { border-color: #d4dbe2 !important; background: #fff !important; }
  #shift-print-root .shift-report-section { break-inside: avoid; }
  #shift-print-root .shift-report-table-wrap { overflow: visible !important; }
  #shift-print-root table { width: 100% !important; font-size: 8.5pt !important; }
  #shift-print-root th, #shift-print-root td { border-color: #d9dee4 !important; padding: 6px !important; color: #17202a !important; }
  #shift-print-root th { background: #f1f4f7 !important; }
  #shift-print-root thead { display: table-header-group; }
  #shift-print-root tr { break-inside: avoid; }
  #shift-print-root .thermal-shift-report { page: thermal-shift-58; width: 54mm !important; max-width: 54mm !important; margin: 0 auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; color: #111 !important; background: #fff !important; font: 8pt/1.4 Arial, Tahoma, sans-serif !important; }
  body.printing-shift-report.paper-80mm #shift-print-root .thermal-shift-report { page: thermal-shift-80; width: 76mm !important; max-width: 76mm !important; }
  #shift-print-root .thermal-report-header { border-color: #777 !important; }
  #shift-print-root .thermal-report-section { border-color: #777 !important; padding-bottom: 2mm !important; }
  #shift-print-root .thermal-report-section h3 { font-size: 9pt !important; }
  #shift-print-root .thermal-report-row { padding: 1mm 0 !important; }
  #shift-print-root .thermal-report-section table { font-size: 7pt !important; }
  #shift-print-root .thermal-report-section th, #shift-print-root .thermal-report-section td { padding: 1mm .5mm !important; }
  #shift-print-root .thermal-report-note { color: #333 !important; font-size: 7pt !important; }
  #shift-print-root .thermal-report-invoice { border-color: #999 !important; }
  #shift-print-root .thermal-report-footer { border-color: #777 !important; }
}

/* Final QR-menu sizing pass: compact dish cards and make category controls easier to tap. */
.customer-item-image { height: 128px; }
.menu-list-layout .customer-item-image { min-height: 112px; }
.customer-item-copy { min-height: 76px; gap: 9px; padding: 11px; }
.customer-item-copy h2 { font-size: 12px; }
.customer-item-copy p { font-size: 9px; }
.customer-item-copy > strong { font-size: 11px; }
.customer-item-image { display: grid; place-items: center; overflow: hidden; }
.customer-item-image img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }
.category-tabs { gap: 10px; margin-bottom: 20px; padding: 3px 2px 9px; }
.category-tab { min-height: 46px; padding-inline: 18px; font-size: 12px; font-weight: 700; box-shadow: inset 0 1px rgba(255,255,255,.06); }
.category-tab::after { content: ""; position: absolute; inset-inline: 20%; bottom: 4px; height: 2px; border-radius: 99px; background: var(--tenant-accent); box-shadow: 0 0 12px var(--tenant-accent); transform: scaleX(0); transition: transform .2s ease; }
.category-tab.is-active { transform: translateY(-1px); box-shadow: inset 0 1px rgba(255,255,255,.16), 0 5px 18px color-mix(in srgb, var(--tenant-accent) 15%, transparent); }
.category-tab.is-active::after { transform: scaleX(1); }

/* KDS preparation queues and thermal ticket preview. */
.kds-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.kds-filter label { display: grid; gap: 6px; min-width: 190px; color: var(--muted); font-size: 12px; }
.kds-filter select { min-height: 42px; border: 1px solid var(--border); border-radius: 13px; padding: 0 12px; color: var(--text); background: rgba(13, 16, 24, .9); }
.kds-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.kds-cancel-summary { border-color: rgba(255, 96, 125, .42) !important; background: linear-gradient(135deg, rgba(99, 28, 50, .42), rgba(35, 18, 29, .72)) !important; }
.kds-cancel-summary strong { color: #ff8da1 !important; }
.kds-cancel-ticket { display: grid; gap: 12px; border-color: rgba(255, 96, 125, .48); background: linear-gradient(135deg, rgba(84, 25, 42, .45), rgba(21, 18, 27, .9)); padding: 16px; }
.kds-cancel-ticket header { display: flex; justify-content: space-between; gap: 12px; color: #ff9bac; }
.kds-cancel-ticket h3, .kds-cancel-ticket p { margin: 6px 0; }
.kds-cancel-ticket small { color: var(--muted); }
.kds-cancel-label { color: #ff8da1; font-weight: 800; }
.kds-summary article { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 16px; padding: 13px 16px; background: linear-gradient(135deg, rgba(24, 29, 42, .88), rgba(13, 16, 23, .9)); color: var(--muted); }
.kds-summary strong { color: var(--text); font-size: 22px; }
.kds-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.kds-local-status, .kds-conflict-panel { margin: 0 0 16px; border: 1px solid color-mix(in srgb, var(--tenant-accent) 30%, var(--border)); border-radius: 18px; padding: 14px 16px; color: var(--text); background: linear-gradient(135deg, color-mix(in srgb, var(--tenant-accent) 8%, var(--panel-strong)), color-mix(in srgb, var(--panel-strong) 94%, transparent)); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 12px 30px color-mix(in srgb, var(--tenant-primary) 8%, transparent); backdrop-filter: blur(16px); }
.kds-local-status { display: grid; gap: 4px; }
.kds-local-status strong, .kds-conflict-panel h3 { color: var(--tenant-accent); }
.kds-local-status span, .kds-conflict-panel > p, .kds-conflict-row span, .kds-conflict-row small { color: var(--muted); }
.kds-local-status.is-pending { border-color: color-mix(in srgb, var(--tenant-accent) 48%, var(--border)); }
.kds-conflict-panel > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.kds-conflict-panel h3 { margin: 3px 0; }
.kds-conflict-count { min-width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--tenant-accent) 36%, var(--border)); border-radius: 50%; color: var(--tenant-accent); font-weight: 800; }
.kds-conflict-list { display: grid; gap: 9px; }
.kds-conflict-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; border: 1px solid var(--border); border-radius: 14px; padding: 11px 12px; background: color-mix(in srgb, var(--panel-strong) 78%, transparent); }
.kds-conflict-row > div { min-width: 0; display: grid; gap: 4px; }
.kds-conflict-row span, .kds-conflict-row small { overflow-wrap: anywhere; }
.kds-conflict-row button { flex: 0 0 auto; }
.kds-ticket { min-width: 0; padding: 16px; border-color: color-mix(in srgb, var(--tenant-accent) 24%, var(--border)); }
.kds-ticket-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.kds-ticket-head h3 { margin: 4px 0; font-size: 19px; }
.kds-ticket-head small { color: var(--muted); }
.kds-ticket-tools { display: grid; justify-items: end; gap: 8px; }
.kds-ticket-age { color: var(--tenant-accent); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kds-ticket-counts { display: flex; flex-wrap: wrap; gap: 7px; padding: 11px 0; }
.kds-ticket-counts span { border-radius: 99px; padding: 5px 9px; background: rgba(255,255,255,.045); color: var(--muted); font-size: 11px; }
.kds-count-new { color: #f5bd75 !important; }
.kds-count-making { color: #8db8ff !important; }
.kds-count-ready { color: var(--mint) !important; }
.kds-ticket-lines { display: grid; gap: 8px; }
.kds-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 13px; padding: 11px; background: rgba(255,255,255,.025); }
.kds-line.kds-state-ready { border-color: color-mix(in srgb, var(--tenant-accent) 42%, var(--border)); background: color-mix(in srgb, var(--tenant-accent) 9%, transparent); }
.kds-line.kds-state-preparing { border-color: rgba(111, 166, 255, .38); background: rgba(74, 125, 220, .08); }
.kds-line.kds-state-pending { border-color: rgba(245, 189, 117, .28); background: rgba(245, 189, 117, .045); }
.kds-line-main { display: grid; gap: 5px; min-width: 0; }
.kds-line-main strong { overflow-wrap: anywhere; }
.kds-line-main span, .kds-ready-label { color: var(--muted); font-size: 12px; }
#kitchen-print-root { display: none; }
@media (max-width: 760px) { .kds-grid { grid-template-columns: 1fr; } .kds-summary { gap: 7px; } .kds-summary article { align-items: start; flex-direction: column; padding: 10px; } .kds-ticket { padding: 12px; } .kds-ticket-head { flex-direction: column; } .kds-ticket-tools { display: flex; justify-content: space-between; align-items: center; width: 100%; } .kds-line { align-items: stretch; flex-direction: column; } .kds-line > button { width: 100%; min-height: 42px; } .kds-filter { width: 100%; } .kds-filter label { flex: 1; } .kds-conflict-row { align-items: stretch; flex-direction: column; } .kds-conflict-row button { width: 100%; min-height: 42px; } }
@media print {
  @page kitchen-ticket-58 { size: 58mm auto; margin: 2mm; }
  @page kitchen-ticket-80 { size: 80mm auto; margin: 2mm; }
  body.printing-kitchen-ticket { display: block !important; overflow: visible !important; background: #fff !important; color: #111 !important; }
  body.printing-kitchen-ticket > :not(#kitchen-print-root) { display: none !important; }
  body.printing-kitchen-ticket #kitchen-print-root { display: block !important; width: 54mm !important; margin: 0 auto !important; padding: 0 !important; color: #111 !important; background: #fff !important; font: 10pt/1.4 Arial, Tahoma, sans-serif !important; page: kitchen-ticket-58; }
  body.printing-kitchen-ticket.paper-80mm #kitchen-print-root { width: 76mm !important; page: kitchen-ticket-80; }
  .kitchen-print-ticket { width: 100%; color: #111; background: #fff; direction: rtl; }
  .kitchen-print-ticket header { text-align: center; }
  .kitchen-print-ticket header strong { font-size: 11pt; }
  .kitchen-print-ticket h1 { margin: 2mm 0; font-size: 17pt; }
  .kitchen-print-meta { display: grid; gap: 1mm; margin: 3mm 0; }
  .kitchen-print-meta b { font-size: 13pt; }
  .kitchen-print-ticket hr { border: 0; border-top: 1px dashed #555; margin: 2mm 0; }
  .kitchen-print-line { display: grid; grid-template-columns: 1fr auto; gap: 1mm 3mm; padding: 2mm 0; border-bottom: 1px dotted #999; }
  .kitchen-print-line strong { font-size: 12pt; }
  .kitchen-print-line b { font-size: 13pt; }
  .kitchen-print-line small { grid-column: 1 / -1; font-size: 9pt; }
  .kitchen-print-ticket footer { padding-top: 2mm; text-align: center; font-size: 8pt; }
}
.category-tab:active { transform: scale(.96); }
.category-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--tenant-accent) 46%, transparent); outline-offset: 2px; }
@keyframes category-select { 50% { transform: translateY(-2px) scale(1.025); } }
.category-tab.is-active { animation: category-select .28s ease-out both; }
@media (max-width: 600px) {
  .customer-item-image { height: clamp(96px, 28vw, 132px); }
  .customer-item-copy { min-height: 74px; gap: 6px; padding: 9px; }
  .customer-item-copy h2 { font-size: 11px; }
  .customer-item-copy > strong { font-size: 11px; }
  .category-tabs { gap: 9px; margin-bottom: 18px; }
  .category-tab { min-height: 45px; padding-inline: 16px; font-size: 12px; }
}
@media (max-width: 360px) { .customer-item-image { height: 132px; } }
@media (prefers-reduced-motion: reduce) { .category-tab, .category-tab::after { animation: none !important; transition: none !important; } }
/* قائمة QR: أزرار خدمة ثابتة، وتفاعل لا يسبب تكبير الشاشة على الهاتف. */
.customer-main { padding-bottom: 176px; }
.customer-service-actions { position: fixed; z-index: 9; right: max(16px, calc((100vw - 1080px) / 2)); bottom: calc(84px + env(safe-area-inset-bottom)); display: grid; gap: 8px; width: max-content; max-width: calc(100vw - 24px); margin: 0; }
.customer-service-actions button { min-width: 176px; min-height: 48px; display: flex; align-items: center; gap: 10px; border: 1px solid color-mix(in srgb, var(--tenant-accent) 34%, rgba(255,255,255,.12)); border-radius: 16px; padding: 7px 12px; color: var(--tenant-text); background: color-mix(in srgb, var(--tenant-surface) 78%, transparent); box-shadow: 0 9px 28px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.1); backdrop-filter: blur(18px) saturate(145%); -webkit-backdrop-filter: blur(18px) saturate(145%); text-align: right; font-size: 12px; font-weight: 700; transition: border-color .18s ease, box-shadow .18s ease, filter .18s ease; touch-action: manipulation; }
.customer-service-actions button:hover { border-color: var(--tenant-accent); box-shadow: 0 10px 28px rgba(0,0,0,.26), 0 0 18px color-mix(in srgb, var(--tenant-accent) 17%, transparent), inset 0 1px rgba(255,255,255,.12); }
.customer-service-actions button:active { filter: brightness(.92); }
.service-action-icon { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--tenant-accent) 40%, transparent); border-radius: 11px; color: var(--tenant-accent); background: color-mix(in srgb, var(--tenant-accent) 11%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--tenant-accent) 12%, transparent), inset 0 1px rgba(255,255,255,.12); }
.service-action-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-service-request="bill"] .service-action-icon { color: #c2adff; border-color: rgba(162,138,255,.34); background: rgba(142,112,255,.12); }
.service-action-label { min-width: 0; }
.menu-search input { font-size: 16px; touch-action: manipulation; }
.menu-size-picker select { min-height: 42px; font-size: 16px; touch-action: manipulation; }
.customer-order-dialog .stack-form input:not([type="checkbox"]):not([type="radio"]), .customer-order-dialog .stack-form select { min-height: 48px; font-size: 16px; }
.add-item-button, .category-tab, .customer-bottom-nav > button, .menu-addons summary { touch-action: manipulation; }
.customer-item-image img { object-fit: contain; object-position: center; }
.category-tab:active { transform: translateY(0); filter: brightness(.92); }
.add-item-button:active { transform: none; filter: brightness(.9); }
.category-tab.is-active { animation: none; }
@keyframes add-pop { 50% { filter: brightness(1.16); box-shadow: 0 0 0 5px color-mix(in srgb, var(--tenant-accent) 17%, transparent), 0 0 27px color-mix(in srgb, var(--tenant-accent) 56%, transparent); } }
@keyframes cart-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tenant-accent) 13%, transparent), 0 9px 28px color-mix(in srgb, var(--tenant-accent) 36%, transparent); } }
@media (hover: none) {
  .customer-item:hover, .category-tab:hover, .add-item-button:hover, .customer-service-actions button:hover { transform: none; }
  .customer-item:hover .customer-item-image img { transform: none; filter: none; }
}
@media (max-width: 760px) {
  .customer-main { padding-bottom: 190px; }
  .customer-service-actions { right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); gap: 7px; }
  .customer-service-actions button { min-width: 154px; min-height: 44px; border-radius: 15px; padding: 6px 10px; font-size: 11px; }
  .service-action-icon { width: 30px; height: 30px; border-radius: 10px; }
}
@media (max-width: 360px) {
  .customer-service-actions { right: 8px; }
  .customer-service-actions button { min-width: 144px; }
}
@media (prefers-reduced-motion: reduce) {
  .customer-item, .customer-item-image img, .add-item-button, .category-tab, .customer-service-actions button, .customer-bottom-nav #cart-fab { animation: none !important; transition: none !important; }
}
.offline-body { min-height: 100vh; padding: clamp(16px, 4vw, 42px); }
.offline-page { position: relative; z-index: 1; width: min(100%, 1050px); margin: 0 auto; display: grid; gap: 18px; }

.offline-heading, .offline-message, .offline-order-panel, .offline-queue-panel { border-radius: 22px; padding: clamp(18px, 3vw, 28px); }
.offline-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.offline-heading h1, .offline-cart h2, .offline-queue-panel h2 { margin: 0; }
.offline-heading .muted { margin: 8px 0 0; }
.offline-state { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255, 107, 134, .25); border-radius: 999px; padding: 9px 13px; color: #ff9aab; white-space: nowrap; }
.offline-state i { width: 8px; height: 8px; border-radius: 50%; background: #ff6b86; }
.offline-message { border-color: rgba(255, 190, 92, .2); background: rgba(172, 115, 29, .1); line-height: 1.8; }
.offline-message p { margin: 5px 0 0; color: var(--muted); }
.offline-order-panel[hidden] { display: none; }
.offline-form-grid { display: grid; grid-template-columns: minmax(180px, .75fr) minmax(220px, 1.25fr); gap: 14px; margin-bottom: 18px; }
.offline-form-grid label { display: grid; gap: 8px; color: var(--muted); font-size: 13px; }
.offline-form-grid input, .offline-form-grid select, .offline-menu-item select { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: 12px; padding: 0 12px; color: var(--text); background: rgba(5, 7, 12, .42); }
.offline-menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.offline-menu-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 14px; padding: 13px; background: rgba(255,255,255,.025); }
.offline-menu-item strong { overflow-wrap: anywhere; }
.offline-menu-item small, .offline-menu-item select { grid-column: 1 / -1; color: var(--muted); }
.offline-menu-item select { min-height: 38px; }
.offline-menu-item .button { grid-column: 2; grid-row: 1; }
.offline-cart { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 20px; }
.offline-cart .panel-heading { margin-bottom: 12px; }
.offline-cart .panel-heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.offline-cart-line, .offline-queue-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.offline-cart-line > span, .offline-queue-row { min-width: 0; }
.offline-cart-line small { display: block; margin-top: 4px; color: var(--muted); }
.offline-cart-line > div { display: flex; align-items: center; gap: 9px; }
.offline-cart-line button { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.05); }
.offline-cart-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 16px; }
.offline-queue-row span { color: var(--muted); font-size: 13px; }
.offline-queue-row b { color: #ffd084; font-size: 12px; }
@media (max-width: 620px) { .offline-heading, .offline-cart-footer { align-items: stretch; flex-direction: column; } .offline-form-grid { grid-template-columns: 1fr; } .offline-queue-row { align-items: flex-start; flex-direction: column; gap: 5px; } }
/* خيارات الإضافات والعروض المركبة وطلبات الطاولة من واجهة QR. */
.menu-addons{margin-top:10px;border:1px solid color-mix(in srgb,var(--tenant-accent,#35e0c1) 30%,transparent);border-radius:12px;background:color-mix(in srgb,var(--tenant-surface,#151923) 82%,transparent);overflow:hidden}.menu-addons summary{padding:9px 11px;color:var(--tenant-accent,#35e0c1);font-weight:700;cursor:pointer;list-style:none}.menu-addons summary::-webkit-details-marker{display:none}.menu-addons summary::after{content:'＋';float:left}.menu-addons[open] summary::after{content:'−'}.menu-addons>div{display:grid;gap:7px;padding:0 11px 10px}.menu-addons label{display:flex;align-items:center;gap:8px;min-height:34px;font-size:.88rem}.menu-addons input{accent-color:var(--tenant-accent,#35e0c1);width:17px;height:17px}.menu-addons small{margin-inline-start:auto;color:var(--tenant-accent,#35e0c1);white-space:nowrap}.menu-bundle-note{margin:7px 0;color:var(--tenant-accent,#35e0c1);font-size:.82rem;line-height:1.5}.customer-service-actions{display:flex;gap:10px;margin:0 0 18px}.customer-service-actions button{min-height:42px;padding:9px 14px;border:1px solid color-mix(in srgb,var(--tenant-accent,#35e0c1) 42%,#343844);border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--tenant-accent,#35e0c1) 12%,#151923),#151923);color:var(--tenant-text,#f4f5fa);font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.customer-service-actions button:hover{transform:translateY(-2px);border-color:var(--tenant-accent,#35e0c1);box-shadow:0 0 18px color-mix(in srgb,var(--tenant-accent,#35e0c1) 18%,transparent)}.customer-service-actions button:disabled{opacity:.65;cursor:wait}.cart-line>div:first-child>small{display:block}.table-service-panel{margin:0 0 18px;padding:18px}.table-service-list{display:grid;gap:10px}.table-service-card{display:flex;align-items:center;gap:14px;padding:13px 15px;border:1px solid rgba(53,224,193,.2);border-radius:14px;background:rgba(53,224,193,.045)}.table-service-card>div:first-child{flex:1;min-width:0}.table-service-card strong,.table-service-card small{display:block}.table-service-card small{margin-top:4px;color:var(--text-muted,#969aaa)}.service-type-badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:99px;background:rgba(124,92,255,.14);color:#c9b9ff;font-size:.82rem;font-weight:700;white-space:nowrap}.service-request-empty{padding:14px;border:1px dashed rgba(255,255,255,.12);border-radius:12px;color:var(--text-muted,#969aaa);text-align:center}
.dashboard-insights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}.insight-metric{display:grid;gap:8px;padding:20px}.insight-metric>span{color:var(--text-muted,#969aaa);font-size:.9rem}.insight-metric>strong{font-size:1.45rem}.insight-metric>small{color:var(--text-muted,#969aaa)}.insight-products{grid-column:1/-1;padding:18px}.insight-products ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 22px;margin:0;padding:0 20px 0 0}.insight-products li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07)}.insight-products li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.insight-products li strong{color:var(--accent,#35e0c1)}@media(max-width:760px){.dashboard-insights{grid-template-columns:repeat(2,minmax(0,1fr))}.insight-products ol{grid-template-columns:1fr}.table-service-card{align-items:flex-start;flex-wrap:wrap}.table-service-card>div:first-child{flex-basis:100%}.customer-service-actions button{flex:1}}
/* Override the older service-action rules above so the fixed glass controls win. */
.customer-service-actions { display: grid; position: fixed; z-index: 9; margin: 0; }
.customer-service-actions button { min-height: 48px; display: flex; flex: initial; align-items: center; gap: 10px; padding: 7px 12px; border: 1px solid color-mix(in srgb, var(--tenant-accent) 34%, rgba(255,255,255,.12)); border-radius: 16px; color: var(--tenant-text); background: color-mix(in srgb, var(--tenant-surface) 78%, transparent); box-shadow: 0 9px 28px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.1); backdrop-filter: blur(18px) saturate(145%); -webkit-backdrop-filter: blur(18px) saturate(145%); text-align: right; font-size: 12px; transition: border-color .18s ease, box-shadow .18s ease, filter .18s ease; }
.customer-service-actions button:hover { transform: none; border-color: var(--tenant-accent); }
@media (hover: none) { .customer-service-actions button:hover, .add-item-button:hover { transform: none; } }
@media (max-width: 760px) {
  .customer-main { padding-bottom: 190px; }
  .customer-service-actions { right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); gap: 7px; }
  .customer-service-actions button { min-width: 154px; min-height: 44px; border-radius: 15px; padding: 6px 10px; font-size: 11px; }
}
@media (max-width: 360px) { .customer-service-actions { right: 8px; } .customer-service-actions button { min-width: 144px; } }
/* Sticky glass category dock for browsing the QR menu. */
.category-tabs { position: sticky; z-index: 7; top: calc(64px + env(safe-area-inset-top)); width: max-content; max-width: 100%; margin: 0 auto 20px; gap: 8px; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; border: 1px solid color-mix(in srgb, var(--tenant-accent) 27%, rgba(255,255,255,.13)); border-radius: 999px; padding: 6px; background: color-mix(in srgb, var(--tenant-background) 76%, transparent); box-shadow: 0 10px 30px rgba(0,0,0,.24), 0 0 24px color-mix(in srgb, var(--tenant-accent) 9%, transparent), inset 0 1px rgba(255,255,255,.1); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); mask-image: none; -webkit-mask-image: none; scrollbar-width: none; }
.category-tabs::-webkit-scrollbar { display: none; }
.category-tab { min-height: 42px; border-radius: 999px; padding-inline: 16px; white-space: nowrap; }
.category-tab.is-active { transform: none; animation: none; }
@media (max-width: 760px) {
  .category-tabs { top: calc(57px + env(safe-area-inset-top)); max-width: 100%; margin-bottom: 17px; padding: 5px; gap: 6px; }
  .category-tab { min-height: 40px; padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) { .category-tab { transition: none !important; } }

/* زر عائم مضيء لتسجيل طلب فتح الدرج للمالك والكاشير. */
.cash-drawer-fab { position: fixed; z-index: 40; left: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 10px; border: 1px solid rgba(83, 255, 221, .74); border-radius: 13px; color: #071816; background: linear-gradient(120deg, #4ce2c1, #9af3dc); box-shadow: 0 0 0 4px rgba(76, 226, 193, .08), 0 0 20px rgba(76, 226, 193, .36), 0 10px 26px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .65); font-size: 12px; font-weight: 800; cursor: pointer; transition: box-shadow .2s ease, filter .2s ease; }
.cash-drawer-fab:hover { filter: brightness(1.06); box-shadow: 0 0 0 6px rgba(76, 226, 193, .12), 0 0 32px rgba(76, 226, 193, .55), 0 15px 38px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .7); }
.cash-drawer-fab:focus-visible { outline: 3px solid #d2fff4; outline-offset: 4px; }
.cash-drawer-fab-icon { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid rgba(7, 24, 22, .24); border-radius: 7px; background: rgba(255, 255, 255, .26); font-size: 13px; }
.cash-drawer-open-form { margin-top: 18px; }
.cash-drawer-open-form select { width: 100%; min-height: 46px; border: 1px solid var(--border); border-radius: 13px; padding: 0 13px; color: var(--text); background: #171a24; }
@media (max-width: 620px) { .cash-drawer-fab { left: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); min-height: 38px; padding-inline: 9px; border-radius: 12px; font-size: 11px; } .cash-drawer-fab-icon { width: 20px; height: 20px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .cash-drawer-fab { transition: none; } }

/* إدارة المواد والمشتريات والوصفات داخل لوحة المالك. */
.inventory-branch-picker { display: grid; gap: 7px; min-width: 190px; color: var(--muted); font-size: 12px; }
.inventory-branch-picker select, .inventory-form input, .inventory-form select, .inventory-entry-line input, .inventory-entry-line select, .inventory-recipe-form textarea, .stack-form[data-form="inventory-adjust"] input, .stack-form[data-form="inventory-adjust"] select, .stack-form[data-form="inventory-adjust"] textarea { width: 100%; min-height: 42px; border: 1px solid var(--border); border-radius: 12px; padding: 0 12px; color: var(--text); background: rgba(7, 9, 15, .62); }
.app-modal.inventory-count-dialog { width: min(94vw, 760px); max-height: 92vh; }
.inventory-count-panel { margin-bottom: 16px; }
.inventory-count-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; border: 1px solid rgba(76, 226, 193, .24); border-radius: 14px; padding: 12px 14px; background: rgba(76, 226, 193, .06); }
.inventory-count-active span { color: var(--tenant-accent); font-weight: 700; }
.inventory-count-active small { width: 100%; color: var(--muted); }
.inventory-count-history { display: grid; gap: 8px; margin-top: 12px; }
.inventory-count-history-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, auto) auto; gap: 12px; align-items: center; border-top: 1px solid var(--border); padding: 10px 2px; }
.inventory-count-history-row > div { display: grid; gap: 4px; }
.inventory-count-history-row small { color: var(--muted); font-size: 11px; }
.inventory-count-entry { display: grid; gap: 12px; }
.inventory-count-progress { position: sticky; top: -22px; z-index: 1; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: #161923; color: var(--tenant-accent); text-align: center; font-weight: 700; }
.inventory-count-list { display: grid; gap: 8px; max-height: 56vh; overflow-y: auto; padding-inline-end: 4px; }
.inventory-count-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .42fr); gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,.025); }
.inventory-count-row > div, .inventory-count-row label { display: grid; gap: 4px; }
.inventory-count-row small, .inventory-count-row label span { color: var(--muted); font-size: 11px; }
.inventory-count-row input { width: 100%; min-height: 42px; border: 1px solid var(--border); border-radius: 10px; padding: 0 10px; color: var(--text); background: rgba(7,9,15,.62); }
.inventory-count-actions { position: sticky; bottom: -22px; padding-top: 10px; background: #161923; }
.inventory-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
.inventory-subnav { position: sticky; top: 8px; z-index: 8; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: 12px; min-width: 0; margin: 0 0 18px; border: 1px solid rgba(160, 168, 190, .16); border-radius: 17px; padding: 8px 12px; background: linear-gradient(135deg, rgba(22, 26, 39, .97), rgba(15, 18, 28, .96)); box-shadow: 0 12px 30px rgba(0,0,0,.24); backdrop-filter: blur(16px); }
.inventory-subnav-label { display: flex; align-items: center; gap: 9px; min-width: max-content; padding-inline-end: 13px; border-inline-end: 1px solid var(--border); }
.inventory-subnav-brand { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid rgba(76, 226, 193, .2); border-radius: 11px; color: var(--mint); background: rgba(76, 226, 193, .08); }
.inventory-subnav-brand svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.inventory-subnav-label > span:last-child { display: grid; gap: 2px; }
.inventory-subnav-label strong { color: var(--text); font-size: 12px; }
.inventory-subnav-label small { color: var(--muted); font-size: 10px; }
.inventory-subnav-track { display: flex; align-items: center; gap: 5px; min-width: 0; overflow-x: auto; padding: 2px 1px 4px; scrollbar-width: none; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; }
.inventory-subnav-track::-webkit-scrollbar { display: none; }
.inventory-subnav button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px; min-height: 40px; border: 1px solid transparent; border-radius: 11px; padding: 0 11px; color: var(--muted); background: transparent; font: inherit; font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; scroll-snap-align: center; transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease; }
.inventory-subnav button svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .82; }
.inventory-subnav button:hover { border-color: var(--border); color: var(--text); background: rgba(255,255,255,.045); }
.inventory-subnav button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.inventory-subnav button.is-active { border-color: rgba(76, 226, 193, .3); color: var(--mint); background: linear-gradient(135deg, rgba(76, 226, 193, .14), rgba(76, 226, 193, .07)); box-shadow: inset 0 0 0 1px rgba(76, 226, 193, .06); }
.inventory-subnav button.is-active svg { opacity: 1; }
.inventory-subnav-hint { display: inline-flex; align-items: center; gap: 5px; min-width: max-content; padding-inline-start: 10px; border-inline-start: 1px solid var(--border); color: var(--muted); font-size: 10px; white-space: nowrap; }
.inventory-subnav-hint b { color: var(--mint); font-size: 16px; line-height: 1; }
@media (max-width: 1100px) { .inventory-subnav { grid-template-columns: max-content minmax(0, 1fr); } .inventory-subnav-hint { display: none; } }
@media (max-width: 720px) { .inventory-subnav { top: 5px; display: block; margin-bottom: 14px; padding: 5px; border-radius: 14px; } .inventory-subnav-label { display: none; } .inventory-subnav-track { gap: 4px; padding: 1px 1px 3px; } .inventory-subnav button { min-height: 42px; padding: 0 11px; font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .inventory-subnav-track { scroll-behavior: auto; } .inventory-subnav button { transition: none; } }
#inventory-overview, #inventory-count, #inventory-reorder, #inventory-stock, #inventory-add-ingredient, #inventory-purchase-entry, #inventory-suppliers, #inventory-recipes, #inventory-transfers, #inventory-purchase-report, #inventory-movements { scroll-margin-top: 82px; }
.inventory-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 15px; }
.inventory-layout > .panel { min-width: 0; padding: 19px; }
.inventory-reorder-list { display: grid; gap: 8px; }
.inventory-reorder-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(210px, .8fr) auto; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 13px; padding: 12px 14px; background: rgba(255,255,255,.025); }
.inventory-reorder-row > div { display: grid; gap: 4px; min-width: 0; }
.inventory-reorder-row small { color: var(--muted); font-size: 11px; line-height: 1.6; }
.inventory-reorder-quantity strong { color: var(--mint); }
.inventory-wide { grid-column: 1 / -1; }
.inventory-form { display: grid; gap: 12px; margin-top: 14px; }
.inventory-form label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; }
.inventory-form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.inventory-entry-line { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(90px, .55fr) minmax(110px, .65fr) auto; gap: 8px; align-items: center; }
.inventory-recipe-line { grid-template-columns: minmax(180px, 1fr) minmax(110px, .5fr) auto; }
.inventory-transfer-line { grid-template-columns: minmax(180px, 1fr) minmax(110px, .45fr) auto; }
.inventory-transfer-lines, .inventory-transfer-history { display: grid; gap: 9px; }
.inventory-transfer-badge { flex: 0 0 auto; border: 1px solid rgba(76, 226, 193, .24); border-radius: 999px; padding: 6px 10px; color: var(--mint); background: rgba(76, 226, 193, .06); font-size: 11px; font-weight: 700; }
.inventory-transfer-history-row { display: grid; gap: 6px; border: 1px solid var(--border); border-radius: 13px; padding: 12px 14px; background: rgba(255, 255, 255, .025); }
.inventory-transfer-history-row > div { display: grid; gap: 4px; }
.inventory-transfer-history-row small, .inventory-transfer-history-row p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.inventory-transfer-history-row strong { color: var(--text); }
.inventory-purchase-lines, .inventory-recipe-lines { display: grid; gap: 8px; }
.inventory-supplier-list { display: grid; gap: 9px; }
.inventory-supplier-list > div { display: grid; gap: 4px; border-bottom: 1px solid var(--border); padding: 9px 0; }
.inventory-supplier-list > .inventory-supplier-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.inventory-supplier-row > div:first-child { min-width: 0; }
.inventory-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.inventory-row-actions .button { white-space: nowrap; }
.inventory-purchase-voided { opacity: .66; }
.inventory-purchase-void-label { color: #ff9baa !important; }
.inventory-purchase-locked-note { line-height: 1.75; }
.inventory-purchase-locked-lines { display: grid; gap: 6px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: rgba(255,255,255,.025); }
.inventory-purchase-locked-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.inventory-purchase-locked-row:last-child { border-bottom: 0; }
.inventory-purchase-locked-row span { color: var(--muted); text-align: end; }
.inventory-supplier-list small, .inventory-recipe-row small, .inventory-low-label, .data-table td small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.inventory-supplier-form { border-top: 1px solid var(--border); padding-top: 13px; }
.inventory-recipe-list { display: grid; }
.inventory-recipe-guide { margin: 0 0 12px; border: 1px solid rgba(76, 226, 193, .22); border-radius: 13px; padding: 12px 14px; background: rgba(76, 226, 193, .045); }
.inventory-recipe-guide summary { cursor: pointer; color: var(--tenant-accent); font-weight: 700; }
.inventory-recipe-guide ol { display: grid; gap: 7px; margin: 12px 0; padding-inline-start: 22px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.inventory-recipe-guide li b { color: var(--text); }
.inventory-recipe-guide > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.inventory-recipe-guide-copy { line-height: 1.75; }
.inventory-recipe-guide-copy p { margin: 5px 0; color: var(--muted); font-size: 12px; }
.inventory-recipe-guide-copy small { color: var(--muted); font-size: 11px; }
.inventory-recipe-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.inventory-recipe-row > div { min-width: 0; }
.inventory-recipe-row small { line-height: 1.6; }
.inventory-recipe-row > span { color: var(--tenant-accent); font-weight: 700; white-space: nowrap; }
.inventory-low-row td:first-child strong, .inventory-low-label { color: #ffc16d; }
.inventory-positive { color: var(--mint); }
.inventory-negative { color: #ff8295; }
.inventory-layout .data-table { min-width: 680px; }
.inventory-recipe-form { max-height: min(75vh, 760px); overflow-y: auto; }
.inventory-recipe-form p { line-height: 1.7; }
.inventory-recipe-scope { border: 1px solid var(--border); border-radius: 14px; padding: 10px; background: rgba(255,255,255,.025); }
.inventory-recipe-scope + .inventory-recipe-scope { margin-top: 8px; }
.inventory-recipe-scope summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 2px 11px; cursor: pointer; color: var(--text); font-weight: 700; }
.inventory-recipe-scope summary small { color: var(--muted); font-size: 11px; font-weight: 400; }
.inventory-recipe-scope > .button { margin-top: 9px; }
@media (max-width: 900px) { .inventory-layout { grid-template-columns: 1fr; } .inventory-wide { grid-column: auto; } }
@media (max-width: 620px) { .inventory-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .inventory-reorder-row { grid-template-columns: 1fr; align-items: stretch; } .inventory-form-pair { grid-template-columns: 1fr; } .inventory-entry-line { grid-template-columns: 1fr 1fr auto; } .inventory-entry-line select { grid-column: 1 / -1; } .inventory-recipe-line { grid-template-columns: 1fr auto; } .inventory-recipe-line select { grid-column: 1 / -1; } .inventory-recipe-row { grid-template-columns: minmax(0, 1fr) auto; } .inventory-recipe-row > span { grid-column: 1; } .inventory-recipe-row > button { grid-column: 2; grid-row: 1 / span 2; } .inventory-branch-picker { width: 100%; } .inventory-count-history-row { grid-template-columns: 1fr; } .inventory-count-row { grid-template-columns: 1fr; } .inventory-count-actions { flex-wrap: wrap; } .inventory-supplier-list > .inventory-supplier-row { grid-template-columns: 1fr; } .inventory-purchase-locked-row { align-items: flex-start; flex-direction: column; gap: 4px; } .inventory-row-actions .button { flex: 1 1 auto; } }

/* حركات الإيداع والسحب تظهر بأثر واضح داخل تقرير درج النقد. */
.cash-drawer-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 13px 0; }
.cash-drawer-movement-list { display: grid; gap: 8px; margin: 14px 0; border-top: 1px solid var(--border); padding-top: 12px; }
.cash-drawer-movement-heading { display: flex; align-items: center; justify-content: space-between; color: var(--text); font-size: 13px; }
.cash-drawer-movement-heading small { display: grid; min-width: 26px; height: 26px; place-items: center; border-radius: 9px; color: var(--mint); background: rgba(76, 226, 193, .1); }
.cash-drawer-movement-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 13px; background: rgba(255, 255, 255, .025); }
.cash-drawer-movement-row > div { display: grid; min-width: 0; gap: 4px; }
.cash-drawer-movement-row strong { font-size: 12px; }
.cash-drawer-movement-row small { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; line-height: 1.6; }
.cash-drawer-movement-row > b { flex: 0 0 auto; color: var(--tenant-accent); font-size: 13px; }
.stack-form[data-form="cash-drawer-movement"] textarea { width: 100%; min-height: 88px; resize: vertical; border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; color: var(--text); background: rgba(7, 9, 15, .62); }
@media (max-width: 620px) { .cash-drawer-actions > .button { flex: 1 1 140px; } .cash-drawer-movement-row { align-items: flex-start; } }
.cash-drawer-panel { display: grid; gap: 14px; padding: 18px; }
.cash-drawer-panel .panel-heading { align-items: flex-start; }
.cash-drawer-status { flex: 0 0 auto; border: 1px solid rgba(255, 193, 109, .22); border-radius: 999px; padding: 6px 11px; color: #ffd18a; background: rgba(255, 193, 109, .08); font-size: 11px; font-weight: 700; }
.cash-drawer-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 9px; }
.cash-drawer-metrics > span, .cash-drawer-metrics > strong { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-width: 0; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; color: var(--muted); background: rgba(255, 255, 255, .025); font-size: 11px; }
.cash-drawer-metrics b { color: var(--text); font-size: 13px; white-space: nowrap; }
.cash-drawer-metrics > strong { border-color: rgba(76, 226, 193, .24); color: var(--mint); background: rgba(76, 226, 193, .055); }
.cash-drawer-metrics > strong b { color: var(--mint); }
.cash-drawer-count-form { display: grid; grid-template-columns: minmax(140px, .45fr) minmax(190px, 1fr) auto; align-items: end; gap: 11px; border-top: 1px solid var(--border); padding-top: 13px; }
.cash-drawer-count-form label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.cash-drawer-count-form input { width: 100%; min-height: 42px; border: 1px solid var(--border); border-radius: 12px; padding: 0 12px; color: var(--text); background: rgba(7, 9, 15, .62); }
.cash-drawer-count-form small { color: var(--muted); font-size: 11px; line-height: 1.6; }
.cash-drawer-count-form small.has-difference { color: #ffc16d; }
@media (max-width: 760px) { .cash-drawer-panel .panel-heading { flex-direction: column; } .cash-drawer-count-form { grid-template-columns: 1fr; } }

/* تنسيق صفحة التشغيل والوردية ببطاقات ومسافات متوازنة. */
.report-workspace { display: grid; gap: 16px; }
.report-workspace > .shift-panel, .report-workspace > .cash-drawer-panel, .report-workspace > .live-shift-panel, .report-workspace > .audit-panel { margin: 0; }
.report-workspace > .shift-panel { padding: 20px; }
.shift-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); align-items: center; gap: 20px; }
.shift-summary > div:first-child { display: grid; min-width: 0; gap: 7px; }
.shift-summary > div:first-child p { margin: 0; line-height: 1.7; }
.shift-summary > div:first-child h3 { font-size: clamp(18px, 2vw, 24px); }
.shift-form[data-form="shift-start"], .shift-form[data-form="shift-close"] { display: grid; align-items: stretch; justify-items: stretch; gap: 10px; min-width: 0; border: 1px solid var(--border); border-radius: 15px; padding: 14px; background: linear-gradient(135deg, rgba(92,232,199,.045), rgba(162,138,255,.045)); }
.shift-form[data-form="shift-start"] p, .shift-form[data-form="shift-close"] p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.shift-form[data-form="shift-start"] > .button, .shift-form[data-form="shift-close"] > .button { justify-self: start; min-width: 150px; }
.report-workspace > .report-filter { justify-content: flex-start; margin: 0; border: 1px solid var(--border); border-radius: 16px; padding: 15px; background: rgba(18, 21, 31, .7); }
.report-workspace > .report-filter label { min-width: min(220px, 100%); }
.report-workspace .report-export-action { margin: 0; }
.cash-drawer-panel { padding: 20px; }
.cash-drawer-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cash-drawer-metrics > span, .cash-drawer-metrics > strong { min-height: 58px; padding: 12px 14px; font-size: 12px; }
.cash-drawer-metrics > strong { grid-column: 1 / -1; min-height: 64px; font-size: 13px; }
.cash-drawer-metrics b { font-size: 14px; }
.inventory-load-error { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; border-color: rgba(255, 193, 109, .24); padding: 20px; background: linear-gradient(125deg, rgba(255,193,109,.055), rgba(162,138,255,.035)); }
.inventory-load-error-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,193,109,.28); border-radius: 14px; color: #ffd18a; background: rgba(255,193,109,.09); font-size: 22px; font-weight: 800; }
.inventory-load-error h3, .inventory-load-error p { margin: 0; }
.inventory-load-error p { margin-top: 5px; color: var(--muted); line-height: 1.7; }
.inventory-load-error small { display: block; margin-top: 6px; color: var(--muted); line-height: 1.7; }
@media (max-width: 900px) { .shift-summary { grid-template-columns: 1fr; } .shift-form[data-form="shift-start"], .shift-form[data-form="shift-close"] { width: 100%; } }
@media (max-width: 760px) { .cash-drawer-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cash-drawer-metrics > strong { grid-column: 1 / -1; } .inventory-load-error { grid-template-columns: auto minmax(0, 1fr); } .inventory-load-error > .button { grid-column: 1 / -1; width: 100%; } }
@media (max-width: 520px) { .cash-drawer-metrics { grid-template-columns: 1fr; } .cash-drawer-metrics > strong { grid-column: auto; } }

/* حجوزات الضيوف وقائمة الانتظار. */
.reservation-create-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.reservation-toolbar { display: grid; grid-template-columns: minmax(220px, .65fr) minmax(270px, 1fr) auto; align-items: end; gap: 12px; margin-bottom: 14px; padding: 14px; }
.reservation-toolbar form { display: flex; align-items: end; gap: 8px; min-width: 0; }
.reservation-toolbar label { display: grid; flex: 1 1 auto; gap: 6px; min-width: 0; color: var(--muted); font-size: 11px; }
.reservation-toolbar input, .reservation-form input, .reservation-form select, .reservation-form textarea { width: 100%; min-height: 42px; border: 1px solid var(--border); border-radius: 12px; padding: 0 12px; color: var(--text); background: rgba(7, 9, 15, .62); }
.reservation-form textarea { min-height: 75px; padding: 10px 12px; resize: vertical; }
.reservation-toolbar input[type="date"] { min-width: 140px; }
.reservation-date-label { color: var(--muted); font-size: 11px; white-space: nowrap; }
.reservation-tabs { display: flex; gap: 8px; margin: 0 0 13px; }
.reservation-tab { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; border: 1px solid var(--border); border-radius: 13px; padding: 0 14px; color: var(--muted); background: rgba(18, 21, 31, .75); font: inherit; font-size: 12px; cursor: pointer; transition: .18s ease; }
.reservation-tab:hover, .reservation-tab.is-active { border-color: color-mix(in srgb, var(--tenant-accent) 44%, var(--border)); color: var(--text); background: color-mix(in srgb, var(--tenant-accent) 10%, var(--surface)); box-shadow: 0 0 20px color-mix(in srgb, var(--tenant-accent) 10%, transparent); }
.reservation-tab b { min-width: 22px; border-radius: 8px; padding: 3px 6px; color: var(--tenant-accent); background: color-mix(in srgb, var(--tenant-accent) 13%, transparent); text-align: center; font-size: 10px; }
.reservations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); align-items: start; gap: 12px; }
.reservation-card { display: grid; gap: 12px; min-width: 0; padding: 15px; border-color: color-mix(in srgb, var(--tenant-accent) 14%, var(--border)); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.reservation-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tenant-accent) 36%, var(--border)); box-shadow: 0 14px 30px rgba(0, 0, 0, .2), 0 0 24px color-mix(in srgb, var(--tenant-accent) 8%, transparent); }
.reservation-card-top, .reservation-guest, .reservation-meta, .reservation-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-width: 0; }
.reservation-time { display: grid; gap: 3px; }
.reservation-time b { color: var(--tenant-accent); font-size: 16px; font-variant-numeric: tabular-nums; }
.reservation-time small, .reservation-card-bottom small { color: var(--muted); font-size: 10px; }
.reservation-status { flex: 0 0 auto; border: 1px solid transparent; border-radius: 999px; padding: 5px 9px; font-size: 10px; font-weight: 700; }
.reservation-status-pending { border-color: rgba(255, 193, 109, .2); color: #ffd18a; background: rgba(255, 193, 109, .08); }
.reservation-status-confirmed, .reservation-status-seated { border-color: rgba(76, 226, 193, .2); color: var(--tenant-accent); background: rgba(76, 226, 193, .08); }
.reservation-status-cancelled, .reservation-status-no_show { border-color: rgba(255, 105, 126, .2); color: #ff8797; background: rgba(255, 105, 126, .08); }
.reservation-guest h3 { overflow: hidden; margin: 0; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.reservation-guest > span { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.reservation-meta { justify-content: flex-start; flex-wrap: wrap; color: var(--muted); font-size: 11px; }
.reservation-meta a { color: var(--tenant-accent); text-decoration: none; direction: ltr; }
.reservation-note { margin: 0; border-inline-start: 2px solid color-mix(in srgb, var(--tenant-primary) 50%, transparent); padding-inline-start: 9px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.reservation-card-bottom { align-items: flex-end; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 10px; }
.reservation-card-bottom small { line-height: 1.5; }
.reservation-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.reservation-form { gap: 13px; }
.reservation-form > label, .reservation-form-row > label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.reservation-form-row { display: grid; grid-template-columns: minmax(95px, .45fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 920px) { .reservation-toolbar { grid-template-columns: 1fr 1fr; } .reservation-date-label { grid-column: 1 / -1; } }
@media (max-width: 620px) { .section-heading:has(.reservation-create-actions) { align-items: stretch; flex-direction: column; } .reservation-create-actions > .button { flex: 1 1 145px; } .reservation-toolbar { grid-template-columns: 1fr; } .reservation-toolbar form { align-items: stretch; } .reservation-date-label { grid-column: auto; } .reservation-form-row { grid-template-columns: 1fr; } .reservation-card-bottom { align-items: stretch; } .reservation-actions > .button { flex: 1 1 auto; } }

.thermal-direct-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 14px; } /* جمع الطباعة الحرارية وطباعة PDF في صف واضح. */
.kds-ticket-tools .button { white-space: nowrap; } /* إبقاء تسميات الطباعة واضحة على بطاقة المطبخ. */
@media (max-width: 560px) { .thermal-direct-actions { grid-template-columns: 1fr; } .kds-ticket-tools { flex-wrap: wrap; } .kds-ticket-tools .button { flex: 1 1 130px; } } /* ترتيب أزرار الطباعة على الهاتف. */

/* Owner-controlled visibility for cashier and waiter workspaces. */
.role-permissions-panel { margin-top: 1.25rem; }
.role-permissions-form { display: grid; gap: 1rem; }
.role-permission-card { padding: 1rem; border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 1rem; background: rgba(255,255,255,.025); }
.role-permission-card > header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .8rem; }
.role-permission-card h4 { margin: 0; }
.role-permission-grid { display: flex; flex-wrap: wrap; gap: .65rem; }
.role-permission-option { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .55rem .8rem; border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: .8rem; background: rgba(255,255,255,.035); cursor: pointer; }
.role-permission-option:has(input:checked) { border-color: rgba(67,224,193,.55); background: rgba(67,224,193,.09); box-shadow: 0 0 18px rgba(67,224,193,.08); }
.role-permission-option input { accent-color: #43e0c1; width: 1.1rem; height: 1.1rem; }
@media (max-width: 640px) { .role-permission-card > header { align-items: flex-start; flex-direction: column; } }

.printer-bridge-panel { margin-top: 1.25rem; }
.printer-bridge-form { display: grid; gap: .9rem; }
.printer-bridge-form > label, .printer-bridge-fields > label { display: grid; gap: .45rem; color: var(--muted); font-size: .88rem; }
.printer-bridge-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, .3fr); gap: .75rem; }
.printer-bridge-output { margin-top: 1rem; padding: 1rem; border: 1px solid rgba(67,224,193,.25); border-radius: 1rem; background: rgba(67,224,193,.045); }
.printer-bridge-config { max-height: 20rem; overflow: auto; margin: .8rem 0; padding: .9rem; border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: .75rem; color: var(--text, #f4f5fa); background: rgba(0,0,0,.22); font: .78rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.printer-bridge-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.printer-branch-select { max-width: 460px; }
.printer-config-zone { position: relative; overflow: hidden; padding: 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: 1.15rem; background: linear-gradient(135deg, rgba(26,31,44,.8), rgba(15,18,27,.78)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 30px rgba(0,0,0,.12); }
.printer-config-zone::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ''; background: linear-gradient(180deg, rgba(67,224,193,.75), rgba(124,92,255,.7)); opacity: .75; }
.printer-cashier-zone { border-color: rgba(67,224,193,.24); background: linear-gradient(120deg, rgba(67,224,193,.065), rgba(22,26,38,.7) 48%); }
.printer-departments-zone { border-color: rgba(124,92,255,.2); }
.printer-fallback-zone { background: rgba(255,255,255,.018); }
.printer-zone-heading { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.printer-zone-heading > div { display: grid; gap: .18rem; flex: 1; min-width: 0; }
.printer-zone-heading strong { color: var(--text, #f4f5fa); font-size: .98rem; }
.printer-zone-heading small { color: var(--muted); font-size: .78rem; }
.printer-zone-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: 0 0 auto; border: 1px solid rgba(67,224,193,.24); border-radius: .85rem; color: var(--accent, #43e0c1); background: rgba(67,224,193,.08); box-shadow: 0 0 18px rgba(67,224,193,.08); font-size: 1.2rem; }
.printer-zone-chip { padding: .34rem .62rem; border: 1px solid rgba(124,92,255,.22); border-radius: 999px; color: #c6b7ff; background: rgba(124,92,255,.08); font-size: .74rem; white-space: nowrap; }
.printer-department-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.printer-department-card { display: grid; gap: .85rem; padding: .9rem; border: 1px solid rgba(255,255,255,.085); border-radius: 1rem; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(7,10,17,.22)); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.printer-department-card:focus-within { border-color: rgba(67,224,193,.4); box-shadow: 0 0 20px rgba(67,224,193,.07); transform: translateY(-1px); }
.printer-department-card-heading { display: flex; align-items: center; gap: .65rem; }
.printer-department-card-heading > div { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.printer-department-card-heading strong { overflow: hidden; color: var(--text, #f4f5fa); text-overflow: ellipsis; white-space: nowrap; }
.printer-department-card-heading small { color: var(--muted); font-size: .72rem; }
.printer-department-number { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .7rem; color: #c6b7ff; background: rgba(124,92,255,.12); font-size: .73rem; font-weight: 800; }
.printer-department-dot { width: .55rem; height: .55rem; flex: 0 0 auto; border-radius: 50%; background: #43e0c1; box-shadow: 0 0 .8rem rgba(67,224,193,.65); }
.printer-department-empty { grid-column: 1 / -1; padding: 1rem; border: 1px dashed rgba(255,255,255,.14); border-radius: .9rem; color: var(--muted); text-align: center; }
.printer-config-zone .printer-bridge-fields { grid-template-columns: minmax(0, 1fr) minmax(100px, .32fr); }
.printer-bridge-actions .button { min-height: 2.6rem; }
.printer-queue-panel { margin-top: 1.25rem; }
.printer-queue-tools { display: flex; align-items: end; flex-wrap: wrap; gap: .6rem; }
.printer-queue-tools label { display: grid; gap: .35rem; color: var(--muted); font-size: .8rem; }
.printer-queue-tools select { min-width: 150px; }
.printer-queue-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0; }
.printer-queue-stats article { display: grid; gap: .25rem; padding: .85rem 1rem; border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: .9rem; background: rgba(255,255,255,.035); }
.printer-queue-stats article strong { color: var(--accent, #43e0c1); font-size: 1.2rem; }
.printer-queue-stats article span, .printer-job-row small, .printer-bridge-status-row small { color: var(--muted); font-size: .75rem; }
.printer-queue-stats article.is-error strong, .printer-job-error { color: #ff8293 !important; }
.printer-bridge-status-list, .printer-job-list { display: grid; gap: .55rem; }
.printer-bridge-status-row, .printer-job-row { display: flex; align-items: center; gap: .75rem; padding: .75rem .85rem; border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: .8rem; background: rgba(5,8,15,.22); }
.printer-bridge-status-row { margin-bottom: .25rem; }
.printer-bridge-status-row > strong { min-width: 5rem; }
.printer-bridge-label { font-size: .8rem; }
.printer-bridge-label.is-online { color: var(--accent, #43e0c1); }
.printer-bridge-label.is-offline { color: #ff8293; }
.printer-bridge-label.is-unbound { color: var(--muted); }
.printer-status-dot { width: .55rem; height: .55rem; flex: 0 0 auto; border-radius: 50%; background: #ff6375; box-shadow: 0 0 .7rem rgba(255,99,117,.55); }
.printer-status-dot.is-online { background: var(--accent, #43e0c1); box-shadow: 0 0 .7rem rgba(67,224,193,.65); }
.printer-job-main { display: grid; gap: .2rem; flex: 1; min-width: 150px; }
.printer-job-status { padding: .3rem .55rem; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--muted); font-size: .75rem; white-space: nowrap; }
.printer-job-row.is-printed .printer-job-status { color: var(--accent, #43e0c1); }
.printer-job-row.is-failed { border-color: rgba(255,99,117,.25); background: rgba(255,99,117,.045); }
.printer-job-row.is-failed .printer-job-status { color: #ff8293; }
.printer-job-error { overflow-wrap: anywhere; }
@media (max-width: 760px) { .printer-department-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .printer-bridge-fields, .printer-config-zone .printer-bridge-fields { grid-template-columns: 1fr; } .printer-config-zone { padding: .85rem; } .printer-zone-heading { align-items: flex-start; flex-wrap: wrap; } .printer-zone-heading > div { flex-basis: calc(100% - 3.5rem); } .printer-zone-chip { margin-inline-start: 3.4rem; } }
@media (max-width: 700px) { .printer-queue-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .printer-bridge-status-row, .printer-job-row { align-items: flex-start; flex-wrap: wrap; } .printer-job-main { flex-basis: 100%; } .printer-queue-tools { width: 100%; } }

/* إعداد شبكة الطباعة: حقول داكنة واضحة وبطاقات مستقلة لكل محطة تجهيز. */
.printer-bridge-form input:not([type="checkbox"]), .printer-bridge-form select { width: 100%; min-height: 46px; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; padding: 0 13px; color: var(--text); background: rgba(7,9,14,.54); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.printer-bridge-form input::placeholder { color: #7d8495; opacity: 1; }
.printer-bridge-form input:focus, .printer-bridge-form select:focus { border-color: rgba(76,226,193,.58); outline: 0; background: rgba(7,9,14,.78); box-shadow: 0 0 0 3px rgba(76,226,193,.09), 0 0 18px rgba(76,226,193,.06); }
.printer-bridge-form select { color-scheme: dark; }
.printer-department-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: -.15rem 0 .9rem; padding: .8rem .9rem; border: 1px solid rgba(124,92,255,.16); border-radius: .95rem; background: linear-gradient(110deg, rgba(124,92,255,.055), rgba(67,224,193,.035)); }
.printer-department-toolbar p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.7; }
.printer-department-toolbar .button { flex: 0 0 auto; border-color: rgba(124,92,255,.28); }
.printer-department-card { position: relative; overflow: hidden; }
.printer-department-card::before { position: absolute; inset: 0 auto 0 0; width: 2px; content: ''; background: linear-gradient(180deg, rgba(67,224,193,.65), rgba(124,92,255,.5)); opacity: .45; }
.printer-department-card:hover { border-color: rgba(67,224,193,.3); box-shadow: 0 12px 28px rgba(0,0,0,.16), 0 0 20px rgba(67,224,193,.035); }
.printer-route-chip { padding: .3rem .55rem; border: 1px solid rgba(124,92,255,.2); border-radius: 999px; color: #c7b9ff; background: rgba(124,92,255,.075); font-size: .68rem; white-space: nowrap; }
.printer-field-hint { color: var(--muted); font-size: .72rem; line-height: 1.65; }
.printer-department-test-actions { display: contents; }
.printer-config-stale { margin: .8rem 0 0; padding: .75rem .85rem; border: 1px solid rgba(255,191,91,.26); border-radius: .8rem; color: #ffd58c; background: rgba(255,191,91,.07); font-size: .8rem; line-height: 1.7; }
.printer-config-stale[hidden] { display: none; }
.printer-bridge-actions button:disabled { opacity: .42; cursor: not-allowed; transform: none; }
@media (max-width: 640px) { .printer-department-toolbar { align-items: stretch; flex-direction: column; } .printer-department-toolbar .button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .printer-department-card, .printer-bridge-form input { transition: none; } }
.printer-shared-assignment { display: grid; gap: .8rem; margin-top: .9rem; padding: 1rem; border: 1px solid rgba(67,224,193,.18); border-radius: 1rem; background: linear-gradient(125deg, rgba(67,224,193,.055), rgba(124,92,255,.04)); }
.printer-shared-assignment > header { display: flex; align-items: center; gap: .7rem; }
.printer-shared-assignment > header > div { display: grid; gap: .15rem; }
.printer-shared-assignment > header strong { color: var(--text); font-size: .9rem; }
.printer-shared-assignment > header small { color: var(--muted); font-size: .74rem; }
.printer-shared-department-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.printer-shared-department-option { display: inline-flex !important; align-items: center; gap: .5rem !important; min-height: 2.5rem; padding: .45rem .7rem; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #d9dce6 !important; background: rgba(255,255,255,.035); cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.printer-shared-department-option:has(input:checked) { border-color: rgba(67,224,193,.48); color: #a5f3df !important; background: rgba(67,224,193,.09); box-shadow: 0 0 16px rgba(67,224,193,.06); }
.printer-shared-department-option input { width: 1rem; min-width: 1rem; height: 1rem; min-height: 1rem; margin: 0; accent-color: #43e0c1; }
.printer-shared-assignment > .button { justify-self: start; }
@media (max-width: 640px) { .printer-shared-assignment > .button { width: 100%; } }
.printer-department-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); }
.printer-department-actions .button-danger { color:#ff8c9f; border-color:rgba(255,94,125,.28); background:rgba(255,72,105,.08); }
.printer-department-actions .button-danger:hover { background:rgba(255,72,105,.16); }
@media (max-width:640px) { .printer-department-actions { display:grid; grid-template-columns:1fr; } .printer-department-actions .button { width:100%; } }

.zatca-csr-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.zatca-csr-actions .button { flex: 1 1 220px; }
.zatca-csr-actions .button:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }

/* إدارة المنيو: تبويبات الأقسام فوق أصناف القسم المحدد. */
.menu-admin-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.menu-category-panel { position: sticky; top: 10px; z-index: 8; padding-bottom: 10px; }
.category-nav { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 3px 1px 8px; scrollbar-width: thin; scrollbar-color: rgba(151,132,255,.42) transparent; }
.category-nav .category-admin-row { flex: 0 0 auto; width: auto; min-height: 42px; gap: 3px; padding: 3px 7px; border: 1px solid rgba(255,255,255,.075); border-radius: 999px; background: rgba(255,255,255,.025); }
.category-nav .category-admin-row.is-selected { border-color: rgba(65,222,190,.4); background: linear-gradient(110deg, rgba(54,218,182,.13), rgba(150,119,255,.11)); box-shadow: 0 0 20px rgba(54,218,182,.06); }
.category-nav .category-filter-button { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; min-height: 34px; min-width: max-content; padding: 0 10px; border: 0; border-radius: 999px; color: var(--text); background: transparent; text-align: right; cursor: pointer; }
.category-nav .category-mark { color: #a99aff; font-size: 13px; }
.category-nav .category-filter-copy { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.category-nav .category-filter-copy strong { font-size: 11px; }
.category-nav .category-filter-copy small { color: var(--muted); font-size: 9px; }
.category-nav .category-admin-row.is-selected .category-filter-copy strong { color: #a7f2de; }
.category-nav .category-actions { display: flex; align-items: center; gap: 3px; margin-inline-start: 0; padding-inline-start: 4px; border-inline-start: 1px solid rgba(255,255,255,.08); }
.category-nav .category-actions .icon-button { width: 28px; height: 28px; border-radius: 50%; }
.menu-items-panel { scroll-margin-top: 18px; }
@media (max-width: 760px) { .category-nav .category-admin-row { min-height: 39px; } .category-nav .category-filter-button { min-height: 31px; padding-inline: 7px; } .category-nav .category-filter-copy strong { font-size: 10px; } }

/* تنظيم إعدادات المقهى في مسار واحد مع روابط انتقال سريعة بين أقسامها. */
.settings-layout { grid-template-columns: minmax(0, 1fr); gap: 13px; }
.settings-layout > .panel { min-width: 0; }
.settings-section-nav { position: sticky; top: 8px; z-index: 6; display: flex; gap: 7px; overflow-x: auto; margin: -13px 0 14px; padding: 10px 11px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: rgba(13,16,25,.94); backdrop-filter: blur(16px); scrollbar-width: thin; }
.settings-section-nav button { flex: 0 0 auto; min-height: 34px; padding: 0 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; color: #c3c8d5; background: rgba(255,255,255,.035); font: inherit; font-size: 10px; cursor: pointer; }
.settings-section-nav button:hover { border-color: rgba(76,226,193,.35); color: #a7f2de; background: rgba(76,226,193,.07); }
.settings-form > label { min-width: 0; }
.settings-layout > .panel, .branch-panel, .zatca-setup-panel, .role-permissions-panel, .printer-bridge-panel { scroll-margin-top: 78px; }
.customer-panel-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
@media (max-width: 760px) { .settings-section-nav { top: 4px; margin-inline: -2px; padding: 8px; } .customer-panel-actions { width: 100%; justify-content: stretch; } .customer-panel-actions > * { flex: 1 1 150px; } }

/* قائمة التنقل: زر واضح لطيها وإظهارها على أجهزة المقهى. */
.sidebar { z-index: 1000; transition: width .24s ease, transform .24s ease; }
.sidebar-toggle { position: fixed; z-index: 1002; top: 24px; right: 280px; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; color: #c9c1ff; background: rgba(25,28,40,.94); box-shadow: 0 8px 22px rgba(0,0,0,.24); font-size: 18px; cursor: pointer; }
.sidebar-toggle:hover { border-color: rgba(76,226,193,.38); color: #a7f2de; }
.main-panel { transition: margin .24s ease; }
body.sidebar-collapsed .sidebar { width: 68px; padding-inline: 8px; }
body.sidebar-collapsed .sidebar-toggle { right: 18px; }
body.sidebar-collapsed .main-panel { margin-right: 88px; }
html[dir="ltr"] .sidebar { right: auto; left: 18px; }
html[dir="ltr"] .sidebar-toggle { right: auto; left: 280px; }
html[dir="ltr"] .main-panel { margin-right: 0; margin-left: 286px; }
html[dir="ltr"] body.sidebar-collapsed .sidebar-toggle { right: auto; left: 18px; }
html[dir="ltr"] body.sidebar-collapsed .main-panel { margin-left: 88px; margin-right: 0; }
@media (prefers-reduced-motion: reduce) { .sidebar, .main-panel { transition: none !important; } }

/* درج تنقل ثابت يعمل بزر ظاهر على الهاتف واللوحيات الصغيرة. */
@media (max-width: 900px) {
  .sidebar { position: fixed; z-index: 1000; top: 10px; right: 10px; left: auto; bottom: 10px; width: min(320px, calc(100vw - 64px)); min-height: 0; margin: 0; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; border-radius: 22px; padding: 20px 14px 14px; transform: translateX(0); pointer-events: auto; box-shadow: 0 24px 70px rgba(0,0,0,.48); }
  .branch-picker { display: flex; }
  .primary-nav { display: grid; gap: 5px; overflow: visible; margin-top: 18px; padding-bottom: 0; }
  .nav-link { min-height: 44px; flex: initial; gap: 10px; padding: 0 11px; font-size: 12px; }
  .sidebar-bottom { display: block; margin-top: auto; }
  body.sidebar-collapsed .sidebar { width: 64px; padding: 12px 6px; transform: translateX(0); }
  body.sidebar-collapsed .sidebar-brand { display: none; }
  body.sidebar-collapsed .sidebar-brand > div:last-child, body.sidebar-collapsed .sidebar-credit, body.sidebar-collapsed .branch-picker, body.sidebar-collapsed .sidebar-bottom { display: none; }
  body.sidebar-collapsed .primary-nav { gap: 7px; margin-top: 38px; }
  body.sidebar-collapsed .nav-link { position: relative; width: 50px; min-height: 48px; justify-content: center; gap: 0; padding: 0; font-size: 0; }
  body.sidebar-collapsed .nav-link > span { width: auto; font-size: 20px; }
  body.sidebar-collapsed .nav-link > b, body.sidebar-collapsed .nav-link > .nav-badges { position: absolute; top: -3px; inset-inline-start: -2px; z-index: 1; margin: 0; }
  body.sidebar-collapsed .nav-link > b { min-width: 18px; min-height: 18px; padding: 1px 4px; font-size: 9px; }
  body.sidebar-collapsed .nav-link > .nav-badges { display: flex; gap: 2px; }
  body.sidebar-collapsed .nav-link .nav-badges b { min-width: 17px; min-height: 17px; padding: 1px 3px; font-size: 8px; }
  body.sidebar-collapsed .nav-link.is-active { box-shadow: inset 0 -2px var(--purple); }
  body:not(.sidebar-collapsed) #app-shell:not(.is-hidden)::before { content: ""; position: fixed; z-index: 999; inset: 0; background: rgba(3,5,10,.66); backdrop-filter: blur(2px); }
  .sidebar-toggle { z-index: 1002; top: calc(50% - 20px); right: min(calc(320px + 18px), calc(100vw - 58px)); left: auto; width: 40px; height: 40px; }
  body.sidebar-collapsed .sidebar-toggle { top: 16px; right: 22px; left: auto; width: 40px; height: 40px; }
  .main-panel { margin: 0; }
  body.sidebar-collapsed .main-panel { margin-right: 78px; }
  html[dir="ltr"] .sidebar { right: auto; left: 10px; }
  html[dir="ltr"] .sidebar-toggle { right: auto; left: min(calc(320px + 18px), calc(100vw - 58px)); }
  html[dir="ltr"] body.sidebar-collapsed .sidebar-toggle { right: auto; left: 22px; }
  html[dir="ltr"] body.sidebar-collapsed .main-panel { margin-left: 78px; margin-right: 0; }
}

/* شريط جانبي مضغوط: تبقى اختصارات الوحدات وأعداد التنبيهات ظاهرة بعد الطي. */
@media (min-width: 901px) {
  body.sidebar-collapsed .sidebar-brand { display: none; }
  body.sidebar-collapsed .sidebar-brand > div:last-child, body.sidebar-collapsed .sidebar-credit, body.sidebar-collapsed .branch-picker, body.sidebar-collapsed .sidebar-bottom { display: none; }
  body.sidebar-collapsed .primary-nav { gap: 7px; margin-top: 28px; }
  body.sidebar-collapsed .nav-link { position: relative; width: 50px; min-height: 48px; justify-content: center; gap: 0; padding: 0; font-size: 0; }
  body.sidebar-collapsed .nav-link > span { width: auto; font-size: 20px; }
  body.sidebar-collapsed .nav-link > b, body.sidebar-collapsed .nav-link > .nav-badges { position: absolute; top: -3px; inset-inline-start: -2px; z-index: 1; margin: 0; }
  body.sidebar-collapsed .nav-link > b { min-width: 18px; min-height: 18px; padding: 1px 4px; font-size: 9px; }
  body.sidebar-collapsed .nav-link > .nav-badges { display: flex; gap: 2px; }
  body.sidebar-collapsed .nav-link .nav-badges b { min-width: 17px; min-height: 17px; padding: 1px 3px; font-size: 8px; }
  body.sidebar-collapsed .nav-link.is-active { box-shadow: inset 0 -2px var(--purple); }
}

/* تحسين بصري لشريط الاختصارات المطوي: مساحة لمس واضحة، مؤشر نشط، وشارات مقروءة. */
body.sidebar-collapsed .sidebar {
  border-color: rgba(163, 145, 255, .2);
  background: linear-gradient(180deg, rgba(24, 27, 40, .98), rgba(14, 17, 26, .98));
  box-shadow: 0 18px 52px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .035);
}
body.sidebar-collapsed .primary-nav { gap: 8px; }
body.sidebar-collapsed .nav-link {
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 15px;
  color: #aeb5c7;
  background: rgba(255, 255, 255, .018);
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
body.sidebar-collapsed .nav-link > span { color: #9ca5bb; }
body.sidebar-collapsed .nav-link:hover,
body.sidebar-collapsed .nav-link:focus-visible {
  border-color: rgba(93, 232, 199, .28);
  color: #f6f7fb;
  background: rgba(77, 226, 193, .08);
  transform: translateY(-1px);
}
body.sidebar-collapsed .nav-link:focus-visible,
body.sidebar-collapsed .sidebar-toggle:focus-visible { outline: 2px solid #62e6ca; outline-offset: 3px; }
body.sidebar-collapsed .nav-link.is-active {
  border-color: rgba(166, 139, 255, .32);
  color: #fff;
  background: linear-gradient(145deg, rgba(139, 112, 255, .24), rgba(76, 226, 193, .075));
  box-shadow: inset 0 0 0 1px rgba(166, 139, 255, .08), 0 8px 22px rgba(6, 8, 14, .2);
}
body.sidebar-collapsed .nav-link.is-active > span { color: #c4b7ff; }
body.sidebar-collapsed .nav-link .nav-badges b,
body.sidebar-collapsed .nav-link > b {
  min-width: 19px;
  min-height: 19px;
  border: 1px solid rgba(10, 22, 25, .35);
  border-radius: 999px;
  padding: 1px 4px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .26);
  line-height: 15px;
}
body.sidebar-collapsed .sidebar-toggle {
  border-color: rgba(166, 139, 255, .24);
  color: #d2c8ff;
  background: rgba(30, 31, 48, .97);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .05);
}
body.sidebar-collapsed .sidebar-toggle:hover { border-color: rgba(93, 232, 199, .42); background: rgba(37, 43, 53, .98); }
@media (max-width: 900px) {
  body.sidebar-collapsed .sidebar { padding-top: 12px; }
  body.sidebar-collapsed .primary-nav { gap: 7px; }
  body.sidebar-collapsed .nav-link { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) { body.sidebar-collapsed .nav-link { transition: none; } }

/* زر درج النقد يقبل السحب باللمس أو الفأرة. */
.cash-drawer-fab { touch-action: none; cursor: grab; user-select: none; }
.cash-drawer-fab:active { cursor: grabbing; }
.cash-drawer-fab.is-dragging { transition: none; }

/* مساحة تواصل موحدة بين المالك والكاشير والنادل. */
.team-chat-heading { align-items: center; }
.team-chat-live { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; border: 1px solid rgba(76,226,193,.2); border-radius: 999px; padding: 8px 11px; color: #8cebd7; background: rgba(76,226,193,.055); font-size: 10px; }
.team-chat-live i { width: 7px; height: 7px; border-radius: 50%; background: #4ce2c1; box-shadow: 0 0 11px rgba(76,226,193,.72); }
.team-chat-panel { display: grid; gap: 0; overflow: hidden; padding: 0; }
.team-chat-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.07); }
.team-chat-panel-head h3, .team-chat-panel-head p { margin: 0; }
.team-chat-panel-head h3 { font-size: 14px; }
.team-chat-panel-head p, .team-chat-count { margin-top: 5px; color: var(--muted); font-size: 10px; }
.team-chat-feed { display: flex; flex-direction: column; gap: 10px; max-height: min(58vh, 660px); min-height: 250px; overflow: auto; padding: 16px 20px; overscroll-behavior: contain; }
.team-message { width: min(78%, 680px); border: 1px solid rgba(255,255,255,.085); border-radius: 15px 15px 15px 5px; padding: 11px 13px; background: rgba(255,255,255,.035); }
.team-message.is-own { align-self: flex-start; border-color: rgba(129,107,255,.25); border-radius: 15px 15px 5px 15px; background: linear-gradient(135deg, rgba(129,107,255,.1), rgba(76,226,193,.045)); }
.team-message header { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.team-message-author { display: flex; align-items: center; gap: 7px; }
.team-message-author strong { color: #eeeff6; font-size: 11px; }
.team-message time { color: var(--muted); font-size: 9px; white-space: nowrap; }
.team-role-chip { border-radius: 999px; padding: 3px 7px; color: #b9acff; background: rgba(145,120,255,.11); font-size: 8px; }
.team-message p { margin: 8px 0 0; color: #dce0e9; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.team-chat-empty { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 220px; color: var(--muted); text-align: center; }
.team-chat-empty > span { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(145,120,255,.22); border-radius: 14px; color: #b9acff; background: rgba(145,120,255,.08); font-size: 19px; }
.team-chat-empty strong { color: #e5e6ed; font-size: 13px; }
.team-chat-empty small { font-size: 10px; }
.team-chat-composer { display: grid; gap: 8px; padding: 16px 20px 18px; border-top: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.018); }
.team-chat-composer > label { color: #cfd3df; font-size: 10px; }
.team-chat-compose-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.team-chat-compose-row textarea { width: 100%; min-height: 48px; resize: vertical; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; padding: 11px 13px; color: var(--text); background: rgba(7,9,15,.52); font: inherit; font-size: 11px; line-height: 1.6; }
.team-chat-compose-row textarea:focus { outline: 2px solid rgba(76,226,193,.22); border-color: rgba(76,226,193,.42); }
.team-chat-composer > small { color: var(--muted); font-size: 9px; }
.team-unread-badge { min-width: 19px !important; border-radius: 999px !important; color: #091715 !important; background: #79ead0 !important; }
.nav-count { min-width: 21px !important; border-radius: 999px !important; color: #061613 !important; background: #79ead0 !important; box-shadow: 0 0 12px rgba(77,226,193,.14); }
.nav-alert-count { min-width: 21px !important; border-radius: 999px !important; color: #fff !important; background: #d94f68 !important; box-shadow: 0 0 12px rgba(255,82,112,.2); }
.nav-link > .nav-badges { width: auto; display: flex; align-items: center; gap: 5px; margin-inline-start: auto; color: inherit; text-align: initial; font-size: inherit; }
.nav-link .nav-badges b { margin: 0; }
.team-announcement-notice { position: sticky; top: 10px; z-index: 20; display: grid; gap: 8px; margin: 0 0 16px; border: 1px solid rgba(255,194,95,.42); border-radius: 16px; padding: 10px; color: #fff4d8; background: linear-gradient(115deg, rgba(71,44,17,.96), rgba(38,30,31,.96)); box-shadow: 0 10px 30px rgba(0,0,0,.28), 0 0 22px rgba(245,179,73,.09); backdrop-filter: blur(14px); }
.team-announcement { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 10px; }
.team-announcement + .team-announcement { border-top: 1px solid rgba(255,255,255,.1); }
.team-announcement-copy { min-width: 0; display: grid; gap: 4px; }
.team-announcement-label { color: #ffd37e; font-size: 10px; font-weight: 800; }
.team-announcement-copy p { margin: 0; color: #fff; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.team-announcement-copy time { color: #c5b9a4; font-size: 9px; }
.team-announcement-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 6px; }
.team-announcement-actions .button { min-height: 32px; padding: 5px 10px; font-size: 9px; }
.team-chat-compose-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.team-announcement-option { display: flex; align-items: center; gap: 7px; max-width: 190px; color: #f3cf83; font-size: 10px; line-height: 1.4; cursor: pointer; }
.team-announcement-option input { width: 16px; height: 16px; accent-color: #e9bd63; }
.team-message-author { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.team-announcement-message-tag { border-radius: 999px; padding: 2px 7px; color: #f5d58f; background: rgba(223,170,75,.12); font-size: 9px; }
@media (max-width: 620px) { .team-chat-panel-head, .team-chat-feed, .team-chat-composer { padding-inline: 13px; } .team-message { width: 92%; } .team-chat-compose-row { grid-template-columns: 1fr; } .team-chat-compose-row .button { justify-self: stretch; } .team-chat-live { font-size: 0; } .team-announcement { align-items: stretch; flex-direction: column; } .team-announcement-actions .button { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .category-nav .category-admin-row, .settings-section-nav button { transition: none !important; } }
.settings-group-heading { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 8px 0 -3px; padding: 0 0 9px; border-bottom: 1px solid rgba(255,255,255,.075); }
.settings-group-heading h4 { margin: 0; color: #e7e8f0; font-size: 12px; }
.settings-group-heading small { color: var(--muted); font-size: 9px; }
@media (max-width: 620px) { .settings-group-heading { align-items: flex-start; flex-direction: column; gap: 3px; } }

/* واجهة محادثة حديثة مع الحفاظ على التنبيه الثابت وشارات القائمة. */
.team-chat-heading { align-items: center; gap: 18px; margin-bottom: 20px; }
.team-chat-brand { display: flex; align-items: center; gap: 14px; }
.team-chat-brand-mark, .team-chat-room-icon { display: grid; flex: 0 0 auto; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(151,126,255,.32); border-radius: 16px; color: #d4c8ff; background: linear-gradient(145deg, rgba(135,104,255,.2), rgba(76,226,193,.08)); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 8px 24px rgba(71,48,150,.18); font-size: 21px; }
.team-chat-brand h2 { margin: 2px 0 3px; letter-spacing: -.025em; }
.team-chat-brand .eyebrow { margin: 0; color: #b8a8ff; }
.team-chat-brand .muted { margin: 0; font-size: 11px; }
.team-chat-live { border-color: rgba(76,226,193,.23); padding: 9px 13px; color: #b2f4e5; background: rgba(76,226,193,.07); }
.team-chat-panel { border: 1px solid rgba(170,177,203,.14); border-radius: 24px; background: linear-gradient(145deg, rgba(25,28,40,.97), rgba(15,18,28,.98)); box-shadow: 0 24px 70px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.035); }
.team-chat-panel-head { min-height: 74px; justify-content: flex-start; padding: 14px 20px; background: linear-gradient(105deg, rgba(132,106,255,.07), rgba(76,226,193,.025)); }
.team-chat-room-icon { width: 40px; height: 40px; border-radius: 13px; font-size: 17px; }
.team-chat-room-copy { min-width: 0; }
.team-chat-panel-head h3 { color: #f1f1f8; font-size: 13px; }
.team-chat-panel-head p { margin: 4px 0 0; }
.team-chat-count { margin: 0 0 0 auto; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: 6px 10px; background: rgba(255,255,255,.035); white-space: nowrap; }
.team-chat-feed { gap: 14px; min-height: 340px; max-height: min(62vh, 720px); padding: 22px clamp(14px, 3vw, 28px); background: radial-gradient(ellipse at 50% 0%, rgba(118,97,224,.07), transparent 58%); }
.team-message { display: flex; align-items: flex-end; gap: 9px; width: min(84%, 760px); border: 0; border-radius: 0; padding: 0; background: transparent; }
.team-message.is-own { align-self: flex-start; border: 0; border-radius: 0; background: transparent; }
.team-message.is-incoming { align-self: flex-end; flex-direction: row-reverse; }
.team-message-avatar { display: grid; flex: 0 0 31px; place-items: center; width: 31px; height: 31px; border: 1px solid rgba(169,150,255,.22); border-radius: 11px; color: #d3c8ff; background: linear-gradient(145deg, rgba(129,107,255,.2), rgba(49,55,75,.65)); font-size: 12px; font-weight: 800; }
.team-message.is-incoming .team-message-avatar { border-color: rgba(76,226,193,.2); color: #a6f1df; background: linear-gradient(145deg, rgba(76,226,193,.15), rgba(39,58,62,.72)); }
.team-message-bubble { min-width: 0; max-width: calc(100% - 40px); border: 1px solid rgba(255,255,255,.085); border-radius: 18px 18px 5px 18px; padding: 11px 14px 12px; background: linear-gradient(145deg, rgba(39,43,59,.9), rgba(28,32,44,.92)); box-shadow: 0 6px 18px rgba(0,0,0,.1); }
.team-message.is-own .team-message-bubble { border-color: rgba(139,117,255,.25); border-radius: 18px 18px 18px 5px; background: linear-gradient(145deg, rgba(66,55,112,.37), rgba(30,42,52,.82)); }
.team-message header { align-items: flex-start; }
.team-message-author { min-width: 0; }
.team-message-author strong { font-size: 11px; }
.team-message time { padding-top: 2px; font-size: 9px; }
.team-message p { margin-top: 7px; font-size: 12px; line-height: 1.75; }
.team-chat-empty { min-height: 280px; }
.team-chat-empty > span { width: 50px; height: 50px; border-radius: 17px; }
.team-chat-composer { gap: 12px; padding: 15px 20px 18px; border-top-color: rgba(255,255,255,.08); background: rgba(8,10,17,.36); }
.team-chat-composer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.team-chat-composer-head > div { display: grid; gap: 3px; }
.team-chat-composer-head strong { color: #f0f0f6; font-size: 11px; }
.team-chat-composer-head small, .team-chat-composer-head > span { color: var(--muted); font-size: 9px; }
.team-chat-composer-head > span { border: 1px solid rgba(255,255,255,.07); border-radius: 999px; padding: 5px 8px; }
.team-chat-compose-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
.team-chat-compose-row textarea { min-height: 56px; border-color: rgba(255,255,255,.1); border-radius: 16px; padding: 13px 15px; background: rgba(6,8,13,.64); }
.team-chat-compose-row .button { min-width: 104px; min-height: 48px; align-self: end; border-radius: 14px; }
.team-chat-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.team-announcement-option { max-width: none; }
.team-announcement-option span { display: grid; gap: 3px; }
.team-announcement-option strong { font-size: 10px; }
.team-announcement-option small { color: #b8ad96; font-size: 9px; }
.team-chat-composer-foot > small { color: var(--muted); font-size: 9px; text-align: end; }
.team-announcement-notice { border-radius: 18px; padding: 11px 13px; }
.team-announcement { padding: 9px 10px; }
@media (max-width: 720px) {
  .team-chat-heading { align-items: flex-start; flex-direction: column; }
  .team-chat-live { align-self: flex-start; }
  .team-chat-panel-head { padding-inline: 14px; }
  .team-chat-feed { min-height: 300px; max-height: 58vh; padding: 16px 12px; }
  .team-message { width: 96%; }
  .team-message-bubble { padding: 10px 11px; }
  .team-chat-composer { padding: 13px 12px 15px; }
  .team-chat-composer-foot { align-items: flex-start; flex-direction: column; }
  .team-chat-composer-foot > small { text-align: start; }
}
@media (max-width: 480px) {
  .team-chat-brand-mark { width: 42px; height: 42px; border-radius: 14px; }
  .team-chat-count { font-size: 9px; }
  .team-chat-compose-row { grid-template-columns: 1fr; }
  .team-chat-compose-row .button { min-height: 44px; justify-self: stretch; }
  .team-message { gap: 7px; }
  .team-message-avatar { flex-basis: 27px; width: 27px; height: 27px; border-radius: 9px; }
  .team-message-author { gap: 5px; }
  .team-role-chip, .team-announcement-message-tag { font-size: 8px; }
}

/* v70: تخطيط محادثة أخف برسائل قصيرة ومساحات مريحة على الشاشات الكبيرة والهاتف. */
.team-chat-heading { margin-bottom: 24px; }
.team-chat-brand-mark { width: 54px; height: 54px; border-radius: 18px; font-size: 23px; }
.team-chat-brand h2 { font-size: clamp(22px, 2.2vw, 30px); }
.team-chat-brand .muted { max-width: 54ch; line-height: 1.7; }
.team-chat-live { border-color: rgba(76,226,193,.28); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.team-chat-panel { border-color: rgba(163,174,203,.19); border-radius: 26px; }
.team-chat-panel-head { position: relative; min-height: 82px; padding-inline: clamp(16px, 2.2vw, 28px); }
.team-chat-panel-head::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(153,133,255,.24), rgba(76,226,193,.2), transparent); }
.team-chat-room-icon { border-radius: 14px; box-shadow: 0 0 22px rgba(135,104,255,.14), inset 0 1px rgba(255,255,255,.11); }
.team-chat-room-copy p { font-size: 10px; }
.team-chat-count { padding: 7px 11px; color: #cfd3e2; background: rgba(255,255,255,.045); }
.team-chat-feed { min-height: 390px; max-height: min(64vh, 760px); gap: 16px; padding: clamp(18px, 3vw, 32px); background: radial-gradient(ellipse at 90% 0%, rgba(76,226,193,.045), transparent 45%), radial-gradient(ellipse at 10% 0%, rgba(118,97,224,.075), transparent 48%); }
.team-message { width: 100%; gap: 10px; }
.team-message-bubble { width: fit-content; max-width: min(72%, 720px); border-color: rgba(185,192,215,.12); border-radius: 18px 18px 5px 18px; padding: 12px 15px 13px; background: linear-gradient(145deg, rgba(36,41,56,.94), rgba(25,29,41,.96)); box-shadow: 0 8px 24px rgba(0,0,0,.13), inset 0 1px rgba(255,255,255,.035); }
.team-message.is-own .team-message-bubble { border-color: rgba(151,126,255,.32); border-radius: 18px 18px 18px 5px; background: linear-gradient(145deg, rgba(75,60,129,.42), rgba(29,42,54,.92)); }
.team-message.is-own .team-message-avatar { border-color: rgba(151,126,255,.35); box-shadow: 0 0 16px rgba(129,107,255,.12); }
.team-message.is-incoming .team-message-bubble { border-color: rgba(76,226,193,.2); }
.team-message-avatar { border-radius: 50%; }
.team-message header { align-items: center; gap: 16px; }
.team-message-author strong { font-size: 12px; }
.team-message time { font-size: 9px; }
.team-message p { margin-top: 9px; font-size: 13px; line-height: 1.8; }
.team-role-chip { padding: 4px 8px; font-size: 9px; }
.team-announcement-message-tag { border: 1px solid rgba(255,204,115,.17); padding: 4px 8px; }
.team-chat-empty { margin: auto; border: 1px dashed rgba(167,174,198,.16); border-radius: 20px; padding: 28px; background: rgba(255,255,255,.018); }
.team-chat-composer { position: relative; gap: 13px; padding: 17px clamp(14px, 2vw, 24px) 20px; background: linear-gradient(180deg, rgba(20,23,33,.9), rgba(14,17,25,.98)); }
.team-chat-composer-head strong { font-size: 12px; }
.team-chat-composer-head > span { color: #c6baff; border-color: rgba(151,126,255,.17); background: rgba(129,107,255,.07); }
.team-chat-compose-row textarea { min-height: 58px; border-color: rgba(176,185,211,.15); background: rgba(7,9,15,.72); transition: border-color .16s ease, box-shadow .16s ease; }
.team-chat-compose-row textarea:focus { border-color: rgba(76,226,193,.52); box-shadow: 0 0 0 4px rgba(76,226,193,.07); }
.team-chat-compose-row .button { box-shadow: 0 8px 22px rgba(76,226,193,.12); }
.team-announcement-option { border: 1px solid rgba(230,184,91,.16); border-radius: 13px; padding: 9px 11px; background: linear-gradient(120deg, rgba(230,184,91,.065), rgba(255,255,255,.015)); }
.team-announcement-option input { flex: 0 0 auto; }
.team-announcement-option strong { color: #ffdda0; }
.team-chat-composer-foot > small { max-width: 44ch; line-height: 1.7; }
.team-announcement-notice { border-color: rgba(255,194,95,.38); box-shadow: 0 12px 34px rgba(0,0,0,.32), 0 0 26px rgba(245,179,73,.11); }
.team-announcement { padding: 10px 12px; }
.team-announcement-copy p { font-size: 14px; line-height: 1.75; }
.team-announcement-actions .button { border-radius: 10px; }
.team-chat-live, .team-chat-count, .team-role-chip, .team-announcement-message-tag { white-space: nowrap; }
@media (max-width: 720px) {
  .team-chat-panel { border-radius: 20px; }
  .team-chat-panel-head { min-height: 70px; }
  .team-chat-feed { min-height: 320px; max-height: 58vh; gap: 13px; padding: 16px 12px; }
  .team-message-bubble { max-width: min(82%, 620px); padding: 10px 12px; }
  .team-message p { font-size: 12px; }
  .team-chat-composer { padding: 13px 12px 15px; }
  .team-chat-compose-row textarea { min-height: 52px; }
}
@media (max-width: 480px) {
  .team-chat-brand { align-items: flex-start; gap: 10px; }
  .team-chat-brand-mark { width: 40px; height: 40px; border-radius: 13px; font-size: 18px; }
  .team-chat-brand h2 { font-size: 21px; }
  .team-chat-live { padding: 7px 9px; }
  .team-chat-panel-head { gap: 9px; padding-inline: 11px; }
  .team-chat-room-icon { width: 35px; height: 35px; }
  .team-chat-count { padding: 6px 8px; font-size: 8px; }
  .team-message { gap: 6px; }
  .team-message-bubble { max-width: calc(100% - 34px); border-radius: 15px 15px 4px 15px; padding: 9px 10px; }
  .team-message.is-own .team-message-bubble { border-radius: 15px 15px 15px 4px; }
  .team-message header { align-items: flex-start; flex-direction: column; gap: 5px; }
  .team-message time { padding: 0; }
  .team-message p { margin-top: 7px; }
  .team-announcement-option { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .team-chat-compose-row textarea { transition: none; }
}

/* v71: تحميل سجل المحادثة القديم مع إبقاء موضع القراءة واضحاً. */
.team-history-more { align-self: center; min-height: 36px; margin: 0 0 4px; border: 1px solid rgba(151,126,255,.23); border-radius: 999px; padding: 7px 14px; color: #d1c6ff; background: linear-gradient(120deg, rgba(129,107,255,.12), rgba(76,226,193,.045)); font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, opacity .16s ease; }
.team-history-more:hover { border-color: rgba(151,126,255,.5); box-shadow: 0 0 18px rgba(129,107,255,.12); }
.team-history-more:disabled { opacity: .62; cursor: wait; }
.team-history-more:focus-visible { outline: 2px solid rgba(76,226,193,.8); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .team-history-more { transition: none; } }


/* v75: مساحة محادثة عصرية، واضحة، وتبقى قابلة للاستخدام على الهاتف. */
.team-chat-heading { margin-bottom: 22px; }
.team-chat-brand-mark { position: relative; overflow: hidden; border-radius: 17px; background: radial-gradient(circle at 30% 20%, rgba(76,226,193,.24), transparent 48%), linear-gradient(145deg, rgba(135,104,255,.25), rgba(32,40,55,.84)); }
.team-chat-brand-mark::after { content: ''; position: absolute; inset: -35%; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; transform: rotate(-24deg); }
.team-chat-live { font-size: 10px; font-weight: 700; }
.team-chat-panel { grid-template-rows: auto minmax(300px, min(56vh, 650px)) auto; max-height: none; border-color: rgba(163,174,203,.2); background: radial-gradient(ellipse at 100% 0%, rgba(129,107,255,.075), transparent 38%), linear-gradient(145deg, rgba(23,26,38,.98), rgba(13,16,25,.99)); }
.team-chat-panel-head { gap: 13px; min-height: 78px; padding: 14px clamp(14px, 2vw, 24px); }
.team-chat-room-icon { position: relative; overflow: hidden; border-radius: 15px; background: radial-gradient(circle at 30% 25%, rgba(76,226,193,.2), transparent 48%), linear-gradient(145deg, rgba(135,104,255,.23), rgba(39,43,59,.82)); }
.team-chat-room-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.team-chat-room-title h3 { margin: 0; }
.team-chat-private { border: 1px solid rgba(76,226,193,.16); border-radius: 999px; padding: 4px 8px; color: #9be8d8; background: rgba(76,226,193,.055); font-size: 8px; }
.team-chat-participants { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.team-chat-participants > span { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.07); border-radius: 999px; padding: 4px 7px; color: #c4c9d8; background: rgba(255,255,255,.025); font-size: 8px; }
.team-chat-participants i { display: grid; width: 15px; height: 15px; place-items: center; border-radius: 50%; color: #d5caff; background: rgba(151,126,255,.13); font-size: 8px; font-style: normal; }
.team-chat-participants .team-participant-cashier { color: #a7f1df; background: rgba(76,226,193,.12); }
.team-chat-participants .team-participant-waiter { color: #ffdda0; background: rgba(230,184,91,.12); }
.team-chat-count { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; }
.team-chat-feed { min-height: 0; max-height: none; padding: clamp(18px, 2.7vw, 30px); scrollbar-width: thin; scrollbar-color: rgba(151,126,255,.36) transparent; }
.team-chat-feed::-webkit-scrollbar { width: 7px; }
.team-chat-feed::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: rgba(151,126,255,.35); background-clip: padding-box; }
.team-message { position: relative; gap: 10px; }
.team-message-bubble { position: relative; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.team-message-bubble:hover { border-color: rgba(185,192,215,.25); box-shadow: 0 10px 28px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.045); transform: translateY(-1px); }
.team-message.is-own .team-message-bubble:hover { border-color: rgba(151,126,255,.46); }
.team-message.is-own .team-message-author strong { color: #e7ddff; }
.team-message.is-incoming .team-message-author strong { color: #d5fff5; }
.team-message.is-announcement .team-message-bubble { border-color: rgba(230,184,91,.38); background: linear-gradient(145deg, rgba(71,55,29,.42), rgba(28,32,44,.96)); }
.team-message.is-announcement .team-message-avatar { border-color: rgba(230,184,91,.35); color: #ffdda0; background: linear-gradient(145deg, rgba(230,184,91,.18), rgba(49,43,34,.8)); }
.team-chat-composer { border-top: 1px solid rgba(151,126,255,.13); box-shadow: 0 -12px 30px rgba(0,0,0,.12); }
.team-chat-compose-row textarea { min-height: 62px; padding-inline: 16px; }
.team-chat-compose-row textarea::placeholder { color: #788095; }
.team-chat-compose-row .button { min-width: 112px; }
.team-announcement-option { border-color: rgba(230,184,91,.22); }
.team-chat-empty { gap: 10px; }
.team-chat-empty > span { box-shadow: 0 10px 30px rgba(129,107,255,.12); }
@media (max-width: 720px) {
  .team-chat-panel { grid-template-rows: auto minmax(280px, 48vh) auto; border-radius: 20px; }
  .team-chat-panel-head { align-items: flex-start; }
  .team-chat-room-title { gap: 6px; }
  .team-chat-participants { gap: 4px; }
  .team-chat-participants > span { padding: 3px 6px; }
  .team-chat-count { align-self: center; }
  .team-chat-feed { min-height: 0; padding: 15px 12px; }
  .team-message-bubble { max-width: min(84%, 620px); }
  .team-chat-compose-row .button { min-height: 46px; }
}
@media (max-width: 480px) {
  .team-chat-panel { grid-template-rows: auto minmax(260px, 42vh) auto; }
  .team-chat-panel-head { flex-wrap: wrap; }
  .team-chat-room-copy { flex: 1 1 calc(100% - 58px); }
  .team-chat-count { margin-inline-start: 48px; }
  .team-chat-participants > span { font-size: 7px; }
  .team-message-bubble { max-width: calc(100% - 34px); }
}
@media (prefers-reduced-motion: reduce) { .team-message-bubble { transition: none; } .team-message-bubble:hover { transform: none; } }


/* v76: حالة اتصال طابعات LAN لكل فرع وقسم. */
.printer-branch-status { display: grid; gap: .55rem; border: 1px solid rgba(255,255,255,.08); border-radius: 1rem; padding: .35rem .55rem .65rem; background: linear-gradient(135deg, rgba(129,107,255,.035), rgba(76,226,193,.02)); }
.printer-device-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .5rem; padding-inline: .25rem; }
.printer-device-card { display: grid; grid-template-columns: .55rem minmax(0,1fr) auto; align-items: center; gap: .65rem; min-width: 0; border: 1px solid rgba(255,255,255,.075); border-radius: .8rem; padding: .7rem .75rem; background: rgba(7,9,15,.3); }
.printer-device-card > div { display: grid; gap: .2rem; min-width: 0; }

/* v81: محادثة فريق بهوية واضحة وفقاعات مريحة للقراءة. */
.team-chat-heading { align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.team-chat-brand { min-width: 0; }
.team-chat-brand-mark { width: 52px; height: 52px; border: 1px solid rgba(155,136,255,.34); border-radius: 17px; background: radial-gradient(circle at 28% 22%, rgba(76,226,193,.24), transparent 48%), linear-gradient(145deg, rgba(135,104,255,.27), rgba(24,34,47,.9)); box-shadow: 0 10px 28px rgba(86,67,173,.2), inset 0 1px rgba(255,255,255,.1); }
.team-chat-brand h2 { font-size: clamp(22px, 2vw, 29px); }
.team-chat-brand .muted { max-width: 54ch; line-height: 1.7; }
.team-chat-live { padding: 9px 13px; border-color: rgba(76,226,193,.24); color: #b5f5e7; background: rgba(76,226,193,.065); font-weight: 700; }
.team-chat-panel { grid-template-rows: auto minmax(320px, min(58vh, 700px)) auto; border: 1px solid rgba(166,177,204,.17); border-radius: 24px; background: radial-gradient(ellipse at 100% 0%, rgba(129,107,255,.08), transparent 38%), linear-gradient(150deg, rgba(22,25,37,.99), rgba(12,15,23,.99)); box-shadow: 0 24px 70px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.045); }
.team-chat-panel-head { min-height: 78px; gap: 13px; padding: 14px clamp(14px, 2vw, 24px); background: linear-gradient(100deg, rgba(129,107,255,.075), rgba(76,226,193,.025)); }
.team-chat-room-icon { width: 43px; height: 43px; border: 1px solid rgba(151,126,255,.28); border-radius: 15px; background: radial-gradient(circle at 28% 25%, rgba(76,226,193,.2), transparent 48%), linear-gradient(145deg, rgba(135,104,255,.23), rgba(39,43,59,.82)); box-shadow: 0 0 22px rgba(135,104,255,.13), inset 0 1px rgba(255,255,255,.1); }
.team-chat-room-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.team-chat-room-title h3 { margin: 0; color: #f2f2f9; font-size: 14px; }
.team-chat-private { border: 1px solid rgba(76,226,193,.17); border-radius: 999px; padding: 4px 8px; color: #a8ecdd; background: rgba(76,226,193,.06); font-size: 9px; }
.team-chat-participants { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.team-chat-participants > span { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.075); border-radius: 999px; padding: 4px 8px; color: #c7ccda; background: rgba(255,255,255,.03); font-size: 9px; }
.team-chat-participants i { display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; color: #d7ccff; background: rgba(151,126,255,.15); font-size: 8px; font-style: normal; }
.team-chat-participants .team-participant-cashier { color: #a7f1df; background: rgba(76,226,193,.13); }
.team-chat-participants .team-participant-waiter { color: #ffdda0; background: rgba(230,184,91,.13); }
.team-chat-count { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: 7px 11px; color: #d1d5e3; background: rgba(255,255,255,.04); white-space: nowrap; }
.team-chat-feed { min-height: 0; max-height: none; gap: 13px; padding: clamp(16px, 2.5vw, 28px); background: radial-gradient(ellipse at 88% 0%, rgba(76,226,193,.04), transparent 45%), radial-gradient(ellipse at 10% 0%, rgba(118,97,224,.065), transparent 48%); scrollbar-width: thin; scrollbar-color: rgba(151,126,255,.34) transparent; }
.team-chat-feed::-webkit-scrollbar { width: 7px; }
.team-chat-feed::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: rgba(151,126,255,.34); background-clip: padding-box; }
.team-message { width: 100%; max-width: 940px; gap: 9px; }
.team-message.is-own { align-self: flex-start; }
.team-message.is-incoming { align-self: flex-end; flex-direction: row-reverse; }
.team-message-avatar { flex-basis: 34px; width: 34px; height: 34px; border: 1px solid var(--team-role-border, rgba(76,226,193,.25)); border-radius: 50%; color: var(--team-role-ink, #a6f1df); background: var(--team-role-avatar, linear-gradient(145deg, rgba(76,226,193,.14), rgba(39,58,62,.72))); box-shadow: inset 0 1px rgba(255,255,255,.08); }
.team-message-bubble { width: fit-content; max-width: min(68%, 650px); border: 1px solid var(--team-role-border, rgba(76,226,193,.2)); border-radius: 18px 18px 5px 18px; padding: 11px 14px 12px; background: linear-gradient(145deg, var(--team-role-fill, rgba(36,41,56,.94)), rgba(20,24,34,.97)); box-shadow: 0 7px 22px rgba(0,0,0,.14), inset 0 1px rgba(255,255,255,.035); transition: border-color .16s ease, box-shadow .16s ease; }
.team-message.is-own .team-message-bubble { border-radius: 18px 18px 18px 5px; }
.team-message-bubble:hover { border-color: var(--team-role-border-strong, rgba(185,192,215,.34)); box-shadow: 0 10px 26px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.045); }
.team-message.role-owner { --team-role-border: rgba(151,126,255,.31); --team-role-border-strong: rgba(151,126,255,.52); --team-role-ink: #d3c8ff; --team-role-fill: rgba(75,60,129,.32); --team-role-avatar: linear-gradient(145deg, rgba(129,107,255,.2), rgba(49,55,75,.72)); }
.team-message.role-manager { --team-role-border: rgba(129,164,255,.28); --team-role-border-strong: rgba(129,164,255,.48); --team-role-ink: #c4d6ff; --team-role-fill: rgba(47,66,111,.28); --team-role-avatar: linear-gradient(145deg, rgba(91,137,226,.2), rgba(49,55,75,.72)); }
.team-message.role-cashier { --team-role-border: rgba(76,226,193,.25); --team-role-border-strong: rgba(76,226,193,.46); --team-role-ink: #a6f1df; --team-role-fill: rgba(34,83,76,.28); --team-role-avatar: linear-gradient(145deg, rgba(76,226,193,.17), rgba(39,58,62,.72)); }
.team-message.role-waiter { --team-role-border: rgba(230,184,91,.24); --team-role-border-strong: rgba(230,184,91,.44); --team-role-ink: #ffdda0; --team-role-fill: rgba(92,69,30,.24); --team-role-avatar: linear-gradient(145deg, rgba(230,184,91,.16), rgba(57,48,34,.74)); }
.team-message.role-owner .team-message-bubble, .team-message.role-owner.is-own .team-message-bubble { border-color: var(--team-role-border); background: linear-gradient(145deg, var(--team-role-fill), rgba(20,24,34,.97)); }
.team-message.role-manager .team-message-bubble, .team-message.role-manager.is-own .team-message-bubble { border-color: var(--team-role-border); background: linear-gradient(145deg, var(--team-role-fill), rgba(20,24,34,.97)); }
.team-message.role-cashier .team-message-bubble, .team-message.role-cashier.is-own .team-message-bubble { border-color: var(--team-role-border); background: linear-gradient(145deg, var(--team-role-fill), rgba(20,24,34,.97)); }
.team-message.role-waiter .team-message-bubble, .team-message.role-waiter.is-own .team-message-bubble { border-color: var(--team-role-border); background: linear-gradient(145deg, var(--team-role-fill), rgba(20,24,34,.97)); }
.team-message.role-owner.is-incoming .team-message-avatar, .team-message.role-owner.is-own .team-message-avatar { border-color: var(--team-role-border); color: var(--team-role-ink); background: var(--team-role-avatar); }
.team-message.role-manager.is-incoming .team-message-avatar, .team-message.role-manager.is-own .team-message-avatar { border-color: var(--team-role-border); color: var(--team-role-ink); background: var(--team-role-avatar); }
.team-message.role-cashier.is-incoming .team-message-avatar, .team-message.role-cashier.is-own .team-message-avatar { border-color: var(--team-role-border); color: var(--team-role-ink); background: var(--team-role-avatar); }
.team-message.role-waiter.is-incoming .team-message-avatar, .team-message.role-waiter.is-own .team-message-avatar { border-color: var(--team-role-border); color: var(--team-role-ink); background: var(--team-role-avatar); }
.team-message-author strong { color: var(--team-role-ink, #eff0f6); font-size: 12px; }
.team-role-chip { border: 1px solid var(--team-role-border, rgba(151,126,255,.18)); color: var(--team-role-ink, #c4b9ff); background: rgba(255,255,255,.035); }
.team-message time { color: #9299ac; font-size: 9px; }
.team-message p { margin-top: 7px; color: #e1e4ed; font-size: 13px; line-height: 1.8; text-align: start; }
.team-message.is-announcement .team-message-bubble { border-color: rgba(230,184,91,.42); background: linear-gradient(145deg, rgba(71,55,29,.38), rgba(28,32,44,.97)); }
.team-message.is-announcement .team-message-avatar { border-color: rgba(230,184,91,.4); color: #ffdda0; background: linear-gradient(145deg, rgba(230,184,91,.18), rgba(49,43,34,.82)); }
.team-announcement-message-tag { border: 1px solid rgba(255,204,115,.2); padding: 3px 7px; color: #ffdda0; background: rgba(223,170,75,.1); }
.team-chat-empty { min-height: 250px; margin: auto; border: 1px dashed rgba(167,174,198,.17); border-radius: 20px; padding: 28px; background: rgba(255,255,255,.018); }
.team-chat-composer { gap: 12px; padding: 15px clamp(13px, 2vw, 22px) 17px; border-top: 1px solid rgba(151,126,255,.13); background: linear-gradient(180deg, rgba(19,22,32,.95), rgba(13,16,24,.99)); box-shadow: 0 -10px 28px rgba(0,0,0,.12); }
.team-chat-composer-head strong { color: #f2f2f8; font-size: 12px; }
.team-chat-composer-head > span { border: 1px solid rgba(151,126,255,.17); color: #c8bdff; background: rgba(129,107,255,.07); }
.team-chat-compose-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.team-chat-compose-row textarea { min-height: 60px; border-color: rgba(176,185,211,.15); border-radius: 16px; padding: 13px 15px; background: rgba(7,9,15,.72); transition: border-color .16s ease, box-shadow .16s ease; }
.team-chat-compose-row textarea:focus { border-color: rgba(76,226,193,.52); box-shadow: 0 0 0 4px rgba(76,226,193,.07); }
.team-chat-compose-row textarea::placeholder { color: #858da1; }
.team-chat-compose-row .button { min-width: 108px; min-height: 48px; border-radius: 14px; box-shadow: 0 8px 22px rgba(76,226,193,.12); }
.team-chat-composer-foot { align-items: center; gap: 12px; }
.team-announcement-option { max-width: none; border: 1px solid rgba(230,184,91,.18); border-radius: 13px; padding: 8px 10px; background: linear-gradient(120deg, rgba(230,184,91,.06), rgba(255,255,255,.015)); }
.team-announcement-option input { flex: 0 0 auto; }
.team-announcement-option strong { color: #ffdda0; }
.team-announcement-option small { color: #c4b99f; }
.team-chat-composer-foot > small { max-width: 42ch; line-height: 1.65; }
.team-history-more { align-self: center; }
@media (max-width: 720px) {
  .team-chat-heading { align-items: flex-start; flex-direction: column; }
  .team-chat-live { align-self: flex-start; }
  .team-chat-panel { grid-template-rows: auto minmax(280px, 48vh) auto; border-radius: 20px; }
  .team-chat-panel-head { align-items: flex-start; min-height: 70px; padding-inline: 13px; }
  .team-chat-feed { min-height: 0; max-height: none; gap: 12px; padding: 15px 11px; }
  .team-message { max-width: 100%; gap: 7px; }
  .team-message-avatar { flex-basis: 29px; width: 29px; height: 29px; }
  .team-message-bubble { max-width: min(78%, 570px); padding: 10px 11px; }
  .team-message p { font-size: 12px; }
  .team-chat-composer { padding: 13px 11px 15px; }
  .team-chat-composer-foot { align-items: stretch; flex-direction: column; }
  .team-chat-composer-foot > small { text-align: start; }
}
@media (max-width: 480px) {
  .team-chat-brand { align-items: flex-start; gap: 10px; }
  .team-chat-brand-mark { width: 42px; height: 42px; border-radius: 14px; font-size: 18px; }
  .team-chat-brand h2 { font-size: 21px; }
  .team-chat-live { padding: 7px 9px; }
  .team-chat-panel { grid-template-rows: auto minmax(260px, 42vh) auto; }
  .team-chat-panel-head { flex-wrap: wrap; gap: 8px; padding-inline: 10px; }
  .team-chat-room-icon { width: 36px; height: 36px; }
  .team-chat-room-copy { flex: 1 1 calc(100% - 50px); }
  .team-chat-room-title { gap: 6px; }
  .team-chat-private { font-size: 8px; }
  .team-chat-participants { gap: 4px; }
  .team-chat-participants > span { padding: 3px 6px; font-size: 8px; }
  .team-chat-count { margin-inline-start: 44px; padding: 5px 8px; font-size: 8px; }
  .team-message { gap: 6px; }
  .team-message-avatar { flex-basis: 26px; width: 26px; height: 26px; font-size: 10px; }
  .team-message-bubble { max-width: calc(100% - 32px); border-radius: 15px 15px 4px 15px; padding: 9px 10px; }
  .team-message.is-own .team-message-bubble { border-radius: 15px 15px 15px 4px; }
  .team-message header { align-items: flex-start; flex-direction: column; gap: 5px; }
  .team-message time { padding: 0; }
  .team-message-author { gap: 5px; }
  .team-chat-compose-row { grid-template-columns: 1fr; }
  .team-chat-compose-row .button { min-height: 44px; justify-self: stretch; }
  .team-announcement-option { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .team-message-bubble, .team-chat-compose-row textarea { transition: none; } }
.printer-device-card strong { overflow: hidden; color: #e8eaf2; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.printer-device-card small { color: var(--muted); font-size: .67rem; line-height: 1.5; }
.printer-device-card .printer-bridge-label { font-size: .68rem; white-space: nowrap; }
@media (max-width: 560px) { .printer-device-grid { grid-template-columns: 1fr; } .printer-device-card { grid-template-columns: .55rem minmax(0,1fr); } .printer-device-card > .printer-bridge-label { grid-column: 2; } }

.printer-status-dot.is-unknown { background: #8d93a4; box-shadow: none; }


/* أيقونات SVG مألوفة وواضحة لوحدات لوحة التشغيل. */
.nav-link > .nav-icon { width: 20px; height: 20px; flex: 0 0 20px; display: inline-grid; place-items: center; color: #9ba4b8; }
.nav-link > .nav-icon svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-link:hover > .nav-icon { color: #a7f2de; }
.nav-link.is-active > .nav-icon { color: #baacff; }
body.sidebar-collapsed .nav-link > .nav-icon { width: 22px; height: 22px; flex-basis: 22px; }
body.sidebar-collapsed .nav-link > .nav-icon svg { width: 21px; height: 21px; stroke-width: 1.9; }
.sidebar-toggle svg { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }


/* تنظيم القائمة في مجموعات واضحة مع إبقاء زر الفتح متاحاً فوق كل الشاشات. */
.primary-nav { display: flex; flex-direction: column; gap: 0; overflow: visible; }
.nav-group { display: grid; gap: 4px; min-width: 0; }
.nav-group.is-hidden { display: none; }
.nav-group + .nav-group { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.055); padding-top: 9px; }
.nav-group-label { margin: 0; padding: 0 11px 4px; color: #778094; font-size: 9px; font-weight: 800; line-height: 1.6; letter-spacing: .02em; }
.sidebar { z-index: 1400; }
.sidebar-toggle { z-index: 2200; top: 24px; right: 278px; left: auto; width: 40px; height: 40px; display: grid; place-items: center; }
.sidebar-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.sidebar-collapsed .sidebar-toggle { right: 94px; left: auto; }
body.sidebar-collapsed .nav-group-label { display: none; }
body.sidebar-collapsed .nav-group + .nav-group { margin-top: 5px; padding-top: 5px; }
html[dir="ltr"] .sidebar-toggle { right: auto; left: 278px; }
html[dir="ltr"] body.sidebar-collapsed .sidebar-toggle { right: auto; left: 94px; }
@media (max-width: 900px) {
  .sidebar { z-index: 1400; top: max(10px, env(safe-area-inset-top)); right: 10px; left: auto; bottom: max(10px, env(safe-area-inset-bottom)); width: min(320px, calc(100vw - 64px)); }
  .sidebar-toggle { z-index: 2200; top: max(16px, env(safe-area-inset-top)); right: min(calc(320px + 18px), calc(100vw - 58px)); left: auto; }
  body.sidebar-collapsed .sidebar-toggle { top: max(16px, env(safe-area-inset-top)); right: 22px; left: auto; }
  body:not(.sidebar-collapsed) #app-shell:not(.is-hidden)::before { z-index: 1390; }
  .nav-group-label { padding-inline: 10px; }
  html[dir="ltr"] .sidebar { right: auto; left: 10px; }
  html[dir="ltr"] .sidebar-toggle { right: auto; left: min(calc(320px + 18px), calc(100vw - 58px)); }
  html[dir="ltr"] body.sidebar-collapsed .sidebar-toggle { right: auto; left: 22px; }
}

/* وضع رسائل النجاح والخطأ في أعلى منتصف الشاشة حتى لا تختفي خلف القائمة. */
.toast-region { z-index: 2100; top: max(14px, env(safe-area-inset-top)); right: auto; bottom: auto; left: 50%; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 28px); justify-items: center; padding: 2px; transform: translateX(-50%); }
.toast { width: min(560px, 100%); }
html[dir="ltr"] .toast-region { right: auto; left: 50%; }


/* تكديس إشعارات الفريق والنظام ورسائل النجاح أعلى منتصف الشاشة فوق القائمة. */
.global-notice-stack { position: fixed; z-index: 3000; top: max(14px, env(safe-area-inset-top)); right: auto; bottom: auto; left: 50%; width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 28px); display: grid; align-content: start; gap: 8px; overflow-x: hidden; overflow-y: auto; padding: 2px; pointer-events: none; scrollbar-width: none; transform: translateX(-50%); }
.global-notice-stack::-webkit-scrollbar { display: none; }
.global-notice-stack > * { min-width: 0; pointer-events: auto; }
.global-notice-stack .schema-health-notice { width: 100%; box-sizing: border-box; margin: 0; }
.global-notice-stack .team-announcement-notice { position: static; inset: auto; z-index: auto; width: 100%; box-sizing: border-box; margin: 0; }
.global-notice-stack .toast-region { position: static; z-index: auto; inset: auto; width: 100%; max-height: none; display: grid; justify-items: stretch; gap: 8px; overflow: visible; padding: 0; transform: none; }
.global-notice-stack .toast { width: 100%; box-sizing: border-box; }


/* قائمة تنقل منظمة في مجموعات قابلة للطي مع إظهار المجموعة النشطة. */
.nav-group { gap: 5px; }
.nav-group-label { width: 100%; min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid transparent; border-radius: 11px; padding: 0 11px; color: #8e96aa; background: transparent; font: inherit; font-size: 10px; font-weight: 800; line-height: 1.5; text-align: start; cursor: pointer; transition: color .16s ease, border-color .16s ease, background .16s ease; }
.nav-group-label:hover, .nav-group-label:focus-visible { border-color: rgba(76,226,193,.16); color: #c4fff2; background: rgba(76,226,193,.035); }
.nav-group-label:focus-visible { outline: 2px solid rgba(98,230,202,.75); outline-offset: 2px; }
.nav-group-label svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
.nav-group.is-expanded > .nav-group-label { color: #b8adf1; }
.nav-group.is-expanded > .nav-group-label svg { transform: rotate(180deg); }
.nav-group-links { min-width: 0; display: grid; gap: 4px; }
body:not(.sidebar-collapsed) .nav-group.is-collapsed > .nav-group-links { display: none; }
body.sidebar-collapsed .nav-group-label { display: none; }
body.sidebar-collapsed .nav-group-links { gap: 7px; }
@media (max-width: 900px) {
  .nav-group-label { min-height: 38px; padding-inline: 11px; }
  .nav-group-links { gap: 5px; }
  .sidebar-toggle { top: max(16px, env(safe-area-inset-top)); }
  body.sidebar-collapsed .sidebar-toggle { top: max(16px, env(safe-area-inset-top)); }
}

/* أظهر الإشعارات العامة في منتصف أعلى الشاشة فوق القائمة والستارة الجانبية. */
.global-notice-stack {
  position: fixed !important;
  z-index: 2147483000 !important;
  top: max(16px, env(safe-area-inset-top)) !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: min(640px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 32px);
  transform: translateX(-50%) !important;
  pointer-events: none;
}
.global-notice-stack > *, .global-notice-stack .toast-region > * { pointer-events: auto; }
.global-notice-stack .toast-region { position: static !important; inset: auto !important; transform: none !important; width: 100% !important; }

#owner-report-print-root { display: none; }
@media print {
  body.printing-owner-report { display: block !important; overflow: visible !important; color: #17202a !important; background: #fff !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  body.printing-owner-report > :not(#owner-report-print-root) { display: none !important; }
  body.printing-owner-report #owner-report-print-root { page: owner-report-page; display: block !important; box-sizing: border-box !important; box-decoration-break: clone; -webkit-box-decoration-break: clone; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 10mm !important; direction: rtl !important; color: #17202a !important; background: #fff !important; }
  #owner-report-print-root .owner-report-document { page: owner-report-page; display: block !important; width: 100% !important; padding: 0 !important; color: #17202a !important; background: #fff !important; font: 9pt/1.45 Arial,Tahoma,sans-serif !important; }
  #owner-report-print-root .owner-report-print-header { margin-bottom: 12px !important; border-bottom: 1px solid #9aa4af !important; }
  #owner-report-print-root .owner-report-print-header h1 { color: #17202a !important; }
  #owner-report-print-root .report-filter, #owner-report-print-root .report-archive-note, #owner-report-print-root .report-export-action, #owner-report-print-root [data-refresh], #owner-report-print-root button { display: none !important; }
  #owner-report-print-root .panel, #owner-report-print-root .metric-card { color: #17202a !important; background: #fff !important; box-shadow: none !important; border-color: #c7ced6 !important; break-inside: avoid; }
  #owner-report-print-root .muted, #owner-report-print-root small { color: #45515e !important; }
  #owner-report-print-root .data-table { width: 100% !important; font-size: 7.5pt !important; }
  #owner-report-print-root .data-table th, #owner-report-print-root .data-table td { padding: 4px !important; color: #17202a !important; border-color: #c7ced6 !important; }
  #owner-report-print-root .report-tax-item-detail { break-inside: auto !important; }
  #owner-report-print-root .report-tax-item-detail tr { break-inside: avoid; }
  #owner-report-print-root .table-scroll { overflow: visible !important; }
}

/* تحسين نهائي متجاوب للوحة التشغيل: عرض طبيعي، تمرير واضح، ومساحات لمس موحدة. */
html { min-width: 320px; overflow-x: clip; scroll-behavior: smooth; }
body.admin-body { min-width: 320px; overflow-x: clip; }
.app-shell, .main-panel, .workspace, #workspace, #workspace > *, .panel, .glass-panel { min-width: 0; }
.main-panel { width: auto; max-width: 100%; padding-inline: clamp(16px, 2.4vw, 36px); }
.workspace { width: 100%; }
.view-zoom-viewport { overflow-x: clip; overflow-y: visible; }
.view-zoom-toolbar { width: fit-content; max-width: 100%; flex-wrap: wrap; border: 1px solid rgba(255,255,255,.075); border-radius: 12px; padding: 4px; background: rgba(18,21,30,.72); }
.section-heading, .panel-heading, .topbar { min-width: 0; }
.section-heading > *, .panel-heading > * { min-width: 0; }
.panel, .metric-card { border-color: rgba(255,255,255,.095); }
.panel { border-radius: 17px; }
.data-table { min-width: 640px; }
.table-scroll { max-width: 100%; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(162,138,255,.4) transparent; }
.table-scroll::-webkit-scrollbar { height: 7px; }
.table-scroll::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(162,138,255,.42); }
.table-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.035); }
.report-export-action > .button { min-height: 42px; }
.app-modal { width: min(94vw, 720px); max-width: calc(100vw - 24px); max-height: min(92dvh, 900px); overscroll-behavior: contain; }
.app-modal.shift-report-dialog { width: min(96vw, 1120px); max-height: min(94dvh, 1100px); }
.app-modal :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { max-width: 100%; }
.toast-region, .global-notice-stack { max-width: calc(100vw - 20px); }
.nav-link, .nav-group-label, .button, .icon-button, .view-zoom-button { touch-action: manipulation; }
.nav-link:focus-visible, .nav-group-label:focus-visible, .button:focus-visible, .icon-button:focus-visible { outline-offset: 3px; }
.metric-card, .table-card, .order-card, .live-shift-card, .staff-row { overflow-wrap: anywhere; }

@media (min-width: 901px) and (max-width: 1100px) {
  .main-panel { padding-inline: clamp(18px, 2vw, 26px); }
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-grid { grid-template-columns: minmax(0, 1fr); }
  .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .main-panel { width: auto; max-width: none; padding: 18px 14px 28px; }
  body.sidebar-collapsed .main-panel { margin-right: 78px; }
  html[dir="ltr"] body.sidebar-collapsed .main-panel { margin-right: 0; margin-left: 78px; }
  .topbar { align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
  .topbar > div:first-child { min-width: 0; flex: 1 1 150px; }
  .topbar-actions { min-width: 0; flex: 0 1 auto; }
  .section-heading { align-items: flex-start; flex-wrap: wrap; }
  .section-heading > .button, .section-heading > .button-row { flex: 0 1 auto; }
  .content-grid, .orders-grid, .menu-admin-layout, .settings-layout, .inventory-layout { grid-template-columns: minmax(0, 1fr); }
  .report-grid, .live-shift-groups { grid-template-columns: minmax(0, 1fr); }
  .report-period-timeline { grid-column: auto; }
  .receipt-filters { grid-template-columns: minmax(0, 1fr); }
  .report-filter { justify-content: stretch; }
  .report-filter label { min-width: min(100%, 190px); flex: 1 1 190px; }
  .report-filter-actions { flex: 1 1 100%; }
  .report-export-action { margin-top: 0; }
  .report-export-action .button { flex: 1 1 190px; }
  .panel-heading { align-items: flex-start; }
}

@media (max-width: 620px) {
  .main-panel { padding: 14px 10px calc(28px + env(safe-area-inset-bottom)); }
  body.sidebar-collapsed .main-panel { margin-right: 78px; }
  html[dir="ltr"] body.sidebar-collapsed .main-panel { margin-left: 78px; margin-right: 0; }
  .topbar { gap: 9px; margin-bottom: 16px; }
  .topbar h1 { max-width: 100%; font-size: clamp(17px, 5vw, 21px); line-height: 1.4; overflow-wrap: anywhere; }
  .topbar-actions { flex: 1 1 100%; justify-content: flex-start; gap: 6px; }
  .topbar-actions .icon-button { width: 40px; height: 40px; }
  .profile-chip { margin-inline-start: auto; }
  .section-heading { margin-bottom: 15px; }
  .section-heading h2 { font-size: 19px; line-height: 1.45; }
  .section-heading .muted { line-height: 1.7; }
  .section-heading > .button, .section-heading > .button-row, .panel-heading > .button { width: 100%; }
  .metrics-grid, .compact-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .metric-card { min-height: 118px; padding: 11px; border-radius: 15px; }
  .metric-card > strong { font-size: clamp(18px, 5vw, 23px); overflow-wrap: anywhere; }
  .tables-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel { padding: 12px; border-radius: 15px; }
  .panel-heading { flex-wrap: wrap; }
  .table-scroll { margin-inline: -2px; }
  .table-scroll .data-table { min-width: 620px; }
  .report-filter { gap: 9px; }
  .report-filter label { min-width: 100%; }
  .report-filter-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .report-filter-actions .button, .report-export-action .button { width: 100%; }
  .report-export-action { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .report-export-note { text-align: start; }
  .app-modal { width: calc(100vw - 16px); max-width: none; max-height: calc(100dvh - 16px); border-radius: 19px; padding: 15px; }
  .app-modal.shift-report-dialog { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); }
  .modal-heading { gap: 9px; margin-bottom: 14px; }
  .modal-heading h2 { font-size: 18px; line-height: 1.5; }
  .view-zoom-toolbar { position: sticky; top: 4px; z-index: 4; margin-bottom: 8px; }
  .global-notice-stack { width: calc(100vw - 16px) !important; max-width: 560px; top: max(8px, env(safe-area-inset-top)) !important; }
  .schema-health-notice, .team-announcement-notice, .toast { padding: 11px; border-radius: 14px; }
}

@media (max-width: 380px) {
  .main-panel { padding-inline: 8px; }
  body.sidebar-collapsed .main-panel { margin-right: 78px; }
  html[dir="ltr"] body.sidebar-collapsed .main-panel { margin-left: 78px; margin-right: 0; }
  .topbar-actions { gap: 4px; }
  .topbar-actions .icon-button { width: 36px; height: 36px; }
  .metrics-grid, .compact-metrics { grid-template-columns: minmax(0, 1fr); }
  .tables-grid { grid-template-columns: minmax(0, 1fr); }
  .profile-chip span { max-width: 82px; }
}

@media print {
  #owner-report-print-root .data-table { min-width: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .icon-button, .nav-link, .nav-group-label, .sidebar, .main-panel { transition-duration: .01ms !important; }
}

/* ترتيب أدوات التقارير ومنع تمددها خارج مساحة العرض. */
.report-workspace,
.report-workspace > *,
.report-workspace .owner-report-document,
.report-workspace .report-filter,
.report-workspace .report-export-action,
.report-workspace .report-metrics,
.report-workspace .report-tax-detail { min-width: 0; max-width: 100%; box-sizing: border-box; }
.report-workspace .owner-report-document > .report-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 12px; }
.report-workspace .owner-report-document > .report-filter label { width: 100%; min-width: 0; }
.report-workspace .owner-report-document > .report-filter label input,
.report-workspace .owner-report-document > .report-filter label select { width: 100%; min-width: 0; }
.report-workspace .owner-report-document > .report-filter .report-filter-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 9px; min-width: 0; }
.report-workspace .owner-report-document > .report-filter .report-filter-actions .button { flex: 1 1 210px; min-width: 0; white-space: normal; }
.report-workspace .report-archive-note { overflow-wrap: anywhere; line-height: 1.75; }
.report-workspace .report-export-action { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 9px; }
.report-workspace .report-export-action > .button { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.report-workspace .report-export-note { grid-column: 1 / -1; line-height: 1.65; overflow-wrap: anywhere; }
.report-workspace .report-metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.report-workspace .metric-card { min-width: 0; }
.report-workspace .metric-card > span,
.report-workspace .metric-card > small { overflow-wrap: anywhere; line-height: 1.6; }
.report-workspace .metric-card > strong { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .report-workspace .owner-report-document > .report-filter { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .report-workspace .owner-report-document > .report-filter .report-filter-actions { grid-column: auto; display: grid; grid-template-columns: minmax(0, 1fr); }
  .report-workspace .owner-report-document > .report-filter .report-filter-actions .button { width: 100%; }
  .report-workspace .report-export-action { grid-template-columns: minmax(0, 1fr); }
  .report-workspace .report-export-note { grid-column: auto; }
  .report-workspace .report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .report-workspace .metric-card { padding: 11px; }
  .report-workspace .metric-card > strong { font-size: clamp(16px, 4.6vw, 22px); }
}
@media (max-width: 380px) {
  .report-workspace .report-metrics { grid-template-columns: minmax(0, 1fr); }
}


/* تفاصيل التقارير قابلة للطي مع إبقاء الجداول محصورة داخل مساحة التقرير. */
.report-workspace .report-detail-accordion { width: 100%; min-width: 0; max-width: 100%; margin: 0; padding: 0; }
.report-workspace .report-detail-accordion > summary { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 20px; cursor: pointer; list-style: none; }
.report-workspace .report-detail-accordion > summary::-webkit-details-marker { display: none; }
.report-workspace .report-accordion-copy { display: grid; min-width: 0; gap: 5px; }
.report-workspace .report-accordion-copy strong { color: var(--text); font-size: clamp(15px, 1.5vw, 19px); line-height: 1.45; overflow-wrap: anywhere; }
.report-workspace .report-accordion-copy small { color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.report-workspace .report-accordion-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid var(--border); border-radius: 11px; color: var(--mint); background: rgba(76, 226, 193, .06); font-size: 20px; line-height: 1; transition: transform .18s ease, background .18s ease; }
.report-workspace .report-detail-accordion[open] > summary { border-bottom: 1px solid var(--border); background: rgba(255,255,255,.018); }
.report-workspace .report-detail-accordion[open] .report-accordion-icon { transform: rotate(180deg); background: rgba(76, 226, 193, .12); }
.report-workspace .report-accordion-content { min-width: 0; max-width: 100%; padding: 16px 18px 18px; }
.report-workspace .report-accordion-content > .muted { margin: 0 0 12px; line-height: 1.7; }
.report-workspace .report-accordion-content .table-scroll { width: 100%; min-width: 0; }
@media (max-width: 620px) {
  .report-workspace .report-detail-accordion > summary { gap: 10px; padding: 13px 12px; }
  .report-workspace .report-accordion-copy small { font-size: 11px; }
  .report-workspace .report-accordion-icon { width: 31px; height: 31px; }
  .report-workspace .report-accordion-content { padding: 12px 10px; }
}
@media print {
  #owner-report-print-root details.report-detail-accordion { display: block !important; overflow: visible !important; }
  #owner-report-print-root details.report-detail-accordion > summary { display: none !important; }
  #owner-report-print-root details.report-detail-accordion > .report-accordion-content { display: block !important; padding: 8px 0 !important; }
}


/* أدوات تواصل آمنة وسريعة لطلبات الاستلام والتوصيل. */
.offsite-contact-actions { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; }
.offsite-contact-link, .offsite-map-link { display: inline-flex; min-width: 0; max-width: 100%; align-items: center; gap: 6px; border: 1px solid rgba(76,226,193,.2); border-radius: 10px; padding: 6px 9px; color: var(--mint); background: rgba(76,226,193,.055); font-size: 10px; line-height: 1.45; text-decoration: none; overflow-wrap: anywhere; }
.offsite-contact-link:hover, .offsite-map-link:hover { border-color: rgba(76,226,193,.48); background: rgba(76,226,193,.1); }
.offsite-contact-link bdi { font-size: 10px; white-space: nowrap; }
.offsite-no-contact { color: var(--muted); font-size: 10px; }
.order-title small.offsite-delivery-meta { display: block; max-width: 100%; color: var(--muted); line-height: 1.65; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 620px) { .offsite-contact-actions { gap: 5px; } .offsite-contact-link, .offsite-map-link { min-height: 34px; padding: 6px 8px; } }


/* طي تفاصيل نشاط النادلين والكاشير مع إبقاء العناوين وعدد الورديات ظاهرين. */
.live-shift-groups { grid-template-columns: minmax(0,1fr); gap: 16px; }
.live-shift-details { min-width: 0; }
.live-shift-details > .live-shift-group-head { margin: 0; cursor: pointer; list-style: none; }
.live-shift-details > .live-shift-group-head::-webkit-details-marker { display: none; }
.live-shift-group-head h4 { min-width: 0; }
.live-shift-group-meta { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.live-shift-group-meta > span { border: 1px solid var(--border); border-radius: 999px; padding: 5px 8px; background: rgba(255,255,255,.025); white-space: nowrap; }
.live-shift-chevron { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.035); font-size: 19px; font-style: normal; line-height: 1; transition: transform .18s ease, color .18s ease; }
.live-shift-details[open] > .live-shift-group-head { margin-bottom: 10px; }
.live-shift-details[open] > .live-shift-group-head .live-shift-chevron { transform: rotate(180deg); color: var(--mint); }
.live-shift-details > .live-shift-group-head:hover .live-shift-chevron { color: var(--mint); }
@media (max-width: 420px) { .live-shift-group { padding: 11px; } .live-shift-group-head { gap: 7px; } .live-shift-group-head h4 { font-size: 12px; } .live-shift-group-meta { gap: 5px; } .live-shift-group-meta > span { padding: 4px 6px; font-size: 9px; } .live-shift-chevron { width: 26px; height: 26px; } }
@media print { .live-shift-details > .live-shift-list { display: grid !important; } }


/* أقسام تقرير التشغيل مستقلة ومرتبة عمودياً لتخفيف طول الصفحة. */
.report-workspace .report-detail-accordion + .report-detail-accordion { margin: 14px 0 0; }
.report-workspace .report-grid { display: flex; min-width: 0; flex-direction: column; gap: 14px; margin-top: 14px; }
.report-workspace .report-grid > .report-detail-accordion { min-width: 0; width: 100%; }
.report-workspace .report-section-accordion .report-accordion-content > h3 { margin: 0 0 12px; }
.report-workspace .report-section-accordion .report-accordion-content > .table-scroll { margin-top: 0; }
.report-workspace .report-detail-accordion > summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 12px; }
@media print {
  #owner-report-print-root .report-grid { display: block !important; }
  #owner-report-print-root details.report-detail-accordion + details.report-detail-accordion { margin-top: 8px !important; }
  #owner-report-print-root details.report-detail-accordion > summary { display: flex !important; border: 0 !important; padding: 4px 0 !important; background: transparent !important; }
  #owner-report-print-root details.report-detail-accordion > summary .report-accordion-icon { display: none !important; }
}


/* عرض سجل التعديلات كاملاً في PDF مع إزالة إطار التمرير والمساحات الزائدة. */
@media print {
  #owner-report-print-root .audit-list { max-height: none !important; height: auto !important; overflow: visible !important; display: grid !important; gap: 0 !important; }
  #owner-report-print-root .audit-row { break-inside: avoid; page-break-inside: avoid; gap: 10px; padding: 6px 0 !important; }
  #owner-report-print-root .audit-row > div { gap: 2px; }
  #owner-report-print-root .audit-row strong { font-size: 10pt; }
  #owner-report-print-root .audit-row small, #owner-report-print-root .audit-row > span { font-size: 8pt; line-height: 1.4; }
}

/* ضيافة المقهى: إبقاء خيارها واضحاً وتفاصيلها قابلة للقراءة على الشاشات الصغيرة. */
.confirm-panel .hospitality-choice { max-width: 480px; margin: 20px auto 0; text-align: start; align-items: start; }
.hospitality-choice > span { display: grid; gap: 5px; }
.hospitality-choice small { color: var(--muted, #a7adbd); line-height: 1.6; }
.hospitality-totals { display: grid; gap: 10px; margin: 16px 0; padding: 14px; border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 14px; }
.hospitality-totals span, .hospitality-totals strong { display: flex; justify-content: space-between; gap: 14px; }
.hospitality-totals strong { padding-top: 10px; border-top: 1px solid var(--line, rgba(255,255,255,.12)); color: var(--accent, #35e0c1); }
.hospitality-report-panel .panel-heading { align-items: flex-start; }
.hospitality-report-panel .table-scroll { max-width: 100%; }
.hospitality-report-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-top: 14px; padding: 14px 16px; border: 1px solid rgba(53,224,193,.24); border-radius: 14px; background: rgba(53,224,193,.06); }
.hospitality-report-total strong { color: var(--accent, #35e0c1); }
.hospitality-report-total small { flex-basis: 100%; color: var(--muted, #a7adbd); }
.app-modal.hospitality-close-dialog { width: min(94vw, 660px); max-height: min(90dvh, 740px); padding: clamp(18px, 3vw, 28px); }
.hospitality-close-dialog .confirm-panel { display: grid; justify-items: center; gap: 0; width: 100%; text-align: center; }
.hospitality-close-dialog .confirm-panel h2 { margin: 0; font-size: clamp(21px, 3vw, 28px); line-height: 1.35; }
.hospitality-close-dialog .confirm-panel > .muted { max-width: 520px; margin: 14px 0 0; line-height: 1.75; }
.hospitality-close-dialog .confirm-panel .confirm-icon { margin-bottom: 12px; }
.hospitality-close-dialog .confirm-panel .eyebrow { margin: 0 0 8px; }
.hospitality-close-dialog .confirm-panel .hospitality-choice { box-sizing: border-box; display: grid !important; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 12px !important; width: min(100%, 520px); max-width: 520px; margin: 22px auto 0; border: 1px solid rgba(92,232,199,.25); border-radius: 16px; padding: 15px 16px; color: var(--text) !important; background: linear-gradient(135deg, rgba(92,232,199,.09), rgba(255,255,255,.025)); text-align: start; font-size: 13px !important; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.hospitality-close-dialog .hospitality-choice:hover { border-color: rgba(92,232,199,.55); background: linear-gradient(135deg, rgba(92,232,199,.13), rgba(255,255,255,.035)); }
.hospitality-close-dialog .hospitality-choice:focus-within { outline: 2px solid rgba(92,232,199,.62); outline-offset: 3px; }
.hospitality-close-dialog .hospitality-choice input[type="checkbox"] { width: 21px; min-width: 21px; height: 21px; min-height: 21px; margin-top: 1px; border-radius: 6px; }
.hospitality-close-dialog .hospitality-choice > span { display: grid; gap: 5px; min-width: 0; }
.hospitality-close-dialog .hospitality-choice strong { color: var(--text); font-size: 13px; line-height: 1.5; }
.hospitality-close-dialog .hospitality-choice small { color: var(--muted, #a7adbd); font-size: 11px; line-height: 1.7; }
.hospitality-close-dialog .payment-choice { box-sizing: border-box; width: min(100%, 520px); max-width: 520px; margin: 18px auto 0; gap: 8px; color: var(--text); font-size: 13px; text-align: start; }
.hospitality-close-dialog .payment-choice input, .hospitality-close-dialog .payment-choice select { box-sizing: border-box; width: 100%; min-height: 46px; border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: 12px; padding: 10px 13px; color: var(--text); background: rgba(8,10,16,.72); font: inherit; }
.hospitality-close-dialog .payment-choice input::placeholder { color: var(--muted, #a7adbd); opacity: .78; }
.hospitality-close-dialog .confirm-actions { width: min(100%, 520px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px auto 0; }
.hospitality-close-dialog .confirm-actions .button { min-width: 0; min-height: 46px; white-space: normal; }
.backup-settings-panel { margin-top: 16px; }
.backup-settings-panel .panel-heading { align-items: flex-start; }
.backup-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.backup-status-grid > span { display: grid; gap: 5px; min-width: 0; border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 12px; padding: 12px; color: var(--muted); background: rgba(255,255,255,.025); font-size: 11px; }
.backup-status-grid strong { color: var(--text); overflow-wrap: anywhere; }
.backup-settings-panel code { direction: ltr; unicode-bidi: isolate; }
.backup-download-list { display: grid; gap: 8px; margin: 14px 0; }
.backup-download-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 13px; padding: 12px; background: rgba(255,255,255,.025); }
.backup-download-row > div { display: grid; gap: 4px; min-width: 0; }
.backup-download-row strong { overflow-wrap: anywhere; font-size: 12px; }
.backup-download-row small { color: var(--muted); font-size: 10px; }
.backup-download-row .button { flex: 0 0 auto; }
@media (max-width: 640px) {
  .confirm-panel .hospitality-choice, .hospitality-close-dialog .confirm-panel .hospitality-choice { width: 100%; }
  .app-modal.hospitality-close-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 17px; }
  .hospitality-close-dialog .confirm-panel .confirm-actions { width: 100%; gap: 8px; margin-top: 18px; }
  .hospitality-close-dialog .confirm-actions .button { padding-inline: 10px; font-size: 12px; }
  .backup-status-grid { grid-template-columns: minmax(0, 1fr); }
  .backup-download-row { align-items: stretch; flex-direction: column; }
  .backup-download-row .button { width: 100%; }
  .hospitality-totals span, .hospitality-totals strong { align-items: flex-start; }
  .hospitality-report-total { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 380px) {
  .hospitality-close-dialog .confirm-panel .confirm-actions { grid-template-columns: minmax(0, 1fr); }
  .hospitality-close-dialog .confirm-actions .button { width: 100%; }
}

/* v120: ترتيب نافذة إغلاق الطاولة والضيافة بمسافات أوضح على مختلف المقاسات. */
.app-modal.hospitality-close-dialog { box-sizing: border-box; width: min(94vw, 640px); max-width: calc(100vw - 24px); max-height: min(90dvh, 760px); overflow-x: hidden; }
.hospitality-close-dialog .confirm-panel { justify-items: stretch; }
.hospitality-close-dialog .confirm-panel .confirm-icon { width: 50px; height: 50px; border-color: rgba(162,138,255,.24); border-radius: 16px; color: #c4b5ff; background: linear-gradient(145deg, rgba(162,138,255,.16), rgba(92,232,199,.07)); }
.hospitality-close-dialog .confirm-panel .eyebrow { margin-bottom: 6px; }
.hospitality-close-dialog .confirm-panel h2 { font-size: clamp(22px, 3.2vw, 28px); }
.close-session-summary { box-sizing: border-box; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; width: min(100%, 520px); margin: 16px auto 0; padding: 12px 14px; border: 1px solid rgba(162,138,255,.16); border-radius: 15px; background: linear-gradient(130deg, rgba(162,138,255,.08), rgba(255,255,255,.025)); text-align: start; }
.close-session-count { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(162,138,255,.24); border-radius: 13px; color: #ded5ff; background: rgba(162,138,255,.12); font-size: 17px; font-weight: 850; font-variant-numeric: tabular-nums; }
.close-session-summary > span:last-child { display: grid; gap: 4px; min-width: 0; }
.close-session-summary strong { color: var(--text); font-size: 13px; }
.close-session-summary small { color: var(--muted, #a7adbd); font-size: 11px; line-height: 1.6; }
.hospitality-close-dialog .confirm-panel .hospitality-choice { margin-top: 14px; }
.hospitality-close-dialog .hospitality-choice.is-selected { border-color: rgba(92,232,199,.56); background: linear-gradient(130deg, rgba(92,232,199,.14), rgba(162,138,255,.045)); }
.hospitality-close-dialog .hospitality-choice strong { font-size: 14px; }
.hospitality-close-dialog .hospitality-choice small { font-size: 12px; }
.hospitality-mode-note { box-sizing: border-box; display: flex; align-items: flex-start; gap: 9px; width: min(100%, 520px); margin: 10px auto 0; padding: 11px 13px; border: 1px solid rgba(92,232,199,.18); border-radius: 12px; color: #bcefe3; background: rgba(92,232,199,.055); font-size: 11px; line-height: 1.7; text-align: start; }
.hospitality-mode-note::before { content: "i"; flex: 0 0 18px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #07100e; background: #70e9ce; font-size: 12px; font-weight: 900; line-height: 1; }
.hospitality-close-dialog .payment-choice { margin-top: 14px; }
.hospitality-close-dialog .payment-choice input, .hospitality-close-dialog .payment-choice select { outline: none; }
.hospitality-close-dialog .payment-choice input:focus, .hospitality-close-dialog .payment-choice select:focus { border-color: rgba(92,232,199,.62); box-shadow: 0 0 0 3px rgba(92,232,199,.1); }
.optional-field-label { display: inline-flex; width: fit-content; margin-top: -4px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 2px 8px; color: var(--muted, #a7adbd); background: rgba(255,255,255,.035); font-size: 10px; font-weight: 500; }
.hospitality-close-dialog .confirm-actions { display: flex; flex-direction: row-reverse; align-items: stretch; justify-content: center; }
.hospitality-close-dialog .confirm-actions .button { flex: 1 1 0; }
html[dir="ltr"] .hospitality-close-dialog .confirm-actions { flex-direction: row; }

@media (max-width: 640px) {
  .app-modal.hospitality-close-dialog { width: calc(100vw - 20px); max-width: none; max-height: calc(100dvh - 20px - env(safe-area-inset-top)); padding: clamp(15px, 4vw, 19px); border-radius: 21px; }
  .hospitality-close-dialog .confirm-panel .confirm-icon { margin-bottom: 10px; }
  .hospitality-close-dialog .confirm-panel > .muted { margin-top: 10px; }
  .close-session-summary { margin-top: 13px; padding: 11px; }
  .hospitality-close-dialog .confirm-panel .hospitality-choice { margin-top: 12px; padding: 13px; }
  .hospitality-mode-note { margin-top: 8px; padding: 10px 11px; }
  .hospitality-close-dialog .payment-choice { margin-top: 12px; }
  .hospitality-close-dialog .confirm-actions { position: sticky; bottom: -15px; z-index: 1; gap: 8px; margin-top: 16px; padding: 12px 0 0; background: linear-gradient(180deg, rgba(22,25,35,0), #161923 32%); }
  .hospitality-close-dialog .confirm-actions .button { min-height: 48px; font-size: 13px; }
}
@media (max-width: 420px) {
  .hospitality-close-dialog .confirm-actions { flex-direction: column-reverse; }
  html[dir="ltr"] .hospitality-close-dialog .confirm-actions { flex-direction: column-reverse; }
  .hospitality-close-dialog .confirm-actions .button { flex: none; width: 100%; }
  .hospitality-close-dialog .hospitality-choice { grid-template-columns: 22px minmax(0, 1fr); }
  .hospitality-close-dialog .hospitality-choice small { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .hospitality-close-dialog .hospitality-choice { transition: none; }
}

/* حسابات محطات التحضير لا ترى إلا الأقسام التي اختارها المدير. */
.kitchen-department-field{grid-column:1/-1;min-width:0;margin:0;padding:1rem;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:1rem;background:rgba(255,255,255,.025)}.kitchen-department-field legend{padding:0 .45rem;font-weight:800}.kitchen-department-field .muted{margin:.25rem 0 .9rem}.kitchen-department-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:.55rem}.kitchen-department-options .checkbox-field{display:flex;align-items:center;gap:.55rem;padding:.7rem .8rem;border:1px solid var(--line,rgba(255,255,255,.1));border-radius:.8rem}.kitchen-department-options input{accent-color:var(--accent,#42d9bc)}.kds-assigned-department{display:grid;gap:.25rem;padding:.65rem 1rem;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:.8rem}.kds-assigned-department small{color:var(--muted,#9ba3b5)}

/* أدوات مرفقات محادثة الفريق: أزرار لمس واضحة وتغذية بصرية هادئة. */
.team-chat-media-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-height:46px; }
.team-media-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:112px; min-height:46px; padding:0 14px; border:1px solid rgba(165,174,204,.17); border-radius:14px; color:#d8d9e8; background:linear-gradient(145deg,rgba(31,35,50,.92),rgba(19,22,33,.88)); font:inherit; font-size:12px; font-weight:750; cursor:pointer; transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease; }
.team-media-button:hover { transform:translateY(-1px); border-color:rgba(76,226,193,.42); background:linear-gradient(145deg,rgba(39,52,62,.96),rgba(23,30,42,.94)); box-shadow:0 7px 20px rgba(76,226,193,.08); }
.team-media-button:focus-visible,.team-media-remove:focus-visible,.team-recording-cancel:focus-visible { outline:3px solid rgba(76,226,193,.62); outline-offset:2px; }
.team-media-icon { width:19px; height:19px; flex:0 0 19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.team-media-button[data-team-media-action="record"] { border-color:rgba(230,95,133,.28); }
.team-media-button[data-team-media-action="record"] .team-media-icon { color:#ff8ba7; }
.team-media-button.is-recording { border-color:rgba(255,93,122,.56); color:#ffe2e8; background:linear-gradient(135deg,rgba(105,34,57,.72),rgba(44,25,42,.9)); box-shadow:0 0 0 3px rgba(255,93,122,.08),0 7px 20px rgba(255,93,122,.1); }
.team-media-button.is-recording .team-media-icon { color:#ff6683; fill:rgba(255,102,131,.22); animation:team-record-pulse 1.25s ease-in-out infinite; }
.team-media-hint { margin-inline-start:4px; color:#9299ad; font-size:11px; }
.team-media-spacer { flex:1 1 8px; }
.team-recording-time { color:#ff9bb0; font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; }
.team-recording-cancel { min-height:40px; padding:0 12px; border:1px solid rgba(255,255,255,.1); border-radius:12px; color:#c9ccda; background:rgba(255,255,255,.04); font:inherit; font-size:11px; cursor:pointer; }
.team-attachment-preview { min-width:0; }
.team-attachment-preview[hidden],.team-recording-time[hidden],.team-recording-cancel[hidden] { display:none!important; }
.team-attachment-preview-card { display:flex; align-items:center; gap:12px; min-height:70px; padding:9px 12px; border:1px solid rgba(76,226,193,.2); border-radius:16px; background:linear-gradient(120deg,rgba(76,226,193,.07),rgba(129,107,255,.06)),rgba(10,13,21,.65); }
.team-attachment-preview-card > img { width:54px; height:54px; flex:0 0 54px; object-fit:cover; border-radius:11px; background:#171a25; }
.team-attachment-preview-card > audio { width:min(240px,38%); height:38px; }
.team-attachment-preview-copy { display:grid; gap:4px; min-width:0; }
.team-attachment-preview-copy strong { color:#e9f8f4; font-size:12px; }
.team-attachment-preview-copy small { max-width:42ch; overflow:hidden; color:#9299ad; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.team-media-remove { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; margin-inline-start:auto; border:1px solid rgba(255,104,133,.22); border-radius:12px; color:#ff9eb2; background:rgba(255,104,133,.07); font-size:22px; line-height:1; cursor:pointer; }
.team-announcement-option input:disabled { opacity:.45; cursor:not-allowed; }
.team-message-attachment { display:block; margin-top:10px; overflow:hidden; border:1px solid rgba(171,181,211,.14); border-radius:14px; background:rgba(5,8,14,.32); }
.team-message-image { width:fit-content; max-width:min(100%,520px); }
.team-message-image img { display:block; max-width:100%; max-height:390px; object-fit:contain; }
.team-message-audio { display:flex; align-items:center; gap:10px; width:min(100%,410px); padding:9px 12px; color:#a9f1df; }
.team-message-audio > span { display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px; border-radius:50%; background:rgba(76,226,193,.11); font-size:19px; }
.team-message-audio audio { width:100%; min-width:0; height:38px; }
@keyframes team-record-pulse { 50% { opacity:.52; transform:scale(.92); } }
@media (max-width:720px) {
  .team-chat-media-toolbar { gap:7px; }
  .team-media-button { min-width:0; min-height:46px; flex:1 1 29%; gap:6px; padding-inline:9px; font-size:11px; }
  .team-media-icon { width:17px; height:17px; flex-basis:17px; }
  .team-media-hint { display:none; }
  .team-recording-cancel { flex:1 1 auto; }
  .team-attachment-preview-card { gap:9px; padding:8px; }
  .team-attachment-preview-card > audio { width:42%; }
  .team-message-image img { max-height:300px; }
}
@media (prefers-reduced-motion:reduce) { .team-media-button,.team-media-button.is-recording .team-media-icon { transition:none; animation:none; } }

/* أدوات تواصل الفريق بأسلوب مراسلة سريع: أيقونات مختصرة، أزرار لمس واضحة، وتسجيل بارز من دون نصوص مزدحمة. */
.team-chat-media-toolbar { display:flex; align-items:center; gap:8px; min-height:54px; width:fit-content; max-width:100%; padding:5px 8px; border:1px solid rgba(167,177,206,.12); border-radius:18px; background:linear-gradient(145deg,rgba(30,34,49,.78),rgba(15,18,29,.84)); box-shadow:inset 0 1px rgba(255,255,255,.045),0 10px 24px rgba(0,0,0,.12); backdrop-filter:blur(16px); }
.team-media-button { display:grid; place-items:center; width:42px; height:42px; min-width:42px; min-height:42px; flex:0 0 42px; padding:0; border:1px solid rgba(164,177,211,.16); border-radius:50%; color:#b7f4e7; background:linear-gradient(145deg,rgba(42,51,69,.92),rgba(23,27,40,.94)); box-shadow:inset 0 1px rgba(255,255,255,.07); cursor:pointer; transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease,color .16s ease; }
.team-media-button .team-media-icon,.team-recording-cancel .team-media-icon { display:block; width:20px; height:20px; flex:0 0 20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.team-media-button[data-team-media-action="camera"],.team-media-button[data-team-media-action="photos"] { color:#9df2df; }
.team-media-button[data-team-media-action="record"] { color:#f6adc0; border-color:rgba(255,119,153,.23); background:linear-gradient(145deg,rgba(71,37,56,.68),rgba(28,25,39,.94)); }
.team-media-button:hover:not(:disabled) { transform:translateY(-2px); border-color:rgba(78,229,195,.52); color:#dcfff6; background:linear-gradient(145deg,rgba(44,79,80,.92),rgba(26,36,49,.96)); box-shadow:0 0 0 3px rgba(72,223,190,.07),0 8px 19px rgba(44,220,185,.12); }
.team-media-button:active:not(:disabled) { transform:scale(.94); }
.team-media-button:focus-visible,.team-media-remove:focus-visible,.team-recording-cancel:focus-visible,.team-send-button:focus-visible { outline:3px solid rgba(81,232,198,.66); outline-offset:3px; }
.team-media-button:disabled { opacity:.62; cursor:wait; }
.team-media-button.is-recording { color:#fff0f3; border-color:rgba(255,103,137,.72); background:linear-gradient(145deg,rgba(157,48,79,.9),rgba(88,28,54,.95)); box-shadow:0 0 0 4px rgba(255,84,123,.11),0 0 24px rgba(255,84,123,.22); }
.team-media-button.is-recording .team-media-icon { color:#ff91a8; fill:rgba(255,117,147,.16); animation:team-record-pulse 1s ease-in-out infinite; }
.team-recording-time { display:inline-flex; align-items:center; min-height:34px; padding:0 10px; border:1px solid rgba(255,105,138,.23); border-radius:999px; color:#ffb4c3; background:rgba(111,36,61,.22); font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; }
.team-recording-time::before { content:""; width:7px; height:7px; margin-inline-end:7px; border-radius:50%; background:#ff637f; box-shadow:0 0 10px rgba(255,99,127,.7); animation:team-record-pulse 1s ease-in-out infinite; }
.team-recording-cancel { display:grid; place-items:center; width:36px; height:36px; min-width:36px; min-height:36px; flex:0 0 36px; padding:0; border:1px solid rgba(255,255,255,.12); border-radius:50%; color:#d7dbea; background:rgba(255,255,255,.055); cursor:pointer; }
.team-recording-cancel:hover { color:#ffdce4; border-color:rgba(255,105,138,.5); background:rgba(255,82,121,.12); }
.team-recording-cancel[hidden],.team-recording-time[hidden] { display:none!important; }
.team-chat-compose-row { grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:9px; }
.team-chat-compose-row textarea { min-height:52px; max-height:150px; border-radius:18px; }
.team-send-button { display:grid!important; place-items:center; width:46px; min-width:46px!important; height:46px; min-height:46px!important; padding:0!important; border-radius:50%!important; }
.team-send-icon { display:block; width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.team-send-button:disabled { opacity:.6; cursor:wait; }
.team-attachment-preview-card { border-color:rgba(82,223,193,.28); border-radius:18px; background:linear-gradient(130deg,rgba(76,226,193,.075),rgba(129,107,255,.07)),rgba(10,13,21,.72); backdrop-filter:blur(14px); }
.team-attachment-preview-card > audio { width:min(280px,48%); height:38px; accent-color:#55dec2; }
.team-media-remove { width:36px; height:36px; flex-basis:36px; border-radius:50%; }
.team-message-audio audio { accent-color:#5ae0c4; }
@media (max-width:720px) {
  .team-chat-media-toolbar { min-height:50px; gap:7px; padding:4px 6px; }
  .team-media-button { width:42px; min-width:42px; height:42px; min-height:42px; flex-basis:42px; }
  .team-chat-compose-row { grid-template-columns:minmax(0,1fr) 44px; gap:7px; }
  .team-chat-compose-row textarea { min-height:48px; padding:11px 13px; }
  .team-send-button { width:44px; min-width:44px!important; height:44px; min-height:44px!important; }
  .team-attachment-preview-card { flex-wrap:wrap; }
  .team-attachment-preview-card > audio { width:min(100%,320px); flex:1 1 100%; order:3; }
}
@media (prefers-reduced-motion:reduce) { .team-media-button,.team-media-button.is-recording .team-media-icon,.team-recording-time::before { transition:none; animation:none; } }


/* نافذة مراسلة عائمة خفيفة بأسلوب تطبيقات المحادثة، من دون مغادرة لوحة العمل. */
#team-chat-widget { position: relative; z-index: 90; }
.team-chat-widget-fab { position: fixed; z-index: 91; inset-inline-end: 88px; inset-block-end: 24px; display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(174,255,235,.5); border-radius: 20px; color: #061412; background: linear-gradient(145deg,#85f5d8,#39d9bd 58%,#44c9c5); box-shadow: 0 12px 34px rgba(35,211,180,.28),0 0 0 5px rgba(67,224,190,.07),inset 0 1px rgba(255,255,255,.75); cursor: grab; touch-action: none; user-select: none; transition: box-shadow .18s ease,transform .18s ease; }
.team-chat-widget-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(35,211,180,.34),0 0 0 6px rgba(67,224,190,.09),inset 0 1px rgba(255,255,255,.8); }
.team-chat-widget-fab:active { cursor: grabbing; }
.team-chat-widget-fab > svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.team-chat-widget-fab:disabled { opacity: .72; cursor: wait; }
.team-chat-widget-badge { position: absolute; inset-block-start: -5px; inset-inline-end: -5px; display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; border: 2px solid #171724; border-radius: 999px; color: #fff; background: #f05278; font: 800 10px/1 system-ui,sans-serif; box-shadow: 0 3px 10px rgba(240,82,120,.32); }
.team-chat-widget-badge[hidden] { display: none !important; }
.team-chat-widget-drawer { position: fixed; z-index: 90; inset-inline-end: 22px; inset-block-end: 22px; box-sizing: border-box; display: grid; grid-template-rows: auto minmax(0,1fr) auto; width: min(410px,calc(100vw - 24px)); height: min(660px,calc(100dvh - 44px)); overflow: hidden; border: 1px solid rgba(157,171,207,.25); border-radius: 24px; color: #eef0f7; background: linear-gradient(145deg,rgba(28,31,47,.97),rgba(13,16,26,.985)); box-shadow: 0 24px 90px rgba(0,0,0,.48),0 0 48px rgba(121,91,240,.14),inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(22px) saturate(135%); -webkit-backdrop-filter: blur(22px) saturate(135%); }
.team-chat-widget-drawer[hidden] { display: none !important; }
.team-chat-widget-drawer.is-open { animation: team-chat-widget-enter .2s cubic-bezier(.2,.75,.25,1) both; }
@keyframes team-chat-widget-enter { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.team-chat-widget-head { display: flex; align-items: center; gap: 10px; min-height: 67px; padding: 10px 13px; border-bottom: 1px solid rgba(255,255,255,.075); background: linear-gradient(105deg,rgba(122,92,227,.15),rgba(57,217,189,.075)); }
.team-chat-widget-avatar { display: grid; flex: 0 0 40px; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(117,238,212,.3); border-radius: 14px; color: #9af1dc; background: rgba(63,211,183,.1); }
.team-chat-widget-avatar svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.team-chat-widget-title { display: grid; flex: 1; gap: 4px; min-width: 0; }
.team-chat-widget-title strong { font-size: 13px; font-weight: 800; }
.team-chat-widget-title small { color: #9da6b9; font-size: 10px; }
.team-chat-widget-title small i { display: inline-block; width: 7px; height: 7px; margin-inline-end: 4px; border-radius: 50%; background: #54e3be; box-shadow: 0 0 10px rgba(84,227,190,.7); }
.team-chat-widget-head-action { display: grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; color: #c6cbe0; background: rgba(255,255,255,.04); cursor: pointer; transition: .15s ease; }
.team-chat-widget-head-action:hover { border-color: rgba(100,230,201,.38); color: #9af1dc; background: rgba(100,230,201,.08); }
.team-chat-widget-head-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.team-chat-widget-feed { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; padding: 16px 13px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(141,118,244,.32) transparent; background: radial-gradient(ellipse at 90% 0%,rgba(72,221,190,.045),transparent 48%),radial-gradient(ellipse at 10% 5%,rgba(132,102,255,.075),transparent 48%); }
.team-chat-widget-feed .team-message { width: 100%; gap: 7px; }
.team-chat-widget-feed .team-message-avatar { flex-basis: 27px; width: 27px; height: 27px; font-size: 10px; }
.team-chat-widget-feed .team-message-bubble { max-width: calc(100% - 34px); padding: 9px 10px; border-radius: 15px 15px 4px 15px; }
.team-chat-widget-feed .team-message.is-own .team-message-bubble { border-radius: 15px 15px 15px 4px; }
.team-chat-widget-feed .team-message-author { gap: 5px; }
.team-chat-widget-feed .team-message-author strong { font-size: 10px; }
.team-chat-widget-feed .team-role-chip { font-size: 8px; }
.team-chat-widget-feed .team-message time { font-size: 8px; }
.team-chat-widget-feed .team-message p { margin-top: 6px; font-size: 12px; line-height: 1.65; }
.team-chat-widget-feed .team-message-image img { max-height: 240px; }
.team-chat-widget-feed .team-message-audio { gap: 7px; padding: 7px; }
.team-chat-widget-feed .team-message-audio > span { width: 27px; height: 27px; flex-basis: 27px; font-size: 15px; }
.team-chat-widget-feed .team-message-audio audio { height: 34px; }
.team-chat-widget-feed .team-chat-empty { min-height: 140px; padding: 18px; }
.team-chat-widget-composer { display: grid; gap: 8px; margin: 0; padding: 10px 11px max(11px,env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.075); background: rgba(12,15,24,.88); }
.team-chat-widget-compose { min-width: 0; }
.team-chat-widget-tools { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px; border: 1px solid rgba(169,180,209,.13); border-radius: 18px; background: rgba(5,8,14,.52); }
.team-chat-widget-tools .team-media-button,.team-chat-widget-tools .team-recording-cancel { display: grid; flex: 0 0 38px; place-items: center; width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 13px; }
.team-chat-widget-tools .team-media-icon { width: 19px; height: 19px; flex-basis: 19px; }
.team-chat-widget-tools .team-recording-cancel svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.team-chat-widget-tools textarea { flex: 1 1 auto; min-width: 0; min-height: 38px; max-height: 100px; resize: none; overflow-y: auto; border: 0; outline: 0; padding: 10px 8px; color: #f0f1f7; background: transparent; font: inherit; font-size: 12px; line-height: 1.5; }
.team-chat-widget-tools textarea::placeholder { color: #858da2; }
.team-chat-widget-tools textarea:focus { box-shadow: none; }
.team-chat-widget-mic { border-color: rgba(243,104,137,.22); color: #ff91aa; background: rgba(243,104,137,.055); }
.team-chat-widget-send { display: grid; flex: 0 0 39px; place-items: center; width: 39px; height: 39px; border: 1px solid rgba(166,255,234,.36); border-radius: 14px; color: #061412; background: linear-gradient(145deg,#8af3d7,#3dd9bc); box-shadow: 0 5px 14px rgba(42,213,181,.15); cursor: pointer; transition: .15s ease; }
.team-chat-widget-send:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(42,213,181,.24); }
.team-chat-widget-send:disabled { opacity: .55; cursor: wait; }
.team-chat-widget-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.team-chat-widget-composer .team-attachment-preview-card { min-height: 52px; padding: 6px 8px; border-radius: 13px; }
.team-chat-widget-composer .team-attachment-preview-card > img { width: 40px; height: 40px; flex-basis: 40px; }
.team-chat-widget-composer .team-attachment-preview-card > audio { width: min(170px,42%); height: 32px; }
.team-chat-widget-composer .team-attachment-preview-copy strong { font-size: 10px; }
.team-chat-widget-composer .team-attachment-preview-copy small { font-size: 9px; }
.team-chat-widget-composer .team-media-remove { width: 31px; height: 31px; flex-basis: 31px; font-size: 19px; }
@media (max-width: 640px) {
  .team-chat-widget-fab { inset-inline-end: 16px; inset-block-end: max(17px,env(safe-area-inset-bottom)); width: 54px; height: 54px; border-radius: 19px; }
  .team-chat-widget-drawer { inset-inline-end: 8px; inset-block-end: 8px; width: calc(100vw - 16px); height: min(72dvh,620px); max-height: calc(100dvh - 16px - env(safe-area-inset-top)); border-radius: 21px; }
  .team-chat-widget-tools { gap: 4px; }
  .team-chat-widget-tools .team-media-button,.team-chat-widget-tools .team-recording-cancel { flex-basis: 34px; width: 34px; min-width: 34px; height: 34px; min-height: 34px; }
  .team-chat-widget-tools .team-chat-widget-send { flex-basis: 35px; width: 35px; height: 35px; }
}
@media (prefers-reduced-motion: reduce) { .team-chat-widget-drawer.is-open { animation: none; } .team-chat-widget-fab,.team-chat-widget-send { transition: none; } }


/* تثبيت نافذة تواصل الفريق فوق التنقل وحصرها في إطار العرض المرئي. */
#team-chat-widget { position: fixed !important; inset: 0 auto auto 0; width: 0; height: 0; z-index: 2147483646 !important; isolation: isolate; pointer-events: none; }
#team-chat-widget .team-chat-widget-fab,
#team-chat-widget .team-chat-widget-drawer { z-index: 2147483647 !important; pointer-events: auto; }
#team-chat-widget .team-chat-widget-fab { z-index: 2147483647 !important; pointer-events: auto; }
#team-chat-widget .team-chat-widget-fab[aria-expanded="true"] { visibility: hidden; pointer-events: none; }
@media (max-width: 900px) {
  #team-chat-widget .team-chat-widget-drawer { width: min(410px, calc(100vw - 78px)); max-width: min(410px, calc(100vw - 78px)); height: min(620px, calc(100dvh - 24px)); max-height: min(620px, calc(100dvh - 24px)); border-radius: 20px; }
}

/* مظهر نيون زجاجي اختياري للوحة والمنيو عند اختيار قالب «نيون زجاجي». */
body[data-admin-theme="cyber"] { background: radial-gradient(ellipse at 78% -8%, color-mix(in srgb, var(--tenant-primary) 24%, transparent), transparent 48%), radial-gradient(ellipse at 12% 100%, color-mix(in srgb, var(--tenant-accent) 12%, transparent), transparent 45%), var(--bg); }
body[data-admin-theme="cyber"] .ambient-one { background: var(--tenant-primary); opacity: .22; }
body[data-admin-theme="cyber"] .ambient-two { background: var(--tenant-accent); opacity: .15; }
body[data-admin-theme="cyber"] .glass-panel, body[data-admin-theme="cyber"] .sidebar, body[data-admin-theme="cyber"] .view-zoom-toolbar, body[data-admin-theme="cyber"] .modal-card { border-color: color-mix(in srgb, var(--tenant-primary) 26%, rgba(255,255,255,.12)); background: linear-gradient(145deg, color-mix(in srgb, var(--tenant-surface) 92%, var(--tenant-primary)), color-mix(in srgb, var(--tenant-background) 91%, #11101a)); box-shadow: 0 18px 50px rgba(0,0,0,.28), 0 0 26px color-mix(in srgb, var(--tenant-primary) 8%, transparent), inset 0 1px rgba(255,255,255,.07); backdrop-filter: blur(22px) saturate(145%); -webkit-backdrop-filter: blur(22px) saturate(145%); }
body[data-admin-theme="cyber"] .button-primary { color: #13091b; border-color: color-mix(in srgb, var(--tenant-accent) 58%, white); background: linear-gradient(110deg, var(--tenant-primary), var(--tenant-accent)); box-shadow: 0 7px 24px color-mix(in srgb, var(--tenant-primary) 25%, transparent), 0 0 18px color-mix(in srgb, var(--tenant-accent) 18%, transparent); }
body[data-admin-theme="cyber"] .button-primary:hover { filter: brightness(1.12); }
body[data-admin-theme="cyber"] .nav-link.is-active { color: #fff; background: linear-gradient(100deg, color-mix(in srgb, var(--tenant-primary) 25%, transparent), color-mix(in srgb, var(--tenant-accent) 8%, transparent)); box-shadow: inset -2px 0 var(--tenant-primary), 0 0 18px color-mix(in srgb, var(--tenant-primary) 12%, transparent); }
body[data-admin-theme="cyber"] .nav-link.is-active > span, body[data-admin-theme="cyber"] .text-button, body[data-admin-theme="cyber"] .menu-preset-list button.is-selected { color: var(--tenant-accent); }
body[data-admin-theme="cyber"] .nav-link:hover, body[data-admin-theme="cyber"] .icon-button:hover, body[data-admin-theme="cyber"] .view-zoom-button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--tenant-primary) 50%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--tenant-primary) 14%, transparent); }
body[data-admin-theme="cyber"] .section-heading .eyebrow, body[data-admin-theme="cyber"] .settings-group-heading h4 { color: color-mix(in srgb, var(--tenant-primary) 76%, white); }


/* v127.66: keep waiter order actions readable at desktop and mobile widths. */
.order-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(245px, max-content); align-items: center; gap: 12px; min-width: 0; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.order-line > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.order-line strong { line-height: 1.55; }
.order-line small { line-height: 1.6; }
.line-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 8px; min-width: 0; white-space: nowrap; }
.line-actions button { flex: 0 0 34px; width: 34px; height: 34px; min-width: 34px; border-radius: 10px; font-size: 15px; }
.line-actions button[data-line-delivery], .line-actions button[data-line-pickup] { flex: 0 0 auto; width: auto; min-width: max-content; max-width: 100%; min-height: 38px; height: auto; padding: 8px 12px; border-radius: 10px; line-height: 1.35; font-size: 11px; writing-mode: horizontal-tb; word-break: keep-all; overflow-wrap: normal; white-space: nowrap; }
.line-quantity-controls { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.line-quantity-controls b { min-width: 20px; font-size: 12px; text-align: center; }
.line-actions .line-cancel { color: #ff8b9a; }
@media (max-width: 760px) {
  .order-line { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 10px; }
  .line-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; justify-content: stretch; gap: 7px; }
  .line-actions button[data-line-delivery], .line-actions button[data-line-pickup] { grid-column: 1 / -1; width: 100%; min-width: 0; white-space: normal; text-align: center; }
  .line-quantity-controls { grid-column: 1 / -1; justify-content: flex-start; }
}


/* v127.67: focused kitchen workflow and larger touch targets. */
.kds-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.kds-filter-chip { appearance: none; display: flex; min-width: 0; min-height: 68px; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border); border-radius: 14px; padding: 11px 13px; color: var(--muted); background: linear-gradient(135deg, rgba(24, 29, 42, .92), rgba(13, 16, 23, .94)); text-align: start; font: inherit; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.kds-filter-chip:hover { border-color: color-mix(in srgb, var(--tenant-accent) 48%, var(--border)); transform: translateY(-1px); }
.kds-filter-chip:focus-visible { outline: 2px solid var(--tenant-accent); outline-offset: 2px; }
.kds-filter-chip.is-active { border-color: color-mix(in srgb, var(--tenant-accent) 66%, var(--border)); color: var(--text); background: color-mix(in srgb, var(--tenant-accent) 11%, var(--panel)); box-shadow: 0 0 18px color-mix(in srgb, var(--tenant-accent) 12%, transparent), inset 0 1px rgba(255,255,255,.045); }
.kds-filter-chip span { font-size: 12px; line-height: 1.45; }
.kds-filter-chip strong { flex: 0 0 auto; color: var(--text); font-size: 22px; font-variant-numeric: tabular-nums; }
.kds-filter-incoming strong { color: #f5bd75; }
.kds-filter-preparing strong { color: #8db8ff; }
.kds-filter-ready strong { color: var(--mint); }
.kds-cancel-summary { color: #ffb1bd !important; }
.kds-cancel-summary strong { color: #ff8da1 !important; }
.kds-ticket { padding: 17px; }
.kds-ticket-head h3 { font-size: 21px; }
.kds-line { min-height: 76px; padding: 13px; }
.kds-line-main strong { font-size: 15px; line-height: 1.5; }
.kds-line-main span, .kds-ready-label { font-size: 13px; line-height: 1.5; }
.kds-line > button { min-height: 46px; min-width: 148px; padding-inline: 14px; font-size: 13px; touch-action: manipulation; }
.kds-grid { align-items: stretch; }
@media (max-width: 1050px) { .kds-grid { grid-template-columns: 1fr; } .kds-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kds-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .kds-filter-chip { min-height: 60px; padding: 9px 10px; } .kds-filter-chip span { font-size: 11px; } .kds-filter-chip strong { font-size: 20px; } .kds-ticket-head h3 { font-size: 19px; } .kds-line > button { width: 100%; min-width: 0; } }

/* مركز الإرشادات والربط المستقل لواتساب لكل مقهى */
.guide-hero,.guide-role-intro,.guide-tip,.whatsapp-owner-card{border:1px solid rgba(190,120,255,.24);background:linear-gradient(135deg,rgba(40,25,65,.78),rgba(17,22,34,.92));box-shadow:0 16px 45px rgba(4,6,14,.18),inset 0 1px rgba(255,255,255,.035)}
.guide-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);gap:28px;align-items:center;padding:clamp(22px,4vw,42px);border-radius:24px;overflow:hidden;position:relative}
.guide-hero:after{content:"";position:absolute;width:260px;height:260px;inset-inline-start:-100px;bottom:-180px;border-radius:50%;background:#ba37ee;filter:blur(80px);opacity:.2;pointer-events:none}
.guide-hero h2{font-size:clamp(1.6rem,3vw,2.25rem);margin:4px 0 10px}.guide-hero p{max-width:680px;color:var(--muted,#a5a7b8);line-height:1.9}.guide-hero-note{display:inline-flex;margin-top:8px;padding:7px 12px;border:1px solid rgba(173,100,255,.3);border-radius:999px;color:#d8b7ff;font-size:.88rem}
.guide-flow{display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.5vw,18px);direction:rtl;padding:16px 10px}.guide-flow div{display:grid;gap:8px;justify-items:center;min-width:54px;color:#d9d7e7;font-size:.78rem}.guide-flow b{display:grid;place-items:center;width:46px;height:46px;border-radius:16px;background:rgba(180,64,240,.13);border:1px solid rgba(202,104,255,.5);color:#f2d8ff;box-shadow:0 0 22px rgba(194,58,247,.15)}.guide-flow div:nth-of-type(2n) b{border-color:rgba(70,226,199,.4);color:#7df5da;box-shadow:0 0 20px rgba(70,226,199,.12)}.guide-flow i{color:#a67ae2;font-style:normal;font-size:1.1rem}
.guide-role-tabs{display:flex;gap:10px;overflow:auto;padding:16px 2px 8px;scrollbar-width:thin}.guide-role-tab{flex:0 0 auto;border:1px solid rgba(177,130,225,.26);border-radius:14px;background:rgba(25,27,40,.85);color:var(--text,#f4f2fa);padding:10px 18px;font:inherit;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.guide-role-tab:hover{transform:translateY(-2px);border-color:rgba(207,104,255,.68)}.guide-role-tab.is-active,.guide-role-tab[aria-selected=true]{border-color:rgba(78,229,202,.7);background:linear-gradient(135deg,rgba(74,216,190,.16),rgba(179,64,242,.15));box-shadow:0 0 22px rgba(79,221,205,.1);color:#a5ffeb}
.guide-role-intro{display:flex;gap:16px;align-items:center;padding:18px 22px;border-radius:20px;margin:8px 0 16px}.guide-role-icon,.guide-tip-icon{flex:0 0 48px;width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:rgba(190,75,241,.15);color:#e4b3ff;border:1px solid rgba(194,106,245,.38);font-size:1.35rem}.guide-role-intro .eyebrow{margin:0;color:#bf8bf2}.guide-role-intro h3{margin:3px 0 4px;font-size:1.25rem}.guide-role-intro p:last-child{margin:0;color:var(--muted,#a5a7b8);line-height:1.75}
.guide-phase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}.guide-phase{padding:20px;border-radius:20px;border:1px solid rgba(133,145,173,.16);background:linear-gradient(155deg,rgba(27,30,43,.96),rgba(16,21,31,.95));transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.guide-phase:hover{transform:translateY(-3px);border-color:rgba(188,98,239,.48);box-shadow:0 12px 30px rgba(4,6,14,.25)}.guide-phase-heading{display:flex;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid rgba(173,181,205,.12)}.guide-step-number{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:14px;color:#8ef7dc;background:rgba(49,210,183,.12);border:1px solid rgba(81,232,206,.32);font-weight:800}.guide-phase-heading .eyebrow{margin:0 0 3px;color:#b58de2;font-size:.73rem}.guide-phase-heading h4{margin:0;font-size:1.05rem}.guide-phase ol{margin:15px 0 0;padding-inline-start:22px;display:grid;gap:12px;color:var(--muted,#b6b7c5);line-height:1.85}.guide-phase li{padding-inline-start:3px}.guide-phase li::marker{color:#d277fa;font-weight:700}
.guide-tip{display:flex;gap:14px;align-items:flex-start;margin-top:16px;padding:20px;border-radius:20px}.guide-tip-icon{color:#85f2d7;border-color:rgba(74,226,196,.35);background:rgba(56,205,180,.12)}.guide-tip h3{margin:1px 0 8px}.guide-tip p{margin:4px 0;color:var(--muted,#b2b5c4);line-height:1.85}.guide-tip .muted{font-size:.9rem}
.whatsapp-owner-card{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;margin:14px 0 18px;border-radius:20px}.whatsapp-owner-copy{display:flex;align-items:center;gap:14px;min-width:0}.whatsapp-owner-icon{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border:1px solid rgba(75,226,198,.35);border-radius:15px;background:rgba(64,211,184,.12);color:#80f5d7;font-size:1.35rem}.whatsapp-owner-copy .eyebrow{margin:0;color:#bd8bf1;font-size:.76rem}.whatsapp-owner-copy h3{margin:2px 0 3px}.whatsapp-owner-copy p:last-child{margin:0;color:var(--muted,#a5a7b8);line-height:1.6}.whatsapp-owner-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.whatsapp-disconnect-form{margin-top:8px}.whatsapp-disconnect-form .button{width:100%}
.whatsapp-setup-help{margin:0 0 16px;padding:14px 16px;border:1px solid rgba(180,120,230,.23);border-radius:15px;background:rgba(18,20,31,.68);color:var(--text,#f4f2fa)}.whatsapp-setup-help summary{cursor:pointer;font-weight:750;color:#cba3f3}.whatsapp-setup-help ol{display:grid;gap:8px;margin:12px 0;padding-inline-start:22px;color:var(--muted,#b8bac8);line-height:1.8}.whatsapp-setup-help li::marker{color:#70e9cf}.whatsapp-setup-help p{margin:8px 0 0;line-height:1.8}
@media(max-width:900px){.guide-hero{grid-template-columns:1fr;gap:8px}.guide-flow{justify-content:flex-start;overflow:auto}.guide-phase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.whatsapp-owner-card{align-items:flex-start;flex-direction:column}.whatsapp-owner-actions{width:100%;justify-content:space-between}}
@media(max-width:600px){.guide-hero{padding:20px;border-radius:18px}.guide-flow{gap:7px;padding-inline:0}.guide-flow div{min-width:45px;font-size:.7rem}.guide-flow b{width:38px;height:38px;border-radius:13px}.guide-flow i{font-size:.9rem}.guide-role-tab{padding:9px 13px}.guide-role-intro{padding:15px;align-items:flex-start}.guide-phase-grid{grid-template-columns:1fr}.guide-phase{padding:17px}.guide-tip{padding:16px}.whatsapp-owner-card{padding:16px}.whatsapp-owner-copy{align-items:flex-start}.whatsapp-owner-actions .button{flex:1}}
.guide-owner-manual{margin:18px 0 4px}.guide-owner-heading{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:8px 2px 14px}.guide-owner-heading .eyebrow{margin:0 0 3px;color:#c99af4}.guide-owner-heading h3{margin:0;font-size:1.35rem}.guide-owner-heading p:last-child{margin:5px 0 0;color:var(--muted,#a5a7b8);line-height:1.7}.guide-owner-badge{flex:0 0 auto;padding:8px 12px;border:1px solid rgba(74,226,196,.25);border-radius:999px;color:#8df0d7;background:rgba(64,211,184,.08);font-size:.82rem}.guide-owner-grid{display:grid;gap:10px}.guide-owner-panel{overflow:hidden;border:1px solid rgba(142,137,174,.2);border-radius:17px;background:linear-gradient(140deg,rgba(27,29,43,.94),rgba(14,18,28,.96));box-shadow:inset 0 1px rgba(255,255,255,.025)}.guide-owner-panel[open]{border-color:rgba(190,120,255,.4);box-shadow:0 12px 34px rgba(2,5,12,.18),inset 0 1px rgba(255,255,255,.035)}.guide-owner-panel summary{display:grid;grid-template-columns:42px minmax(0,1fr) 24px;align-items:center;gap:13px;padding:15px 18px;cursor:pointer;list-style:none}.guide-owner-panel summary::-webkit-details-marker{display:none}.guide-owner-index{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(76,228,199,.28);border-radius:13px;color:#8cf4db;background:rgba(64,211,184,.09);font-weight:800;font-size:.82rem}.guide-owner-panel summary strong,.guide-owner-panel summary small{display:block}.guide-owner-panel summary strong{color:var(--text,#f5f3fa);font-size:1rem}.guide-owner-panel summary small{margin-top:4px;color:var(--muted,#a5a7b8);font-size:.79rem;line-height:1.65}.guide-owner-panel summary i{color:#c796f1;font-style:normal;transition:transform .18s ease}.guide-owner-panel[open] summary i{transform:rotate(180deg)}.guide-owner-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:0 16px 16px}.guide-owner-actions article{padding:12px 14px;border:1px solid rgba(154,158,181,.13);border-radius:13px;background:rgba(7,11,19,.34)}.guide-owner-actions article strong{display:block;color:#d8b6fa;font-size:.88rem}.guide-owner-actions article p{margin:5px 0 0;color:var(--muted,#b6b7c5);font-size:.82rem;line-height:1.8}.manual-whatsapp-consent{grid-column:1/-1;max-width:100%;padding:9px 11px;border:1px solid rgba(75,226,198,.19);border-radius:12px;background:rgba(64,211,184,.045)}.manual-whatsapp-consent span{display:grid;gap:2px}.manual-whatsapp-consent strong{color:var(--text,#f1f2f7);font-size:11px;font-weight:700}.manual-whatsapp-consent small{color:var(--muted,#a5a7b8);font-size:10px;line-height:1.6}
@media(max-width:700px){.guide-owner-heading{align-items:flex-start}.guide-owner-actions{grid-template-columns:1fr}.guide-owner-panel summary{grid-template-columns:36px minmax(0,1fr) 20px;gap:10px;padding:13px}.guide-owner-index{width:34px;height:34px;border-radius:11px}.guide-owner-actions{padding:0 11px 12px}}

/* مخطط صالة تفاعلي بتصميم زجاجي عملي للطاولات والفروع والمناطق. */
.table-heading-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; }
.table-view-switch { display:inline-flex; align-items:center; gap:4px; padding:4px; border:1px solid rgba(173,157,218,.2); border-radius:15px; background:rgba(12,15,24,.66); box-shadow:inset 0 1px rgba(255,255,255,.04); }
.table-view-switch button { min-height:37px; border:1px solid transparent; border-radius:11px; padding:0 12px; color:var(--muted); background:transparent; font-size:11px; font-weight:750; cursor:pointer; transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease; }
.table-view-switch button[aria-pressed="true"] { border-color:color-mix(in srgb,var(--tenant-accent) 38%,transparent); color:#dffef5; background:linear-gradient(125deg,color-mix(in srgb,var(--tenant-accent) 15%,rgba(25,30,42,.9)),color-mix(in srgb,var(--tenant-primary) 13%,rgba(25,30,42,.9))); box-shadow:0 0 18px color-mix(in srgb,var(--tenant-accent) 10%,transparent),inset 0 1px rgba(255,255,255,.06); }
.floor-manager-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:7px; }
.floor-manager-actions[hidden],.floor-map-shell[hidden],.table-cards-view[hidden],[data-floor-search-card][hidden],[data-floor-map-empty][hidden] { display:none !important; }
.floor-map-shell { --floor-accent:var(--tenant-accent,#4ce2c1); --floor-purple:var(--tenant-primary,#7c5cff); display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,.68fr); grid-template-areas:"head head" "summary summary" "stage details" "legend details"; gap:14px; position:relative; overflow:hidden; margin:2px 0 18px; border:1px solid color-mix(in srgb,var(--floor-purple) 28%,rgba(255,255,255,.1)); border-radius:24px; padding:clamp(13px,2vw,21px); background:radial-gradient(ellipse at 2% 100%,color-mix(in srgb,var(--floor-accent) 8%,transparent),transparent 38%),linear-gradient(145deg,rgba(25,28,42,.96),rgba(13,17,26,.98)); box-shadow:0 24px 65px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.05); backdrop-filter:blur(22px) saturate(135%); -webkit-backdrop-filter:blur(22px) saturate(135%); }
.floor-map-shell:before { position:absolute; inset:0; border-radius:inherit; background:linear-gradient(110deg,rgba(255,255,255,.025),transparent 32%,rgba(255,255,255,.012)); content:""; pointer-events:none; }
.floor-map-header { grid-area:head; display:flex; justify-content:space-between; align-items:center; gap:16px; position:relative; z-index:1; }
.floor-map-title { display:flex; align-items:center; gap:13px; min-width:0; }
.floor-map-icon { display:grid; place-items:center; flex:0 0 46px; width:46px; height:46px; border:1px solid color-mix(in srgb,var(--floor-accent) 32%,transparent); border-radius:15px; color:#92ffe8; background:linear-gradient(145deg,color-mix(in srgb,var(--floor-accent) 15%,#1b2530),rgba(26,29,45,.88)); box-shadow:0 0 22px color-mix(in srgb,var(--floor-accent) 10%,transparent),inset 0 1px rgba(255,255,255,.08); font-size:22px; }
.floor-map-title .eyebrow { margin:0 0 2px; color:#b49cff; font-size:10px; }
.floor-map-title h3 { margin:0 0 3px; font-size:17px; }
.floor-map-title small { display:block; color:var(--muted); font-size:10px; line-height:1.6; }
.floor-map-controls { display:flex; align-items:end; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.floor-control { display:grid; gap:4px; min-width:105px; color:var(--muted); font-size:9px; }
.floor-control select { min-height:37px; max-width:180px; border:1px solid rgba(176,164,214,.19); border-radius:11px; padding:0 10px; color:var(--text); background:rgba(8,12,19,.66); font-size:11px; }
.floor-branch-label { align-self:center; max-width:180px; padding:8px 11px; border:1px solid rgba(170,145,228,.17); border-radius:999px; color:#d8d2ee; background:rgba(11,14,22,.45); font-size:10px; }
.floor-fullscreen { flex:0 0 38px; width:38px; height:38px; font-size:20px; }
.floor-status-summary { grid-area:summary; display:flex; flex-wrap:wrap; align-items:center; gap:8px; position:relative; z-index:1; }
.floor-status-summary > span { display:inline-flex; align-items:center; gap:7px; min-height:32px; border:1px solid rgba(180,184,208,.12); border-radius:999px; padding:5px 11px; color:#c2c5d0; background:rgba(7,10,17,.38); font-size:10px; }
.floor-status-summary > span b { color:#f4f5fa; font-size:13px; font-variant-numeric:tabular-nums; }
.floor-status-summary .floor-status-total { margin-inline-start:auto; }
.floor-status-summary .floor-pending-count { border-color:rgba(255,194,104,.3); color:#ffd18e; background:rgba(119,76,19,.14); }
.floor-status-dot { width:8px; height:8px; border-radius:50%; background:#58e2bf; box-shadow:0 0 11px rgba(75,235,199,.55); }
.floor-status-dot.is-occupied { background:#f3b765; box-shadow:0 0 11px rgba(243,183,101,.42); }
.floor-plan-stage-wrap { grid-area:stage; min-width:0; }
.floor-plan-stage { position:relative; min-height:var(--floor-stage-height,490px); overflow:hidden; isolation:isolate; border:1px solid rgba(185,182,207,.2); border-radius:21px; background:radial-gradient(ellipse at 50% 46%,rgba(94,99,117,.17),transparent 56%),linear-gradient(145deg,#20242d,#191d25 50%,#171b22); box-shadow:inset 0 0 0 7px rgba(7,10,16,.42),inset 0 0 0 9px rgba(176,179,196,.15),inset 0 20px 50px rgba(0,0,0,.18),0 15px 38px rgba(0,0,0,.2); touch-action:pan-y; }
.floor-plan-stage:before { position:absolute; z-index:-1; inset:10px; border:1px solid rgba(203,205,218,.09); border-radius:14px; background-image:linear-gradient(rgba(205,210,220,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(205,210,220,.035) 1px,transparent 1px),radial-gradient(ellipse at 50% 20%,rgba(124,92,255,.08),transparent 48%); background-size:38px 38px,38px 38px,100% 100%; content:""; pointer-events:none; }
.floor-plan-stage:after { position:absolute; inset-inline-start:50%; bottom:9px; width:86px; height:5px; border-radius:99px; background:linear-gradient(90deg,transparent,var(--floor-accent),transparent); box-shadow:0 0 18px color-mix(in srgb,var(--floor-accent) 48%,transparent); content:""; transform:translateX(-50%); opacity:.62; pointer-events:none; }
.floor-map-label { position:absolute; z-index:1; display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(181,183,201,.13); border-radius:999px; padding:5px 9px; color:#aeb2c0; background:rgba(9,12,18,.76); box-shadow:0 5px 14px rgba(0,0,0,.16); font-size:9px; pointer-events:none; }
.floor-map-label-entry { inset-inline-start:50%; top:15px; transform:translateX(-50%); }
.floor-map-label-entry:before { content:"↓"; color:#86ebd3; font-size:13px; }
.floor-map-label-window { inset-inline-end:20px; bottom:15px; }
.floor-map-label-window:before { content:"▥"; color:#c4a4ff; font-size:13px; }
.floor-table-node { --floor-seat-distance:47px; position:absolute; z-index:2; left:clamp(76px,var(--floor-x),calc(100% - 76px)); top:clamp(72px,var(--floor-y),calc(100% - 72px)); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; width:128px; min-height:91px; overflow:visible; border:1px solid rgba(91,231,200,.55); border-radius:21px; padding:10px 8px; color:#e8fff9; background:linear-gradient(150deg,rgba(34,88,82,.88),rgba(18,40,43,.94)); box-shadow:0 10px 24px rgba(0,0,0,.25),0 0 18px rgba(57,226,192,.1),inset 0 1px rgba(255,255,255,.12); text-align:center; cursor:pointer; transform:translate(-50%,-50%); transition:left .16s ease,top .16s ease,transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease; }
.floor-table-node:after { position:absolute; z-index:-1; inset:6px; border:1px solid rgba(255,255,255,.07); border-radius:15px; content:""; pointer-events:none; }
.floor-table-node:hover { z-index:4; border-color:#91ffe6; box-shadow:0 14px 28px rgba(0,0,0,.31),0 0 22px rgba(69,236,199,.22),inset 0 1px rgba(255,255,255,.15); transform:translate(-50%,-53%); }
.floor-table-node:focus-visible { z-index:5; outline:2px solid #a5ffec; outline-offset:4px; }
.floor-table-node.is-available { border-color:rgba(83,230,196,.48); background:linear-gradient(145deg,rgba(36,99,88,.82),rgba(18,42,41,.96)); }
.floor-table-node.is-occupied { border-color:rgba(242,190,115,.62); color:#fff4df; background:linear-gradient(145deg,rgba(108,74,37,.88),rgba(46,34,26,.97)); box-shadow:0 10px 24px rgba(0,0,0,.27),0 0 19px rgba(241,179,90,.12),inset 0 1px rgba(255,255,255,.12); }
.floor-table-node.is-selected { z-index:3; outline:2px solid color-mix(in srgb,var(--floor-purple) 70%,white); outline-offset:3px; box-shadow:0 13px 28px rgba(0,0,0,.3),0 0 26px color-mix(in srgb,var(--floor-purple) 23%,transparent),0 0 20px color-mix(in srgb,var(--floor-accent) 13%,transparent),inset 0 1px rgba(255,255,255,.18); }
.floor-table-node.floor-shape-round { width:112px; min-height:112px; border-radius:50%; }
.floor-table-node.floor-shape-round:after { inset:7px; border-radius:50%; }
.floor-table-node.floor-shape-square { width:110px; min-height:102px; border-radius:20px; }
.floor-table-node.floor-shape-rectangle { --floor-seat-distance:59px; left:clamp(84px,var(--floor-x),calc(100% - 84px)); width:154px; min-height:88px; border-radius:18px; }
.floor-table-node > strong { max-width:100%; overflow:hidden; color:inherit; font-size:11px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.floor-table-topline { display:flex; align-items:center; gap:6px; color:#fff; font-size:13px; font-weight:800; line-height:1.2; }
.floor-table-topline i { width:7px; height:7px; border-radius:50%; background:#7af0d5; box-shadow:0 0 10px currentColor; }
.floor-table-node.is-occupied .floor-table-topline i { color:#ffc674; background:#ffc674; }
.floor-table-node > small { max-width:100%; overflow:hidden; color:rgba(232,238,245,.68); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.floor-table-meta { max-width:100%; overflow:hidden; color:rgba(230,236,245,.77); font-size:8px; font-variant-numeric:tabular-nums; text-overflow:ellipsis; white-space:nowrap; }
.floor-table-seats { position:absolute; inset:0; overflow:visible; pointer-events:none; }
.floor-seat { position:absolute; top:50%; left:50%; width:15px; height:15px; border:1px solid rgba(203,211,228,.27); border-radius:6px; background:linear-gradient(145deg,#515868,#333947); box-shadow:0 3px 6px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.14); transform:rotate(var(--seat-angle)) translateY(calc(0px - var(--floor-seat-distance))) rotate(calc(0deg - var(--seat-angle))); }
.floor-shape-round .floor-seat { border-radius:50%; }
.floor-shape-rectangle .floor-seat { width:17px; height:14px; }
.is-draggable { cursor:grab; user-select:none; touch-action:none; }
.is-draggable:active { cursor:grabbing; }
.floor-map-empty { position:absolute; z-index:1; inset:50% auto auto 50%; display:grid; justify-items:center; gap:7px; width:min(310px,calc(100% - 32px)); border:1px dashed rgba(193,182,224,.25); border-radius:19px; padding:20px; color:var(--muted); background:rgba(11,14,22,.74); text-align:center; transform:translate(-50%,-50%); }
.floor-map-empty > span { color:#b99cff; font-size:24px; }
.floor-map-empty strong { color:#eceaf5; font-size:12px; }
.floor-map-empty small { font-size:10px; line-height:1.7; }
.floor-map-legend { grid-area:legend; display:flex; flex-wrap:wrap; align-items:center; gap:12px; min-width:0; color:#c5c7d1; font-size:9px; }
.floor-map-legend > span { display:inline-flex; align-items:center; gap:6px; }
.floor-map-legend small { flex:1 1 100%; color:var(--muted); line-height:1.65; }
.floor-table-details { grid-area:details; align-self:stretch; min-width:0; border:1px solid rgba(173,154,223,.2); border-radius:19px; padding:14px; background:linear-gradient(155deg,rgba(26,28,44,.79),rgba(13,17,27,.76)); box-shadow:inset 0 1px rgba(255,255,255,.04); }
.floor-selected-table { display:grid; align-content:start; gap:14px; height:100%; }
.floor-selected-heading { display:flex; align-items:start; justify-content:space-between; gap:10px; padding-bottom:12px; border-bottom:1px solid rgba(185,185,210,.12); }
.floor-selected-heading small { color:var(--muted); font-size:9px; }
.floor-selected-heading h3 { margin:4px 0 0; font-size:18px; }
.floor-selected-state { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; border:1px solid rgba(79,229,194,.27); border-radius:999px; padding:6px 9px; color:#8df3db; background:rgba(65,211,180,.08); font-size:9px; }
.floor-selected-state i { width:6px; height:6px; border-radius:50%; background:#63e8c7; box-shadow:0 0 9px currentColor; }
.floor-selected-state.is-occupied { border-color:rgba(240,184,107,.26); color:#f3c884; background:rgba(221,163,82,.08); }
.floor-selected-state.is-occupied i { background:#f3bd70; }
.floor-operational-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.floor-operational-facts > span { display:grid; gap:4px; min-width:0; border:1px solid rgba(179,186,207,.1); border-radius:12px; padding:9px; background:rgba(8,12,19,.4); }
.floor-operational-facts small { color:var(--muted); font-size:8px; }
.floor-operational-facts strong { overflow:hidden; color:#e8e9f1; font-size:10px; text-overflow:ellipsis; }
.floor-operational-facts strong.is-available { color:#80edcf; }
.floor-operational-facts strong.is-occupied { color:#f5c681; }
.floor-selected-actions { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:auto; }
.floor-selected-actions .button { flex:1 1 108px; min-height:38px; padding-inline:9px; font-size:9px; }
.floor-selection-empty { display:grid; justify-items:center; gap:7px; padding:32px 10px; text-align:center; }
.floor-selection-empty > span { color:#b99cff; font-size:27px; }
.floor-selection-empty strong { color:#e9e7f1; font-size:12px; }
.floor-selection-empty small { color:var(--muted); font-size:10px; line-height:1.6; }
.floor-edit-fields { display:grid; gap:10px; }
.floor-edit-fields label { display:grid; gap:5px; color:#c7c6d3; font-size:9px; }
.floor-edit-fields select,.floor-edit-fields input { width:100%; min-width:0; min-height:37px; border:1px solid rgba(179,166,218,.18); border-radius:10px; padding:0 10px; color:var(--text); background:rgba(7,10,17,.6); font-size:10px; }
.floor-edit-fields .floor-edit-tip { color:var(--muted); font-size:9px; line-height:1.7; }
.floor-map-shell:fullscreen { grid-template-rows:auto auto minmax(0,1fr) auto; grid-template-columns:minmax(0,1fr) 300px; grid-template-areas:"head head" "summary summary" "stage details" "legend details"; width:100vw; height:100vh; overflow:auto; border:0; border-radius:0; padding:20px; background:#0d1119; }
.floor-map-shell:fullscreen .floor-plan-stage { min-height:0; height:100%; }
.floor-map-shell.is-expanded { position:fixed; z-index:9999; inset:10px; grid-template-columns:minmax(0,1.55fr) minmax(260px,.68fr); overflow:auto; margin:0; box-shadow:0 30px 100px rgba(0,0,0,.7); }
.floor-map-shell.is-expanded .floor-plan-stage { min-height:65vh; }
@media (max-width:1000px) { .section-heading:has(.table-heading-actions) { align-items:flex-start; flex-direction:column; } .table-heading-actions { width:100%; justify-content:flex-start; } .floor-map-shell { grid-template-columns:minmax(0,1.25fr) minmax(230px,.75fr); } .floor-plan-stage { min-height:max(440px,var(--floor-stage-height,490px)); } }
@media (max-width:760px) { .floor-map-shell { grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "summary" "stage" "legend" "details"; gap:11px; border-radius:19px; padding:12px; } .floor-map-header { align-items:flex-start; flex-direction:column; } .floor-map-controls { width:100%; justify-content:flex-start; align-items:end; } .floor-control { flex:1 1 110px; } .floor-control select { width:100%; max-width:none; } .floor-status-summary { gap:6px; } .floor-status-summary > span { min-height:29px; padding:4px 8px; font-size:9px; } .floor-status-summary .floor-status-total { margin-inline-start:0; } .floor-plan-stage { min-height:max(490px,var(--floor-stage-height,490px)); } .floor-table-node { width:108px; min-height:80px; border-radius:17px; } .floor-table-node.floor-shape-round { width:96px; min-height:96px; } .floor-table-node.floor-shape-square { width:96px; min-height:90px; } .floor-table-node.floor-shape-rectangle { left:clamp(72px,var(--floor-x),calc(100% - 72px)); width:130px; min-height:78px; --floor-seat-distance:51px; } .floor-seat { width:12px; height:12px; } .floor-table-node.floor-shape-round .floor-seat { width:12px; height:12px; } .floor-table-topline { font-size:11px; } .floor-table-node > strong { font-size:9px; } .floor-table-node > small,.floor-table-meta { font-size:7px; } .floor-table-node { left:clamp(64px,var(--floor-x),calc(100% - 64px)); } .floor-table-node.floor-shape-rectangle { left:clamp(72px,var(--floor-x),calc(100% - 72px)); } .floor-selected-actions .button { flex:1 1 calc(50% - 7px); } .floor-map-shell:fullscreen { grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "summary" "stage" "legend" "details"; padding:12px; } .floor-map-shell:fullscreen .floor-plan-stage { min-height:55vh; height:auto; } }
@media (max-width:430px) { .table-heading-actions { align-items:stretch; } .table-view-switch { flex:1 1 100%; } .table-view-switch button { flex:1; } .floor-manager-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; } .floor-manager-actions button { min-height:36px; padding-inline:7px; font-size:9px; } .floor-manager-actions [data-floor-save] { grid-column:1/-1; } .floor-plan-stage { min-height:max(460px,var(--floor-stage-height,460px)); } .floor-table-node { width:92px; min-height:72px; padding:7px 5px; } .floor-table-node.floor-shape-round { width:84px; min-height:84px; } .floor-table-node.floor-shape-square { width:84px; min-height:80px; } .floor-table-node.floor-shape-rectangle { left:clamp(64px,var(--floor-x),calc(100% - 64px)); width:112px; min-height:70px; --floor-seat-distance:44px; } .floor-table-node { left:clamp(55px,var(--floor-x),calc(100% - 55px)); } .floor-table-node.floor-shape-round,.floor-table-node.floor-shape-square { left:clamp(52px,var(--floor-x),calc(100% - 52px)); } .floor-table-node.floor-shape-rectangle { left:clamp(62px,var(--floor-x),calc(100% - 62px)); } .floor-table-node > strong { font-size:8px; } .floor-table-topline { font-size:10px; } .floor-seat { width:10px; height:10px; } }
@media (prefers-reduced-motion:reduce) { .floor-table-node,.table-view-switch button { transition:none; } }

/* تحسين تحرير خريطة الصالة وإضافة منظور ثلاثي الأبعاد خفيف بلا مكتبات خارجية. */
.floor-view-toggle { display:inline-flex; align-items:center; gap:3px; border:1px solid rgba(178,163,220,.22); border-radius:12px; padding:3px; background:rgba(8,11,18,.72); }
.floor-view-toggle button { min-width:38px; min-height:32px; border:0; border-radius:9px; padding:0 10px; color:#b7b4c4; background:transparent; font-size:10px; font-weight:800; cursor:pointer; }
.floor-view-toggle button[aria-pressed="true"] { color:#10151b; background:linear-gradient(135deg,#72f0d2,#43cfb5); box-shadow:0 4px 12px rgba(69,222,190,.2); }
.floor-table-node.is-draggable { touch-action:none; -webkit-user-select:none; user-select:none; }
.floor-plan-stage.is-editing { touch-action:none; overscroll-behavior:contain; }
.floor-drag-grip { display:none; position:absolute; z-index:6; inset-block-start:6px; inset-inline-end:7px; width:22px; height:22px; place-items:center; border:1px solid rgba(193,255,241,.24); border-radius:8px; color:#cffff5; background:rgba(7,15,20,.65); font-size:14px; line-height:1; pointer-events:none; }
.floor-table-node.is-draggable .floor-drag-grip { display:grid; }
.floor-table-node.is-dragging { z-index:9!important; cursor:grabbing!important; transition:none!important; box-shadow:0 18px 35px rgba(0,0,0,.42),0 0 30px rgba(94,243,211,.24)!important; }
.floor-seat-stepper { display:grid; grid-template-columns:38px minmax(50px,1fr) 38px; align-items:center; gap:8px; min-height:44px; border:1px solid rgba(183,169,226,.18); border-radius:13px; padding:4px; background:rgba(7,10,17,.55); }
.floor-seat-stepper button { display:grid; place-items:center; width:36px; height:34px; border:1px solid rgba(179,164,223,.2); border-radius:10px; color:#e8e5f3; background:linear-gradient(145deg,rgba(54,55,76,.9),rgba(27,30,43,.92)); font-size:20px; font-weight:800; cursor:pointer; }
.floor-seat-stepper button:disabled { opacity:.42; cursor:not-allowed; }
.floor-seat-stepper output { color:#8ff3dc; font-size:17px; font-weight:850; text-align:center; font-variant-numeric:tabular-nums; }
.floor-edit-fields > label > small { color:var(--muted); font-size:9px; }
.floor-plan-stage.is-3d { perspective:1100px; background:radial-gradient(ellipse at 50% 40%,rgba(99,81,59,.25),transparent 57%),repeating-linear-gradient(90deg,rgba(215,179,126,.055) 0 1px,transparent 1px 72px),repeating-linear-gradient(0deg,rgba(242,224,195,.035) 0 1px,transparent 1px 54px),linear-gradient(145deg,#302a26,#1b1d25 56%,#151923); }
.floor-plan-stage.is-3d:before { background-image:linear-gradient(rgba(221,199,164,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(221,199,164,.045) 1px,transparent 1px),radial-gradient(ellipse at 50% 20%,rgba(124,92,255,.1),transparent 48%); background-size:54px 54px,54px 54px,100% 100%; }
.floor-plan-stage.is-3d .floor-table-node { transform:translate(-50%,-55%) rotateX(13deg); transform-style:preserve-3d; box-shadow:0 8px 0 rgba(8,17,18,.78),0 17px 25px rgba(0,0,0,.4),inset 0 2px rgba(255,255,255,.2); }
.floor-plan-stage.is-3d .floor-table-node:after { transform:translateZ(7px); box-shadow:inset 0 1px rgba(255,255,255,.08); }
.floor-plan-stage.is-3d .floor-table-node:hover { transform:translate(-50%,-58%) rotateX(13deg); }
.floor-plan-stage.is-3d .floor-table-node.is-dragging { transform:translate(-50%,-55%) rotateX(13deg); }
.floor-plan-stage.is-3d .floor-seat { border-color:rgba(231,226,215,.38); background:linear-gradient(145deg,#686d78,#303640); box-shadow:0 5px 5px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.24); transform:rotate(var(--seat-angle)) translateY(calc(0px - var(--floor-seat-distance))) translateZ(12px) rotate(calc(0deg - var(--seat-angle))); }
.floor-plan-stage.is-3d .floor-table-node.is-occupied { box-shadow:0 8px 0 rgba(39,28,18,.86),0 17px 25px rgba(0,0,0,.4),inset 0 2px rgba(255,255,255,.2); }
@media (max-width:760px) { .floor-map-controls { align-items:center; } .floor-view-toggle { flex:0 0 auto; } .floor-view-toggle button { min-width:34px; min-height:32px; } .floor-seat-stepper { grid-template-columns:44px minmax(50px,1fr) 44px; min-height:50px; } .floor-seat-stepper button { width:42px; height:40px; } .floor-plan-stage.is-3d .floor-table-node { transform:translate(-50%,-55%) rotateX(10deg); } }
@media (prefers-reduced-motion:reduce) { .floor-view-toggle button,.floor-table-node.is-dragging { transition:none; } }
.table-bulk-toolbar[hidden] { display:none !important; }

/* لمسات زجاجية ثلاثية الأبعاد للطاولة وخلفية الصالة. */
.floor-plan-stage.is-3d {
  perspective: 1500px;
  background:
    radial-gradient(ellipse at 15% 12%,rgba(113,91,255,.2),transparent 32%),
    radial-gradient(ellipse at 88% 24%,rgba(39,221,202,.14),transparent 34%),
    radial-gradient(ellipse at 48% 100%,rgba(226,119,255,.1),transparent 42%),
    linear-gradient(145deg,#121622 0%,#171a28 48%,#10171c 100%);
  background-size: 150% 150%;
  animation: floor-neon-drift 18s ease-in-out infinite alternate;
}
.floor-plan-stage.is-3d:before {
  z-index: 0;
  inset: 5% 3.2% 7%;
  border: 1px solid rgba(194,215,239,.16);
  border-radius: 22px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.045),transparent 28%,rgba(89,75,154,.035) 72%,rgba(91,228,206,.035)),
    repeating-linear-gradient(90deg,rgba(195,211,235,.052) 0 1px,transparent 1px 68px),
    repeating-linear-gradient(0deg,rgba(195,211,235,.047) 0 1px,transparent 1px 54px),
    radial-gradient(ellipse at 50% 42%,rgba(114,92,192,.1),transparent 65%);
  background-size: auto,68px 68px,68px 68px,auto;
  box-shadow: inset 0 0 42px rgba(5,8,17,.42),inset 0 1px rgba(255,255,255,.07),0 0 28px rgba(124,99,255,.06);
  transform: perspective(1300px) rotateX(7deg) scale(1.015);
  transform-origin: 50% 52%;
}
.floor-plan-stage.is-3d:after {
  z-index: 0;
  bottom: 4%;
  width: 34%;
  height: 2px;
  background: linear-gradient(90deg,transparent,rgba(101,246,220,.78),rgba(171,126,255,.76),transparent);
  box-shadow: 0 0 14px rgba(92,235,214,.45),0 0 30px rgba(154,111,255,.22);
  animation: floor-horizon-glow 4s ease-in-out infinite alternate;
}
.floor-plan-stage.is-3d .floor-map-label {
  border-color: rgba(197,212,241,.2);
  color: #e1e6f5;
  background: rgba(14,18,31,.68);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 8px 20px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.1);
}
.floor-plan-stage.is-3d .floor-table-node {
  border: 1px solid rgba(161,255,235,.56);
  background:
    linear-gradient(150deg,rgba(39,126,111,.72),rgba(15,46,51,.82) 52%,rgba(20,34,48,.89)),
    rgba(25,69,68,.74);
  backdrop-filter: blur(14px) saturate(1.55);
  box-shadow:
    0 8px 0 rgba(5,17,24,.78),
    0 13px 22px rgba(0,0,0,.38),
    0 0 24px rgba(46,230,202,.13),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -9px 18px rgba(3,15,22,.22);
  transform: translate(-50%,-55%) rotateX(16deg) rotateZ(-1deg);
  transform-style: preserve-3d;
}
.floor-plan-stage.is-3d .floor-table-node:after {
  inset: 4px;
  border: 1px solid rgba(229,255,251,.13);
  border-radius: inherit;
  background: linear-gradient(135deg,rgba(244,255,255,.12),transparent 28%,transparent 72%,rgba(170,137,255,.07));
  box-shadow: inset 0 1px rgba(255,255,255,.16),inset 0 -10px 18px rgba(7,20,28,.12);
  transform: translateZ(8px);
}
.floor-plan-stage.is-3d .floor-table-node:hover {
  border-color: rgba(190,255,245,.92);
  box-shadow: 0 11px 0 rgba(5,17,24,.78),0 19px 32px rgba(0,0,0,.43),0 0 32px rgba(64,244,216,.26),inset 0 1px 0 rgba(255,255,255,.38);
  transform: translate(-50%,-59%) rotateX(18deg) rotateZ(-1deg) scale(1.035);
}
.floor-plan-stage.is-3d .floor-table-node.is-selected {
  border-color: rgba(185,149,255,.98);
  outline: 1px solid rgba(96,242,222,.7);
  outline-offset: 5px;
  animation: floor-table-neon 3.2s ease-in-out infinite;
}
.floor-plan-stage.is-3d .floor-table-node.is-occupied {
  border-color: rgba(255,207,133,.72);
  background: linear-gradient(150deg,rgba(133,88,40,.78),rgba(65,43,34,.86) 58%,rgba(38,32,43,.91));
  box-shadow: 0 8px 0 rgba(31,21,16,.8),0 14px 24px rgba(0,0,0,.38),0 0 22px rgba(255,183,84,.12),inset 0 1px rgba(255,255,255,.25);
}
.floor-plan-stage.is-3d .floor-table-node.is-occupied.is-selected {
  outline-color: rgba(255,201,126,.72);
  animation-name: floor-table-neon-warm;
}
.floor-plan-stage.is-3d .floor-table-node.is-dragging,
.floor-plan-stage.is-3d .floor-table-node.is-dragging:hover {
  transform: translate(-50%,-55%) rotateX(16deg) rotateZ(-1deg) scale(1.06);
  box-shadow: 0 12px 0 rgba(5,17,24,.72),0 25px 38px rgba(0,0,0,.48),0 0 38px rgba(76,244,221,.3),inset 0 1px rgba(255,255,255,.4);
}
.floor-plan-stage.is-3d .floor-seat {
  width: 17px;
  height: 19px;
  border: 1px solid rgba(222,238,255,.46);
  border-radius: 7px;
  background: linear-gradient(145deg,rgba(227,239,255,.68),rgba(87,103,128,.74) 42%,rgba(37,46,64,.94));
  backdrop-filter: blur(8px);
  box-shadow: 0 5px 0 rgba(13,20,34,.75),0 8px 12px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.56),inset 0 -3px 5px rgba(8,13,23,.3);
  transform: rotate(var(--seat-angle)) translateY(calc(0px - var(--floor-seat-distance))) translateZ(15px) rotate(calc(0deg - var(--seat-angle)));
}
.floor-plan-stage.is-3d .floor-shape-round .floor-seat { border-radius: 50%; }
.floor-plan-stage.is-3d .floor-table-topline i { box-shadow: 0 0 8px #67ffe0,0 0 18px rgba(87,255,221,.72); }
.floor-plan-stage.is-3d .is-occupied .floor-table-topline i { box-shadow: 0 0 8px #ffc674,0 0 18px rgba(255,186,94,.65); }
@keyframes floor-neon-drift { from { background-position: 0% 0%; } to { background-position: 100% 70%; } }
@keyframes floor-horizon-glow { from { opacity: .46; filter: brightness(.8); } to { opacity: .9; filter: brightness(1.35); } }
@keyframes floor-table-neon { 0%,100% { box-shadow: 0 8px 0 rgba(5,17,24,.78),0 13px 22px rgba(0,0,0,.38),0 0 20px rgba(46,230,202,.14),inset 0 1px rgba(255,255,255,.34); } 50% { box-shadow: 0 8px 0 rgba(5,17,24,.78),0 14px 25px rgba(0,0,0,.4),0 0 34px rgba(133,103,255,.32),0 0 20px rgba(46,230,202,.18),inset 0 1px rgba(255,255,255,.38); } }
@keyframes floor-table-neon-warm { 0%,100% { box-shadow: 0 8px 0 rgba(31,21,16,.8),0 14px 24px rgba(0,0,0,.38),0 0 19px rgba(255,183,84,.14),inset 0 1px rgba(255,255,255,.25); } 50% { box-shadow: 0 8px 0 rgba(31,21,16,.8),0 14px 24px rgba(0,0,0,.38),0 0 31px rgba(255,183,84,.32),inset 0 1px rgba(255,255,255,.32); } }
@media (max-width:760px) {
  .floor-plan-stage.is-3d:before { inset: 4% 2.5% 6%; transform: perspective(1000px) rotateX(5deg) scale(1.02); }
  .floor-plan-stage.is-3d .floor-table-node { transform: translate(-50%,-54%) rotateX(12deg); }
  .floor-plan-stage.is-3d .floor-table-node:hover { transform: translate(-50%,-57%) rotateX(14deg) scale(1.025); }
  .floor-plan-stage.is-3d .floor-table-node.is-dragging,
  .floor-plan-stage.is-3d .floor-table-node.is-dragging:hover { transform: translate(-50%,-54%) rotateX(12deg) scale(1.04); }
  .floor-plan-stage.is-3d .floor-seat { width: 14px; height: 16px; }
}
@media (prefers-reduced-motion:reduce) {
  .floor-plan-stage.is-3d,
  .floor-plan-stage.is-3d:after,
  .floor-plan-stage.is-3d .floor-table-node.is-selected { animation: none; }
}

/* شريط تنقّل بصري للتبديل بين الصالات ومناطق الجلوس. */
.floor-map-shell { grid-template-areas:"head head" "areas areas" "summary summary" "stage details" "legend details"; }
.floor-map-shell:fullscreen,
.floor-map-shell.is-expanded { grid-template-areas:"head head" "areas areas" "summary summary" "stage details" "legend details"; }
.floor-area-nav { grid-area:areas; display:flex; align-items:center; gap:12px; min-width:0; border:1px solid rgba(180,178,218,.16); border-radius:17px; padding:9px 11px; background:linear-gradient(115deg,rgba(27,31,47,.88),rgba(15,23,34,.82)); box-shadow:inset 0 1px rgba(255,255,255,.06),0 8px 25px rgba(0,0,0,.14); backdrop-filter:blur(16px) saturate(1.3); }
.floor-area-nav-heading { display:flex; align-items:center; gap:9px; flex:0 0 116px; min-width:0; padding-inline:3px 9px; color:#e9e7f4; }
.floor-area-nav-heading > div { display:grid; gap:3px; min-width:0; }
.floor-area-nav-heading strong { font-size:11px; font-weight:800; }
.floor-area-nav-heading small { overflow:hidden; color:var(--muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.floor-area-nav-mark { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border:1px solid rgba(121,245,220,.24); border-radius:11px; color:#8bf5dc; background:linear-gradient(145deg,rgba(68,219,192,.16),rgba(115,89,199,.14)); font-size:17px; }
.floor-area-nav-items { display:flex; align-items:stretch; gap:8px; min-width:0; flex:1; overflow-x:auto; overscroll-behavior-inline:contain; padding:2px 1px 5px; scrollbar-width:thin; scrollbar-color:rgba(158,129,240,.5) transparent; scroll-snap-type:x proximity; }
.floor-area-nav-item { position:relative; display:flex; align-items:center; gap:9px; flex:0 0 auto; min-width:148px; min-height:52px; overflow:hidden; border:1px solid rgba(177,183,207,.14); border-radius:14px; padding:7px 10px; color:#c9cbd8; background:linear-gradient(145deg,rgba(29,34,48,.86),rgba(17,22,33,.9)); text-align:start; cursor:pointer; scroll-snap-align:start; transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease,color .2s ease; }
.floor-area-nav-item:after { position:absolute; inset-inline:14px; bottom:0; height:2px; border-radius:99px; background:linear-gradient(90deg,transparent,#62efd2,#a98aff,transparent); content:""; opacity:0; transform:scaleX(.35); transition:opacity .2s ease,transform .2s ease; }
.floor-area-nav-item:hover { border-color:rgba(125,240,220,.4); color:#fff; transform:translateY(-2px); }
.floor-area-nav-item:focus-visible { outline:2px solid rgba(124,245,220,.8); outline-offset:2px; }
.floor-area-nav-item.is-active { border-color:rgba(94,240,211,.55); color:#f5fffd; background:linear-gradient(125deg,rgba(42,124,113,.37),rgba(83,65,139,.28) 58%,rgba(24,35,48,.92)); box-shadow:0 0 20px rgba(66,227,201,.11),inset 0 1px rgba(255,255,255,.13); }
.floor-area-nav-item.is-active:after { opacity:1; transform:scaleX(1); }
.floor-area-nav-icon { display:grid; place-items:center; width:36px; height:36px; flex:0 0 36px; border:1px solid rgba(190,190,218,.16); border-radius:11px; color:#c1afff; background:rgba(119,93,210,.12); box-shadow:inset 0 1px rgba(255,255,255,.08); transition:color .2s ease,background .2s ease,box-shadow .2s ease; }
.floor-area-nav-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.65; }
.floor-area-nav-item.is-active .floor-area-nav-icon { border-color:rgba(117,247,222,.32); color:#81f5dc; background:linear-gradient(145deg,rgba(74,228,199,.2),rgba(118,94,215,.2)); box-shadow:0 0 17px rgba(91,239,215,.15),inset 0 1px rgba(255,255,255,.13); }
.floor-area-nav-copy { display:grid; gap:4px; min-width:0; flex:1; }
.floor-area-nav-copy strong { overflow:hidden; color:inherit; font-size:10px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.floor-area-nav-copy small { color:var(--muted); font-size:8px; }
.floor-area-nav-counts { display:flex; gap:4px; flex:0 0 auto; }
.floor-area-nav-counts i { display:grid; place-items:center; min-width:20px; height:20px; border:1px solid rgba(90,232,198,.18); border-radius:7px; padding:0 4px; color:#7cebd0; background:rgba(57,206,176,.1); font-size:8px; font-style:normal; font-variant-numeric:tabular-nums; }
.floor-area-nav-counts i.is-busy { border-color:rgba(245,188,111,.2); color:#f3c37e; background:rgba(222,162,76,.1); }
.floor-area-nav-item.is-active .floor-area-nav-counts i.is-free { color:#a0ffe9; }
.floor-plan-stage.is-area-entering .floor-table-node { animation:floor-area-enter .34s cubic-bezier(.2,.75,.25,1) both; animation-delay:calc(var(--floor-stagger,0) * 12ms); }
@keyframes floor-area-enter { from { opacity:0; filter:blur(5px); } to { opacity:1; filter:blur(0); } }
@media (max-width:760px) {
  .floor-map-shell,.floor-map-shell:fullscreen { grid-template-areas:"head" "areas" "summary" "stage" "legend" "details"; }
  .floor-area-nav { align-items:flex-start; flex-direction:column; gap:7px; padding:9px; }
  .floor-area-nav-heading { flex-basis:auto; }
  .floor-area-nav-items { width:100%; flex:0 0 auto; }
  .floor-area-nav-item { min-width:138px; min-height:50px; }
}
@media (max-width:430px) {
  .floor-area-nav-item { min-width:128px; gap:7px; padding:6px 8px; }
  .floor-area-nav-icon { width:32px; height:32px; flex-basis:32px; }
  .floor-area-nav-icon svg { width:18px; height:18px; }
}
@media (prefers-reduced-motion:reduce) {
  .floor-area-nav-item,.floor-area-nav-item:after,.floor-area-nav-icon { transition:none; }
  .floor-plan-stage.is-area-entering .floor-table-node { animation:none; }
}

/* توزيع ارتفاع ملء الشاشة على صف المخطط نفسه لمنع الفراغ وتزاحم الطاولات. */
.floor-map-shell:fullscreen,
.floor-map-shell.is-expanded {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}
.floor-map-shell:fullscreen .floor-plan-stage,
.floor-map-shell.is-expanded .floor-plan-stage {
  min-height: 0;
  height: 100%;
}
@media (max-width:760px) {
  .floor-map-shell:fullscreen,
  .floor-map-shell.is-expanded {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "areas" "summary" "stage" "legend" "details";
    grid-template-rows: auto auto auto minmax(280px, 1fr) auto auto;
  }
  .floor-map-shell:fullscreen .floor-plan-stage,
  .floor-map-shell.is-expanded .floor-plan-stage {
    min-height: 0;
    height: 100%;
  }
}

/* ملاحظات التحضير للفريق فقط؛ لا تُعرض ضمن الفاتورة. */
.order-add-note, .manual-line-note { display: grid; gap: 8px; border: 1px solid rgba(109, 232, 203, .14); border-radius: 15px; padding: 10px 12px; color: var(--muted); background: linear-gradient(145deg, rgba(76, 226, 193, .055), rgba(255, 255, 255, .018)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035); font-size: 10px; font-weight: 650; }
.prep-note-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #c8f5e9; font-size: 11px; }
.prep-note-heading::before { content: "☕"; flex: 0 0 auto; color: #78e8ce; font-size: 14px; }
.prep-note-private { border: 1px solid rgba(109, 232, 203, .12); border-radius: 999px; padding: 3px 7px; color: #94cfc0; background: rgba(76, 226, 193, .055); font-size: 9px; font-weight: 550; }
.order-add-note textarea, .manual-line-note textarea { width: 100%; min-height: 48px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px; padding: 9px 11px; color: var(--text); background: rgba(7, 9, 14, .48); font: inherit; font-size: 11px; line-height: 1.55; resize: vertical; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.order-add-note textarea:focus, .manual-line-note textarea:focus { outline: 0; border-color: rgba(109, 232, 203, .55); background: rgba(7, 9, 14, .68); box-shadow: 0 0 0 3px rgba(76, 226, 193, .07); }
.order-add-note textarea::placeholder, .manual-line-note textarea::placeholder { color: #858c9b; opacity: 1; }
.manual-cart-line { align-items: flex-start; }
.manual-cart-line > div:first-child { flex: 1 1 auto; }
.kds-customer-note { display: block; border-inline-start: 2px solid rgba(109, 232, 203, .55); border-radius: 0 8px 8px 0; padding: 7px 10px; color: #b8f1e1; background: linear-gradient(90deg, rgba(76, 226, 193, .09), rgba(76, 226, 193, .025)); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }

/* عرض قائمة الهاتف كمسار أيقونات ضيق عندما يطويها JavaScript تلقائياً. */
@media (max-width: 900px) {
  body.sidebar-collapsed .sidebar {
    top: max(10px, env(safe-area-inset-top)); right: 8px; left: auto; bottom: max(10px, env(safe-area-inset-bottom));
    width: 56px; min-height: 0; padding: 58px 5px 12px; overflow-x: hidden; overflow-y: auto;
    border: 1px solid rgba(160, 151, 226, .22); border-radius: 21px;
    background: linear-gradient(165deg, rgba(27, 29, 46, .97), rgba(12, 17, 27, .98));
    box-shadow: 0 16px 44px rgba(3, 5, 13, .38), inset 0 1px rgba(255,255,255,.07), 0 0 24px rgba(146, 98, 255, .08);
    transform: translateX(0); pointer-events: auto; visibility: visible; transition: transform .24s ease, visibility 0s; scrollbar-width: thin;
  }
  body.sidebar-collapsed .sidebar-brand, body.sidebar-collapsed .branch-picker, body.sidebar-collapsed .sidebar-credit, body.sidebar-collapsed .sidebar-bottom { display: none; }
  body.sidebar-collapsed .primary-nav { display: grid; flex: 1 0 auto; gap: 5px; margin-top: 0; overflow: visible; padding: 0; }
  body.sidebar-collapsed .nav-group { gap: 4px; }
  body.sidebar-collapsed .nav-group-label { display: none; }
  body.sidebar-collapsed .nav-group + .nav-group { margin-top: 4px; border-top-color: rgba(181, 171, 223, .1); padding-top: 5px; }
  body.sidebar-collapsed .nav-group-links { gap: 5px; }
  body.sidebar-collapsed .nav-link { position: relative; width: 44px; min-width: 44px; min-height: 44px; justify-content: center; gap: 0; border: 1px solid transparent; border-radius: 14px; padding: 0; font-size: 0; background: rgba(255,255,255,.025); }
  body.sidebar-collapsed .nav-link > .nav-icon { width: 22px; height: 22px; flex: 0 0 22px; color: #aeb5cb; }
  body.sidebar-collapsed .nav-link > .nav-icon svg { width: 21px; height: 21px; }
  body.sidebar-collapsed .nav-link:hover, body.sidebar-collapsed .nav-link:focus-visible { border-color: rgba(91, 230, 203, .28); background: rgba(76, 226, 193, .09); }
  body.sidebar-collapsed .nav-link.is-active { border-color: rgba(179, 154, 255, .4); background: linear-gradient(145deg, rgba(120, 94, 205, .27), rgba(45, 49, 73, .8)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 5px 16px rgba(83, 60, 155, .14); }
  body.sidebar-collapsed .nav-link.is-active > .nav-icon { color: #c8bbff; }
  body.sidebar-collapsed .nav-link > b, body.sidebar-collapsed .nav-link > .nav-badges { position: absolute; top: -4px; inset-inline-start: -3px; z-index: 1; margin: 0; }
  body.sidebar-collapsed .nav-link > b, body.sidebar-collapsed .nav-link .nav-badges b { min-width: 16px; min-height: 16px; padding: 1px 3px; font-size: 8px; line-height: 1.5; }
  body.sidebar-collapsed .nav-link > .nav-badges { display: flex; gap: 2px; }
  body.sidebar-collapsed .sidebar-toggle { top: max(16px, env(safe-area-inset-top)); right: 18px; left: auto; width: 36px; height: 36px; border-color: rgba(180, 165, 255, .23); border-radius: 13px; color: #c9c0ff; background: linear-gradient(145deg, rgba(39, 42, 62, .98), rgba(21, 24, 38, .98)); box-shadow: 0 6px 18px rgba(4, 6, 15, .28); }
  body.sidebar-collapsed .main-panel { width: auto; margin-right: 66px !important; margin-left: 0 !important; }
  html[dir="ltr"] body.sidebar-collapsed .sidebar { right: auto; left: 8px; transform: translateX(0); }
  html[dir="ltr"] body.sidebar-collapsed .sidebar-toggle { right: auto; left: 18px; }
  html[dir="ltr"] body.sidebar-collapsed .main-panel { margin-right: 0 !important; margin-left: 66px !important; }
}

/* فصل الصالات بصرياً في العرض المجمع مع الإبقاء على شكل المخطط الحالي. */
.floor-area-board { display:grid; gap:16px; min-width:0; }
.floor-area-room { display:grid; gap:9px; min-width:0; overflow:hidden; border:1px solid rgba(173,164,218,.25); border-radius:20px; padding:12px; background:linear-gradient(135deg,rgba(31,35,51,.83),rgba(16,22,30,.91)); box-shadow:inset 0 1px rgba(255,255,255,.055),0 13px 30px rgba(0,0,0,.16); }
.floor-area-room-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; border:1px solid rgba(174,166,216,.13); border-radius:14px; padding:8px 10px; background:linear-gradient(110deg,rgba(36,42,60,.7),rgba(18,24,34,.7)); }
.floor-area-room-title { display:flex; align-items:center; gap:9px; min-width:0; }
.floor-area-room-title > div { display:grid; gap:3px; min-width:0; }
.floor-area-room-title strong { overflow:hidden; color:#f1effb; font-size:13px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.floor-area-room-title small { color:var(--muted); font-size:9px; }
.floor-area-room-status { display:flex; align-items:center; gap:10px; flex:0 0 auto; color:var(--muted); font-size:9px; }
.floor-area-room-status > span { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.floor-area-room-status .floor-status-dot { width:7px; height:7px; }
.floor-area-room .floor-plan-stage { height:auto; min-height:var(--floor-stage-height,490px); }
.floor-area-empty { display:grid; justify-items:center; gap:8px; border:1px dashed rgba(179,171,219,.25); border-radius:18px; padding:28px 16px; color:var(--muted); background:rgba(13,17,25,.65); text-align:center; }
.floor-area-empty > span { color:#8bf5dc; font-size:25px; }
.floor-area-empty strong { color:#e9e7f4; font-size:13px; }
.floor-area-empty small { font-size:10px; }
.floor-table-node.is-floor-overlap { z-index:8; border-color:#ff8197 !important; outline:3px solid rgba(255,85,119,.82) !important; outline-offset:5px; box-shadow:0 0 0 8px rgba(255,78,112,.13),0 0 28px rgba(255,62,104,.65) !important; }
.floor-map-shell:fullscreen .floor-area-room .floor-plan-stage,
.floor-map-shell.is-expanded .floor-area-room .floor-plan-stage { height:auto; min-height:var(--floor-stage-height,490px); }
@media (max-width:760px) {
  .floor-area-board { gap:12px; }
  .floor-area-room { gap:7px; border-radius:17px; padding:8px; }
  .floor-area-room-heading { align-items:flex-start; flex-direction:column; gap:7px; padding:8px; }
  .floor-area-room-title strong { font-size:12px; }
  .floor-area-room-status { width:100%; justify-content:flex-start; gap:13px; }
}
@media (prefers-reduced-motion:reduce) {
  .floor-area-room,.floor-area-room-heading { scroll-behavior:auto; }
}

/* تطبيق ألوان القوالب الاثني عشر على لوحة التشغيل كلها. */
body[data-admin-theme] {
  color: var(--text);
  background:
    radial-gradient(ellipse at 82% 0%, color-mix(in srgb, var(--tenant-primary) 15%, transparent), transparent 43%),
    radial-gradient(ellipse at 4% 96%, color-mix(in srgb, var(--tenant-accent) 12%, transparent), transparent 42%),
    var(--bg);
}
body[data-admin-theme] .ambient-one { background: var(--tenant-primary); }
body[data-admin-theme] .ambient-two { background: var(--tenant-accent); }
body[data-admin-theme] :is(.glass-panel, .sidebar, .view-zoom-toolbar, .modal-card) {
  border-color: var(--border);
  background: linear-gradient(145deg, color-mix(in srgb, var(--tenant-surface) 91%, var(--tenant-primary)), color-mix(in srgb, var(--tenant-background) 88%, var(--tenant-surface)));
  box-shadow: 0 18px 50px rgba(0,0,0,.18), 0 0 24px color-mix(in srgb, var(--tenant-primary) 7%, transparent), inset 0 1px rgba(255,255,255,.07);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
body[data-admin-theme] :is(.metric-card, .table-card, .order-card, .receipt-filters, .settings-note, .live-shift-card, .insight-metric, .floor-table-details, .floor-area-room) {
  border-color: var(--border);
  background-color: var(--panel);
}
body[data-admin-theme] .button-primary {
  border-color: color-mix(in srgb, var(--tenant-accent) 52%, transparent);
  color: var(--admin-button-ink, #172033);
  background: linear-gradient(110deg, var(--tenant-primary), var(--tenant-accent));
  box-shadow: 0 7px 22px color-mix(in srgb, var(--tenant-primary) 20%, transparent);
}
body[data-admin-theme] .button-soft,
body[data-admin-theme] .icon-button,
body[data-admin-theme] .view-zoom-button,
body[data-admin-theme] .table-view-switch,
body[data-admin-theme] .settings-section-nav button {
  border-color: var(--border);
  color: var(--text);
  background: color-mix(in srgb, var(--tenant-surface) 70%, transparent);
}
body[data-admin-theme] .nav-link.is-active {
  border-color: color-mix(in srgb, var(--tenant-primary) 30%, var(--border));
  color: var(--text);
  background: linear-gradient(100deg, color-mix(in srgb, var(--tenant-primary) 19%, transparent), color-mix(in srgb, var(--tenant-accent) 9%, transparent));
  box-shadow: inset -2px 0 var(--tenant-primary), 0 0 18px color-mix(in srgb, var(--tenant-primary) 9%, transparent);
}
body[data-admin-theme] :is(.nav-link.is-active > span, .nav-link.is-active > .nav-icon, .text-button, .menu-preset-list button.is-selected) { color: var(--tenant-primary); }
body[data-admin-theme] :is(.nav-link:hover, .icon-button:hover, .view-zoom-button:hover:not(:disabled)) {
  border-color: color-mix(in srgb, var(--tenant-primary) 48%, var(--border));
  color: var(--tenant-primary);
}
body[data-admin-theme] :is(.section-heading .eyebrow, .settings-group-heading h4, .floor-map-title .eyebrow) { color: color-mix(in srgb, var(--tenant-primary) 72%, var(--text)); }
body[data-admin-theme] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .table-filter-control select, .table-search-control input, .floor-control select, .floor-edit-fields select, .floor-edit-fields input) {
  border-color: var(--border);
  color: var(--text);
  background-color: color-mix(in srgb, var(--tenant-background) 84%, var(--tenant-surface));
}
body[data-admin-theme] :is(input, textarea)::placeholder { color: var(--muted); }
body[data-admin-theme] .data-table th {
  border-color: var(--border);
  color: var(--text);
  background: color-mix(in srgb, var(--tenant-primary) 9%, var(--tenant-surface));
}
body[data-admin-theme] .data-table td { border-color: var(--border); }

/* قالب صاخب بتباين أرجواني وفوشي واضح. */
body[data-admin-theme="loud"] .button-primary,
body[data-admin-theme="loud"] .nav-link.is-active { box-shadow: 0 0 22px color-mix(in srgb, var(--tenant-accent) 24%, transparent), 0 8px 28px color-mix(in srgb, var(--tenant-primary) 20%, transparent); }
body[data-admin-theme="loud"] :is(.metric-card > strong, .table-total, .order-total, .insight-metric > strong) { color: var(--tenant-accent); text-shadow: 0 0 18px color-mix(in srgb, var(--tenant-accent) 24%, transparent); }
body[data-admin-theme="loud"] .nav-link.is-active > span { color: var(--tenant-accent); }

/* قالب زجاجي فاتح؛ يبدّل تباين المكوّنات التي كانت تفترض خلفية داكنة. */
body[data-admin-theme="glass-light"] {
  background:
    radial-gradient(ellipse at 85% 8%, rgba(174,165,255,.52), transparent 36%),
    radial-gradient(ellipse at 8% 42%, rgba(171,211,255,.42), transparent 34%),
    radial-gradient(ellipse at 82% 92%, rgba(255,196,207,.42), transparent 35%),
    radial-gradient(ellipse at 22% 94%, rgba(255,221,186,.42), transparent 34%),
    #EEF0FC;
}
body[data-admin-theme="glass-light"] :is(.glass-panel, .sidebar, .view-zoom-toolbar, .modal-card, .panel, .metric-card, .table-card, .order-card, .receipt-filters, .settings-section-nav, .settings-note, .insight-metric, .floor-map-shell, .floor-table-details, .floor-area-room) {
  border-color: color-mix(in srgb, var(--tenant-primary) 17%, rgba(39,48,75,.13));
  color: var(--text);
  background: linear-gradient(145deg, rgba(255,255,255,.80), rgba(255,255,255,.58));
  box-shadow: 0 16px 42px rgba(49,57,91,.10), inset 0 1px rgba(255,255,255,.82);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}
body[data-admin-theme="glass-light"] :is(.sidebar-brand strong, .section-heading h2, .topbar h1, .panel-heading h3, .metric-card > strong, .metric-top, .table-card h3, .order-card h3, .settings-form > label, .settings-group-heading h4, .data-table td, .data-table th, .floor-map-title h3, .floor-table-details, .floor-area-room-title strong, .floor-table-node) { color: var(--text); }
body[data-admin-theme="glass-light"] :is(.muted, .field-help, .section-heading .muted, .panel-heading p, .metric-card > small, .table-card p, .settings-group-heading small, .settings-form small, .floor-map-title small, .floor-map-legend, .floor-table-details small, .floor-area-room-status) { color: var(--muted); }
body[data-admin-theme="glass-light"] :is(.nav-link, .nav-link > span, .nav-link > .nav-icon, .nav-group-label, .sidebar-credit, .text-button) { color: color-mix(in srgb, var(--text) 78%, var(--tenant-primary)); }
body[data-admin-theme="glass-light"] .nav-link.is-active { color: var(--text); background: color-mix(in srgb, var(--tenant-primary) 12%, white); box-shadow: inset -2px 0 var(--tenant-primary), 0 7px 20px rgba(49,57,91,.08); }
body[data-admin-theme="glass-light"] :is(.button-soft, .icon-button, .view-zoom-button, .settings-section-nav button, .table-view-switch) { color: var(--text); background: rgba(255,255,255,.72); }
body[data-admin-theme="glass-light"] .button-primary { color: var(--admin-button-ink, #172033); }
body[data-admin-theme="glass-light"] :is(.settings-form input:not([type="checkbox"]):not([type="radio"]), .settings-form select, .settings-form textarea, .stack-form input:not([type="checkbox"]):not([type="radio"]), .stack-form select, .stack-form textarea, .table-filter-control select, .table-search-control input, .floor-control select, .floor-edit-fields select, .floor-edit-fields input, .receipt-filters input, .report-filter input, .report-filter select, .shift-form input) {
  border-color: rgba(49,59,91,.17);
  color: var(--text);
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 1px rgba(255,255,255,.72);
}
body[data-admin-theme="glass-light"] :is(.settings-form input, .settings-form textarea, .stack-form input, .stack-form textarea)::placeholder { color: #68728a; }
body[data-admin-theme="glass-light"] .data-table tbody tr:nth-child(even) { background: rgba(114,121,171,.045); }
body[data-admin-theme="glass-light"] :is(.table-state, .table-free .table-state, .floor-selected-state, .floor-operational-facts strong.is-available, .fulfillment-pill.is-served) { color: #087c66; }
body[data-admin-theme="glass-light"] :is(.table-busy .table-state, .floor-selected-state.is-occupied) { color: #8c5d11; }
body[data-admin-theme="glass-light"] .floor-map-shell { background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(250,248,255,.66)); }
body[data-admin-theme="glass-light"] .floor-plan-stage,
body[data-admin-theme="glass-light"] .floor-plan-stage.is-3d {
  border-color: rgba(78,91,129,.23);
  background:
    radial-gradient(ellipse at 16% 8%, rgba(155,148,234,.22), transparent 34%),
    radial-gradient(ellipse at 88% 90%, rgba(117,190,190,.18), transparent 38%),
    repeating-linear-gradient(90deg, rgba(86,96,129,.055) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(0deg, rgba(86,96,129,.055) 0 1px, transparent 1px 54px),
    linear-gradient(145deg, #F4F3FC, #E8EDF8);
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.30), inset 0 0 0 9px rgba(78,91,129,.12), 0 15px 38px rgba(49,57,91,.10);
}
body[data-admin-theme="glass-light"] .floor-plan-stage:before { border-color: rgba(78,91,129,.11); background-image: linear-gradient(rgba(86,96,129,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(86,96,129,.06) 1px,transparent 1px),radial-gradient(ellipse at 50% 20%,rgba(124,92,255,.06),transparent 48%); }
body[data-admin-theme="glass-light"] .floor-table-node,
body[data-admin-theme="glass-light"] .floor-table-node.is-available {
  border-color: color-mix(in srgb, var(--tenant-accent) 54%, #67728f);
  color: var(--text);
  background: linear-gradient(145deg, rgba(255,255,255,.94), color-mix(in srgb, var(--tenant-accent) 13%, #F5F4FC));
  box-shadow: 0 9px 19px rgba(38,48,78,.16), 0 0 18px color-mix(in srgb, var(--tenant-accent) 13%, transparent), inset 0 1px white;
}
body[data-admin-theme="glass-light"] .floor-table-node.is-occupied { border-color: #D6A15B; color: #43331D; background: linear-gradient(145deg, #FFF5E3, #F5E4C8); }
body[data-admin-theme="glass-light"] .floor-table-topline,
body[data-admin-theme="glass-light"] .floor-table-node > small,
body[data-admin-theme="glass-light"] .floor-table-meta { color: var(--muted); }
body[data-admin-theme="glass-light"] .floor-table-node > strong { color: var(--text); }
body[data-admin-theme="glass-light"] .floor-seat { border-color: #AAB4C8; background: linear-gradient(145deg,#FFFFFF,#D8DEEB); box-shadow: 0 3px 7px rgba(40,49,75,.20),inset 0 1px white; }
body[data-admin-theme="glass-light"] :is(.floor-map-label, .floor-map-empty, .floor-operational-facts > span, .floor-seat-stepper) { border-color: rgba(69,80,114,.17); color: var(--text); background: rgba(255,255,255,.78); }
body[data-admin-theme="glass-light"] .floor-operational-facts strong { color: var(--text); }
body[data-admin-theme="glass-light"] .floor-seat-stepper button { color: var(--text); background: linear-gradient(145deg,#FFFFFF,#E3E7F2); }
body[data-admin-theme="glass-light"] .floor-selection-empty strong,
body[data-admin-theme="glass-light"] .floor-map-empty strong { color: var(--text); }

/* حصر تمرير لوحة الإدارة داخل مساحة العمل حتى لا يتغير ارتفاع المستند بين الأقسام. */
body.admin-body .main-panel {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

@media print {
  body.admin-body .main-panel {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

/* القالبان الجديدان للمنيو العام. */
.menu-body[data-menu-theme="loud"] { background-image: radial-gradient(ellipse at 82% 8%, color-mix(in srgb, var(--tenant-primary) 34%, transparent), transparent 38%), radial-gradient(ellipse at 12% 72%, color-mix(in srgb, var(--tenant-accent) 18%, transparent), transparent 36%), linear-gradient(160deg, #140A24, var(--tenant-background)); }
.menu-body[data-menu-theme="loud"] .menu-hero h1,
.menu-body[data-menu-theme="loud"] .customer-item-copy > strong,
.menu-body[data-menu-theme="loud"] .customer-table-pill { text-shadow: 0 0 20px color-mix(in srgb, var(--tenant-accent) 27%, transparent); }
.menu-body[data-menu-theme="loud"] .customer-item { border-color: color-mix(in srgb, var(--tenant-primary) 33%, var(--tenant-accent)); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 16px 38px rgba(0,0,0,.26), 0 0 21px color-mix(in srgb, var(--tenant-primary) 14%, transparent); }
.menu-body[data-menu-theme="loud"] .category-tab.is-active { border-color: var(--tenant-accent); background: linear-gradient(110deg, color-mix(in srgb, var(--tenant-primary) 55%, var(--tenant-surface)), color-mix(in srgb, var(--tenant-accent) 24%, var(--tenant-surface))); }
.menu-body[data-menu-theme="glass-light"] { --muted: color-mix(in srgb, var(--tenant-text) 64%, #EEF0FC); color-scheme: light; background-image: radial-gradient(ellipse at 82% 8%, rgba(181,171,255,.46), transparent 38%), radial-gradient(ellipse at 8% 54%, rgba(163,211,255,.38), transparent 36%), radial-gradient(ellipse at 83% 90%, rgba(255,195,208,.4), transparent 34%), linear-gradient(160deg,#F2F1FC,#E8EFFA 54%,#FFF3EF); }
.menu-body[data-menu-theme="glass-light"] :is(.customer-header, .customer-item, .daily-specials, .customer-bottom-nav, .menu-empty-state) { border-color: color-mix(in srgb, var(--tenant-primary) 16%, rgba(37,48,77,.12)); background-color: rgba(255,255,255,.68); box-shadow: 0 12px 32px rgba(43,53,86,.10), inset 0 1px rgba(255,255,255,.8); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); }
.menu-body[data-menu-theme="glass-light"] :is(.customer-brand, .customer-brand #cafe-name, .menu-hero h1, .customer-item-copy h2, .customer-item-copy > strong, .customer-table-pill, .language-toggle, .menu-search, .menu-search input, .category-tab, .customer-order-card, .customer-bottom-nav > button:not(#cart-fab)) { color: var(--tenant-text); }
.menu-body[data-menu-theme="glass-light"] .customer-item { background: linear-gradient(145deg, rgba(255,255,255,.90), color-mix(in srgb, var(--tenant-surface) 85%, #E9E9FF)); }
.menu-body[data-menu-theme="glass-light"] .category-tab { border-color: rgba(56,65,96,.13); color: var(--tenant-text); background: rgba(255,255,255,.58); }
.menu-body[data-menu-theme="glass-light"] .category-tab.is-active { color: var(--tenant-text); border-color: color-mix(in srgb, var(--tenant-primary) 48%, transparent); background: color-mix(in srgb, var(--tenant-primary) 13%, white); }
.menu-body[data-menu-theme="glass-light"] .menu-search { border-color: rgba(56,65,96,.15); background: rgba(255,255,255,.68); }
.menu-body[data-menu-theme="glass-light"] .menu-search input::placeholder { color: #67718a; }
.menu-body[data-menu-theme="glass-light"] .customer-bottom-nav { background: rgba(255,255,255,.82); }
.menu-body[data-menu-theme="glass-light"] .customer-bottom-nav #cart-fab,
.menu-body[data-menu-theme="glass-light"] .add-item-button { color: #172033; }
.menu-body[data-menu-theme="glass-light"] .special-item-badge { color: #26304a; background: rgba(255,255,255,.84); }
.menu-body[data-menu-theme="glass-light"] .menu-hero .eyebrow,
.menu-body[data-menu-theme="glass-light"] .menu-search > span { color: var(--tenant-primary); text-shadow: none; }

/* تقوية التدرج الضبابي لقالب الزجاج الفاتح؛ تبقى --bg لوناً أساسياً لا تدرجاً حتى تستخدمه عمليات مزج الألوان بأمان. */
body[data-admin-theme="glass-light"] {
  background:
    radial-gradient(ellipse at 14% 8%, rgba(173,157,255,.62) 0, transparent 42%),
    radial-gradient(ellipse at 88% 16%, rgba(152,205,255,.56) 0, transparent 41%),
    radial-gradient(ellipse at 72% 84%, rgba(255,178,204,.56) 0, transparent 42%),
    radial-gradient(ellipse at 18% 88%, rgba(255,213,172,.48) 0, transparent 40%),
    linear-gradient(135deg, #EEEAFB 0%, #E8F0FC 42%, #F5EBFA 72%, #FFF0E7 100%);
  background-attachment: fixed;
}

/* توهج متدرج وواضح لقالب صاخب من دون تغيير ألوان أي قالب آخر. */
body[data-admin-theme="loud"] {
  background:
    radial-gradient(ellipse at 82% 3%, color-mix(in srgb, var(--tenant-primary) 25%, transparent), transparent 43%),
    radial-gradient(ellipse at 9% 91%, color-mix(in srgb, var(--tenant-accent) 22%, transparent), transparent 42%),
    linear-gradient(145deg, #0D0518, #140A24 60%, #10071C);
  background-attachment: fixed;
}
body[data-admin-theme="loud"] .button-primary {
  border-color: color-mix(in srgb, var(--tenant-accent) 72%, white);
  background: linear-gradient(112deg, color-mix(in srgb, var(--tenant-primary) 80%, #350B64), color-mix(in srgb, var(--tenant-accent) 78%, #7D104E));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--tenant-primary) 30%, transparent), 0 0 26px color-mix(in srgb, var(--tenant-accent) 22%, transparent), inset 0 1px rgba(255,255,255,.24);
}
body[data-admin-theme="loud"] .button-primary:hover:not(:disabled) {
  box-shadow: 0 10px 28px color-mix(in srgb, var(--tenant-primary) 38%, transparent), 0 0 34px color-mix(in srgb, var(--tenant-accent) 30%, transparent), inset 0 1px rgba(255,255,255,.32);
}
body[data-admin-theme="loud"] :is(.metric-card, .insight-metric, .table-card, .order-card, .floor-table-details) {
  border-color: color-mix(in srgb, var(--tenant-primary) 38%, var(--tenant-accent));
  background-image: linear-gradient(145deg, color-mix(in srgb, var(--tenant-primary) 9%, transparent), color-mix(in srgb, var(--tenant-accent) 8%, transparent));
  box-shadow: 0 12px 30px rgba(5,2,12,.28), 0 0 20px color-mix(in srgb, var(--tenant-primary) 10%, transparent), inset 0 1px rgba(255,255,255,.055);
}
body[data-admin-theme="loud"] :is(.table-card:hover, .floor-table-node.is-selected) {
  box-shadow: 0 15px 36px rgba(5,2,12,.34), 0 0 26px color-mix(in srgb, var(--tenant-accent) 24%, transparent), inset 0 1px rgba(255,255,255,.08);
}

/* توحيد أزرار الطاولات وأيقونات الرأس مع درجات القالب الفاتح. */
body[data-admin-theme="glass-light"] :is(.button-soft, .icon-button, .view-zoom-button, .table-view-switch button, .settings-section-nav button) {
  border-color: var(--border);
  color: var(--text);
  background: color-mix(in srgb, var(--panel-strong) 78%, transparent);
  box-shadow: inset 0 1px rgba(255,255,255,.78), 0 4px 12px rgba(43,53,86,.055);
}
body[data-admin-theme="glass-light"] .table-actions button:not(.button-primary):not(.button-danger) {
  border-color: var(--border);
  color: var(--text);
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel-strong) 88%, white), color-mix(in srgb, var(--panel-strong) 66%, var(--tenant-accent)));
  box-shadow: inset 0 1px rgba(255,255,255,.82), 0 4px 12px rgba(43,53,86,.06);
}
body[data-admin-theme="glass-light"] :is(.floor-table-details, .table-bulk-actions) button:not(.button-primary):not(.button-danger) {
  border-color: var(--border);
  color: var(--text);
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel-strong) 88%, white), color-mix(in srgb, var(--panel-strong) 66%, var(--tenant-accent)));
  box-shadow: inset 0 1px rgba(255,255,255,.82), 0 4px 12px rgba(43,53,86,.06);
}
body[data-admin-theme="glass-light"] .topbar-actions .icon-button:hover,
body[data-admin-theme="glass-light"] .topbar-actions .icon-button.is-active {
  border-color: color-mix(in srgb, var(--tenant-primary) 48%, var(--border));
  color: var(--tenant-primary);
  background: color-mix(in srgb, var(--tenant-primary) 10%, var(--panel-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tenant-primary) 9%, transparent), 0 5px 14px rgba(43,53,86,.07);
}

/* تلوين الأزرار العائمة بحسب القالب النشط مع إبقاء شارة الرسائل بلونها الدلالي. */
body[data-admin-theme] :is(.team-chat-widget-fab, .cash-drawer-fab) {
  border-color: color-mix(in srgb, var(--tenant-accent) 66%, var(--border));
  color: var(--admin-button-ink, #FFFFFF);
  background: linear-gradient(135deg, var(--tenant-primary), var(--tenant-accent));
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--tenant-primary) 28%, transparent),
    0 0 24px color-mix(in srgb, var(--tenant-accent) 22%, transparent),
    inset 0 1px rgba(255,255,255,.44);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}
body[data-admin-theme] :is(.team-chat-widget-fab, .cash-drawer-fab):hover {
  filter: brightness(1.07);
  box-shadow:
    0 13px 34px color-mix(in srgb, var(--tenant-primary) 34%, transparent),
    0 0 30px color-mix(in srgb, var(--tenant-accent) 30%, transparent),
    inset 0 1px rgba(255,255,255,.55);
}
body[data-admin-theme] :is(.team-chat-widget-fab, .cash-drawer-fab):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--tenant-accent) 72%, white);
  outline-offset: 4px;
}
body[data-admin-theme] .cash-drawer-fab-icon {
  border-color: color-mix(in srgb, var(--admin-button-ink, #FFFFFF) 24%, transparent);
  background: color-mix(in srgb, var(--admin-button-ink, #FFFFFF) 14%, transparent);
}

/* ربط مخطط الصالة ومقاعده ومفاتيح الصالات بألوان القالب بدل الأخضر الثابت. */
body[data-admin-theme] :is(.floor-map-shell, .floor-area-nav, .floor-area-room, .floor-area-empty) {
  border-color: color-mix(in srgb, var(--tenant-primary) 24%, var(--border));
  background-color: color-mix(in srgb, var(--tenant-surface) 82%, var(--tenant-background));
}
body[data-admin-theme] .floor-area-room-heading {
  border-color: var(--border);
  background: linear-gradient(110deg, color-mix(in srgb, var(--tenant-primary) 12%, var(--tenant-surface)), color-mix(in srgb, var(--tenant-accent) 9%, var(--tenant-background)));
}
body[data-admin-theme] .floor-area-nav {
  background-image: linear-gradient(115deg, color-mix(in srgb, var(--tenant-primary) 11%, var(--tenant-surface)), color-mix(in srgb, var(--tenant-accent) 8%, var(--tenant-background)));
}
body[data-admin-theme] :is(.floor-area-nav-heading, .floor-area-room-title strong, .floor-area-empty strong) { color: var(--text); }
body[data-admin-theme] .floor-area-nav-mark {
  border-color: color-mix(in srgb, var(--tenant-accent) 38%, var(--border));
  color: var(--tenant-primary);
  background: linear-gradient(145deg, color-mix(in srgb, var(--tenant-primary) 18%, var(--tenant-surface)), color-mix(in srgb, var(--tenant-accent) 16%, var(--tenant-surface)));
}
body[data-admin-theme] .floor-area-nav-item {
  border-color: var(--border);
  color: var(--text);
  background: linear-gradient(145deg, color-mix(in srgb, var(--tenant-surface) 90%, var(--tenant-primary)), color-mix(in srgb, var(--tenant-background) 86%, var(--tenant-accent)));
}
body[data-admin-theme] .floor-area-nav-item:after { background: linear-gradient(90deg, transparent, var(--tenant-primary), var(--tenant-accent), transparent); }
body[data-admin-theme] .floor-area-nav-item:hover,
body[data-admin-theme] .floor-area-nav-item.is-active {
  border-color: color-mix(in srgb, var(--tenant-accent) 60%, var(--tenant-primary));
  color: var(--text);
  background: linear-gradient(125deg, color-mix(in srgb, var(--tenant-primary) 22%, var(--tenant-surface)), color-mix(in srgb, var(--tenant-accent) 17%, var(--tenant-surface)) 58%, var(--tenant-surface));
  box-shadow: 0 0 20px color-mix(in srgb, var(--tenant-primary) 15%, transparent), inset 0 1px rgba(255,255,255,.12);
}
body[data-admin-theme] .floor-area-nav-icon {
  border-color: color-mix(in srgb, var(--tenant-primary) 30%, var(--border));
  color: var(--tenant-primary);
  background: color-mix(in srgb, var(--tenant-primary) 14%, var(--tenant-surface));
}
body[data-admin-theme] .floor-area-nav-item.is-active .floor-area-nav-icon {
  border-color: color-mix(in srgb, var(--tenant-accent) 58%, var(--tenant-primary));
  color: var(--admin-button-ink, var(--text));
  background: linear-gradient(145deg, var(--tenant-primary), var(--tenant-accent));
  box-shadow: 0 0 17px color-mix(in srgb, var(--tenant-accent) 20%, transparent), inset 0 1px rgba(255,255,255,.18);
}
body[data-admin-theme] .floor-area-nav-counts i.is-free { border-color: color-mix(in srgb, var(--tenant-accent) 38%, var(--border)); color: var(--tenant-accent); background: color-mix(in srgb, var(--tenant-accent) 12%, var(--tenant-surface)); }
body[data-admin-theme] .floor-plan-stage {
  border-color: color-mix(in srgb, var(--tenant-primary) 30%, var(--border));
  background:
    radial-gradient(ellipse at 16% 12%, color-mix(in srgb, var(--tenant-primary) 18%, transparent), transparent 36%),
    radial-gradient(ellipse at 88% 86%, color-mix(in srgb, var(--tenant-accent) 15%, transparent), transparent 39%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 4%, transparent) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--text) 4%, transparent) 0 1px, transparent 1px 54px),
    linear-gradient(145deg, var(--tenant-surface), var(--tenant-background));
}
body[data-admin-theme] .floor-plan-stage:before {
  border-color: color-mix(in srgb, var(--tenant-primary) 22%, var(--border));
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--tenant-primary) 13%, transparent), transparent 48%);
}
body[data-admin-theme] .floor-plan-stage:after { background: linear-gradient(90deg, transparent, var(--tenant-primary), var(--tenant-accent), transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--tenant-accent) 36%, transparent); }
body[data-admin-theme] .floor-plan-stage.is-3d {
  background:
    radial-gradient(ellipse at 15% 12%, color-mix(in srgb, var(--tenant-primary) 28%, transparent), transparent 34%),
    radial-gradient(ellipse at 88% 24%, color-mix(in srgb, var(--tenant-accent) 20%, transparent), transparent 36%),
    radial-gradient(ellipse at 48% 100%, color-mix(in srgb, var(--tenant-primary) 15%, transparent), transparent 44%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--tenant-primary) 8%, transparent) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--tenant-accent) 7%, transparent) 0 1px, transparent 1px 54px),
    linear-gradient(145deg, var(--tenant-background), color-mix(in srgb, var(--tenant-surface) 82%, var(--tenant-primary)) 52%, var(--tenant-background));
}
body[data-admin-theme] .floor-plan-stage.is-3d:before {
  border-color: color-mix(in srgb, var(--tenant-primary) 28%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--text) 5%, transparent), transparent 28%, color-mix(in srgb, var(--tenant-primary) 5%, transparent) 72%, color-mix(in srgb, var(--tenant-accent) 5%, transparent)),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 6%, transparent) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--text) 5%, transparent) 0 1px, transparent 1px 54px),
    radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--tenant-primary) 14%, transparent), transparent 65%);
}
body[data-admin-theme] .floor-plan-stage.is-3d:after {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tenant-accent) 90%, white), var(--tenant-primary), transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--tenant-accent) 48%, transparent), 0 0 30px color-mix(in srgb, var(--tenant-primary) 30%, transparent);
}
body[data-admin-theme] .floor-map-label {
  border-color: var(--border);
  color: var(--text);
  background: color-mix(in srgb, var(--tenant-surface) 86%, transparent);
}
body[data-admin-theme] .floor-map-label-entry:before { color: var(--tenant-accent); }
body[data-admin-theme] .floor-map-label-window:before { color: var(--tenant-primary); }
body[data-admin-theme] .floor-table-node:not(.is-occupied) {
  border-color: color-mix(in srgb, var(--tenant-accent) 56%, var(--tenant-primary));
  color: var(--text);
  background: linear-gradient(145deg, color-mix(in srgb, var(--tenant-primary) 26%, var(--tenant-surface)), color-mix(in srgb, var(--tenant-accent) 18%, var(--tenant-background)) 58%, color-mix(in srgb, var(--tenant-surface) 84%, var(--tenant-background)));
  box-shadow: 0 9px 19px rgba(0,0,0,.22), 0 0 20px color-mix(in srgb, var(--tenant-primary) 18%, transparent), 0 0 16px color-mix(in srgb, var(--tenant-accent) 12%, transparent), inset 0 1px rgba(255,255,255,.2);
}
body[data-admin-theme] .floor-plan-stage.is-3d .floor-table-node:not(.is-occupied) {
  border-color: color-mix(in srgb, var(--tenant-accent) 70%, var(--tenant-primary));
  background: linear-gradient(150deg, color-mix(in srgb, var(--tenant-primary) 42%, var(--tenant-surface)), color-mix(in srgb, var(--tenant-accent) 31%, var(--tenant-background)) 52%, color-mix(in srgb, var(--tenant-surface) 86%, var(--tenant-background)));
  box-shadow: 0 8px 0 color-mix(in srgb, var(--tenant-background) 86%, black), 0 13px 22px rgba(0,0,0,.34), 0 0 24px color-mix(in srgb, var(--tenant-primary) 24%, transparent), 0 0 20px color-mix(in srgb, var(--tenant-accent) 18%, transparent), inset 0 1px rgba(255,255,255,.32), inset 0 -9px 18px color-mix(in srgb, var(--tenant-background) 38%, transparent);
}
body[data-admin-theme] .floor-plan-stage.is-3d .floor-table-node:not(.is-occupied):hover { border-color: color-mix(in srgb, var(--tenant-accent) 78%, white); box-shadow: 0 11px 0 color-mix(in srgb, var(--tenant-background) 86%, black), 0 19px 32px rgba(0,0,0,.4), 0 0 32px color-mix(in srgb, var(--tenant-accent) 34%, transparent), inset 0 1px rgba(255,255,255,.4); }
body[data-admin-theme] .floor-plan-stage.is-3d .floor-table-node:not(.is-occupied).is-selected {
  border-color: color-mix(in srgb, var(--tenant-primary) 68%, white);
  outline-color: color-mix(in srgb, var(--tenant-accent) 72%, white);
  animation-name: floor-table-neon-theme;
}
body[data-admin-theme] .floor-plan-stage.is-3d .floor-table-node.is-occupied.is-selected { outline-color: color-mix(in srgb, var(--tenant-primary) 68%, #ffc674); }
body[data-admin-theme] .floor-table-topline i { color: var(--tenant-accent); background: var(--tenant-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--tenant-accent) 78%, transparent), 0 0 18px color-mix(in srgb, var(--tenant-accent) 58%, transparent); }
body[data-admin-theme] .floor-plan-stage.is-3d .floor-table-node:not(.is-occupied) .floor-table-topline i { color: var(--tenant-accent); background: var(--tenant-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--tenant-accent) 78%, transparent), 0 0 18px color-mix(in srgb, var(--tenant-accent) 58%, transparent); }
body[data-admin-theme] .floor-plan-stage.is-3d .floor-table-node.is-occupied .floor-table-topline i { color: #ffc674; background: #ffc674; box-shadow: 0 0 8px rgba(255,198,116,.78), 0 0 18px rgba(255,186,94,.58); }
body[data-admin-theme] .floor-plan-stage.is-3d .floor-seat {
  border-color: color-mix(in srgb, var(--tenant-primary) 38%, rgba(222,238,255,.46));
  background: linear-gradient(145deg, color-mix(in srgb, white 64%, var(--tenant-accent) 36%), color-mix(in srgb, var(--tenant-primary) 34%, var(--tenant-surface)) 48%, color-mix(in srgb, var(--tenant-background) 80%, var(--tenant-primary)));
  box-shadow: 0 5px 0 color-mix(in srgb, var(--tenant-background) 78%, black), 0 8px 12px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.58), inset 0 -3px 5px color-mix(in srgb, var(--tenant-background) 52%, transparent);
}
body[data-admin-theme="glass-light"] .floor-plan-stage.is-3d {
  background:
    radial-gradient(ellipse at 14% 12%, color-mix(in srgb, var(--tenant-primary) 24%, transparent), transparent 36%),
    radial-gradient(ellipse at 88% 80%, color-mix(in srgb, var(--tenant-accent) 26%, transparent), transparent 39%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--tenant-primary) 7%, transparent) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--tenant-accent) 6%, transparent) 0 1px, transparent 1px 54px),
    linear-gradient(145deg, color-mix(in srgb, var(--tenant-background) 88%, white), color-mix(in srgb, var(--tenant-surface) 78%, var(--tenant-primary)) 58%, color-mix(in srgb, var(--tenant-background) 82%, var(--tenant-accent)));
}
@keyframes floor-table-neon-theme {
  0%, 100% { box-shadow: 0 8px 0 color-mix(in srgb, var(--tenant-background) 86%, black), 0 13px 22px rgba(0,0,0,.34), 0 0 20px color-mix(in srgb, var(--tenant-primary) 24%, transparent), 0 0 16px color-mix(in srgb, var(--tenant-accent) 18%, transparent), inset 0 1px rgba(255,255,255,.32); }
  50% { box-shadow: 0 8px 0 color-mix(in srgb, var(--tenant-background) 86%, black), 0 14px 25px rgba(0,0,0,.36), 0 0 34px color-mix(in srgb, var(--tenant-primary) 38%, transparent), 0 0 22px color-mix(in srgb, var(--tenant-accent) 25%, transparent), inset 0 1px rgba(255,255,255,.38); }
}

/* إنهاء المظهر الافتراضي لمربع اللغة وتلوين علامة الاختيار مع القالب. */
body[data-admin-theme] .language-options {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 9px 14px 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--tenant-surface) 70%, transparent);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}
body[data-admin-theme] .language-options legend { padding: 0 7px; color: var(--tenant-primary); font-size: 13px; font-weight: 800; }
body[data-admin-theme] .language-options .checkbox-field { width: fit-content; border: 1px solid var(--border); border-radius: 11px; padding: 7px 10px; background: color-mix(in srgb, var(--tenant-primary) 7%, var(--tenant-surface)); }
body[data-admin-theme="glass-light"] :is(.checkbox-field input[type="checkbox"], .consent-row input[type="checkbox"]) {
  border-color: color-mix(in srgb, var(--tenant-primary) 42%, #7b849b);
  background: rgba(255,255,255,.86);
  box-shadow: 0 1px 3px rgba(37,45,70,.12);
}
body[data-admin-theme="glass-light"] :is(.checkbox-field input[type="checkbox"], .consent-row input[type="checkbox"]):checked {
  border-color: var(--tenant-primary);
  color: var(--admin-button-ink, #172033);
  background: linear-gradient(135deg, var(--tenant-primary), var(--tenant-accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tenant-primary) 11%, transparent);
}
body[data-admin-theme="glass-light"] :is(.checkbox-field input[type="checkbox"], .consent-row input[type="checkbox"]):checked::after { color: var(--admin-button-ink, #172033); }

/* تحسين مخطط الصالة: أسطح مادية محايدة، كراسي واضحة، وتفاصيل عائمة بجوار الطاولة. */
body[data-admin-theme] .floor-table-node,
body[data-admin-theme] .floor-plan-stage.is-3d .floor-table-node {
  border-color: color-mix(in srgb, var(--tenant-primary) 35%, var(--border));
  color: var(--text);
  background:
    radial-gradient(ellipse at 28% 16%, color-mix(in srgb, white 14%, var(--tenant-primary)), transparent 58%),
    linear-gradient(150deg, color-mix(in srgb, var(--tenant-surface) 89%, white 11%), color-mix(in srgb, var(--tenant-surface) 92%, var(--tenant-background)));
  box-shadow: 0 8px 0 color-mix(in srgb, var(--tenant-background) 86%, black), 0 14px 23px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.22), inset 0 -8px 16px color-mix(in srgb, var(--tenant-primary) 8%, transparent);
}
body[data-admin-theme] .floor-table-node.is-available,
body[data-admin-theme] .floor-plan-stage.is-3d .floor-table-node.is-available {
  border-color: color-mix(in srgb, var(--tenant-accent) 48%, var(--border));
}
body[data-admin-theme] .floor-table-node.is-occupied,
body[data-admin-theme] .floor-plan-stage.is-3d .floor-table-node.is-occupied {
  border-color: color-mix(in srgb, #efb967 63%, var(--border));
  color: var(--text);
  background:
    radial-gradient(ellipse at 28% 16%, color-mix(in srgb, white 14%, var(--tenant-primary)), transparent 58%),
    linear-gradient(150deg, color-mix(in srgb, var(--tenant-surface) 89%, white 11%), color-mix(in srgb, var(--tenant-surface) 92%, var(--tenant-background)));
  box-shadow: 0 8px 0 color-mix(in srgb, var(--tenant-background) 86%, black), 0 14px 23px rgba(0,0,0,.28), inset 0 0 0 1px rgba(239,185,103,.16), inset 0 1px rgba(255,255,255,.22);
}
body[data-admin-theme] .floor-table-node.is-selected,
body[data-admin-theme] .floor-plan-stage.is-3d .floor-table-node.is-selected { outline-color: color-mix(in srgb, var(--tenant-primary) 72%, white); }
body[data-admin-theme] .floor-table-node.is-occupied.is-selected,
body[data-admin-theme] .floor-plan-stage.is-3d .floor-table-node.is-occupied.is-selected { outline-color: color-mix(in srgb, #efb967 62%, var(--tenant-primary)); }
body[data-admin-theme] .floor-table-node > strong { color: var(--text); }
body[data-admin-theme] .floor-table-node > small,
body[data-admin-theme] .floor-table-meta,
body[data-admin-theme] .floor-table-topline { color: var(--muted); }
body[data-admin-theme] .floor-table-topline i { width: 8px; height: 8px; border: 1px solid color-mix(in srgb, var(--tenant-accent) 45%, white); background: var(--tenant-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tenant-accent) 15%, transparent); }
body[data-admin-theme] .floor-table-node.is-occupied .floor-table-topline i { border-color: #ffd28b; background: #efb967; box-shadow: 0 0 0 3px rgba(239,185,103,.16); }
body[data-admin-theme] .floor-table-node:after { border-color: color-mix(in srgb, var(--tenant-primary) 15%, var(--border)); }
body[data-admin-theme] .floor-seat,
body[data-admin-theme] .floor-plan-stage.is-3d .floor-seat {
  display: block;
  width: 17px;
  height: 14px;
  border: 1px solid color-mix(in srgb, var(--tenant-primary) 32%, #8790a1);
  border-radius: 5px;
  background: linear-gradient(145deg, color-mix(in srgb, white 56%, var(--tenant-surface)), color-mix(in srgb, var(--tenant-surface) 75%, var(--tenant-background)));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--tenant-background) 78%, black), 0 7px 10px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.48);
}
body[data-admin-theme] .floor-seat:before { position: absolute; inset: -4px 2px auto; height: 5px; border: 1px solid color-mix(in srgb, var(--tenant-primary) 32%, #8790a1); border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, color-mix(in srgb, white 58%, var(--tenant-surface)), color-mix(in srgb, var(--tenant-surface) 78%, var(--tenant-background))); content: ""; }
body[data-admin-theme] .floor-seat > i { position: absolute; inset: 3px 2px 2px; border-radius: 3px; background: color-mix(in srgb, var(--tenant-surface) 76%, var(--tenant-primary)); box-shadow: inset 0 1px rgba(255,255,255,.35); }
body[data-admin-theme] .floor-shape-round .floor-seat,
body[data-admin-theme] .floor-plan-stage.is-3d .floor-shape-round .floor-seat { border-radius: 5px; }
body[data-admin-theme="glass-light"] .floor-table-node,
body[data-admin-theme="glass-light"] .floor-plan-stage.is-3d .floor-table-node { box-shadow: 0 7px 0 rgba(61,68,91,.18), 0 13px 20px rgba(47,55,79,.17), inset 0 1px rgba(255,255,255,.82); }
body[data-admin-theme="glass-light"] .floor-table-node.is-occupied,
body[data-admin-theme="glass-light"] .floor-plan-stage.is-3d .floor-table-node.is-occupied { box-shadow: 0 7px 0 rgba(61,68,91,.18), 0 13px 20px rgba(47,55,79,.17), inset 0 0 0 1px rgba(198,133,48,.17), inset 0 1px rgba(255,255,255,.82); }
body[data-admin-theme] .floor-table-details-popover {
  position: fixed !important;
  z-index: 1400;
  display: block;
  grid-area: auto;
  width: min(360px, calc(100vw - 24px));
  max-height: min(72vh, 620px);
  overflow: auto;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--tenant-primary) 42%, var(--border));
  border-radius: 20px;
  padding: 15px;
  color: var(--text);
  background: color-mix(in srgb, var(--tenant-surface) 91%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 22px 60px rgba(0,0,0,.34), 0 0 24px color-mix(in srgb, var(--tenant-primary) 15%, transparent), inset 0 1px rgba(255,255,255,.16);
  animation: floor-details-appear .18s cubic-bezier(.2,.8,.2,1) both;
}
body[data-admin-theme] .floor-map-shell,
body[data-admin-theme] .floor-map-shell.is-expanded,
body[data-admin-theme] .floor-map-shell:fullscreen { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "areas" "summary" "stage" "legend"; }
body[data-admin-theme] .floor-table-details-popover .floor-selected-table { height: auto; }
body[data-admin-theme] .floor-table-details-popover .floor-selected-heading { align-items: center; }
body[data-admin-theme] .floor-details-close { flex: 0 0 34px; width: 34px; min-width: 34px; height: 34px; min-height: 34px; margin-inline-start: auto; border-radius: 11px; color: var(--text); background: color-mix(in srgb, var(--tenant-primary) 10%, var(--tenant-surface)); }
body[data-admin-theme] .floor-details-close:hover { border-color: var(--tenant-accent); color: var(--text); box-shadow: 0 0 14px color-mix(in srgb, var(--tenant-accent) 19%, transparent); }
body[data-admin-theme] .floor-table-details-popover { width: min(400px, calc(100vw - 28px)); max-height: min(76dvh, 660px); padding: 18px; border-radius: 23px; background: linear-gradient(145deg, color-mix(in srgb, var(--tenant-surface) 96%, var(--tenant-primary) 4%), color-mix(in srgb, var(--tenant-background) 92%, var(--tenant-surface))); box-shadow: 0 24px 64px rgba(0,0,0,.38), 0 0 28px color-mix(in srgb, var(--tenant-primary) 16%, transparent), inset 0 1px rgba(255,255,255,.18); }
body[data-admin-theme] .floor-table-details-popover .floor-selected-table { gap: 16px; }
body[data-admin-theme] .floor-table-details-popover .floor-selected-heading { gap: 14px; padding-bottom: 15px; }
body[data-admin-theme] .floor-table-details-popover .floor-selected-heading small { font-size: 11px; }
body[data-admin-theme] .floor-table-details-popover .floor-selected-heading h3 { font-size: 22px; line-height: 1.25; }
body[data-admin-theme] .floor-table-details-popover .floor-selected-state { padding: 8px 12px; font-size: 11px; }
body[data-admin-theme] .floor-table-details-popover .floor-operational-facts { gap: 10px; }
body[data-admin-theme] .floor-table-details-popover .floor-operational-facts > span { gap: 6px; border-radius: 14px; padding: 12px; }
body[data-admin-theme] .floor-table-details-popover .floor-operational-facts small { font-size: 10px; }
body[data-admin-theme] .floor-table-details-popover .floor-operational-facts strong { font-size: 13px; }
body[data-admin-theme] .floor-table-details-popover .floor-edit-fields { gap: 14px; }
body[data-admin-theme] .floor-table-details-popover .floor-edit-fields label { gap: 7px; font-size: 12px; font-weight: 700; }
body[data-admin-theme] .floor-table-details-popover .floor-edit-fields select,
body[data-admin-theme] .floor-table-details-popover .floor-edit-fields input { min-height: 44px; border-radius: 12px; padding-inline: 12px; font-size: 13px; }
body[data-admin-theme] .floor-table-details-popover .floor-edit-fields .floor-edit-tip { font-size: 11px; line-height: 1.7; }
body[data-admin-theme] .floor-table-details-popover .floor-selected-actions { gap: 9px; margin-top: 2px; }
body[data-admin-theme] .floor-table-details-popover .floor-selected-actions .button { min-height: 44px; border-radius: 12px; padding-inline: 12px; font-size: 11px; }
body[data-admin-theme] .floor-table-node .floor-table-symbol { position: absolute; z-index: 1; inset-block-start: 7px; inset-inline-start: 8px; display: block; width: 28px; height: 28px; color: var(--tenant-primary, var(--floor-accent)); opacity: .96; pointer-events: none; transform-origin: 50% 50%; filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--tenant-primary) 42%, transparent)); }
body[data-admin-theme] .floor-table-node .floor-table-symbol svg { display: block; width: 100%; height: 100%; overflow: visible; }
body[data-admin-theme] .floor-table-node .floor-symbol-table { display: none; fill: color-mix(in srgb, var(--tenant-primary) 30%, var(--tenant-surface)); stroke: var(--tenant-accent); stroke-width: 2.2; }
body[data-admin-theme] .floor-table-node .floor-symbol-inlay { fill: none; stroke: var(--tenant-accent); stroke-linecap: round; stroke-width: 2.5; opacity: .86; }
body[data-admin-theme] .floor-table-node .floor-symbol-center { fill: var(--tenant-accent); opacity: .9; }
body[data-admin-theme] .floor-table-node.floor-shape-round .floor-symbol-round,
body[data-admin-theme] .floor-table-node.floor-shape-square .floor-symbol-square,
body[data-admin-theme] .floor-table-node.floor-shape-rectangle .floor-symbol-rectangle { display: block; }
body[data-admin-theme] .floor-table-node:is(:hover, :focus-visible, .is-selected) .floor-table-symbol { animation: floor-table-symbol-turn .68s cubic-bezier(.2,.8,.25,1) both; }
@keyframes floor-table-symbol-turn { from { transform: rotate(0deg) scale(.9); } to { transform: rotate(360deg) scale(1.08); } }
@keyframes floor-details-appear { from { opacity: 0; transform: translateY(7px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 760px) {
  body[data-admin-theme] .floor-seat,
  body[data-admin-theme] .floor-plan-stage.is-3d .floor-seat { width: 14px; height: 12px; }
  body[data-admin-theme] .floor-table-details-popover,
  body[data-admin-theme] .floor-table-details-popover.is-mobile {
    inset-inline: 10px !important;
    inset-block: auto 10px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto;
    max-height: min(58dvh, 500px);
    border-radius: 22px;
    padding: 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  body[data-admin-theme] .floor-table-details-popover .floor-selected-heading h3 { font-size: 20px; }
  body[data-admin-theme] .floor-table-details-popover .floor-selected-actions .button { min-height: 44px; }
  body[data-admin-theme] .floor-table-node .floor-table-symbol { inset-block-start: 5px; inset-inline-start: 6px; width: 21px; height: 21px; }
}
@media (prefers-reduced-motion: reduce) { body[data-admin-theme] .floor-table-details-popover, body[data-admin-theme] .floor-table-node .floor-table-symbol { animation: none; } }

/* ضبط إطار الخريطة والبطاقة العائمة للهواتف والأجهزة اللوحية. */
body[data-admin-theme] .floor-table-node,
body[data-admin-theme] .floor-plan-stage.is-3d .floor-table-node {
  border-color: color-mix(in srgb, var(--tenant-primary) 56%, var(--tenant-accent));
  color: var(--tenant-text, #f4f5fa);
  background: radial-gradient(ellipse at 34% 22%, color-mix(in srgb, white 13%, var(--tenant-surface)), transparent 58%), linear-gradient(150deg, color-mix(in srgb, var(--tenant-surface) 88%, var(--tenant-primary) 12%), color-mix(in srgb, var(--tenant-background) 78%, var(--tenant-surface)));
  box-shadow: 0 7px 0 color-mix(in srgb, var(--tenant-background) 80%, black), 0 14px 23px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.2);
}
body[data-admin-theme] .floor-table-node.is-occupied,
body[data-admin-theme] .floor-plan-stage.is-3d .floor-table-node.is-occupied {
  border-color: color-mix(in srgb, #e7ad55 55%, var(--tenant-primary));
  background: radial-gradient(ellipse at 34% 22%, color-mix(in srgb, white 13%, var(--tenant-surface)), transparent 58%), linear-gradient(150deg, color-mix(in srgb, var(--tenant-surface) 88%, var(--tenant-primary) 12%), color-mix(in srgb, var(--tenant-background) 78%, var(--tenant-surface)));
  box-shadow: 0 7px 0 color-mix(in srgb, var(--tenant-background) 80%, black), 0 14px 23px rgba(0,0,0,.3), inset 0 0 0 1px rgba(231,173,85,.22), inset 0 1px rgba(255,255,255,.2);
}
body[data-admin-theme] .floor-table-node > strong,
body[data-admin-theme] .floor-table-node > small,
body[data-admin-theme] .floor-table-node .floor-table-meta,
body[data-admin-theme] .floor-table-node .floor-table-topline { position: relative; z-index: 2; }
@media (max-width: 900px) {
  body[data-admin-theme] .floor-table-details-popover,
  body[data-admin-theme] .floor-table-details-popover.is-mobile {
    inset-inline: auto !important; inset-block: auto max(10px, env(safe-area-inset-bottom)) !important;
    left: 10px !important; right: 10px !important; width: min(560px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px); height: auto !important; min-height: 0 !important;
    max-height: min(47dvh, 390px) !important; box-sizing: border-box; margin: 0 auto;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 22px; padding: 14px; padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  body[data-admin-theme] .floor-table-details-popover .floor-selected-heading h3 { font-size: 18px; }
  body[data-admin-theme] .floor-table-details-popover .floor-operational-facts { gap: 8px; }
  body[data-admin-theme] .floor-table-details-popover .floor-operational-facts > span { padding: 9px; }
  body[data-admin-theme] .floor-table-details-popover .floor-edit-fields { gap: 10px; }
  body[data-admin-theme] .floor-table-details-popover .floor-edit-fields select,
  body[data-admin-theme] .floor-table-details-popover .floor-edit-fields input { min-height: 40px; font-size: 12px; }
  body[data-admin-theme] .floor-table-details-popover .floor-selected-actions .button { min-height: 40px; }
}
@media (max-width: 760px) {
  body[data-admin-theme] .floor-table-node { left: clamp(64px, var(--floor-x), calc(100% - 64px)) !important; }
  body[data-admin-theme] .floor-table-node.floor-shape-rectangle { left: clamp(72px, var(--floor-x), calc(100% - 72px)) !important; }
  body[data-admin-theme] .floor-table-node .floor-table-symbol { inset-block-start: 5px; inset-inline-start: 6px; width: 23px; height: 23px; }
}


/* أثاث الطاولة المدور وحاوية تفاصيل الهاتف */
body[data-admin-theme] .floor-furniture {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  transform: rotate(var(--floor-rotation, 0deg));
  transform-origin: 50% 50%;
  transition: transform .12s ease;
}
body[data-admin-theme] .floor-table-node .floor-table-seats { position: absolute; z-index: 1; inset: 0; overflow: visible; }
body[data-admin-theme] .floor-table-node .floor-seat { z-index: 1; }
body[data-admin-theme] .floor-table-node .floor-table-symbol {
  position: absolute;
  z-index: 0;
  inset: 4px;
  display: block;
  width: auto;
  height: auto;
  opacity: .9;
  filter: drop-shadow(0 5px 7px color-mix(in srgb, var(--tenant-background) 52%, transparent));
  animation: none !important;
}
body[data-admin-theme] .floor-table-node .floor-table-symbol svg { display: none; width: 100%; height: 100%; overflow: visible; }
body[data-admin-theme] .floor-table-node.floor-shape-round .floor-symbol-round,
body[data-admin-theme] .floor-table-node.floor-shape-square .floor-symbol-square,
body[data-admin-theme] .floor-table-node.floor-shape-rectangle .floor-symbol-rectangle { display: block; }
body[data-admin-theme] .floor-table-node .floor-symbol-table {
  display: initial;
  fill: color-mix(in srgb, var(--tenant-surface) 82%, var(--tenant-primary) 18%);
  stroke: color-mix(in srgb, var(--tenant-primary) 66%, white);
  stroke-width: 2;
}
body[data-admin-theme] .floor-table-node .floor-symbol-inlay {
  fill: none;
  stroke: color-mix(in srgb, var(--tenant-accent) 56%, white);
  stroke-width: 1.35;
  opacity: .58;
}
body[data-admin-theme] .floor-table-node .floor-symbol-glint {
  fill: none;
  stroke: color-mix(in srgb, white 68%, var(--tenant-accent));
  stroke-width: 3;
  stroke-linecap: round;
  opacity: .48;
}
body[data-admin-theme] .floor-table-node .floor-table-topline,
body[data-admin-theme] .floor-table-node > strong,
body[data-admin-theme] .floor-table-node > small,
body[data-admin-theme] .floor-table-node .floor-table-meta { z-index: 2; }
body[data-admin-theme] .floor-rotate-handle {
  position: absolute;
  z-index: 12;
  inset-block-start: -9px;
  inset-inline-end: -9px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid color-mix(in srgb, var(--tenant-accent) 72%, white);
  border-radius: 50%;
  color: var(--tenant-text, white);
  background: linear-gradient(145deg, var(--tenant-primary), var(--tenant-accent));
  box-shadow: 0 3px 10px rgba(0,0,0,.34), 0 0 12px color-mix(in srgb, var(--tenant-accent) 32%, transparent);
  font-size: 18px;
  line-height: 1;
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
}
body[data-admin-theme] .floor-table-node.is-rotating { cursor: grabbing; }
body[data-admin-theme] .floor-table-node.is-rotating .floor-furniture { transition: none; }
body[data-admin-theme] .floor-table-node:is(:hover, :focus-visible, .is-selected):not(.is-rotating) .floor-furniture {
  animation: floor-furniture-turn .68s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes floor-furniture-turn {
  from { transform: rotate(var(--floor-rotation, 0deg)) scale(.97); }
  to { transform: rotate(calc(var(--floor-rotation, 0deg) + 360deg)) scale(1); }
}
.floor-rotation-inputs { display: grid; grid-template-columns: minmax(0,1fr) 76px 42px; align-items: center; gap: 8px; }
.floor-rotation-inputs input[type="range"] { min-width: 0; min-height: 28px; accent-color: var(--tenant-accent, var(--floor-accent)); padding: 0; background: transparent; }
.floor-rotation-inputs input[type="number"] { min-height: 38px; text-align: center; font-variant-numeric: tabular-nums; }
.floor-rotation-inputs > span { color: var(--tenant-accent, var(--floor-accent)); font-variant-numeric: tabular-nums; text-align: center; }
@media (max-width: 900px) {
  body[data-admin-theme] .floor-table-details-popover,
  body[data-admin-theme] .floor-table-details-popover.is-mobile {
    inset-block: auto max(10px, env(safe-area-inset-bottom)) !important;
    max-height: min(72dvh, 620px) !important;
    border-radius: 22px 22px 18px 18px;
    padding: 14px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--tenant-surface) 94%, var(--tenant-primary) 6%);
  }
  body[data-admin-theme] .floor-table-details-popover .floor-selected-heading {
    position: sticky;
    top: -14px;
    z-index: 8;
    margin-top: -14px;
    padding-top: 14px;
    background: color-mix(in srgb, var(--tenant-surface) 96%, var(--tenant-primary) 4%);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
  body[data-admin-theme] .floor-table-details-popover .floor-edit-fields { gap: 11px; }
  body[data-admin-theme] .floor-table-details-popover .floor-edit-fields label { font-size: 12px; }
  body[data-admin-theme] .floor-rotate-handle { width: 27px; height: 27px; font-size: 19px; }
}
@media (max-width: 430px) {
  .floor-rotation-inputs { grid-template-columns: minmax(0,1fr) 64px 38px; gap: 6px; }
  body[data-admin-theme] .floor-table-details-popover .floor-selected-heading h3 { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-admin-theme] .floor-furniture { transition: none; }
  body[data-admin-theme] .floor-table-node:is(:hover, :focus-visible, .is-selected) .floor-furniture { animation: none; }
}


/* رسومات علوية واقعية للطاولات والكراسي، بألوان القالب النشط. */
body[data-admin-theme] .floor-table-node .floor-symbol-shadow {
  fill: color-mix(in srgb, var(--tenant-background) 72%, #000);
  opacity: .58;
}
body[data-admin-theme] .floor-table-node .floor-symbol-edge {
  fill: color-mix(in srgb, var(--tenant-primary) 36%, var(--tenant-background));
  stroke: color-mix(in srgb, var(--tenant-accent) 62%, var(--tenant-text));
  stroke-width: 1.15;
}
body[data-admin-theme] .floor-table-node .floor-symbol-table {
  display: initial;
  fill: color-mix(in srgb, var(--tenant-surface) 88%, var(--tenant-primary) 12%);
  stroke: color-mix(in srgb, var(--tenant-accent) 62%, var(--tenant-text));
  stroke-width: 1.35;
}
body[data-admin-theme] .floor-table-node .floor-symbol-inlay {
  fill: color-mix(in srgb, var(--tenant-surface) 94%, var(--tenant-accent) 6%);
  stroke: color-mix(in srgb, var(--tenant-accent) 30%, var(--tenant-text));
  stroke-width: 1;
  opacity: .76;
}
body[data-admin-theme] .floor-table-node .floor-symbol-grain {
  fill: none;
  stroke: color-mix(in srgb, var(--tenant-primary) 24%, var(--tenant-text));
  stroke-width: 1.35;
  stroke-linecap: round;
  opacity: .28;
}
body[data-admin-theme] .floor-table-node .floor-symbol-glint {
  fill: none;
  stroke: color-mix(in srgb, white 72%, var(--tenant-accent));
  stroke-width: 2.6;
  stroke-linecap: round;
  opacity: .43;
}
body[data-admin-theme] .floor-table-node .floor-table-symbol {
  filter: drop-shadow(0 4px 5px color-mix(in srgb, var(--tenant-background) 58%, transparent));
}
body[data-admin-theme] .floor-table-node .floor-seat {
  width: 19px;
  height: 23px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body[data-admin-theme] .floor-table-node .floor-seat:before { display: none !important; content: none; }
body[data-admin-theme] .floor-table-node .floor-seat > i { display: none; }
body[data-admin-theme] .floor-table-node .floor-seat > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(var(--seat-angle, 0deg));
  transform-origin: 50% 50%;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.28));
}
body[data-admin-theme] .floor-chair-shadow {
  fill: color-mix(in srgb, var(--tenant-background) 72%, #000);
  opacity: .68;
}
body[data-admin-theme] .floor-chair-back {
  fill: color-mix(in srgb, var(--tenant-primary) 42%, var(--tenant-surface));
  stroke: color-mix(in srgb, var(--tenant-accent) 45%, var(--tenant-text));
  stroke-width: 1.2;
}
body[data-admin-theme] .floor-chair-back-detail {
  fill: none;
  stroke: color-mix(in srgb, white 55%, var(--tenant-accent));
  stroke-width: 1;
  stroke-linecap: round;
  opacity: .78;
}
body[data-admin-theme] .floor-chair-frame {
  fill: none;
  stroke: color-mix(in srgb, var(--tenant-primary) 50%, var(--tenant-text));
  stroke-width: 2;
  stroke-linecap: round;
}
body[data-admin-theme] .floor-chair-seat {
  fill: color-mix(in srgb, var(--tenant-surface) 72%, var(--tenant-primary));
  stroke: color-mix(in srgb, var(--tenant-accent) 54%, var(--tenant-text));
  stroke-width: 1.15;
}
body[data-admin-theme] .floor-chair-seat-detail {
  fill: none;
  stroke: color-mix(in srgb, white 50%, var(--tenant-accent));
  stroke-width: 1;
  stroke-linecap: round;
  opacity: .66;
}
body[data-admin-theme] .floor-plan-stage.is-3d .floor-table-node .floor-table-symbol {
  filter: drop-shadow(0 7px 7px color-mix(in srgb, var(--tenant-background) 62%, transparent));
}
body[data-admin-theme] .floor-plan-stage.is-3d .floor-chair-shadow { opacity: .82; }
@media (max-width: 760px) {
  body[data-admin-theme] .floor-table-node .floor-seat { width: 16px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-admin-theme] .floor-table-node .floor-table-symbol { animation: none !important; }
}

/* ربط نافذة الطلب اليدوي بألوان القالب المختار بدلاً من الخلفيات الداكنة الثابتة. */
body[data-admin-theme] .app-modal.manual-order-dialog {
  border-color: color-mix(in srgb, var(--tenant-primary) 42%, var(--tenant-accent));
  color: var(--tenant-text);
  background: radial-gradient(ellipse at 8% 0%, color-mix(in srgb, var(--tenant-primary) 17%, transparent), transparent 52%), linear-gradient(150deg, color-mix(in srgb, var(--tenant-surface) 92%, var(--tenant-background)), var(--tenant-background));
  box-shadow: 0 28px 90px rgba(0,0,0,.32), 0 0 30px color-mix(in srgb, var(--tenant-primary) 13%, transparent);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}
body[data-admin-theme] .app-modal.manual-order-dialog .manual-order-picker > .modal-heading { border-color: color-mix(in srgb, var(--tenant-accent) 20%, var(--border)); }
body[data-admin-theme] .app-modal.manual-order-dialog :is(.manual-order-toolbar label, .manual-catalog-heading, .manual-cart-panel, .manual-menu-details strong, .manual-quantity span) { color: var(--tenant-text); }
body[data-admin-theme] .app-modal.manual-order-dialog :is(.manual-order-toolbar input, .manual-order-toolbar select, .manual-item-size) {
  border-color: color-mix(in srgb, var(--tenant-primary) 25%, var(--border));
  color: var(--tenant-text);
  background: color-mix(in srgb, var(--tenant-background) 72%, var(--tenant-surface));
}
body[data-admin-theme] .app-modal.manual-order-dialog :is(.manual-order-toolbar input, .manual-order-toolbar select, .manual-item-size):focus {
  border-color: color-mix(in srgb, var(--tenant-accent) 64%, var(--tenant-primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tenant-accent) 14%, transparent);
}
body[data-admin-theme] .app-modal.manual-order-dialog :is(.manual-order-toolbar select option, .manual-item-size option) { color: var(--tenant-text); background: var(--tenant-surface); }
body[data-admin-theme] .app-modal.manual-order-dialog .manual-category-pills {
  border-color: color-mix(in srgb, var(--tenant-primary) 28%, var(--border));
  background: color-mix(in srgb, var(--tenant-background) 84%, transparent);
}
body[data-admin-theme] .app-modal.manual-order-dialog .manual-category-pill {
  border-color: color-mix(in srgb, var(--tenant-primary) 25%, var(--border));
  color: var(--muted);
  background: color-mix(in srgb, var(--tenant-surface) 72%, transparent);
}
body[data-admin-theme] .app-modal.manual-order-dialog .manual-category-pill:hover { border-color: color-mix(in srgb, var(--tenant-accent) 58%, transparent); color: var(--tenant-text); }
body[data-admin-theme] .app-modal.manual-order-dialog .manual-category-pill.is-active {
  border-color: color-mix(in srgb, var(--tenant-accent) 70%, white);
  color: var(--admin-button-ink, var(--tenant-text));
  background: linear-gradient(110deg, color-mix(in srgb, var(--tenant-primary) 78%, var(--tenant-surface)), color-mix(in srgb, var(--tenant-accent) 76%, var(--tenant-surface)));
  box-shadow: 0 5px 18px color-mix(in srgb, var(--tenant-accent) 18%, transparent), inset 0 1px rgba(255,255,255,.2);
}
body[data-admin-theme] .app-modal.manual-order-dialog :is(.manual-catalog-panel, .manual-cart-panel) {
  border-color: color-mix(in srgb, var(--tenant-primary) 26%, var(--border));
  color: var(--tenant-text);
  background: linear-gradient(145deg, color-mix(in srgb, var(--tenant-surface) 89%, transparent), color-mix(in srgb, var(--tenant-background) 90%, transparent));
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}
body[data-admin-theme] .app-modal.manual-order-dialog .manual-menu-item {
  border-color: color-mix(in srgb, var(--tenant-primary) 25%, var(--border));
  background: linear-gradient(145deg, color-mix(in srgb, var(--tenant-surface) 92%, transparent), color-mix(in srgb, var(--tenant-background) 88%, transparent));
}
body[data-admin-theme] .app-modal.manual-order-dialog .manual-menu-item:hover {
  border-color: color-mix(in srgb, var(--tenant-accent) 56%, var(--tenant-primary));
  background: linear-gradient(145deg, color-mix(in srgb, var(--tenant-primary) 12%, var(--tenant-surface)), color-mix(in srgb, var(--tenant-accent) 8%, var(--tenant-background)));
  box-shadow: 0 10px 26px rgba(0,0,0,.16), 0 0 18px color-mix(in srgb, var(--tenant-accent) 12%, transparent);
}
body[data-admin-theme] .app-modal.manual-order-dialog .manual-menu-image { border-color: color-mix(in srgb, var(--tenant-primary) 27%, var(--border)); background: color-mix(in srgb, var(--tenant-surface) 82%, var(--tenant-background)); }
body[data-admin-theme] .app-modal.manual-order-dialog .manual-menu-placeholder { color: var(--tenant-accent); }
body[data-admin-theme] .app-modal.manual-order-dialog .manual-menu-details :is(small, .manual-menu-price, .manual-catalog-heading span),
body[data-admin-theme] .app-modal.manual-order-dialog .manual-cart-line small,
body[data-admin-theme] .app-modal.manual-order-dialog .manual-cart-total :is(span, small) { color: var(--muted); }
body[data-admin-theme] .app-modal.manual-order-dialog .manual-cart-line { border-color: color-mix(in srgb, var(--tenant-primary) 17%, var(--border)); }
body[data-admin-theme] .app-modal.manual-order-dialog .manual-quantity button {
  border-color: color-mix(in srgb, var(--tenant-primary) 28%, var(--border));
  color: var(--tenant-text);
  background: color-mix(in srgb, var(--tenant-primary) 13%, var(--tenant-surface));
}
body[data-admin-theme] .app-modal.manual-order-dialog .manual-cart-total { border-color: color-mix(in srgb, var(--tenant-primary) 24%, var(--border)); }
body[data-admin-theme] .app-modal.manual-order-dialog .manual-cart-total strong { color: var(--tenant-accent); }
body[data-admin-theme] .app-modal.manual-order-dialog .manual-cart-panel .button-primary,
body[data-admin-theme] .app-modal.manual-order-dialog .manual-add-button {
  border-color: color-mix(in srgb, var(--tenant-accent) 70%, white);
  color: var(--admin-button-ink, var(--tenant-text));
  background: linear-gradient(110deg, var(--tenant-primary), var(--tenant-accent));
  box-shadow: 0 7px 22px color-mix(in srgb, var(--tenant-primary) 20%, transparent), inset 0 1px rgba(255,255,255,.23);
}
body[data-admin-theme="glass-light"] .app-modal.manual-order-dialog {
  border-color: color-mix(in srgb, var(--tenant-primary) 28%, rgba(60,70,100,.12));
  background: radial-gradient(ellipse at 12% 0%, rgba(180,169,255,.24), transparent 48%), linear-gradient(145deg, rgba(255,255,255,.86), rgba(247,248,255,.78));
  box-shadow: 0 25px 75px rgba(54,61,96,.2), inset 0 1px rgba(255,255,255,.92);
}
body[data-admin-theme="glass-light"] .app-modal.manual-order-dialog :is(.manual-order-toolbar input, .manual-order-toolbar select, .manual-item-size) { background: rgba(255,255,255,.82); }
body[data-admin-theme="glass-light"] .app-modal.manual-order-dialog :is(.manual-category-pills, .manual-catalog-panel, .manual-cart-panel) { background: rgba(255,255,255,.68); }
body[data-admin-theme="glass-light"] .app-modal.manual-order-dialog .manual-menu-item { background: rgba(255,255,255,.72); }
body[data-admin-theme="glass-light"] .app-modal.manual-order-dialog .manual-menu-item:hover { background: color-mix(in srgb, var(--tenant-primary) 7%, white); }
body[data-admin-theme="glass-light"] .app-modal.manual-order-dialog .manual-menu-image { background: rgba(255,255,255,.86); }

/* إبراز قالب المقهى في صفحة الزبون، بما فيها الرأس وأزرار الطلب والخدمات. */
.menu-body[data-menu-theme] .customer-header {
  border-color: color-mix(in srgb, var(--tenant-accent) 24%, transparent);
  color: var(--tenant-text);
  background: color-mix(in srgb, var(--tenant-background) 86%, transparent);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--tenant-primary) 9%, transparent);
}
.menu-body[data-menu-theme] :is(.customer-brand, .customer-brand #cafe-name, .customer-bottom-nav > button:not(#cart-fab), .customer-order-card) { color: var(--tenant-text); }
.menu-body[data-menu-theme] .customer-brand-mark {
  border: 1px solid color-mix(in srgb, var(--tenant-accent) 58%, white);
  color: var(--tenant-text) !important;
  background: linear-gradient(135deg, var(--tenant-primary), var(--tenant-accent)) !important;
  box-shadow: 0 5px 18px color-mix(in srgb, var(--tenant-primary) 22%, transparent);
}
.menu-body[data-menu-theme] .customer-table-pill,
.menu-body[data-menu-theme] .language-toggle,
.menu-body[data-menu-theme] .menu-search {
  border-color: color-mix(in srgb, var(--tenant-accent) 38%, transparent);
  color: var(--tenant-text);
  background: color-mix(in srgb, var(--tenant-surface) 76%, transparent);
}
.menu-body[data-menu-theme] .menu-search input { color: var(--tenant-text); background: transparent; }
.menu-body[data-menu-theme] .menu-search input::placeholder { color: color-mix(in srgb, var(--tenant-text) 58%, var(--tenant-background)); }
.menu-body[data-menu-theme] .customer-bottom-nav {
  border-color: color-mix(in srgb, var(--tenant-accent) 32%, transparent);
  background: color-mix(in srgb, var(--tenant-background) 88%, transparent);
  box-shadow: 0 -12px 36px color-mix(in srgb, var(--tenant-primary) 16%, transparent);
}
.menu-body[data-menu-theme] .customer-bottom-nav > button:not(#cart-fab):hover { color: var(--tenant-accent); background: color-mix(in srgb, var(--tenant-accent) 12%, transparent); }
.menu-body[data-menu-theme] .customer-bottom-nav #cart-fab {
  border-color: color-mix(in srgb, var(--tenant-accent) 72%, white);
  color: var(--tenant-text);
  background: linear-gradient(110deg, var(--tenant-primary), var(--tenant-accent));
  box-shadow: 0 7px 23px color-mix(in srgb, var(--tenant-primary) 24%, transparent), inset 0 1px rgba(255,255,255,.28);
}
.menu-body[data-menu-theme] .customer-bottom-nav #customer-order-count { color: var(--tenant-text); background: color-mix(in srgb, var(--tenant-primary) 38%, var(--tenant-background)); }
.menu-body[data-menu-theme] .customer-service-actions button {
  border-color: color-mix(in srgb, var(--tenant-accent) 42%, var(--tenant-primary));
  color: var(--tenant-text);
  background: linear-gradient(130deg, color-mix(in srgb, var(--tenant-primary) 12%, var(--tenant-surface)), color-mix(in srgb, var(--tenant-accent) 9%, var(--tenant-background)));
  box-shadow: 0 9px 28px color-mix(in srgb, var(--tenant-primary) 19%, transparent), inset 0 1px rgba(255,255,255,.1);
}
.menu-body[data-menu-theme] .service-action-icon,
.menu-body[data-menu-theme] [data-service-request="bill"] .service-action-icon {
  border-color: color-mix(in srgb, var(--tenant-accent) 52%, transparent);
  color: var(--tenant-accent);
  background: color-mix(in srgb, var(--tenant-accent) 13%, transparent);
}
.menu-body[data-menu-theme] .add-item-button {
  border-color: color-mix(in srgb, var(--tenant-accent) 76%, white);
  color: var(--tenant-text);
  background: linear-gradient(125deg, var(--tenant-primary), var(--tenant-accent));
  box-shadow: 0 7px 22px color-mix(in srgb, var(--tenant-primary) 25%, transparent), inset 0 1px rgba(255,255,255,.25);
}
.menu-body[data-menu-theme] .add-item-button.is-added { color: var(--tenant-text); background: linear-gradient(125deg, var(--tenant-accent), var(--tenant-primary)); }
.menu-body[data-menu-theme="loud"] .customer-bottom-nav #cart-fab,
.menu-body[data-menu-theme="loud"] .add-item-button { text-shadow: 0 1px 2px rgba(0,0,0,.22); box-shadow: 0 8px 25px color-mix(in srgb, var(--tenant-primary) 30%, transparent), 0 0 22px color-mix(in srgb, var(--tenant-accent) 17%, transparent); }
.menu-body[data-menu-theme="aurora"] :is(.customer-bottom-nav #cart-fab, .add-item-button) { color: #07100e; }
.menu-body[data-menu-theme="editorial"] :is(.customer-bottom-nav #cart-fab, .add-item-button),
.menu-body[data-menu-theme="minimal"] :is(.customer-bottom-nav #cart-fab, .add-item-button),
.menu-body[data-menu-theme="warm"] :is(.customer-bottom-nav #cart-fab, .add-item-button),
.menu-body[data-menu-theme="forest"] :is(.customer-bottom-nav #cart-fab, .add-item-button),
.menu-body[data-menu-theme="sand"] :is(.customer-bottom-nav #cart-fab, .add-item-button),
.menu-body[data-menu-theme="glass-light"] :is(.customer-bottom-nav #cart-fab, .add-item-button) { color: var(--tenant-text); }
.menu-body[data-menu-theme="royal"] :is(.customer-bottom-nav #cart-fab, .add-item-button),
.menu-body[data-menu-theme="cyber"] :is(.customer-bottom-nav #cart-fab, .add-item-button),
.menu-body[data-menu-theme="ocean"] :is(.customer-bottom-nav #cart-fab, .add-item-button),
.menu-body[data-menu-theme="rose"] :is(.customer-bottom-nav #cart-fab, .add-item-button),
.menu-body[data-menu-theme="loud"] :is(.customer-bottom-nav #cart-fab, .add-item-button) { color: #fff; }
.menu-body[data-menu-theme] .customer-bottom-nav #cart-count { color: var(--tenant-text); background: color-mix(in srgb, var(--tenant-primary) 68%, var(--tenant-background)); }
.menu-body[data-menu-theme="glass-light"] :is(.customer-header, .customer-bottom-nav) { background: rgba(255,255,255,.78); }
.menu-body[data-menu-theme="glass-light"] .customer-brand-mark { color: var(--tenant-text) !important; }
.menu-body[data-menu-theme="glass-light"] :is(.customer-table-pill, .language-toggle, .menu-search, .customer-service-actions button, .menu-addons) { background: rgba(255,255,255,.64); }
.menu-body[data-menu-theme="glass-light"] .customer-bottom-nav #cart-fab,
.menu-body[data-menu-theme="glass-light"] .add-item-button { color: var(--tenant-text); }

/* ربط زر القائمة وأيقونة المخطط ومبدل العرض بألوان القالب النشط. */
body[data-admin-theme] :is(#sidebar-toggle, .sidebar-toggle) {
  border-color: var(--border);
  color: var(--text);
  background: color-mix(in srgb, var(--panel-strong) 88%, transparent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--tenant-background) 22%, transparent), inset 0 1px rgba(255,255,255,.08);
}
body[data-admin-theme] :is(#sidebar-toggle, .sidebar-toggle):hover,
body[data-admin-theme] :is(#sidebar-toggle, .sidebar-toggle):focus-visible {
  border-color: color-mix(in srgb, var(--tenant-primary) 52%, var(--border));
  color: var(--tenant-primary);
  background: color-mix(in srgb, var(--tenant-primary) 9%, var(--panel-strong));
}
body[data-admin-theme] .floor-map-icon {
  border-color: color-mix(in srgb, var(--tenant-accent) 38%, var(--border));
  color: var(--tenant-accent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--tenant-primary) 16%, var(--panel-strong)), color-mix(in srgb, var(--tenant-accent) 11%, var(--panel-strong)));
  box-shadow: 0 0 22px color-mix(in srgb, var(--tenant-accent) 12%, transparent), inset 0 1px rgba(255,255,255,.1);
}
body[data-admin-theme] .floor-view-toggle {
  border-color: var(--border);
  background: color-mix(in srgb, var(--panel-strong) 86%, transparent);
}
body[data-admin-theme] .floor-view-toggle button { color: var(--muted); }
body[data-admin-theme] .floor-view-toggle button[aria-pressed="true"] {
  color: var(--admin-button-ink, var(--text));
  background: linear-gradient(135deg, var(--tenant-primary), var(--tenant-accent));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--tenant-primary) 24%, transparent);
}

/* ربط نافذة الأيقونة العائمة ومحتوى المحادثة بألوان القالب النشط. */
body[data-admin-theme] .team-chat-widget-drawer {
  border-color: color-mix(in srgb, var(--tenant-primary) 28%, var(--border));
  color: var(--text);
  background: linear-gradient(145deg, color-mix(in srgb, var(--tenant-surface) 92%, var(--tenant-primary)), color-mix(in srgb, var(--tenant-background) 91%, var(--tenant-surface)));
  box-shadow: 0 24px 72px color-mix(in srgb, var(--tenant-background) 52%, transparent), 0 0 36px color-mix(in srgb, var(--tenant-primary) 14%, transparent), inset 0 1px rgba(255,255,255,.12);
}
body[data-admin-theme] .team-chat-widget-head {
  border-color: var(--border);
  background: linear-gradient(105deg, color-mix(in srgb, var(--tenant-primary) 16%, var(--tenant-surface)), color-mix(in srgb, var(--tenant-accent) 10%, var(--tenant-background)));
}
body[data-admin-theme] .team-chat-widget-avatar {
  border-color: color-mix(in srgb, var(--tenant-accent) 35%, var(--border));
  color: var(--tenant-accent);
  background: color-mix(in srgb, var(--tenant-accent) 12%, var(--tenant-surface));
}
body[data-admin-theme] .team-chat-widget-title small { color: var(--muted); }
body[data-admin-theme] .team-chat-widget-title small i {
  background: var(--tenant-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--tenant-accent) 65%, transparent);
}
body[data-admin-theme] .team-chat-widget-head-action {
  border-color: var(--border);
  color: var(--text);
  background: color-mix(in srgb, var(--tenant-surface) 78%, transparent);
}
body[data-admin-theme] .team-chat-widget-head-action:hover {
  border-color: color-mix(in srgb, var(--tenant-accent) 50%, var(--border));
  color: var(--tenant-primary);
  background: color-mix(in srgb, var(--tenant-accent) 12%, var(--tenant-surface));
}
body[data-admin-theme] .team-chat-widget-feed {
  scrollbar-color: color-mix(in srgb, var(--tenant-primary) 42%, transparent) transparent;
  background: radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--tenant-accent) 8%, transparent), transparent 48%), radial-gradient(ellipse at 10% 5%, color-mix(in srgb, var(--tenant-primary) 10%, transparent), transparent 48%);
}
body[data-admin-theme] .team-chat-widget-feed .team-message-bubble {
  border-color: color-mix(in srgb, var(--tenant-primary) 22%, var(--border));
  color: var(--text);
  background: linear-gradient(145deg, color-mix(in srgb, var(--tenant-surface) 90%, var(--tenant-primary)), color-mix(in srgb, var(--tenant-background) 84%, var(--tenant-surface)));
}
body[data-admin-theme] .team-chat-widget-feed .team-message.is-own .team-message-bubble {
  border-color: color-mix(in srgb, var(--tenant-accent) 36%, var(--border));
  background: linear-gradient(145deg, color-mix(in srgb, var(--tenant-primary) 13%, var(--tenant-surface)), color-mix(in srgb, var(--tenant-accent) 9%, var(--tenant-background)));
}
body[data-admin-theme] .team-chat-widget-composer {
  border-color: var(--border);
  background: color-mix(in srgb, var(--tenant-surface) 91%, var(--tenant-background));
}
body[data-admin-theme] .team-chat-widget-tools {
  border-color: var(--border);
  background: color-mix(in srgb, var(--tenant-background) 72%, var(--tenant-surface));
}
body[data-admin-theme] .team-chat-widget-tools textarea { color: var(--text); }
body[data-admin-theme] .team-chat-widget-tools textarea::placeholder { color: var(--muted); }
body[data-admin-theme] .team-chat-widget-mic:not(.is-recording) {
  border-color: color-mix(in srgb, var(--tenant-primary) 36%, var(--border));
  color: var(--tenant-primary);
  background: color-mix(in srgb, var(--tenant-primary) 10%, var(--tenant-surface));
}
body[data-admin-theme] .team-chat-widget-send {
  border-color: color-mix(in srgb, var(--tenant-accent) 58%, var(--border));
  color: var(--admin-button-ink, var(--text));
  background: linear-gradient(135deg, var(--tenant-primary), var(--tenant-accent));
  box-shadow: 0 5px 14px color-mix(in srgb, var(--tenant-primary) 22%, transparent);
}
body[data-admin-theme] .team-chat-widget-send:hover { box-shadow: 0 8px 18px color-mix(in srgb, var(--tenant-accent) 28%, transparent); }
body[data-admin-theme] .cash-drawer-open-form select {
  border-color: var(--border);
  color: var(--text);
  background: color-mix(in srgb, var(--tenant-background) 84%, var(--tenant-surface));
}


/* أدوات سحب وإفلات ترتيب الأقسام والأصناف. */
body[data-admin-theme] .menu-sort-grip {
  display: inline-grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--tenant-primary) 32%, var(--border));
  border-radius: 10px;
  color: var(--tenant-primary);
  background: color-mix(in srgb, var(--tenant-primary) 8%, var(--panel-strong));
  cursor: grab;
  touch-action: none;
  user-select: none;
}
body[data-admin-theme] .menu-sort-grip:active { cursor: grabbing; }
body[data-admin-theme] .category-admin-row.is-sort-dragging,
body[data-admin-theme] .admin-item-row.is-sort-dragging { opacity: .48; }
body[data-admin-theme] .category-admin-row.is-sort-drop-before,
body[data-admin-theme] .admin-item-row.is-sort-drop-before { box-shadow: inset 3px 0 var(--tenant-primary); }
body[data-admin-theme] .category-admin-row.is-sort-drop-after,
body[data-admin-theme] .admin-item-row.is-sort-drop-after { box-shadow: inset -3px 0 var(--tenant-primary); }
@media (max-width: 760px) {
  body[data-admin-theme] .menu-sort-grip { flex-basis: 28px; width: 28px; height: 28px; }
}

/* مخطط صالة أوضح: طاولات ومقاعد مادية مع إبقاء اللون للحالة والقالب. */
body[data-admin-theme] .floor-plan-stage {
  border-color: color-mix(in srgb, var(--tenant-primary) 24%, var(--border));
  background:
    radial-gradient(ellipse at 18% 8%, color-mix(in srgb, var(--tenant-primary) 10%, transparent), transparent 38%),
    radial-gradient(ellipse at 88% 92%, color-mix(in srgb, var(--tenant-accent) 9%, transparent), transparent 40%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 3.5%, transparent) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--text) 3.5%, transparent) 0 1px, transparent 1px 72px),
    linear-gradient(145deg, color-mix(in srgb, var(--tenant-surface) 88%, var(--tenant-primary)), var(--tenant-background));
  box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--tenant-background) 30%, transparent), inset 0 1px rgba(255,255,255,.08), 0 16px 36px rgba(0,0,0,.17);
}
body[data-admin-theme] .floor-plan-stage:before {
  z-index: 0;
  inset: 10px;
  border-color: color-mix(in srgb, var(--tenant-primary) 16%, var(--border));
  border-radius: 16px;
  background-image: linear-gradient(color-mix(in srgb, var(--text) 3.5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 3.5%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
}
body[data-admin-theme] .floor-plan-stage:after { z-index: 0; width: 64px; height: 2px; opacity: .34; box-shadow: none; }
body[data-admin-theme] .floor-plan-stage.is-3d {
  perspective: 1400px;
  background:
    radial-gradient(ellipse at 16% 10%, color-mix(in srgb, var(--tenant-primary) 13%, transparent), transparent 36%),
    radial-gradient(ellipse at 84% 88%, color-mix(in srgb, var(--tenant-accent) 12%, transparent), transparent 40%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 4%, transparent) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--text) 4%, transparent) 0 1px, transparent 1px 68px),
    linear-gradient(145deg, color-mix(in srgb, var(--tenant-surface) 85%, var(--tenant-primary)), var(--tenant-background));
  animation: none;
}
body[data-admin-theme] .floor-plan-stage.is-3d:before {
  inset: 5% 3.2% 7%;
  border-color: color-mix(in srgb, var(--tenant-primary) 20%, var(--border));
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 0 1px, transparent 1px 68px), repeating-linear-gradient(0deg, color-mix(in srgb, var(--text) 5%, transparent) 0 1px, transparent 1px 68px), linear-gradient(145deg, color-mix(in srgb, var(--tenant-primary) 4%, transparent), transparent 56%, color-mix(in srgb, var(--tenant-accent) 4%, transparent));
  box-shadow: inset 0 0 34px color-mix(in srgb, var(--tenant-background) 32%, transparent), inset 0 1px rgba(255,255,255,.06);
  transform: perspective(1300px) rotateX(4deg) scale(1.01);
}
body[data-admin-theme] .floor-plan-stage.is-3d:after { animation: none; opacity: .28; }

/* الطاولة نفسها بلون سطح طبيعي؛ الحلقة ومؤشر الحالة فقط يتبعان حالة الطلب. */
body[data-admin-theme] .floor-table-node,
body[data-admin-theme] .floor-plan-stage.is-3d .floor-table-node {
  border: 0 !important;
  padding: 0;
  color: var(--text);
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body[data-admin-theme] .floor-table-node:after { display: none; content: none; }
body[data-admin-theme] .floor-table-node.is-selected { outline: 0; filter: drop-shadow(0 4px 7px color-mix(in srgb, var(--tenant-primary) 30%, transparent)); }
body[data-admin-theme] .floor-table-node:focus-visible { outline: 2px solid color-mix(in srgb, var(--tenant-primary) 78%, white); outline-offset: 5px; filter: drop-shadow(0 4px 7px color-mix(in srgb, var(--tenant-primary) 24%, transparent)); }
body[data-admin-theme] .floor-table-node.is-occupied { background: transparent !important; box-shadow: none !important; }
body[data-admin-theme] .floor-table-node .floor-table-symbol { filter: drop-shadow(0 6px 7px rgba(16,20,27,.24)); }
body[data-admin-theme] .floor-table-node .floor-symbol-shadow { fill: color-mix(in srgb, var(--tenant-background) 72%, #000); opacity: .48; }
body[data-admin-theme] .floor-table-node .floor-symbol-edge { fill: color-mix(in srgb, #785d43 62%, var(--tenant-background)); stroke: color-mix(in srgb, var(--tenant-accent) 70%, var(--tenant-text)); stroke-width: 1.8; }
body[data-admin-theme] .floor-table-node.is-occupied .floor-symbol-edge { stroke: #d99b4a; }
body[data-admin-theme] .floor-table-node.is-selected .floor-symbol-edge { stroke: color-mix(in srgb, var(--tenant-primary) 72%, white); stroke-width: 2.7; }
body[data-admin-theme] .floor-table-node .floor-symbol-table { fill: color-mix(in srgb, #c4a27a 76%, var(--tenant-surface)); stroke: color-mix(in srgb, #6f563d 76%, var(--tenant-background)); stroke-width: 1.3; }
body[data-admin-theme] .floor-table-node .floor-symbol-inlay { fill: color-mix(in srgb, #e0c9a7 66%, var(--tenant-surface)); stroke: color-mix(in srgb, #987b58 55%, var(--tenant-primary)); stroke-width: 1.15; opacity: .76; }
body[data-admin-theme] .floor-table-node .floor-symbol-grain { stroke: color-mix(in srgb, #775b3c 72%, var(--tenant-primary)); stroke-width: 1.35; opacity: .34; }
body[data-admin-theme] .floor-table-node .floor-symbol-glint { stroke: color-mix(in srgb, white 76%, var(--tenant-accent)); opacity: .38; }
body[data-admin-theme] .floor-table-node .floor-chair-shadow { fill: color-mix(in srgb, var(--tenant-background) 78%, #000); opacity: .54; }
body[data-admin-theme] .floor-table-node .floor-chair-back { fill: color-mix(in srgb, #59616c 74%, var(--tenant-primary)); stroke: color-mix(in srgb, var(--tenant-accent) 48%, #39404a); stroke-width: 1.35; }
body[data-admin-theme] .floor-table-node .floor-chair-seat { fill: color-mix(in srgb, #ded5c6 60%, var(--tenant-surface)); stroke: color-mix(in srgb, var(--tenant-primary) 48%, #6f6254); stroke-width: 1.25; }
body[data-admin-theme] .floor-table-node .floor-chair-frame { stroke: color-mix(in srgb, #626975 68%, var(--tenant-primary)); stroke-width: 2.1; }
body[data-admin-theme] .floor-table-node .floor-chair-back-detail,
body[data-admin-theme] .floor-table-node .floor-chair-seat-detail { stroke: color-mix(in srgb, white 72%, var(--tenant-accent)); opacity: .62; }
body[data-admin-theme] .floor-table-node .floor-table-topline { gap: 5px; border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius: 999px; padding: 3px 7px; color: var(--text); background: color-mix(in srgb, var(--tenant-background) 78%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-shadow: 0 1px 2px color-mix(in srgb, var(--tenant-background) 45%, transparent); }
body[data-admin-theme] .floor-table-node > strong { color: var(--text); text-shadow: 0 1px 3px color-mix(in srgb, var(--tenant-background) 58%, transparent); }
body[data-admin-theme] .floor-table-node > small,
body[data-admin-theme] .floor-table-node .floor-table-meta { color: var(--text); text-shadow: 0 1px 3px color-mix(in srgb, var(--tenant-background) 62%, transparent); }
body[data-admin-theme] .floor-table-node .floor-table-topline i { width: 7px; height: 7px; color: var(--tenant-accent); background: var(--tenant-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tenant-accent) 18%, transparent); }
body[data-admin-theme] .floor-table-node.is-occupied .floor-table-topline i { color: #d99b4a; background: #d99b4a; box-shadow: 0 0 0 2px rgba(217,155,74,.18); }
body[data-admin-theme] .floor-plan-stage.is-3d .floor-table-node .floor-table-symbol { filter: drop-shadow(0 10px 9px rgba(12,16,22,.34)); }
body[data-admin-theme] .floor-plan-stage.is-3d .floor-chair-shadow { opacity: .76; }
body[data-admin-theme] .floor-plan-stage.is-3d .floor-table-node.is-selected { animation: none; }

/* صالات كعلامات تنقّل واضحة، مع سحب أفقي سلس على الهاتف. */
body[data-admin-theme] .floor-area-nav { gap: 10px; border-color: color-mix(in srgb, var(--tenant-primary) 22%, var(--border)); }
body[data-admin-theme] .floor-area-nav-items { scroll-padding-inline: 10px; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
body[data-admin-theme] .floor-area-nav-item { min-height: 56px; }
body[data-admin-theme] .floor-area-nav-item.is-active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tenant-primary) 22%, transparent), 0 5px 16px color-mix(in srgb, var(--tenant-primary) 10%, transparent); }
body[data-admin-theme] .floor-area-room { gap: 10px; border-color: color-mix(in srgb, var(--tenant-primary) 26%, var(--border)); background: linear-gradient(150deg, color-mix(in srgb, var(--tenant-surface) 88%, var(--tenant-primary)), color-mix(in srgb, var(--tenant-background) 88%, var(--tenant-surface))); box-shadow: 0 12px 28px rgba(0,0,0,.12), inset 0 1px rgba(255,255,255,.08); }
body[data-admin-theme] .floor-area-room-heading { min-height: 54px; }

/* بطاقة الطاولة على الهاتف تبقى ضمن إطار الشاشة. */
@media (max-width: 900px) {
  body[data-admin-theme] .floor-table-details-popover,
  body[data-admin-theme] .floor-table-details-popover.is-mobile { left: max(10px, env(safe-area-inset-left)) !important; right: max(10px, env(safe-area-inset-right)) !important; bottom: max(12px, env(safe-area-inset-bottom)) !important; width: auto !important; max-width: none; max-height: min(64dvh, 540px) !important; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border-radius: 20px; padding: 13px; padding-bottom: max(13px, env(safe-area-inset-bottom)); }
  body[data-admin-theme] .floor-table-details-popover .floor-selected-table { gap: 11px; }
  body[data-admin-theme] .floor-table-details-popover .floor-selected-heading { top: -13px; margin-top: -13px; padding-top: 13px; }
  body[data-admin-theme] .floor-table-details-popover .floor-selected-actions { gap: 7px; }
}
@media (max-width: 760px) {
  body[data-admin-theme] .floor-area-nav { gap: 6px; padding: 8px; }
  body[data-admin-theme] .floor-area-nav-items { padding: 2px 2px 7px; scroll-snap-type: x mandatory; }
  body[data-admin-theme] .floor-area-nav-item { min-width: min(142px, 42vw); min-height: 52px; scroll-snap-align: center; }
  body[data-admin-theme] .floor-area-room { padding: 9px; }
  body[data-admin-theme] .floor-plan-stage.is-3d:before { transform: perspective(1000px) rotateX(3deg) scale(1.01); }
}
@media (max-width: 430px) {
  body[data-admin-theme] .floor-area-nav-item { min-width: 132px; gap: 6px; padding: 6px 7px; }
  body[data-admin-theme] .floor-area-nav-counts i { min-width: 18px; height: 18px; }
  body[data-admin-theme] .floor-table-node .floor-table-topline { padding: 2px 5px; font-size: 10px; }
  body[data-admin-theme] .floor-table-node > strong { font-size: 9px; }
  body[data-admin-theme] .floor-table-node > small,
  body[data-admin-theme] .floor-table-node .floor-table-meta { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-admin-theme] .floor-area-nav-item,
  body[data-admin-theme] .floor-area-nav-item:after,
  body[data-admin-theme] .floor-table-node,
  body[data-admin-theme] .floor-furniture { transition: none !important; animation: none !important; }
}

/* يمنح أسطح الطاولات ألواناً أغنى تتفاعل مع القالب، مع إبقاء الحالة كمؤشر صغير. */
body[data-admin-theme] .floor-table-node .floor-symbol-table {
  fill: color-mix(in srgb, var(--tenant-primary) 46%, #c8925c);
  stroke: color-mix(in srgb, var(--tenant-primary) 34%, #514039);
  stroke-width: 1.5;
}
body[data-admin-theme] .floor-table-node:nth-of-type(4n + 2) .floor-symbol-table {
  fill: color-mix(in srgb, var(--tenant-accent) 43%, #ad7853);
}
body[data-admin-theme] .floor-table-node:nth-of-type(4n + 3) .floor-symbol-table {
  fill: color-mix(in srgb, var(--tenant-primary) 35%, color-mix(in srgb, var(--tenant-accent) 28%, #d1a36d));
}
body[data-admin-theme] .floor-table-node:nth-of-type(4n) .floor-symbol-table {
  fill: color-mix(in srgb, var(--tenant-primary) 35%, #87644e);
}
body[data-admin-theme] .floor-table-node .floor-symbol-edge {
  fill: color-mix(in srgb, var(--tenant-primary) 25%, #584639);
  stroke: color-mix(in srgb, var(--tenant-accent) 44%, #463a36);
  stroke-width: 1.6;
}
body[data-admin-theme] .floor-table-node.is-selected .floor-symbol-edge {
  stroke: var(--tenant-accent);
  stroke-width: 2.7;
}
body[data-admin-theme] .floor-table-node.is-occupied .floor-symbol-edge {
  stroke: #d99b4a;
  stroke-width: 2.2;
}
body[data-admin-theme] .floor-table-node .floor-symbol-inlay {
  fill: color-mix(in srgb, var(--tenant-accent) 19%, #e7c99b);
  stroke: color-mix(in srgb, var(--tenant-primary) 34%, #87684b);
  opacity: .86;
}
body[data-admin-theme] .floor-table-node .floor-symbol-grain {
  stroke: color-mix(in srgb, var(--tenant-primary) 42%, #60442f);
  opacity: .44;
}
body[data-admin-theme] .floor-table-node .floor-chair-back {
  fill: color-mix(in srgb, var(--tenant-primary) 36%, #57433a);
  stroke: color-mix(in srgb, var(--tenant-accent) 36%, #443832);
}
body[data-admin-theme] .floor-table-node .floor-chair-seat {
  fill: color-mix(in srgb, var(--tenant-accent) 27%, #ddc5a1);
  stroke: color-mix(in srgb, var(--tenant-primary) 38%, #72573d);
}
body[data-admin-theme] .floor-table-node > strong,
body[data-admin-theme] .floor-table-node > small[data-floor-area-label] {
  display: none;
}
body[data-admin-theme] .floor-table-node .floor-table-topline {
  gap: 6px;
  border-color: color-mix(in srgb, var(--tenant-primary) 28%, var(--border));
  padding: 4px 9px;
  background: color-mix(in srgb, var(--tenant-background) 88%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--tenant-background) 28%, transparent);
  font-size: 11px;
  font-weight: 800;
}
body[data-admin-theme] .floor-table-node .floor-table-meta {
  max-width: calc(100% - 22px);
  border: 1px solid color-mix(in srgb, var(--tenant-primary) 22%, var(--border));
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--text);
  background: color-mix(in srgb, var(--tenant-surface) 86%, transparent);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: none;
}

/* يضيف زر إزالة متناسقاً لكل صالة مخصصة أثناء تعديل المخطط. */
body[data-admin-theme] .floor-area-nav-entry {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  gap: 5px;
  min-width: 178px;
}
body[data-admin-theme] .floor-area-nav-entry .floor-area-nav-item {
  flex: 1 1 auto;
  min-width: 0;
}
body[data-admin-theme] .floor-area-remove {
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  align-self: center;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, #e77979 38%, var(--border));
  border-radius: 11px;
  color: color-mix(in srgb, #e77979 80%, var(--text));
  background: color-mix(in srgb, #e77979 9%, var(--panel));
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
body[data-admin-theme] .floor-area-remove svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
body[data-admin-theme] .floor-area-remove:hover { border-color: color-mix(in srgb, #e77979 68%, var(--border)); color: #fff; background: color-mix(in srgb, #bc5555 76%, var(--panel)); transform: translateY(-1px); }
body[data-admin-theme] .floor-area-remove:focus-visible { outline: 2px solid color-mix(in srgb, #e77979 72%, var(--tenant-accent)); outline-offset: 2px; }
body[data-admin-theme] .floor-area-remove:disabled { opacity: .55; cursor: wait; }
@media (max-width: 760px) {
  body[data-admin-theme] .floor-area-nav-entry { min-width: min(164px, 48vw); gap: 4px; }
  body[data-admin-theme] .floor-area-nav-entry .floor-area-nav-item { min-width: 0; }
  body[data-admin-theme] .floor-area-remove { flex-basis: 30px; width: 30px; height: 30px; border-radius: 9px; }
}
@media (max-width: 430px) {
  body[data-admin-theme] .floor-table-node .floor-table-topline { padding: 3px 7px; font-size: 10px; }
  body[data-admin-theme] .floor-table-node .floor-table-meta { padding: 2px 6px; font-size: 8px; }
}
/* أدوات متابعة حسابات العملاء داخل لوحة platform_admin فقط. */
.platform-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 18px}.platform-summary-card{display:grid;gap:8px;padding:20px 22px}.platform-summary-card>span,.platform-summary-card>small{color:var(--muted)}.platform-summary-card>strong{font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.1}.platform-heading-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.platform-tenants-table{min-width:1080px}.platform-tenants-table td{vertical-align:top}.platform-tenant-meta{display:block;margin-top:5px;color:var(--muted);font-size:.82rem;line-height:1.55}.platform-status-pill,.platform-overdue{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;padding:4px 9px;font-size:.78rem;font-weight:700}.platform-status-pill.is-paid{color:var(--mint)}.platform-status-pill.is-trial{color:var(--purple)}.platform-overdue{margin-inline-start:6px;color:#ff9b9b;border-color:rgba(255,95,95,.42)}.platform-vat-progress{display:block;width:150px;max-width:100%;height:8px;margin:8px 0 4px;accent-color:var(--accent)}.platform-row-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.platform-tax-note{margin:14px 0 0;color:var(--muted);font-size:.86rem;line-height:1.65}.platform-log-filter{display:flex;align-items:end;gap:10px;margin-bottom:12px}.platform-log-filter label{display:grid;gap:6px;flex:1}.platform-error-log{max-height:min(58vh,620px);overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;direction:ltr;text-align:left;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--panel-strong);color:var(--text);font: .82rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}.platform-support-view-banner{position:fixed;z-index:10000;inset:0 0 auto;display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 16px;background:linear-gradient(100deg,var(--purple),var(--mint));color:var(--admin-button-ink,var(--text));box-shadow:0 8px 28px rgba(0,0,0,.2);font-weight:800}.platform-support-view-banner .button{white-space:nowrap}@media(max-width:700px){.platform-summary-grid{grid-template-columns:1fr}.platform-heading-actions{width:100%}.platform-heading-actions .button{flex:1}.platform-log-filter{align-items:stretch;flex-direction:column}.platform-log-filter .button{width:100%}.platform-support-view-banner{justify-content:space-between;font-size:.84rem;padding:8px 10px}}

/* معاينة الدعم تعرض بيانات العميل بلا تفعيل إجراءات التعديل. */
body.support-view-mode #workspace button:not([data-view]):not([data-refresh]),body.support-view-mode #workspace [data-action],body.support-view-mode #workspace form{pointer-events:none;opacity:.58}