/* NERO MIX — shared styles for the customer ordering page and the
   kitchen/admin dashboard. Bold orange + green brand identity (light
   theme), RTL-first. Updated 2026-09-13 at الحاج أيمن's request for a
   sharper, more vivid look (previous identity was a muted cream/gold —
   see git history / earlier ZIPs if that look is ever wanted back). All
   colors are driven by the CSS variables below — every rule in this file
   references them, so re-theming again only ever means editing this block
   (plus the small set of literal rgba() shadow/tint values noted where
   they mirror a variable's RGB, listed here for future reference:
   line ~19 --line, ~148/161/176 etc. white-on-color text, and a few
   rgba() tints keyed to --paprika/--gold/--green's RGB triplets). */

@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@500;600;700&family=Cairo:wght@300;400;500;600;700;800&display=swap');

:root{
  --bg:#fff8f2;
  --bg-2:#ffe1c2;
  --ink:#123822;
  --ink-2:#ffffff;
  --ink-3:#fff0e0;
  --panel:#ffffff;
  --gold:#ff6a00;
  --gold-bright:#cc4400;
  --paprika:#d7263d;
  --green:#17a34a;
  --cream:#1c1c1c;
  --cream-dim:#6b6358;
  --line: rgba(0,0,0,0.14);
  --danger:#d7263d;
  /* رقم الطاولة (2026-09-17، طلب الحاج أيمن: "ميزها باللون الازرق و خليها
     اصغر") — أزرق واضح التباين على الخلفيات الفاتحة (--bg/--panel). */
  --blue:#1565c0;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
body{
  margin:0;
  background:var(--bg);
  color:var(--cream);
  font-family:'Cairo','Tahoma',sans-serif;
  direction:rtl;
}

a{ color:var(--gold-bright); }

.brand-font{ font-family:'El Messiri', serif; }

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:22;
  background:linear-gradient(180deg, var(--bg-2), var(--bg));
  border-bottom:1px solid var(--line);
  padding:0.9rem 1.1rem;
  display:flex; align-items:center; justify-content:space-between; gap:0.8rem;
}
.topbar .logo{
  font-family:'El Messiri', serif; font-weight:700; font-size:1.25rem; color:var(--gold-bright);
  display:flex; align-items:center; gap:0.5rem;
}
.topbar .logo small{ font-size:0.6rem; color:var(--cream-dim); font-weight:400; letter-spacing:0.08em; direction:ltr; }

/* ---------- Contact banner (WhatsApp + phone) — 2026-09-13 ----------
   Sits right under the top bar, scrolls away normally with the page (not
   sticky) — visible whenever a customer is at/near the top, out of the
   way once they're browsing the menu. Numbers come from
   NERO_WHATSAPP_NUMBER / NERO_CONTACT_PHONE (js/firebase-config.js),
   filled in at runtime by js/app.js. */
.contact-banner{
  display:flex; align-items:center; justify-content:center; gap:0.9rem; flex-wrap:wrap;
  background:var(--green); padding:0.5rem 1rem; text-align:center;
}
.contact-banner-link{
  display:inline-flex; align-items:center; gap:0.32rem;
  color:#ffffff; text-decoration:none; font-size:0.76rem; font-weight:700;
}
.contact-banner-link:active{ opacity:0.85; }

/* ---------- Search bar ---------- */
.search-bar{
  position:sticky; top:54px; z-index:21;
  background:var(--bg); padding:0.5rem 1rem;
  border-bottom:1px solid rgba(0,0,0,0.12);
}
.search-pill{
  display:flex; align-items:center; gap:0.5rem;
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:0.5rem 0.9rem;
}
.search-pill .search-icon{ flex:0 0 auto; color:var(--cream-dim); }
.search-pill input[type="search"]{
  flex:1 1 auto; min-width:0; border:none; background:transparent; outline:none;
  font-family:inherit; font-size:0.8rem; color:var(--cream); direction:rtl;
  -webkit-appearance:none; appearance:none;
}
.search-pill input[type="search"]::placeholder{ color:var(--cream-dim); }
.search-pill input[type="search"]::-webkit-search-cancel-button{ display:none; }
.search-clear{
  flex:0 0 auto; border:none; background:var(--bg); color:var(--cream-dim);
  width:1.6rem; height:1.6rem; border-radius:50%; cursor:pointer; font-size:0.8rem;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Category tabs ---------- */
.cat-tabs{
  position:sticky; top:107px; z-index:19;
  display:flex; gap:0.35rem; overflow-x:auto;
  padding:0.5rem 0.8rem; background:var(--bg);
  border-bottom:1px solid rgba(0,0,0,0.15);
  scrollbar-width:none;
}
.cat-tabs::-webkit-scrollbar{ display:none; }
.cat-tab{
  flex:0 0 auto;
  font-size:0.68rem; font-weight:600; color:var(--cream-dim);
  background:var(--panel); border:1px solid var(--line);
  padding:0.32rem 0.6rem; border-radius:999px; cursor:pointer;
  white-space:nowrap;
}
.cat-tab.active{ background:var(--gold); border-color:var(--gold); color:#ffffff; }

main{ max-width:720px; margin:0 auto; padding:0.5rem 1.1rem 6.5rem; }

/* ---------- Category sections ---------- */
.category{ padding:1.9rem 0 0.4rem; scroll-margin-top:160px; }
.cat-head{ display:flex; align-items:center; gap:0.7rem; margin-bottom:0.9rem; }
.cat-ar{ font-family:'El Messiri', serif; font-weight:700; font-size:1.35rem; color:var(--gold-bright); margin:0; }
.cat-en{ font-size:0.68rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--cream-dim); direction:ltr; }
.cat-rule{ height:1px; background:linear-gradient(90deg, var(--line), transparent 85%); margin-bottom:0.7rem; }
.cat-serve-note{ font-size:0.72rem; color:var(--cream-dim); margin:-0.2rem 0 0.8rem; font-weight:300; }

/* ---------- Collapsible sub-groups (accordion) ---------- */
.sub-group{ margin-top:0.9rem; }
.sub-group summary.sub-label{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:0.5rem;
  font-size:0.78rem; font-weight:700; color:var(--paprika);
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:0.55rem 0.8rem; margin:0 0 0.35rem;
}
.sub-group summary.sub-label::-webkit-details-marker{ display:none; }
.sub-group .sub-arrow{ color:var(--gold); font-size:0.85rem; flex:0 0 auto; }
.sub-group .sub-label-text{ flex:1 1 auto; }
.sub-group .sub-count{
  flex:0 0 auto; font-size:0.66rem; font-weight:600; color:var(--cream-dim);
  background:var(--bg); border-radius:999px; padding:0.1rem 0.55rem;
}
.sub-group-items{ padding-top:0.1rem; }

/* ---------- Search results ---------- */
#searchResults{ max-width:720px; margin:0 auto; padding:0.7rem 1.1rem 6.5rem; }
.search-result-row{ margin-bottom:0.2rem; }
.search-result-cat{
  display:inline-block; font-size:0.64rem; font-weight:600; color:var(--gold-bright);
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:0.12rem 0.6rem; margin:0.6rem 0 0.3rem;
}
.search-empty{ text-align:center; color:var(--cream-dim); font-size:0.85rem; padding:2.5rem 1rem; line-height:1.8; }

/* ---------- Item row ---------- */
.item{
  display:flex; align-items:center; gap:0.7rem;
  padding:0.7rem 0; border-bottom:1px solid rgba(0,0,0,0.14);
}
.item:last-child{ border-bottom:none; }
.item-thumb{
  flex:0 0 auto; width:56px; height:56px; border-radius:10px;
  object-fit:cover; background:var(--bg-2); border:1px solid var(--line);
}
.item-name{ flex:1 1 auto; min-width:0; }
.item-name .ar{ display:flex; align-items:center; gap:0.35rem; font-size:0.98rem; font-weight:600; color:var(--cream); flex-wrap:wrap; }
.item-name .en{ display:block; direction:ltr; text-align:right; font-size:0.7rem; color:var(--cream-dim); margin-top:0.1rem; }
.item-name .desc{ display:block; font-size:0.72rem; color:var(--cream-dim); margin-top:0.15rem; font-weight:300; }
.item-price{ font-weight:700; font-size:0.92rem; color:var(--gold-bright); font-variant-numeric:tabular-nums; white-space:nowrap; }
.badge{
  display:inline-block; font-size:0.58rem; font-weight:700; color:#ffffff; background:var(--paprika);
  padding:0.06rem 0.4rem; border-radius:2px; letter-spacing:0.03em;
}

.qty-stepper{ display:flex; align-items:center; gap:0.4rem; flex:0 0 auto; }
.qty-stepper button{
  width:28px; height:28px; border-radius:6px; border:1px solid var(--line);
  background:var(--panel); color:var(--gold-bright); font-size:1rem; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.qty-stepper button:active{ transform:scale(0.94); }
.qty-stepper .qty-val{ min-width:1.4em; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
.add-btn{
  flex:0 0 auto; font-size:0.78rem; font-weight:700; color:#ffffff; background:var(--gold);
  border:none; border-radius:8px; padding:0.42rem 0.8rem; cursor:pointer;
}
.add-btn:active{ transform:scale(0.96); }

/* ---------- Floating cart bar ---------- */
.cart-bar{
  position:fixed; bottom:0; inset-inline:0; z-index:30;
  background:linear-gradient(180deg, transparent, var(--bg) 30%);
  padding:0 1rem 1rem; display:flex; justify-content:center;
  transform:translateY(120%); transition:transform 0.25s ease;
  pointer-events:none;
}
.cart-bar.visible{ transform:translateY(0); pointer-events:auto; }
.cart-bar-inner{
  width:100%; max-width:680px; background:var(--gold); color:#ffffff;
  border-radius:14px; padding:0.85rem 1.1rem; display:flex; align-items:center; justify-content:space-between;
  gap:0.8rem; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,0.28);
}
.cart-bar-inner .count{ background:var(--ink); color:#eafff1; border-radius:999px; padding:0.15rem 0.55rem; font-size:0.75rem; font-weight:700; }
.cart-bar-inner .label{ font-weight:700; font-size:0.9rem; }
.cart-bar-inner .total{ font-weight:800; font-variant-numeric:tabular-nums; }

/* ---------- Modal / sheet ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:40;
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.2s ease;
}
.overlay.open{ opacity:1; pointer-events:auto; }
.sheet{
  width:100%; max-width:680px; max-height:88vh; overflow-y:auto;
  background:var(--ink-2); border-radius:18px 18px 0 0; border-top:1px solid var(--line);
  padding:1.2rem 1.2rem 1.6rem;
  transform:translateY(24px); transition:transform 0.2s ease;
  box-shadow:0 -8px 30px rgba(0,0,0,0.16);
}
.overlay.open .sheet{ transform:translateY(0); }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:0.9rem; }
.sheet-head h2{ font-family:'El Messiri', serif; color:var(--gold-bright); margin:0; font-size:1.15rem; }
.close-btn{ background:none; border:none; color:var(--cream-dim); font-size:1.3rem; cursor:pointer; line-height:1; }

.cart-row{ display:flex; align-items:center; gap:0.7rem; padding:0.6rem 0; border-bottom:1px solid rgba(0,0,0,0.14); }
.cart-row .name{ flex:1 1 auto; font-size:0.9rem; font-weight:600; }
.cart-row .line-total{ font-weight:700; color:var(--gold-bright); font-variant-numeric:tabular-nums; }
.remove-btn{ background:none; border:none; color:var(--danger); font-size:0.75rem; cursor:pointer; text-decoration:underline; }

/* 🆕 دمج فواتير طاولة (2026-09-18، طلب الحاج أيمن) — صف اختيار فاتورة
   داخل نافذة الدمج (يعيد استخدام .cart-row أعلاه، فقط يضيف مساحة/مؤشر
   لمربع الاختيار في البداية)، وصفّ زرّي الدفع أسفل النافذة جنباً إلى جنب
   (نفس فلسفة .order-card .actions لكن بعرض كامل هنا). */
.merge-order-row{ cursor:pointer; }
.merge-order-row input.merge-order-check{ width:18px; height:18px; cursor:pointer; flex:0 0 auto; }
/* 🆕 رقم الطاولة داخل مربع كل فاتورة (2026-09-18، طلب الحاج أيمن) — بجانب
   رقم الفاتورة مباشرة، بلون خافت حتى لا ينافس رقم الفاتورة نفسه. */
.merge-order-table-tag{ color:var(--cream-dim); font-weight:600; font-size:0.85em; }
.merge-table-pay-buttons{ display:flex; gap:0.6rem; margin-top:1rem; }
.merge-table-pay-buttons .editor-btn{ flex:1; text-align:center; }
/* 🆕 معاينة الفاتورة المجمّعة على الشاشة قبل الدفع (2026-09-18، طلب الحاج
   أيمن "اظهر فاتورة واحد قبل الدفع") — بنود + إجمالي واحد، بنفس محتوى
   الفاتورة التي ستُطبع فعلياً بعد الدفع (راجعوا buildMergedInvoiceData في
   js/admin.js) حتى لا يوجد أي فرق بين ما يراه الموظف هنا وما يُطبع لاحقاً. */
.merge-table-preview{ margin-top:1rem; padding-top:0.8rem; border-top:1px dashed var(--line); }
.merge-preview-head{ font-family:'El Messiri', serif; color:var(--gold-bright); font-weight:800; font-size:0.95rem; margin-bottom:0.5rem; }
.merge-preview-table{ width:100%; border-collapse:collapse; font-size:0.85rem; margin-bottom:0.5rem; }
.merge-preview-table td{ padding:0.3rem 0; border-bottom:1px solid rgba(0,0,0,0.1); }
.merge-preview-empty{ color:var(--cream-dim); font-size:0.85rem; margin-top:1rem; }

.cart-summary{ margin-top:0.9rem; padding-top:0.9rem; border-top:1px dashed var(--line); display:flex; justify-content:space-between; font-weight:700; font-size:1.05rem; }
.cart-empty{ text-align:center; color:var(--cream-dim); padding:2rem 0; font-size:0.9rem; }

/* ---------- Forms ---------- */
.field{ margin-bottom:0.9rem; }
.field label{ display:block; font-size:0.78rem; font-weight:600; color:var(--cream-dim); margin-bottom:0.35rem; }
/* "(اختياري)" hint next to Name/Phone — shown only in pickup mode, toggled
   by js/app.js applyNameOrPhoneOptionality() (2026-09-14). */
.optional-hint{ font-weight:400; font-size:0.9em; color:var(--cream-dim); opacity:0.75; }
.field input, .field textarea, .field select{
  width:100%; background:var(--panel); border:1px solid var(--line); color:var(--cream);
  border-radius:8px; padding:0.6rem 0.75rem; font-family:inherit; font-size:0.92rem;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:2px solid var(--gold); outline-offset:1px; }
/* رقم الطاولة عند الزبون (2026-09-17، طلب الحاج أيمن: "الطاولة لم يتغير
   المربع للون الازرق و تصغيره") — نفس فلسفة تمييز رقم الطاولة بشاشة
   المطبخ (.table-num) لكن هنا لحقل الإدخال نفسه في صفحة الطلب: حدّ أزرق
   بدل الرمادي العام، ونص أزرق عريض، وحجم أصغر (عرض/حشوة/خط) من بقية حقول
   النموذج — رقم الطاولة قصير (1-2 خانة) فلا يحتاج مربعاً بعرض كامل. */
#custTable{
  max-width:110px; border-color:var(--blue); border-width:2px; color:var(--blue);
  font-weight:800; font-size:1rem; padding:0.4rem 0.6rem; text-align:center;
}
#custTable:focus{ outline-color:var(--blue); }
/* Phone field: fixed +970 country code badge + digits-only input
   (2026-09) — customers previously typed the local "05XXXXXXXX" format
   freely; now the code is locked and the input itself only ever holds
   digits (enforced in js/app.js's keydown/input handlers, not just this
   inputmode hint), so staff always get a clean, callable number. */
.phone-input-group{ display:flex; gap:0.5rem; direction:ltr; }
.phone-input-group .phone-prefix{
  flex:0 0 auto; display:flex; align-items:center; padding:0 0.75rem;
  background:var(--ink-3); border:1px solid var(--line); border-radius:8px;
  color:var(--gold-bright); font-weight:700; font-size:0.92rem;
}
.phone-input-group input{ flex:1; direction:ltr; text-align:left; letter-spacing:0.03em; }
.mode-toggle{ display:flex; gap:0.5rem; }
.mode-toggle button{
  flex:1; padding:0.55rem; border-radius:8px; border:1px solid var(--line); background:var(--panel);
  color:var(--cream-dim); font-weight:700; font-size:0.85rem; cursor:pointer;
}
.mode-toggle button.active{ background:var(--gold); border-color:var(--gold); color:#ffffff; }

.checkbox-field{
  display:flex; align-items:flex-start; gap:0.5rem; margin-top:0.6rem;
  font-size:0.8rem; font-weight:600; color:var(--cream); line-height:1.5; cursor:pointer;
}
.checkbox-field input[type="checkbox"]{ width:auto; margin-top:0.2rem; flex:0 0 auto; accent-color:var(--gold); }

.primary-btn{
  width:100%; background:var(--gold); color:#ffffff; border:none; border-radius:10px;
  padding:0.85rem; font-weight:800; font-size:0.98rem; cursor:pointer; margin-top:0.4rem;
}
.primary-btn:disabled{ opacity:0.5; cursor:not-allowed; }
.secondary-btn{
  display:block; width:100%; box-sizing:border-box; background:transparent; color:var(--gold-bright);
  border:1px solid var(--gold); text-decoration:none; text-align:center;
  border-radius:10px; padding:0.75rem; font-weight:700; font-size:0.9rem; cursor:pointer; margin-top:0.6rem;
}
.whatsapp-btn{
  width:100%; background:#25D366; color:#0b1e10; border:none; border-radius:10px;
  padding:0.8rem; font-weight:800; font-size:0.92rem; cursor:pointer; margin-top:0.6rem;
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
}

.payment-info{
  background:var(--panel); border:1px dashed var(--line); border-radius:10px;
  padding:0.9rem 1rem; margin-bottom:0.9rem; text-align:center;
}
.payment-info .pay-title{ font-size:0.8rem; color:var(--cream); font-weight:600; margin:0 0 0.7rem; }
/* تصغير حجم الباركود (2026-09-16، بلاغ الحاج أيمن: "حجم الباركود بشاشة
   الزبون كبير") -- كان max-width:240px يجعله يظهر بأقصى حجمه على كل
   هاتف تقريباً (عرض حاوية الدفع على الجوال أكبر من 240px دائماً). خُفِّض
   إلى 160px -- لا يزال كبيراً بما يكفي لمسح مريح بكاميرا الهاتف، لكن
   بحجم أكثر تناسباً مع باقي الصفحة. */
.payment-info .pay-qr{ width:100%; max-width:160px; border-radius:8px; border:1px solid var(--line); margin:0 auto 0.8rem; display:block; }
.payment-info .pay-details{ text-align:right; font-size:0.8rem; }
.payment-info .pay-details div{ display:flex; justify-content:space-between; gap:0.6rem; padding:0.3rem 0; border-bottom:1px solid rgba(0,0,0,0.14); }
.payment-info .pay-details div:last-child{ border-bottom:none; }
.payment-info .pay-details span{ color:var(--cream-dim); }
.payment-info .pay-details b{ color:var(--gold-bright); font-variant-numeric:tabular-nums; }
.payment-info .pay-note{ font-size:0.72rem; color:var(--cream-dim); margin:0.7rem 0 0; line-height:1.7; }
/* خياران للدفع (تحويل بنكي / جوال باي) — 2026-09-15، طلب الحاج أيمن إضافة
   باركود جوال باي بجانب باركود البنك الإسلامي. كل خيار داخل كتلة مستقلة
   بعنوان صغير خاص به؛ فاصل "أو" بينهما بنفس أسلوب الخط المتقطع المستخدَم
   أصلاً لحدود .payment-info حتى يبقى الانسجام مع باقي التصميم. */
.payment-info .pay-method{ margin-bottom:0.9rem; }
.payment-info .pay-method-title{ font-size:0.78rem; font-weight:800; color:var(--gold-bright); margin:0 0 0.5rem; }
.payment-info .pay-method-divider{
  display:flex; align-items:center; gap:0.6rem; font-size:0.7rem; font-weight:700;
  color:var(--cream-dim); margin:0.9rem 0; text-transform:uppercase;
}
.payment-info .pay-method-divider::before,
.payment-info .pay-method-divider::after{ content:""; flex:1 1 auto; border-top:1px dashed var(--line); }

/* Amount-to-transfer callout (checkout, 2026-09-13) — deliberately more
   prominent than the plain bank-detail rows above it, since it's the one
   figure a customer must not get wrong before transferring. */
.transfer-amount{
  display:flex; align-items:center; justify-content:space-between; gap:0.6rem;
  background:rgba(255,106,0,0.12); border:1px solid var(--gold); border-radius:9px;
  padding:0.65rem 0.85rem; margin-top:0.8rem; font-size:0.82rem; font-weight:700; color:var(--cream);
}
.transfer-amount b{ color:var(--gold-bright); font-size:1.05rem; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* طلب خاص (custom/off-menu item, 2026-09-15) — قسم استلام (pickup) فقط
   في نموذج الزبون، راجعوا index.html/#customItemsField. لا سعر هنا —
   فقط وصف + كمية، فالصف أبسط من .cart-row (لا .line-total). */
#customItemsList{ display:flex; flex-direction:column; gap:0.5rem; margin-bottom:0.5rem; }
.custom-item-row{ display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.custom-item-row .custom-item-text{
  flex:1 1 160px; min-width:0; padding:0.6rem 0.7rem; border-radius:8px; border:1px solid var(--line);
  background:var(--panel); color:var(--cream); font-size:0.85rem;
}
.custom-item-remove-btn{
  flex:0 0 auto; border:1px solid var(--danger); background:transparent; color:var(--danger);
  border-radius:8px; width:2.1rem; height:2.1rem; font-size:0.9rem; cursor:pointer;
}

.error-text{ color:var(--danger); font-size:0.78rem; margin-top:0.3rem; }
.note-box{
  font-size:0.75rem; color:var(--cream-dim); background:var(--panel); border:1px dashed var(--line);
  border-radius:8px; padding:0.65rem 0.8rem; margin-top:0.8rem; line-height:1.7;
}

/* ---------- Payment-proof upload (checkout form, delivery only) ---------- */
.proof-upload-buttons{ display:flex; gap:0.5rem; }
.proof-upload-btn{
  flex:1; background:transparent; color:var(--gold-bright); border:1px solid var(--gold);
  border-radius:9px; padding:0.65rem 0.5rem; font-weight:700; font-size:0.82rem; cursor:pointer;
}
.proof-upload-btn:active{ background:rgba(255,106,0,0.12); }
.payment-proof-preview{ margin-top:0.6rem; }
.payment-proof-preview img{
  max-width:100%; max-height:220px; border-radius:8px; border:1px solid var(--line);
  display:block; object-fit:contain; background:var(--bg-2);
}
.proof-remove-btn{
  margin-top:0.4rem; background:none; border:none; color:var(--danger); font-size:0.78rem;
  cursor:pointer; text-decoration:underline; padding:0;
}

/* ---------- Payment-proof display (kitchen/admin order card) ---------- */
.proof-thumb-link{
  display:flex; align-items:center; gap:0.5rem; margin-bottom:0.5rem; text-decoration:none;
  background:rgba(23,163,74,0.1); border:1px solid var(--green); border-radius:8px; padding:0.4rem 0.6rem;
}
.proof-thumb-link span{ font-size:0.78rem; font-weight:600; color:var(--green); }
.proof-thumb{
  width:44px; height:44px; border-radius:6px; object-fit:cover; border:1px solid var(--line); flex:0 0 auto;
}
.proof-missing{
  font-size:0.76rem; color:var(--paprika); background:rgba(215,38,61,0.1); border:1px solid var(--paprika);
  border-radius:8px; padding:0.45rem 0.6rem; margin-bottom:0.5rem; line-height:1.6;
}

/* ---------- Confirmation ---------- */
.confirm-icon{ width:56px; height:56px; margin:0 auto 0.8rem; display:block; }
.confirm-icon circle{ fill:none; stroke:var(--gold); stroke-width:1.4; }
.confirm-icon path{ fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.order-number{ text-align:center; font-family:'El Messiri', serif; font-size:1.6rem; color:var(--gold-bright); margin:0.3rem 0; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; top:14px; left:50%; transform:translateX(-50%) translateY(-140%);
  background:var(--gold); color:#ffffff; font-weight:700; font-size:0.85rem;
  padding:0.6rem 1.1rem; border-radius:999px; z-index:60; transition:transform 0.25s ease;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
}
.toast.show{ transform:translateX(-50%) translateY(0); }

/* ---------- New-order alert popup (2026-09-14) ----------
   Bigger/bolder than the generic toast on purpose — this one exists to
   grab attention from across the room, paired with a sound (js/admin.js
   checkNewOrderAlerts). Same fixed-top-center mechanics as .toast. */
.new-order-popup{
  position:fixed; top:14px; left:50%; transform:translateX(-50%) translateY(-160%);
  background:var(--green); color:#ffffff; font-weight:700; font-size:1.05rem;
  padding:0.9rem 1.6rem; border-radius:14px; z-index:65; transition:transform 0.25s ease;
  box-shadow:0 10px 28px rgba(0,0,0,0.32); text-align:center; max-width:90vw;
}
.new-order-popup.show{ transform:translateX(-50%) translateY(0); }

/* 🆕 بانر تنبيه VIP أحمر (2026-09-18، طلب الحاج أيمن) -- بانر عرضه كامل
   ثابت أعلى الشاشة (بعكس newOrderPopup الذي هو بالون عائم يختفي تلقائياً)
   لأنه يجب أن يبقى ظاهراً حتى يُتَّخذ إجراء فعلي، ومن أي شاشة داخل لوحة
   الإدارة (z-index أعلى من newOrderPopup حتى لا يُحجَب لو تزامنا). نبض خفيف
   بالظل لجذب الانتباه دون إزعاج بصري صاخب. */
.vip-alert-banner{
  position:fixed; top:0; left:0; right:0; z-index:70;
  background:var(--danger); color:#ffffff; font-weight:800; font-size:0.95rem;
  padding:0.75rem 1rem; text-align:center; cursor:pointer;
  transform:translateY(-120%); transition:transform 0.25s ease;
  box-shadow:0 4px 18px rgba(0,0,0,0.35);
}
.vip-alert-banner.show{ transform:translateY(0); animation:vipAlertPulse 1.8s ease-in-out infinite; }
@keyframes vipAlertPulse{
  0%, 100%{ box-shadow:0 4px 18px rgba(0,0,0,0.35); }
  50%{ box-shadow:0 4px 26px rgba(215,38,61,0.85); }
}

/* ---------- Welcome video popup (customer page, first visit only) ---------- */
.intro-overlay{
  position:fixed; inset:0; z-index:70; background:rgba(20,14,8,0.78);
  display:flex; align-items:center; justify-content:center; padding:1rem;
  opacity:0; pointer-events:none; transition:opacity 0.25s ease;
}
.intro-overlay.open{ opacity:1; pointer-events:auto; }
.intro-video-box{
  position:relative; width:100%; max-width:420px; border-radius:16px;
  overflow:hidden; background:#000; box-shadow:0 14px 44px rgba(0,0,0,0.45);
}
.intro-video-box video{ width:100%; max-height:80vh; display:block; }
.intro-video-close{
  position:absolute; top:0.55rem; inset-inline-end:0.55rem; z-index:2;
  width:2rem; height:2rem; border-radius:50%; border:none; cursor:pointer;
  background:rgba(0,0,0,0.55); color:#fff; font-size:1rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.intro-video-unmute{
  position:absolute; bottom:0.6rem; inset-inline-start:0.6rem; z-index:2;
  border:none; border-radius:999px; padding:0.4rem 0.85rem; cursor:pointer;
  background:rgba(0,0,0,0.55); color:#fff; font-size:0.72rem; font-weight:700;
}

/* =========================================================
   ADMIN DASHBOARD
   ========================================================= */
.admin-login{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.admin-login-box{ width:100%; max-width:340px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:2rem 1.6rem; text-align:center; box-shadow:0 6px 24px rgba(0,0,0,0.1); }
.pin-dots{ display:flex; justify-content:center; gap:0.6rem; margin:1.1rem 0; }
.pin-dots span{ width:12px; height:12px; border-radius:50%; border:1px solid var(--gold); }
.pin-dots span.filled{ background:var(--gold); }
.pin-pad{ display:grid; grid-template-columns:repeat(3,1fr); gap:0.6rem; }
.pin-pad button{
  padding:0.9rem 0; border-radius:10px; border:1px solid var(--line); background:var(--ink-2);
  color:var(--cream); font-size:1.15rem; font-weight:700; cursor:pointer;
}
.pin-pad button.wide{ grid-column:span 1; font-size:0.85rem; color:var(--cream-dim); }

.admin-wrap{ max-width:1080px; margin:0 auto; padding:1.2rem; }
.admin-topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; flex-wrap:wrap; gap:0.6rem; }
.admin-stats{ display:flex; gap:0.6rem; flex-wrap:wrap; }
.stat-pill{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:0.5rem 0.9rem; font-size:0.78rem; color:var(--cream-dim); }
.stat-pill b{ color:var(--gold-bright); font-size:0.95rem; display:block; }
/* "قيد الانتظار" القابل للضغط (2026-09-16) -- إعادة ضبط مظهر <button>
   الافتراضي ليبقى مطابقاً تماماً لباقي .stat-pill (div عادية)، مع مؤشر يد
   وتمييز خفيف عند المرور/التركيز يوضح أنه قابل للضغط. */
.stat-pill.clickable{ font-family:inherit; text-align:inherit; cursor:pointer; transition:border-color 0.15s ease, background 0.15s ease; }
.stat-pill.clickable:hover, .stat-pill.clickable:focus-visible{ border-color:var(--gold-bright); background:var(--panel-2,rgba(255,255,255,0.04)); }

/* صفوف قائمة "قيد الانتظار" التفصيلية (2026-09-16) */
.pending-row{ display:flex; align-items:center; justify-content:space-between; gap:0.7rem; padding:0.6rem 0; border-bottom:1px solid rgba(0,0,0,0.14); font-size:0.85rem; }
.pending-row:last-child{ border-bottom:none; }
.pending-row .pending-order-num{ font-weight:700; }
.pending-row .pending-waiting-on{ color:var(--danger); font-weight:600; }
.pending-row .pending-table-num{ color:var(--gold-bright); font-weight:700; font-family:'El Messiri', serif; }
.pending-list-empty{ color:var(--cream-dim); font-size:0.85rem; text-align:center; padding:1rem 0; }
/* إخفاء إجمالي مبيعات اليوم عن الجميع عدا المالك (2026-09-14، طلب الحاج
   أيمن) — سعر كل طلب فردي يبقى ظاهراً لكل الأدوار كما هو دائماً؛ هذا يخص
   حصراً بطاقة "مبيعات اليوم" الإجمالية أعلى شاشة الإدارة. */
/* "viewer" (ادمن مشاهد، 2026-09-16) يرى كل شيء يراه owner على لوحة
   الطلبات (بما فيها هذا الرقم المالي وعمود "ملغاة" أدناه) رغم أنه بلا أي
   صلاحية تعديل إطلاقاً -- راجعوا ROLE_ACTIONABLE في js/admin.js لكيف يُمنَع
   من أي إجراء فعلي رغم رؤيته كل شيء. */
/* 🆕 2026-09-18 (طلب الحاج أيمن نقطة 1) -- كاشير 1 (finance) وكاشير 2
   (cashier2) يريان الآن أيضاً أرقام النقدي/التحويل/الآجل/تقرير الصندوق
   (كل عناصر money)، لكن بنطاق عملهما فقط -- الحساب نفسه بـcomputeCashierBreakdown
   في js/admin.js يتولى التصفية، هذا فقط يفكّ الإخفاء البصري عنهما. بقية
   الأدوار (شيف/سيرفس/سيرفس 2/ديلفري) تبقى محجوبة عنها كما كانت دائماً. */
body:not([data-role="owner"]):not([data-role="viewer"]):not([data-role="finance"]):not([data-role="cashier2"]) .stat-pill.money{ display:none; }

.board{ display:grid; grid-template-columns:repeat(5,1fr); gap:0.9rem; }
@media (max-width:1100px){ .board{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .board{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .board{ grid-template-columns:1fr; } }

.col{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:0.8rem; min-height:120px; }
.col h3{ font-family:'El Messiri', serif; font-size:1rem; margin:0 0 0.7rem; display:flex; align-items:center; justify-content:space-between; }
.col h3 .n{ background:var(--ink); border-radius:999px; padding:0.05rem 0.55rem; font-size:0.75rem; color:#eafff1; }

.order-card{ background:var(--ink-2); border:1px solid rgba(0,0,0,0.22); border-radius:10px; padding:0.7rem; margin-bottom:0.7rem; box-shadow:0 2px 10px rgba(0,0,0,0.06); }
/* تكبير رقم الفاتورة وساعة الإصدار (2026-09-14، طلب الحاج أيمن) — كلاهما
   أكبر وأوضح ليُقرآ من مسافة على شاشة المطبخ. */
.order-card .num{ font-weight:800; color:var(--gold-bright); font-family:'El Messiri', serif; font-size:1.3rem; display:flex; justify-content:space-between; align-items:baseline; gap:0.5rem; }
.order-card .num .order-clock{ font-weight:800; font-size:1.05rem; color:var(--ink); font-family:inherit; }
.order-card .meta{ font-size:0.72rem; color:var(--cream-dim); margin:0.15rem 0 0.5rem; }
/* تمييز رقم الطاولة (2026-09-15، طلب الحاج أيمن) — بخط 'El Messiri' العريض
   بدل الاندماج كنص خافت عادي داخل .meta، حتى يُلتقَط بسرعة وسط عدة بطاقات؛
   نفس فلسفة .order-card .num أعلاه لرقم الفاتورة.
   🔵 تحديث 2026-09-17 (طلب الحاج أيمن: "ميزها باللون الازرق و خليها اصغر")
   — اللون تغيّر من الذهبي إلى الأزرق (--blue)، والحجم صغُر من 0.95rem إلى
   0.8rem (أصغر من رقم الفاتورة .num، لكن يبقى أبرز قليلاً من نص .meta
   العادي المحيط به عند 0.72rem). */
.order-card .meta .table-num{ font-family:'El Messiri', serif; font-weight:800; color:var(--blue); font-size:0.8rem; }
/* تنبيه تأخير الشيف (2026-09-14) — للشيف فقط (يُحسَب/يُعرَض حصراً حين
   currentRole==="chef" في admin.js)؛ حدّ أحمر نابض + شارة واضحة أعلى
   البطاقة إن تجاوز الطلب 15 دقيقة من إنشائه وهو ما يزال "قيد التحضير". */
.order-card.delayed{ border:2px solid var(--danger); animation:delay-pulse 1.4s ease-in-out infinite; }
@keyframes delay-pulse{
  0%,100%{ box-shadow:0 2px 10px rgba(0,0,0,0.06); }
  50%{ box-shadow:0 0 0 5px rgba(215,38,61,0.35); }
}
.delay-badge{ background:var(--danger); color:#fff; font-weight:800; font-size:0.74rem; padding:0.32rem 0.5rem; border-radius:6px; margin:0.35rem 0; text-align:center; }
.order-card ul{ list-style:none; margin:0; padding:0; font-size:0.8rem; }
.order-card li{ display:flex; justify-content:space-between; padding:0.15rem 0; }
.order-card .total-row{ display:flex; justify-content:space-between; font-weight:700; margin-top:0.4rem; padding-top:0.4rem; border-top:1px dashed var(--line); }
.order-card .actions{ display:flex; gap:0.4rem; margin-top:0.6rem; }
.order-card .actions button{
  flex:1; font-size:0.72rem; font-weight:700; padding:0.4rem; border-radius:7px; border:1px solid var(--gold);
  background:transparent; color:var(--gold-bright); cursor:pointer;
}
.order-card .actions button.primary{ background:var(--gold); color:#ffffff; }
/* إلغاء الطلب (owner فقط، 2026-09-14) — زر تحذيري أحمر بدل الحدّ الذهبي
   المعتاد، ليتميّز بوضوح عن أزرار "التالي/رجوع" العادية. */
.order-card .actions button.danger{ background:var(--danger); color:#ffffff; border-color:var(--danger); }
/* الدفع النقدي (2026-09-17، طلب الحاج أيمن) — عند نقطة إغلاق الدفع تظهر
   زران جنباً إلى جنب (راجعوا isPaymentClosingStep في js/admin.js): زر
   "تحويل بنكي" الذهبي المعتاد (.primary) وزر "دفع نقدي" أخضر (نفس لون
   شارات "مدفوعة" في هذا الملف) ليتميّزا بوضوح عن بعضهما بنظرة سريعة. */
.order-card .actions button.cash{ background:var(--green); color:#ffffff; border-color:var(--green); }
/* 📝 آجل — حساب VIP (2026-09-17، دفعة ثانية، طلب الحاج أيمن "للنقاش") —
   زر ثالث يظهر فقط لطلبات VIP عند نقطة إغلاق الدفع (راجعوا isPaymentClosingStep
   وorderCard في js/admin.js). لون مستقل تماماً عن الأخضر (نقدي) والذهبي
   (تحويل/.primary) والأحمر (إلغاء/.danger) حتى يتميّز بنظرة سريعة أنه ليس
   قبضاً فعلياً للمبلغ — يستخدم نفس لون شارة "⭐ VIP" (gold-bright) توحيداً
   لهوية هذه الميزة بصرياً. */
.order-card .actions button.credit{ background:var(--gold-bright); color:#ffffff; border-color:var(--gold-bright); }
/* 🆕 زر "🖨 طباعة" — خط/أيقونة أكبر (2026-09-18، طلب الحاج أيمن) — يبقى
   بنفس ألوان الزر الافتراضي (.actions button)، فقط أكبر حجماً ليَسهُل
   الضغط عليه بوضوح على شاشة الشيف (غالباً هاتف/تابلت). */
.order-card .actions button.print-btn{ font-size:1rem; padding:0.55rem 0.4rem; font-weight:900; }
.order-card.new{ border-color:var(--paprika); }
.order-card .notes{ font-size:0.72rem; color:var(--cream-dim); margin-top:0.4rem; font-style:italic; }
/* 🆕 تمييز كود الصنف + الملاحظات بلون أخضر (2026-09-18، طلب الحاج أيمن) —
   بطاقة الطلب على الشاشة. كود الصنف: خط أخضر عريض على خلفية خضراء خفيفة
   (شارة صغيرة). الملاحظات: أخضر + خط أكبر من الافتراضي (كانت 0.72rem). */
.item-code{ color:var(--green); font-weight:900; background:rgba(23,163,74,0.16); padding:0 4px; border-radius:4px; }
.order-card .notes.order-notes-highlight{ color:var(--green); font-size:0.9rem; font-weight:700; font-style:normal; }

/* بطاقة طلب مُلغى (owner فقط، 2026-09-14) — حدّ رمادي منطفئ + شفافية خفيفة
   لتمييزها فوراً عن الطلبات الحية في عمود "ملغاة". */
.order-card.cancelled{ opacity:0.72; border-color:#9a9a9a; }

/* خانة "ضيافة" على مستوى الصنف (السيرفس/سيرفس 2 فقط، 2026-09-14، طلب
   الحاج أيمن) — .order-card li الأصلية تفترض عنصرين flex فقط (الاسم +
   السعر)، فلا تصلح لصفّ يحمل أيضاً checkbox/وسم "ضيافة" تحته؛ .hosp-row
   يُلغي flex عن الـ<li> نفسه ويحوّلها إلى .item-line الداخلي بدلاً منه. */
.order-card li.hosp-row{ display:block; padding:0.15rem 0; }
.order-card .item-line{ display:flex; justify-content:space-between; }
.order-card .hosp-toggle{
  display:flex; align-items:center; gap:0.3rem; font-size:0.7rem; color:var(--gold-bright);
  margin-top:0.15rem; cursor:pointer; user-select:none;
}
.order-card .hosp-toggle input{ cursor:pointer; }
.order-card .hosp-tag{
  display:inline-block; font-size:0.68rem; font-weight:700; color:#ffffff; background:var(--gold);
  border-radius:5px; padding:0.05rem 0.4rem; margin-top:0.15rem;
}

/* ---------- Role badge / logout ---------- */
.role-badge{
  display:inline-block; font-size:0.62rem; font-weight:700; vertical-align:middle;
  background:var(--gold); color:#ffffff; border-radius:999px; padding:0.15rem 0.6rem; margin-inline-start:0.4rem;
}
.logout-btn{
  border:1px solid var(--line); background:var(--panel); color:var(--cream-dim);
  font-size:0.72rem; font-weight:600; border-radius:8px; padding:0.5rem 0.8rem; cursor:pointer;
}

/* ---------- Role-based visibility ----------
   As of 2026-09 an order also carries a MODE (pickup vs delivery), and
   every role's board is filtered by role AND, where relevant, mode —
   each user should only ever see the columns/cards/actions that concern
   them (admin.js's canActOnOrder/ROLE_VISIBLE_COLS enforce the actions;
   these rules are the matching visual half).

   chef: kitchen actions only, no ₪ figures anywhere (cards, stats, printed
   ticket), and the board itself only shows the two columns chef actually
   works ("قيد التحضير"/"جاهز") — new unconfirmed orders and closed/paid
   ones are none of the kitchen's concern and stay out of sight entirely.
   Chef handles both pickup and delivery orders alike (the kitchen doesn't
   care how an order will be handed over), so no mode filtering here.

   service: pickup/dine-in orders ONLY — delivery orders never pass
   through service (بدون وساطة السيرفس) and are hidden everywhere for
   this role. Sees money and the four columns it actually deals with
   (new → prep → ready → done); "مدفوع" is finance's exclusive territory
   now, so that column is hidden too. Action buttons are still gated
   per-order in JS (admin.js ROLE_ACTIONABLE).

   finance (cashier) + cashier2: sees money + stats on every column,
   read-only everywhere EXCEPT two action points (admin.js
   ROLE_ACTIONABLE) — approving+paying a delivery order up front ("جديد")
   and closing a pickup order at the end ("تم التسليم"). Once a delivery
   order is approved it's out of finance's hands for good (paid
   immediately, no second confirmation), so delivery-mode cards are
   hidden from finance in every column except "جديد". "cashier2" (added
   2026-09-13 at الحاج أيمن's request — a second cashier working in
   parallel with the same till) is an exact duplicate of finance's rules
   throughout this file and in admin.js — the two selectors below apply
   to both roles identically, and any future change to finance's
   permissions should be mirrored to cashier2 unless a difference is
   explicitly wanted.

   delivery (new 2026-09 role): the dedicated external-orders/courier
   role. Only ever sees delivery-mode orders (pickup/dine-in orders are
   invisible here, mirroring service above) and only the three columns
   relevant to its two jobs — entering the delivery fee ("جديد") and
   handing the ready order to the courier ("جاهز" → "تم التسليم"); "قيد
   التحضير" (nothing to do while the kitchen cooks) and "مدفوع" (delivery
   orders never reach it) are hidden. Unlike chef, money stays visible —
   this role needs to see totals to hand the right amount to the courier.

   owner-only: the menu-editing view switcher (see .admin-nav below) —
   editing prices/items is a business decision, not a kitchen or
   bookkeeping task, so no other role ever sees it. */
body[data-role="chef"] .money{ display:none; }
body[data-role="chef"] .col:not([data-status="قيد التحضير"]):not([data-status="جاهز"]){ display:none; }
/* 2026-09-14 (الحاج أيمن): chef no longer tracks takeaway (T) orders at
   all — small/fast orders handled verbally at the counter by كاشير 1
   instead. Hidden from both of chef's remaining columns (prep + ready).
   See the matching js/admin.js ROLE_ACTIONABLE.chef comment. */
body[data-role="chef"] .order-card[data-mode="takeaway"]{ display:none; }

/* 🔴 REDESIGNED 2026-09-13 (الدفعة السادسة عشرة) — three order modes now
   exist (pickup/S, takeaway/T, delivery/D) and كاشير 1/كاشير 2 are no
   longer parallel duplicates: each owns exactly one payment workflow. See
   the matching ROLE_ACTIONABLE/ROLE_VISIBLE_COLS comment in js/admin.js
   for the full picture — keep both in sync if this ever changes again. */

/* service/service2: pickup (S) orders only, never takeaway or delivery. */
body[data-role="service"] .col[data-status="مدفوع"],
body[data-role="service2"] .col[data-status="مدفوع"]{ display:none; }
body[data-role="service"] .order-card[data-mode="delivery"],
body[data-role="service2"] .order-card[data-mode="delivery"],
body[data-role="service"] .order-card[data-mode="takeaway"],
body[data-role="service2"] .order-card[data-mode="takeaway"]{ display:none; }
/* 🔴 REDESIGNED 2026-09-17 (طلب الحاج أيمن: توزيع الطاولات 1-20/21-50) —
   حلّت محل آلية "أول من يضغط يأخذه" (data-claimed-by) السابقة بالكامل:
   كل طلب صالة يظهر فقط لصاحب نطاق طاولته من الأساس (راجعوا tableOwnerRole
   في js/admin.js، **أبقوهما متزامنتين يدوياً**) — لا علاقة لـ order.claimedBy
   بالظهور بعد اليوم، فقط شارة "📌" تعريفية على البطاقة نفسها. */
body[data-role="service"] .order-card[data-table-owner="service2"],
body[data-role="service2"] .order-card[data-table-owner="service"]{ display:none; }

/* كاشير 1 (finance): delivery (D) + takeaway (T) orders only, and only at
   "جديد" — its one and only action point (payment approval before the
   kitchen). It no longer closes pickup orders at all.
   2026-09-14 (الحاج أيمن): ALSO sees "قيد التحضير" now, but only its
   takeaway (T) cards — its new job of marking a T order "جاهز" once the
   chef no longer tracks it at all (see js/admin.js ROLE_ACTIONABLE.finance
   + the matching chef comment above). Delivery (D) cards in "قيد التحضير"
   stay hidden from finance — that step is still chef's alone. */
/* 🆕 2026-09-18 (طلب الحاج أيمن نقطة 2) -- عمود "مدفوع" (الفواتير المقفلة)
   أصبح ظاهراً لكاشير 1 أيضاً الآن -- تصفية data-mode أدناه (pickup مخفي
   عنه) تكفي وحدها لإظهار فواتيره المغلقة (توصيل/تيك اواي) فقط دون فواتير
   الصالة، بلا أي منطق جديد. */
body[data-role="finance"] .col:not([data-status="جديد"]):not([data-status="قيد التحضير"]):not([data-status="مدفوع"]){ display:none; }
body[data-role="finance"] .order-card[data-mode="pickup"]{ display:none; }
body[data-role="finance"] .col[data-status="قيد التحضير"] .order-card[data-mode="delivery"]{ display:none; }

/* كاشير 2: pickup (S) orders only, and only at "تم التسليم" — its one and
   only action point (closing payment after hand-off). It no longer
   approves delivery/takeaway orders at all.
   🆕 2026-09-18 (طلب الحاج أيمن نقطة 2) -- عمود "مدفوع" ظاهر له الآن أيضاً
   (فواتيره المقفلة فقط، بفضل تصفية data-mode أدناه). */
body[data-role="cashier2"] .col:not([data-status="تم التسليم"]):not([data-status="مدفوع"]){ display:none; }
body[data-role="cashier2"] .order-card[data-mode="delivery"],
body[data-role="cashier2"] .order-card[data-mode="takeaway"]{ display:none; }

body[data-role="delivery"] .col[data-status="قيد التحضير"]{ display:none; }
/* 2026-09-15 (الحاج أيمن): عمود "مدفوع" لم يعد مخفياً عن الديلفري -- طلبات
   التوصيل/Take Away المدفوعة مسبقاً التي وصلت "تم التسليم" تُصنَّف الآن
   بصرياً تحت هذا العمود (راجعوا renderBoard في js/admin.js) بدل البقاء في
   "تم التسليم"، فيحتاج الديلفري رؤيته ليتابع طلباته المُسلَّمة/المغلقة.
   فواتير الصالة (pickup) التي تصل "مدفوع" عبر كاشير 2 تبقى مخفية عنه رغم
   ذلك، عبر قاعدة data-mode="pickup" أدناه -- لا علاقة للديلفري بها إطلاقاً. */

/* إلغاء الطلب (owner فقط، 2026-09-14) — عمود "ملغاة" حصري للمالك (+
   "viewer" اعتباراً من 2026-09-16 -- يرى فقط، لا يقدر يُلغي أو يستعيد أي
   طلب؛ زر الإلغاء نفسه يبقى مقصوراً على owner حصراً في js/admin.js)، بغض
   النظر عن نمط كل دور الآخر (allowlist أو denylist) — قاعدة واحدة شاملة
   بدل تكرارها داخل كل قسم دور أعلاه/أدناه. راجعوا js/admin.js. */
body:not([data-role="owner"]):not([data-role="viewer"]) .col[data-status="ملغاة"]{ display:none; }
body[data-role="delivery"] .order-card[data-mode="pickup"]{ display:none; }
/* Take Away's "جديد" stage belongs to كاشير 1 alone (payment approval) —
   the delivery role's only job on a takeaway order is handing it to the
   customer at the counter once it's "جاهز", so its fresh/unapproved card
   stays hidden until then (unlike a delivery-mode order, where the
   delivery role already has a "جديد"-stage job: fee-safety-net entry and
   optional courier-phone entry — see js/admin.js orderCard). */
body[data-role="delivery"] .col[data-status="جديد"] .order-card[data-mode="takeaway"]{ display:none; }

/* Courier-phone field (order card) — relevant only to the delivery role
   itself and the owner (see js/admin.js orderCard); everyone else's job
   has nothing to do with who's driving, so it's hidden for them. */
body[data-role="chef"] .courier-block,
body[data-role="service"] .courier-block,
body[data-role="service2"] .courier-block,
body[data-role="finance"] .courier-block,
body[data-role="cashier2"] .courier-block{ display:none; }

.admin-nav{ display:none; }
body[data-role="owner"] .admin-nav{ display:flex; }
/* 🆕 2026-09-17 (دفعة ثانية) — كاشير 1/كاشير 2 يحتاجان الآن الوصول لتبويب
   "⭐ VIP" فقط (لعرض/تسديد الرصيد الآجل)، وليس "🍽 تحرير القائمة" ولا
   "🔑 الرموز" (يبقيان حصراً للمالك) — راجعوا #navMenu/#navPins أدناه. */
body[data-role="finance"] .admin-nav,
body[data-role="cashier2"] .admin-nav{ display:flex; }
body[data-role="finance"] #navMenu, body[data-role="finance"] #navPins,
body[data-role="cashier2"] #navMenu, body[data-role="cashier2"] #navPins{ display:none; }
/* نموذج إضافة زبون VIP جديد يبقى حصراً للمالك — راجعوا renderVipEditor
   (js/admin.js) لطبقة الحماية الثانية على زر "🗑 حذف" بنفس المبدأ. */
body:not([data-role="owner"]) #vipAddForm{ display:none; }

/* Quick Take Away entry button (2026-09-13, نفس اليوم — إعادة تصميم بعد
   ملاحظة الحاج أيمن أن Take Away الأصلي غير عملي) — كاشير 1 والمالك فقط،
   نفس منطق .admin-nav أعلاه لكن بدون حصره بدور المالك. */
#quickTakeawayBtn{ display:none; }
body[data-role="finance"] #quickTakeawayBtn,
body[data-role="owner"] #quickTakeawayBtn{ display:inline-block; }

/* طلب خاص جديد بالكامل (2026-09-15، نقاش ثانٍ) — متاح للسيرفس/سيرفس
   2/كاشير 2/المالك فقط (راجعوا createStaffCustomOrder في js/rtdb-orders.js
   وopenCustomOrderOverlay في js/admin.js للتحقق الثاني من الصلاحية). */
#quickCustomOrderBtn{ display:none; }
body[data-role="service"] #quickCustomOrderBtn,
body[data-role="service2"] #quickCustomOrderBtn,
body[data-role="cashier2"] #quickCustomOrderBtn,
body[data-role="owner"] #quickCustomOrderBtn{ display:inline-block; }

/* قسم VIP (2026-09-17، طلب الحاج أيمن، نقطة 4) — السيرفس/سيرفس 2 (أو
   المالك) فقط يفتحان نافذة "طلب VIP جديد" (راجعوا js/admin.js
   openVipOrderOverlay). */
#quickVipBtn{ display:none; }
body[data-role="service"] #quickVipBtn,
body[data-role="service2"] #quickVipBtn,
body[data-role="owner"] #quickVipBtn{ display:inline-block; }

/* صفوف نافذة "طلب خاص جديد" — وصف حر + كمية + سعر لكل سطر (بخلاف
   .cart-row العادية التي تعرض صنف منيو جاهز السعر). */
.custom-order-row{ display:flex; align-items:center; gap:0.5rem; padding:0.5rem 0; border-bottom:1px solid rgba(0,0,0,0.14); flex-wrap:wrap; }
.custom-order-text-input{
  flex:1 1 100%; padding:0.45rem 0.6rem; border-radius:8px; border:1px solid var(--line);
  background:var(--panel); color:var(--cream); font-family:inherit; font-size:0.85rem;
}
.custom-order-price-input{
  width:90px; padding:0.35rem 0.5rem; border-radius:6px; border:1px solid var(--line);
  background:var(--panel); color:var(--cream); font-size:0.85rem; font-weight:700; text-align:center;
}

/* Quick Take Away sheet contents — reuses .overlay/.sheet/.field/.cart-row/
   .qty-stepper/.primary-btn from the customer checkout sheet (index.html)
   for a consistent look; only the search-results list below is new. */
/* رفع دفعة صور للأطباق (2026-09-14) — راجعوا js/admin.js */
.bulk-photo-list{ max-height:44vh; overflow-y:auto; margin:0.8rem 0; display:flex; flex-direction:column; gap:0.5rem; }
.bulk-photo-row{ display:flex; align-items:center; gap:0.6rem; background:var(--ink-3); border:1px solid var(--line); border-radius:8px; padding:0.5rem; }
.bulk-photo-thumb{ width:52px; height:52px; border-radius:6px; object-fit:cover; border:1px solid var(--line); flex:0 0 auto; background:var(--bg); }
.bulk-photo-select{ flex:1 1 auto; min-width:0; padding:0.4rem 0.5rem; border-radius:6px; border:1px solid var(--line); background:var(--bg); color:var(--cream); font-family:inherit; font-size:0.8rem; }

/* 🆕 إدخال أكواد الأصناف دفعة واحدة (2026-09-18، طلب الحاج أيمن) */
.bulk-codes-list{ max-height:52vh; overflow-y:auto; margin:0 0 0.8rem; }
.bulk-codes-cat{
  margin:0.9rem 0 0.4rem; font-family:'El Messiri', serif; font-size:0.95rem; color:var(--gold-bright);
  border-bottom:1px solid var(--line); padding-bottom:0.3rem;
}
.bulk-codes-cat:first-child{ margin-top:0; }
.bulk-codes-row{
  display:flex; align-items:center; justify-content:space-between; gap:0.6rem;
  padding:0.4rem 0.1rem; border-bottom:1px dashed var(--line);
}
.bulk-codes-name{ flex:1 1 auto; min-width:0; font-size:0.82rem; color:var(--cream); }
.bulk-codes-input{
  flex:0 0 70px; width:70px; padding:0.35rem 0.4rem; border-radius:6px; border:1px solid var(--line);
  background:var(--bg); color:var(--cream); font-family:inherit; font-size:0.8rem; text-align:center;
}
.bulk-codes-input.dup{ border-color:var(--danger); }

.takeaway-search-results{ max-height:34vh; overflow-y:auto; margin-bottom:0.4rem; }
.takeaway-result-row{
  display:flex; align-items:center; justify-content:space-between; gap:0.6rem;
  padding:0.5rem 0.2rem; border-bottom:1px solid rgba(0,0,0,0.12); font-size:0.85rem;
}
.takeaway-result-row .name{ flex:1 1 auto; font-weight:600; }
.takeaway-result-row .name .en{ font-weight:400; color:var(--cream-dim); font-size:0.78em; }
#takeawayCart .cart-row{ flex-wrap:wrap; }
#takeawayCart .cart-row .name{ flex:1 1 100%; }

/* Delivery-fee inline editor (rendered only for the "delivery" role
   while a delivery order is still at "جديد" — see admin.js orderCard) */
.fee-editor{ display:inline-flex; gap:0.35rem; align-items:center; }
.fee-editor .fee-input{
  width:72px; padding:0.25rem 0.4rem; border-radius:6px; border:1px solid var(--line);
  /* Was background:var(--ink) with color:var(--cream) — both the same
     dark-brown hex (#3a2a18), so the fee amount was invisible against its
     own field (reported 2026-09-12 as "dim/unclear"). Matches the light
     panel + dark text used by every other input on the site instead. */
  background:var(--panel); color:var(--cream); font-size:0.85rem; font-weight:700; text-align:center;
}
.fee-editor .fee-save-btn{
  border:1px solid var(--gold); background:transparent; color:var(--gold-bright);
  border-radius:6px; padding:0.2rem 0.5rem; cursor:pointer; font-size:0.85rem;
}

/* Courier-phone inline editor (order card, delivery/owner roles only —
   see js/admin.js orderCard and the role-visibility block above) */
.courier-block{ display:flex; align-items:center; gap:0.5rem; margin-bottom:0.5rem; font-size:0.8rem; }
.courier-block .courier-label{ color:var(--cream-dim); font-weight:600; white-space:nowrap; }
.courier-block .courier-input{
  width:118px; padding:0.25rem 0.4rem; border-radius:6px; border:1px solid var(--line);
  background:var(--panel); color:var(--cream); font-size:0.82rem; direction:ltr; text-align:left;
}

/* طلب خاص (custom/off-menu item, 2026-09-15) — قسم منفصل على البطاقة،
   لطلبات الصالة فقط. .custom-item-price-input/.custom-item-price-save-btn
   تعيد نفس مقاييس .fee-input/.fee-save-btn أعلاه (كلاهما داخل .fee-editor
   نفسها لإعادة استخدام تخطيطها) بأسماء صفوف مستقلة حتى لا يتعارض محرِّر
   سعر الطلب الخاص مع محرِّر أجرة التوصيل على نفس البطاقة. */
.custom-items-block{ margin-top:0.5rem; padding-top:0.4rem; border-top:1px dashed var(--line); }
.custom-items-title{ font-size:0.78rem; font-weight:800; color:var(--paprika); margin-bottom:0.3rem; }
.custom-item-row-admin{ display:flex; align-items:center; justify-content:space-between; gap:0.5rem; font-size:0.8rem; padding:0.2rem 0; flex-wrap:wrap; }
.custom-item-desc{ flex:1 1 auto; }
.custom-item-unpriced{ color:var(--danger); font-weight:700; font-size:0.74rem; white-space:nowrap; }
.custom-item-price-input{
  width:84px; padding:0.25rem 0.4rem; border-radius:6px; border:1px solid var(--line);
  background:var(--panel); color:var(--cream); font-size:0.85rem; font-weight:700; text-align:center;
}
.custom-item-price-save-btn{
  border:1px solid var(--gold); background:transparent; color:var(--gold-bright);
  border-radius:6px; padding:0.2rem 0.5rem; cursor:pointer; font-size:0.85rem;
}

.empty-col{ text-align:center; color:var(--cream-dim); font-size:0.75rem; padding:1.2rem 0; opacity:0.7; }

.config-banner{
  background:rgba(215,38,61,0.12); border:1px solid var(--paprika); color:var(--cream);
  border-radius:10px; padding:0.8rem 1rem; font-size:0.8rem; margin-bottom:1rem; line-height:1.7;
}

/* ---------- تخزين محلي خفيف + مؤشر اتصال (2026-09-15) ----------
   راجعوا js/offline-cache.js للشرح الكامل. .offline-banner: شريط ثابت
   أعلى الصفحة يظهر فقط أثناء انقطاع فعلي عن Firebase (لون تحذيري أحمر،
   لأنه يعني "لا اتصال الآن"). .stale-banner: شارة أهدأ (ذهبي/كهرماني)
   تظهر فقط وقت عرض بيانات مخزَّنة محلياً بدل البيانات الحية، وتختفي فور
   وصول بيانات حقيقية — ليست تحذيراً بنفس درجة .config-banner (تلك تعني
   خطأ إعداد، هذه تعني "بيانات قديمة مؤقتاً" وهو وضع طبيعي متوقَّع). */
.offline-banner{
  position:fixed; top:0; inset-inline:0; z-index:9999;
  background:#7a1f1f; color:#fff; text-align:center;
  font-size:0.78rem; font-weight:700; padding:0.5rem 1rem;
  transform:translateY(-100%); transition:transform 0.25s ease;
}
.offline-banner.show{ transform:translateY(0); }

.stale-banner{
  display:none;
  background:rgba(255,106,0,0.12); border:1px solid var(--gold); color:var(--cream);
  border-radius:10px; padding:0.7rem 1rem; font-size:0.78rem; margin-bottom:1rem; line-height:1.6;
}

/* ---------- Admin view switcher (orders board / menu editor) ---------- */
.admin-nav{ gap:0.5rem; margin-bottom:1rem; }
.admin-nav-btn{
  border:1px solid var(--line); background:var(--panel); color:var(--cream-dim);
  font-size:0.82rem; font-weight:700; border-radius:10px; padding:0.55rem 1.1rem; cursor:pointer;
  font-family:inherit;
}
.admin-nav-btn.active{ background:var(--gold); border-color:var(--gold); color:#ffffff; }

/* ---------- Menu editor ---------- */
.menu-editor{ max-width:900px; }
.editor-toolbar{ display:flex; align-items:center; gap:0.8rem; margin-bottom:0.9rem; flex-wrap:wrap; }
.editor-sync-note{ font-size:0.72rem; color:var(--cream-dim); }
.editor-btn{
  border:1px solid var(--gold); background:transparent; color:var(--gold-bright);
  font-size:0.8rem; font-weight:700; border-radius:9px; padding:0.55rem 1rem; cursor:pointer; font-family:inherit;
}
.editor-btn.primary{ background:var(--gold); color:#ffffff; }
.editor-btn.danger{ border-color:var(--danger); color:var(--danger); }
/* 🆕 تسديد VIP نقدي (2026-09-17، دفعة خامسة) — نفس أخضر زر "💵 دفع نقدي" لإغلاق الطلب العادي (.order-card .actions button.cash)، لكن بصيغة .editor-btn هنا لأنه داخل تبويب "⭐ VIP" لا بطاقة طلب. */
.editor-btn.cash{ background:var(--green); color:#ffffff; border-color:var(--green); }
.editor-btn.small{ padding:0.35rem 0.7rem; font-size:0.72rem; }
.editor-btn:disabled{ opacity:0.35; cursor:not-allowed; }

/* Reorder arrows (2026-09-16، طلب الحاج أيمن: ترتيب/إزاحة لوائح الطعام) */
.move-btn{
  border:1px solid var(--line); background:var(--bg); color:var(--cream-dim);
  font-size:0.68rem; line-height:1; border-radius:6px; width:26px; height:26px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-family:inherit;
}
.move-btn:hover:not(:disabled){ border-color:var(--gold); color:var(--gold-bright); }
.move-btn:disabled{ opacity:0.3; cursor:not-allowed; }
.editor-cat-move{ display:inline-flex; gap:0.25rem; margin-inline-start:0.5rem; }
.editor-item-move{ display:inline-flex; gap:0.25rem; }

.migration-banner{
  background:rgba(255,106,0,0.14); border:1px solid var(--gold); border-radius:10px;
  padding:0.9rem 1rem; margin-bottom:1.1rem; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.migration-banner p{ margin:0; font-size:0.82rem; line-height:1.6; flex:1; min-width:220px; }

.editor-cat-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; margin-bottom:0.9rem; overflow:hidden;
}
.editor-cat-head{
  display:flex; align-items:center; gap:0.6rem; padding:0.8rem 1rem; cursor:pointer; list-style:none;
  font-family:'El Messiri', serif; color:var(--gold-bright); font-weight:700; font-size:1rem;
}
.editor-cat-head::-webkit-details-marker{ display:none; }
.editor-cat-head .arrow{ font-size:0.75rem; color:var(--cream-dim); }
.editor-cat-head .en{ font-size:0.72rem; color:var(--cream-dim); font-weight:400; letter-spacing:0.05em; }
.editor-cat-head .count{ margin-inline-start:auto; font-size:0.72rem; color:var(--cream-dim); background:var(--bg); border-radius:999px; padding:0.1rem 0.55rem; }

.editor-cat-fields{
  display:flex; flex-wrap:wrap; gap:0.5rem; padding:0 1rem 0.8rem; border-bottom:1px dashed var(--line);
}
.editor-cat-fields input, .editor-cat-fields select{
  flex:1; min-width:110px; font-family:inherit; font-size:0.78rem; padding:0.4rem 0.6rem;
  border:1px solid var(--line); border-radius:7px; background:var(--bg); color:var(--cream);
}

.editor-group{ padding:0.7rem 1rem; border-bottom:1px solid var(--line); }
.editor-group:last-child{ border-bottom:none; }

/* ---------- PIN management (owner-only) ---------- */
.pin-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:0.7rem; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:0.7rem 1rem; margin-bottom:0.6rem;
}
.pin-row-label{ flex:1 1 90px; font-weight:700; color:var(--gold-bright); font-family:'El Messiri', serif; }
.pin-row-input{
  width:90px; padding:0.4rem 0.6rem; border-radius:7px; border:1px solid var(--line);
  background:var(--bg); color:var(--cream); font-size:0.95rem; text-align:center; letter-spacing:0.15em;
  font-variant-numeric:tabular-nums;
}
/* Staff reference-name field (2026-09-14) — same row, wraps under the PIN
   controls on narrow screens rather than forcing horizontal scroll. */
.pin-row-name-input{
  flex:1 1 160px; min-width:0; padding:0.4rem 0.6rem; border-radius:7px; border:1px solid var(--line);
  background:var(--bg); color:var(--cream); font-size:0.85rem;
}
.editor-group-label{ font-size:0.75rem; color:var(--cream-dim); margin-bottom:0.5rem; font-weight:700; }

/* ---------- VIP customer management (owner-only، 2026-09-17) ---------- */
/* نفس بنية .pin-row أعلاه بالضبط، مع زر حذف بدل زرَّي الحفظ (لا تعديل حي
   للاسم/الهاتف هنا -- إن أخطأ المالك يحذف ويضيف من جديد، أبسط بما يكفي
   لقائمة صغيرة كهذه). */
.vip-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:0.7rem; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:0.7rem 1rem; margin-bottom:0.6rem;
}
.vip-row-name{ flex:1 1 140px; font-weight:700; color:var(--gold-bright); font-family:'El Messiri', serif; }
.vip-row-phone{ flex:1 1 120px; color:var(--cream-dim); font-size:0.85rem; direction:ltr; text-align:right; }
/* 🆕 رصيد آجل لكل زبون VIP (2026-09-17، دفعة ثانية) — رمادي محايد لو صفر،
   أحمر (--danger) بارز لو عليه رصيد مستحق فعلياً، حتى يلفت النظر فوراً. */
.vip-row-balance{ flex:1 1 150px; font-size:0.82rem; font-weight:700; color:var(--cream-dim); }
.vip-row-balance.due{ color:var(--danger); }

.editor-item-row{
  display:flex; flex-wrap:wrap; gap:0.45rem; align-items:flex-end;
  padding:0.6rem 0; border-bottom:1px dashed rgba(0,0,0,0.15);
}
.editor-item-row:last-child{ border-bottom:none; }
.ef{ display:flex; flex-direction:column; gap:0.2rem; font-size:0.66rem; color:var(--cream-dim); }
.ef input{
  font-family:inherit; font-size:0.76rem; padding:0.4rem 0.5rem; border:1px solid var(--line);
  border-radius:6px; background:var(--bg); color:var(--cream);
}
.ef.ef-ar, .ef.ef-en, .ef.ef-desc, .ef.ef-img{ flex:1 1 140px; }
.ef.ef-price{ width:70px; flex:0 0 70px; }
.ef.ef-code{ width:70px; flex:0 0 70px; }
.ef.ef-badge{ width:90px; flex:0 0 90px; }
.ef-img-row{ display:flex; align-items:center; gap:0.35rem; }
.ef-img-row .f-img{ flex:1 1 auto; min-width:0; }
.editor-thumb{ width:30px; height:30px; border-radius:6px; object-fit:cover; border:1px solid var(--line); flex:0 0 auto; background:var(--bg); }
.editor-item-actions{ display:flex; gap:0.35rem; align-items:center; margin-inline-start:auto; }
.editor-best-toggle{ display:flex; align-items:center; gap:0.3rem; font-size:0.7rem; color:var(--cream-dim); white-space:nowrap; }

.editor-add-item-row{
  display:flex; gap:0.4rem; flex-wrap:wrap; padding:0.6rem 0 0.2rem;
}
.editor-add-item-row input{
  font-family:inherit; font-size:0.76rem; padding:0.4rem 0.5rem; border:1px solid var(--line);
  border-radius:6px; background:var(--bg); color:var(--cream); flex:1; min-width:90px;
}

@media print{
  .cart-bar, .cat-tabs, .topbar, .search-bar{ display:none; }
}

/* ---------- Kitchen ticket print ---------- */
.print-ticket{ display:none; }
@media print{
  body.printing-ticket > *:not(.print-ticket){ display:none !important; }
  body.printing-ticket .print-ticket{
    display:block !important;
    font-family:'Cairo','Tahoma',sans-serif;
    color:#000;
    background:#fff;
    padding:4mm 3mm;
    width:100%;
  }
  .print-ticket h2{
    text-align:center; margin:0 0 1mm; font-family:'El Messiri', serif; font-size:16px;
  }
  .print-ticket .pt-sub{ text-align:center; font-size:11px; margin-bottom:1mm; }
  /* تكبير رقم الفاتورة وساعة الإصدار على الفاتورة المطبوعة (2026-09-14،
     طلب الحاج أيمن) — سطر مستقل أكبر بخط عريض بدل .pt-sub الصغير. */
  .print-ticket .pt-invoice{ text-align:center; font-weight:900; font-size:20px; margin:0.5mm 0 1mm; }
  .print-ticket .pt-invoice-time{ text-align:center; font-weight:700; font-size:15px; margin-bottom:1.5mm; }
  /* تمييز رقم الطاولة على الفاتورة المطبوعة (2026-09-15) — نفس خط
     العنوان 'El Messiri' بوزن/حجم أكبر من السطر العادي حوله. */
  .print-ticket .pt-table-num{ font-family:'El Messiri', serif; font-weight:900; font-size:15px; }
  .print-ticket .pt-line{ border-top:1px dashed #000; margin:2mm 0; }
  .print-ticket table{ width:100%; border-collapse:collapse; font-size:12px; }
  .print-ticket td{ padding:0.6mm 0; vertical-align:top; }
  .print-ticket .pt-total{ font-weight:bold; font-size:14px; }
  /* 🆕 تمييز كود الصنف + الملاحظات بلون أخضر على الفاتورة المطبوعة أيضاً
     (2026-09-18، طلب الحاج أيمن) — نفس فكرة .item-code/.order-notes-highlight
     أعلاه، بأسماء pt-* هنا لأن الفاتورة المطبوعة عنصر HTML منفصل تماماً.
     التحديد بـ ".print-ticket .pt-code/.pt-notes" أقوى من ".print-ticket"
     نفسها في الأعلى (color:#000) فيَغلب عليها كما هو مطلوب. */
  .print-ticket .pt-code{ color:var(--green); font-weight:900; }
  .print-ticket .pt-notes{ color:var(--green); font-weight:900; font-size:14px; }
  @page{ margin:6mm; }
}

/* ---------- Cash register report print (2026-09-18، طلب الحاج أيمن) ----------
   نفس آلية print-ticket أعلاه بالضبط (عنصر مخفي + body class + @media
   print)، لكن بفئة/عنصر مستقلَّين حتى لا يظهر الاثنان معاً عند الطباعة. */
.print-cash-report{ display:none; }
@media print{
  body.printing-cash-report > *:not(.print-cash-report){ display:none !important; }
  body.printing-cash-report .print-cash-report{
    display:block !important;
    font-family:'Cairo','Tahoma',sans-serif;
    color:#000;
    background:#fff;
    padding:4mm 3mm;
    width:100%;
  }
  .print-cash-report h2{ text-align:center; margin:0 0 1mm; font-family:'El Messiri', serif; font-size:16px; }
  .print-cash-report .pt-sub{ text-align:center; font-size:11px; margin-bottom:1mm; }
  .print-cash-report .pt-invoice{ text-align:center; font-weight:900; font-size:18px; margin:0.5mm 0 1mm; }
  .print-cash-report .pt-invoice-time{ text-align:center; font-weight:700; font-size:13px; margin-bottom:1.5mm; }
  .print-cash-report table{ width:100%; border-collapse:collapse; font-size:12px; margin-top:2mm; }
  .print-cash-report td, .print-cash-report th{ padding:1mm 0; border-bottom:1px dashed #000; text-align:center; }
  @page{ margin:6mm; }
}

/* ---------- Invoices report print (2026-09-18، طلب الحاج أيمن) ----------
   نفس آلية print-cash-report أعلاه بالضبط، بفئة/عنصر مستقلَّين حتى لا يظهر
   أكثر من تقرير معاً عند الطباعة (كل تقرير بـ body class خاص به). */
.print-invoices-report{ display:none; }
@media print{
  body.printing-invoices-report > *:not(.print-invoices-report){ display:none !important; }
  body.printing-invoices-report .print-invoices-report{
    display:block !important;
    font-family:'Cairo','Tahoma',sans-serif;
    color:#000;
    background:#fff;
    padding:4mm 3mm;
    width:100%;
  }
  .print-invoices-report h2{ text-align:center; margin:0 0 1mm; font-family:'El Messiri', serif; font-size:16px; }
  .print-invoices-report .pt-invoice{ text-align:center; font-weight:900; font-size:18px; margin:0.5mm 0 1mm; }
  .print-invoices-report .pt-invoice-time{ text-align:center; font-weight:700; font-size:13px; margin-bottom:1.5mm; }
  .print-invoices-report table{ width:100%; border-collapse:collapse; font-size:11px; margin-top:2mm; }
  .print-invoices-report td, .print-invoices-report th{ padding:0.8mm 0; border-bottom:1px dashed #000; text-align:center; }
  .print-invoices-report .invoices-table td, .print-invoices-report .invoices-table th{ font-size:9.5px; }
  @page{ margin:6mm; }
}

/* شاشة التقرير نفسها (غير الطباعة) — جدول بسيط داخل الورقة المنبثقة. */
.cash-report-table{ width:100%; border-collapse:collapse; margin-top:0.4rem; }
.cash-report-table th, .cash-report-table td{
  padding:0.5rem 0.4rem; text-align:center; border-bottom:1px solid var(--line); font-size:0.85rem;
}
.cash-report-table th{ color:var(--cream-dim); font-weight:700; }
.cash-report-table .cash-report-total{ font-weight:900; color:var(--gold-bright); border-top:2px solid var(--gold); }
/* جدول تقرير الفواتير له أعمدة أكثر (6) فيحتاج خطاً أصغر ليلائم عرض الورقة. */
.cash-report-table.invoices-table th, .cash-report-table.invoices-table td{ font-size:0.72rem; padding:0.4rem 0.25rem; }
/* عنوان قسم داخل التقرير (كاشير 1 / كاشير 2 / الإجمالي الكلي) — 2026-09-18. */
.report-section-title{
  margin:1rem 0 0.4rem; font-family:'El Messiri', serif; font-size:1rem; color:var(--gold-bright);
  border-top:1px solid var(--line); padding-top:0.6rem;
}
.report-section-title:first-child{ border-top:none; padding-top:0; margin-top:0; }
.print-cash-report .report-section-title, .print-invoices-report .report-section-title{
  text-align:center; font-weight:900; font-size:13px; color:#000; margin:2mm 0 1mm;
  border-top:1px dashed #000; padding-top:1mm;
}
.print-cash-report .report-section-title:first-child, .print-invoices-report .report-section-title:first-child{
  border-top:none; padding-top:0; margin-top:0;
}

/* ---------- Order tracking page (track.html) — 2026-09-13 ---------- */
.track-page{ max-width:480px; margin:0 auto; padding:1rem 1rem 3rem; }
.track-card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:1.2rem 1.1rem; box-shadow:0 4px 16px rgba(0,0,0,0.06);
}
.track-steps{ display:flex; flex-direction:column; gap:0; margin:1.2rem 0; }
.track-step{ display:flex; align-items:flex-start; gap:0.7rem; position:relative; padding-bottom:1.4rem; }
.track-step:last-child{ padding-bottom:0; }
.track-step:not(:last-child)::before{
  content:""; position:absolute; top:26px; bottom:-2px; right:13px;
  width:2px; background:var(--line);
}
.track-step-dot{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--ink-3);
  border:2px solid var(--line); color:var(--cream-dim); font-weight:800; font-size:0.8rem;
  display:flex; align-items:center; justify-content:center; z-index:1;
}
.track-step-label{ font-size:0.85rem; font-weight:600; color:var(--cream-dim); line-height:1.5; padding-top:0.2rem; }
.track-step-label small{ font-weight:400; opacity:0.8; }
.track-step.active .track-step-dot{ background:var(--gold); border-color:var(--gold); color:#ffffff; }
.track-step.active .track-step-label{ color:var(--cream); }
.track-step.done .track-step-dot{ background:var(--green); border-color:var(--green); color:#ffffff; }
.track-step.done:not(:last-child)::before{ background:var(--green); }
.track-step.done .track-step-label{ color:var(--cream); }

.track-courier-card{
  display:flex; align-items:center; justify-content:center; gap:0.4rem;
  background:rgba(23,163,74,0.1); border:1px solid var(--green); color:var(--green);
  border-radius:10px; padding:0.7rem; font-weight:700; font-size:0.88rem;
  text-decoration:none; margin-bottom:0.8rem;
}
.track-eta{
  text-align:center; font-size:0.82rem; font-weight:600; color:var(--gold-bright);
  background:var(--ink-3); border-radius:8px; padding:0.6rem; margin-bottom:0.8rem;
}
.track-summary{ border-top:1px dashed var(--line); padding-top:0.7rem; margin-top:0.4rem; }
.track-summary-row{ display:flex; justify-content:space-between; font-size:0.85rem; padding:0.2rem 0; color:var(--cream-dim); }
.track-summary-row.total{ font-weight:800; color:var(--cream); font-size:0.95rem; border-top:1px dashed var(--line); margin-top:0.3rem; padding-top:0.5rem; }