/* ══════════════════════════════════════════════════════════════════
   استُعيد هذا الملف في ٢٣ أغسطس ٢٠٢٦ بعد أن كتبت عليه جلسةٌ موازية
   «قشرةً» مبنيّة على افتراض أنّ كل شاشة تحقن أنماطها من ملف الـJS
   الخاص بها — وهو ليس ما تفعله وحدات هذا المشروع: كلّها تستعمل أصناف
   ‎y-*‎ وتعتمد على هذه الورقة. فَقَدت الشاشات الخمس تنسيقها كاملًا.

   ما تحت هذا السطر: نظام التصميم الأصلي (٦٣٦ سطرًا) كما كُتب، يليه
   ما استُبقي من القشرة لأن الترميز الحالي يستعمله فعلًا: المودال في
   admin.html، و‎.mono‎، و‎.is-busy‎. أُسقط من القشرة ما كان مكرَّرًا في
   admin.css (‎.nav-group‎ وأخواتها) وما لا يستعمله أحد (‎.stbl‎،
   ‎.count-pill‎، ‎.list-head‎، ‎.filters-row‎، ‎.g2s‎).
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   نظام تصميم شاشات الإعدادات — مطابق لمواصفة «يلا بلس».

   الرموز أدناه منقولة حرفيًا من المواصفة (الأخضر ‎#1f7a4d‎، الكبسولة
   999px، ارتفاع الحقل 40px، رأس الجدول البيج ‎#efece5‎). لم تُشتقّ من
   رموز نملية في `tokens.css` لأنّ الهدف تشابه بصري مع مرجع محدَّد، لا
   وراثة هوية المطعم — ولو ورثناها لتغيّر شكل اللوحة مع كل تغيير ثيم.

   لكنّ الوضع الليلي يبقى: المواصفة نهارية فقط، وترْكُ هذه الشاشات
   بيضاء صلبة داخل لوحة تدعم الليل يعني نصف لوحة مضيئة ونصفها مظلم.
   فلكلّ رمز مقابلٌ ليليّ يحفظ التباين ويُبقي الأخضر هو الأخضر.

   كل الاتجاهات منطقية (inline-start/end) — شرط في المواصفة، وسببه أنّ
   اللوحة تعمل عربية RTL وإنجليزية LTR بنفس الورقة.
   ══════════════════════════════════════════════════════════════════ */

.admin-body {
  --y-brand: #1f7a4d;          /* الأخضر الأساسي — الأزرار والحالة النشطة */
  --y-brand-soft: #eaf5ef;     /* خلفية العنصر النشط والمفاتيح المقسومة */
  --y-brand-ink: #ffffff;
  --y-success: #16a34a;        /* المفاتيح ومربّعات الاختيار المفعّلة */
  --y-danger: #e11d48;         /* تجاهل · حذف · إزالة */
  --y-ink: #111827;
  --y-ink-2: #374151;
  --y-muted: #6b7280;
  --y-faint: #9ca3af;          /* نص التلميحات و«هذا الحقل اختياري» */
  --y-line: #e8e6e1;
  --y-line-soft: #f1f0ec;      /* فواصل صفوف الجداول */
  --y-page: #fbfaf8;
  --y-card: #ffffff;
  --y-field: #f3f4f2;
  --y-prefix: #e7e9e4;         /* بادئة الرابط داخل الحقل */
  --y-head: #efece5;           /* رأس الجدول — بيج */
  --y-chip: #e5e7eb;
  --y-rad: 14px;               /* بطاقة داخلية */
  --y-rad-lg: 20px;            /* بطاقة خارجية */
  --y-rad-pill: 999px;
  --y-rad-soft: 12px;          /* منطقة النص متعدّد الأسطر */
  --y-field-h: 40px;
  --y-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  --y-font: "IBM Plex Sans Arabic", "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* المقابل الليلي. الأخضر يُرفع قليلًا لا لجمالية بل لأنّ ‎#1f7a4d‎ على
   أرضية داكنة ينزل تحت 4.5:1 ويصير نص الأزرار غير مقروء. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .admin-body {
    --y-brand: #34a06a; --y-brand-soft: #16301f; --y-brand-ink: #06120b;
    --y-success: #35b364; --y-danger: #f2557a;
    --y-ink: #E9E4DA; --y-ink-2: #CFC9BD; --y-muted: #A19A8C; --y-faint: #8A8377;
    --y-line: #3A3F33; --y-line-soft: #2F342A;
    --y-page: #1B1D15; --y-card: #23271C; --y-field: #2C3123;
    --y-prefix: #343A2A; --y-head: #30352A; --y-chip: #383E2E;
    --y-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  }
}
[data-theme="dark"] .admin-body {
  --y-brand: #34a06a; --y-brand-soft: #16301f; --y-brand-ink: #06120b;
  --y-success: #35b364; --y-danger: #f2557a;
  --y-ink: #E9E4DA; --y-ink-2: #CFC9BD; --y-muted: #A19A8C; --y-faint: #8A8377;
  --y-line: #3A3F33; --y-line-soft: #2F342A;
  --y-page: #1B1D15; --y-card: #23271C; --y-field: #2C3123;
  --y-prefix: #343A2A; --y-head: #30352A; --y-chip: #383E2E;
  --y-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

/* نطاق الورقة: الشاشات الخمس وحدها. أي قاعدة هنا لا تتسرّب إلى
   الرئيسية أو تحرير القائمة — هما على تصميم اللوحة القديم حتى تُنقلا. */
#view-settings, #view-branches, #view-users, #view-theme, #view-languages,
#setDrawer, #setDrawer2 {
  font-family: var(--y-font);
  color: var(--y-ink);
}

/* ═══════════════ البطاقة والأقسام ═══════════════ */

.y-panel {
  background: var(--y-card);
  border: 1px solid var(--y-line);
  border-radius: var(--y-rad);
  box-shadow: var(--y-shadow);
  padding: 20px;
  margin-bottom: 18px;
}
.y-panel-flush { padding: 0; overflow: hidden; }

.y-sec {
  font-size: 15px; font-weight: 700; line-height: 1.5;
  margin: 20px 0 12px; padding-top: 6px;
}
.y-sec:first-child { margin-top: 0; padding-top: 0; }

/* رأس بعنوان وإجراء متقابلين — يتكسّر رأسيًا على الجوال بدل أن يزحف */
.y-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}

.y-legend { font-size: 12px; color: var(--y-muted); line-height: 1.7; }
.y-hint { font-size: 11px; color: var(--y-faint); margin-top: 4px; }

.y-count {
  background: var(--y-chip); color: var(--y-ink-2);
  border-radius: var(--y-rad-pill);
  padding: 1px 9px; font-size: 12px; font-weight: 600;
}

/* ═══════════════ الحقول ═══════════════ */

/* شبكة عمودين على الديسكتوب وعمود واحد على الجوال — قاعدة المواصفة */
.y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.y-grid-1 { grid-template-columns: 1fr; }
.y-f { margin-bottom: 12px; min-width: 0; }
.y-f-wide { grid-column: 1 / -1; }

.y-f > label, .y-label {
  display: block; font-size: 12.5px; font-weight: 500;
  color: var(--y-ink-2); margin-bottom: 5px;
}
.y-label-opt { color: var(--y-faint); font-weight: 400; }

.y-inp {
  display: block; width: 100%;
  background: var(--y-field); color: var(--y-ink);
  border: 1px solid transparent; border-radius: var(--y-rad-pill);
  padding: 10px 16px; min-height: var(--y-field-h);
  font: inherit; font-size: 13px; line-height: 1.5;
}
.y-inp::placeholder { color: var(--y-faint); }
.y-inp:focus {
  outline: none; border-color: var(--y-brand);
  box-shadow: 0 0 0 3px var(--y-brand-soft);
}
.y-inp:disabled { opacity: .55; cursor: not-allowed; }
.y-inp[aria-invalid="true"] { border-color: var(--y-danger); }

/* النص الطويل ليس كبسولة: سطران فأكثر داخل حافة 999px يقصّان الزوايا */
textarea.y-inp {
  border-radius: var(--y-rad-soft); min-height: 76px;
  resize: vertical; line-height: 1.8;
}
.y-ltr { direction: ltr; text-align: start; }

/* حقل مركّب: بادئة ثابتة + مُدخل. البادئة ليست نصًّا داخل القيمة
   لأنّها ليست جزءًا ممّا يُحفَظ — المستخدم يكتب المعرّف وحده. */
.y-pfx {
  display: flex; align-items: stretch; min-width: 0;
  background: var(--y-field); border: 1px solid transparent;
  border-radius: var(--y-rad-pill); overflow: hidden;
}
.y-pfx:focus-within { border-color: var(--y-brand); box-shadow: 0 0 0 3px var(--y-brand-soft); }
.y-pfx > .y-pfx-l {
  display: flex; align-items: center; flex: none;
  background: var(--y-prefix); color: var(--y-muted);
  padding: 10px 12px; font-size: 12px; direction: ltr;
  border-start-start-radius: var(--y-rad-pill);
  border-end-start-radius: var(--y-rad-pill);
}
.y-pfx > .y-inp {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: 0; box-shadow: none;
  border-radius: 0; font-weight: 600;
}
.y-pfx > .y-inp:focus { box-shadow: none; }

/* منتقي الدولة: زرّ العلم ثم الرقم، داخل نفس الكبسولة */
.y-dial {
  display: flex; align-items: center; gap: 4px; flex: none;
  background: var(--y-prefix); color: var(--y-ink);
  border: 0; padding: 10px 12px; font: inherit; font-size: 13px;
  cursor: pointer; min-height: var(--y-field-h);
}
.y-dial:focus-visible { outline: 2px solid var(--y-brand); outline-offset: -2px; }
.y-dial-flag { font-size: 15px; line-height: 1; }
.y-dial-code { direction: ltr; font-weight: 600; font-size: 12.5px; }

/* ═══════════════ الأزرار ═══════════════ */

.y-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--y-brand); color: var(--y-brand-ink);
  border: 1px solid transparent; border-radius: var(--y-rad-pill);
  padding: 9px 22px; min-height: var(--y-field-h);
  font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.y-btn:hover { background: color-mix(in srgb, var(--y-brand) 88%, black); }
.y-btn:active { transform: scale(.98); }
.y-btn:focus-visible { outline: 2px solid var(--y-brand); outline-offset: 2px; }
.y-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.y-btn-ghost {
  background: var(--y-card); color: var(--y-ink-2); border-color: var(--y-line);
}
.y-btn-ghost:hover { background: var(--y-field); }

/* «تجاهل» و«حذف» نصّ أحمر بلا خلفية — المواصفة تميّزهما عن الأزرار
   الممتلئة عمدًا: فعل هادم لا يجوز أن يكون أبرز من فعل الحفظ. */
.y-btn-link {
  background: none; color: var(--y-danger); border-color: transparent;
  padding: 9px 6px;
}
.y-btn-link:hover { background: color-mix(in srgb, var(--y-danger) 10%, transparent); }

.y-btn-brandlink {
  background: none; color: var(--y-brand); border-color: transparent;
  padding: 9px 6px; font-weight: 600;
}
.y-btn-brandlink:hover { background: var(--y-brand-soft); }

.y-btn-sm { padding: 6px 14px; min-height: 34px; font-size: 12.5px; }

/* زرّ أيقونة (حذف صفّ، فتح منتقي) — 44px مساحة لمس على الجوال */
.y-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none;
  background: none; border: 0; border-radius: 50%;
  color: var(--y-muted); font-size: 15px; cursor: pointer;
}
.y-icon-btn:hover { background: var(--y-field); }
.y-icon-btn-danger { color: var(--y-danger); }
.y-icon-btn:focus-visible { outline: 2px solid var(--y-brand); outline-offset: 1px; }

/* ═══════════════ المفاتيح ومربّعات الاختيار ═══════════════ */

/* الصندوق الأصلي يبقى في الشجرة (تركيز ولوحة مفاتيح وقارئ شاشة) */
.y-chk { position: relative; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.y-chk input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.y-chk-box {
  width: 22px; height: 22px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid #d1d5db; border-radius: 6px;
  background: var(--y-card); color: #fff; font-size: 13px; line-height: 1;
}
.y-chk-box::after { content: "✓"; opacity: 0; }
.y-chk input:checked + .y-chk-box {
  background: var(--y-success); border-color: var(--y-success);
}
.y-chk input:checked + .y-chk-box::after { opacity: 1; }
.y-chk input:disabled + .y-chk-box { opacity: .45; }
.y-chk input:focus-visible + .y-chk-box { outline: 2px solid var(--y-brand); outline-offset: 2px; }

.y-tg { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.y-tg input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.y-tg-track {
  width: 42px; height: 23px; flex: none; padding: 3px;
  display: flex; align-items: center;
  background: #d1d5db; border-radius: var(--y-rad-pill);
  transition: background .18s ease;
}
.y-tg-thumb {
  width: 17px; height: 17px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  /* هامش منطقي لا translate: القرص ينزلق نحو نهاية المسار في الاتجاهين */
  margin-inline-start: 0;
  transition: margin-inline-start .18s ease;
}
.y-tg input:checked + .y-tg-track { background: var(--y-success); }
.y-tg input:checked + .y-tg-track .y-tg-thumb { margin-inline-start: calc(100% - 17px); }
.y-tg input:disabled + .y-tg-track { opacity: .45; }
.y-tg input:focus-visible + .y-tg-track { outline: 2px solid var(--y-brand); outline-offset: 2px; }

/* مفتاح ثنائي مقسوم (لغة الواجهة · حالة اللغة) */
.y-split {
  display: inline-flex; background: var(--y-brand-soft);
  border-radius: var(--y-rad-pill); padding: 0; overflow: hidden;
}
.y-split button {
  background: none; border: 0; cursor: pointer;
  padding: 7px 16px; min-height: 36px;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--y-ink-2);
  border-radius: var(--y-rad-pill);
}
.y-split button.is-on { background: var(--y-brand); color: var(--y-brand-ink); }
.y-split button:focus-visible { outline: 2px solid var(--y-brand); outline-offset: -2px; }

/* ═══════════════ التبويبات ═══════════════ */

.y-tabs {
  display: flex; gap: 22px;
  border-block-end: 1px solid var(--y-line);
  margin-bottom: 16px; overflow-x: auto; scrollbar-width: none;
}
.y-tabs::-webkit-scrollbar { display: none; }
.y-tabs button {
  background: none; border: 0; cursor: pointer;
  padding: 8px 2px; min-height: 44px;
  font: inherit; font-size: 14px; color: var(--y-muted); white-space: nowrap;
  border-block-end: 2.5px solid transparent;
  margin-block-end: -1px;
}
.y-tabs button.is-on { color: var(--y-brand); font-weight: 700; border-block-end-color: var(--y-brand); }

/* ═══════════════ الجدول ═══════════════ */

.y-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.y-table thead th {
  background: var(--y-head); color: var(--y-muted);
  padding: 11px 14px; font-weight: 600; text-align: center; white-space: nowrap;
}
.y-table thead th:first-child {
  text-align: start;
  border-start-start-radius: 10px; border-end-start-radius: 10px;
}
.y-table thead th:last-child {
  border-start-end-radius: 10px; border-end-end-radius: 10px;
}
.y-table tbody td {
  padding: 14px; text-align: center;
  border-block-end: 1px solid var(--y-line-soft);
}
.y-table tbody td:first-child { text-align: start; font-weight: 600; }
.y-table tbody tr:last-child td { border-block-end: 0; }
.y-cell-min { width: 1%; white-space: nowrap; }
.y-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; direction: ltr; }
.y-dash { color: var(--y-faint); }

/* مقبض السحب لإعادة الترتيب */
.y-drag { cursor: grab; color: var(--y-faint); }
.y-drag:active { cursor: grabbing; }
tr.is-dragging { opacity: .4; }
tr.is-drop-target td { box-shadow: inset 0 2px 0 var(--y-brand); }

.y-empty { padding: 28px 14px; text-align: center; color: var(--y-muted); font-size: 13px; }

/* شريط الفرز — مخفيّ حتى يُطلب */
.y-filters {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 14px 0;
}
.y-search { position: relative; flex: 0 1 260px; min-width: 180px; }
.y-search .y-inp { padding-inline-start: 38px; }
.y-search::before {
  content: "🔍"; position: absolute; inset-inline-start: 14px; top: 50%;
  transform: translateY(-50%); font-size: 12px; opacity: .55; pointer-events: none;
}

/* ═══════════════ بطاقات الاختيار (العرض · الثيمات) ═══════════════ */

.y-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.y-card-pick {
  position: relative; display: block; width: 100%; text-align: start;
  border: 1px solid var(--y-line); border-radius: var(--y-rad-soft);
  background: var(--y-card); padding: 10px; font: inherit; font-size: 12.5px;
  cursor: pointer;
}
.y-card-pick.is-on { border-color: var(--y-brand); box-shadow: 0 0 0 2px var(--y-brand-soft); }
.y-card-pick:focus-visible { outline: 2px solid var(--y-brand); outline-offset: 2px; }
.y-thumb {
  height: 78px; border-radius: 8px; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; overflow: hidden;
}
.y-card-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px;
}
.y-tag {
  background: var(--y-field); border-radius: var(--y-rad-pill);
  padding: 2px 10px; font-size: 11px; color: var(--y-muted);
}

/* ═══════════════ حقول الألوان ═══════════════ */

.y-swatch {
  display: flex; align-items: center; gap: 10px;
  background: var(--y-field); border-radius: var(--y-rad-pill);
  padding: 6px 8px 6px 14px; min-height: var(--y-field-h);
}
.y-swatch .y-hex {
  flex: 1 1 auto; min-width: 0; background: none; border: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; direction: ltr; text-align: start; color: var(--y-ink);
}
.y-swatch .y-hex:focus { outline: none; }
.y-dot {
  width: 28px; height: 28px; flex: none; padding: 0;
  border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12);
  cursor: pointer; overflow: hidden;
}
/* منتقي اللون الأصلي يملأ الدائرة بلا حوافه الافتراضية */
.y-dot::-webkit-color-swatch-wrapper { padding: 0; }
.y-dot::-webkit-color-swatch { border: 0; border-radius: 50%; }
.y-dot::-moz-color-swatch { border: 0; border-radius: 50%; }

/* تحذير التباين — إضافة فوق المرجع، فالمرجع يسمح بلونين متطابقين */
.y-contrast {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px; font-size: 11px; color: var(--y-faint);
}
.y-contrast.is-bad { color: var(--y-danger); font-weight: 600; }

/* ═══════════════ شجرة الصلاحيات ═══════════════ */

.y-perm {
  border: 1px solid var(--y-line); border-radius: var(--y-rad-soft);
  background: var(--y-card); padding: 14px;
  max-height: 330px; overflow: auto;
}
.y-perm.is-off { opacity: .45; pointer-events: none; }
.y-pline { display: flex; align-items: center; gap: 9px; padding: 4px 0; min-height: 34px; }
.y-pline.lvl-1 { font-weight: 700; font-size: 13.5px; margin-top: 10px; }
.y-pline.lvl-2 { padding-inline-start: 16px; font-size: 13px; }
.y-pline.lvl-3 { padding-inline-start: 32px; font-size: 12.5px; color: var(--y-ink-2); }
.y-pdesc { font-size: 11.5px; color: var(--y-faint); line-height: 1.6; padding-bottom: 4px; }
.y-pdesc.lvl-1 { padding-inline-start: 31px; }
.y-pdesc.lvl-2 { padding-inline-start: 47px; }

/* ═══════════════ شريط التغييرات غير المحفوظة ═══════════════ */

.y-savebar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding: 12px 16px;
  background: var(--y-card); border: 1px solid var(--y-brand);
  border-radius: var(--y-rad-soft);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .07);
}
.y-savebar-text { font-size: 13px; font-weight: 600; }

/* ═══════════════ معاينة الجوال (شاشة المظهر) ═══════════════ */

.y-preview-wrap {
  background: var(--y-head); border-radius: var(--y-rad);
  padding: 14px; position: sticky; top: 12px;
}
.y-preview-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 10px; font-size: 10.5px;
}
.y-preview-tabs button {
  background: var(--y-card); border: 0; border-radius: var(--y-rad-pill);
  padding: 5px 10px; min-height: 30px; font: inherit; font-size: 10.5px;
  color: var(--y-ink-2); cursor: pointer;
}
.y-preview-tabs button.is-on { background: var(--y-brand); color: var(--y-brand-ink); }
.y-phone {
  width: 100%; max-width: 250px; margin: 0 auto;
  border-radius: 26px; overflow: hidden;
  border: 1px solid var(--y-line); padding-bottom: 12px;
}

/* ═══════════════ الاستجابة ═══════════════ */

@media (max-width: 860px) {
  .y-grid { grid-template-columns: 1fr; }
  .y-cards { grid-template-columns: 1fr 1fr; }
  .y-panel { padding: 16px; }
}

/* الجدول يصير بطاقات: صفّ واحد لكل سجلّ بتسمية صريحة أمام كل قيمة.
   البديل (تمرير أفقي) يخفي عمود الإجراءات خلف الحافة على 375px. */
@media (max-width: 720px) {
  .y-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .y-table, .y-table tbody, .y-table tr, .y-table td { display: block; width: 100%; }
  .y-table tr {
    border: 1px solid var(--y-line); border-radius: var(--y-rad-soft);
    padding: 6px 12px; margin-bottom: 10px; background: var(--y-card);
  }
  .y-table tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 0; text-align: end; border-block-end: 1px solid var(--y-line-soft);
    min-height: 44px;
  }
  .y-table tbody td:last-child { border-block-end: 0; }
  .y-table tbody td::before {
    content: attr(data-label); flex: none;
    font-size: 12px; font-weight: 600; color: var(--y-muted); text-align: start;
  }
  .y-table tbody td:empty { display: none; }
  .y-cards { grid-template-columns: 1fr; }
  .y-preview-wrap { position: static; }
}

/* تعطيل الحركة لمن يطلب ذلك */
@media (prefers-reduced-motion: reduce) {
  .y-tg-track, .y-tg-thumb, .y-btn { transition: none; }
  .y-btn:active { transform: none; }
}


/* ══════════════════════════════════════════════════════════════════
   مكوّنات الشاشات — مضافة بعد نظام التصميم أعلاه، ومرتّبة بالشاشة.
   ══════════════════════════════════════════════════════════════════ */

.y-inline { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.y-stack { display: grid; gap: 8px; }
.y-table-slot { display: block; }
#restaurantHost.is-busy, #branchesHost.is-busy, #usersHost.is-busy {
  pointer-events: none; opacity: .6;
}

/* زرّ يتنكّر في هيئة حقل — يفتح منتقيًا بدل أن يُكتب فيه */
.y-picker-btn {
  display: flex; align-items: center; justify-content: space-between;
  text-align: start; cursor: pointer;
}
.y-picker-btn.is-empty { color: var(--y-faint); }
.y-picker-btn::after { content: "▾"; font-size: 10px; color: var(--y-muted); }

/* ─────── الفروع: مصفوفة تطبيقات التوصيل ─────── */

.y-repeat { display: grid; gap: 8px; margin-bottom: 8px; }
.y-repeat-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 8px; align-items: center;
}
.y-filter-inline { display: inline-flex; align-items: center; gap: 8px; }
.y-filter-label { font-size: 13px; color: var(--y-ink-2); white-space: nowrap; }

/* ─────── المستخدمون: التبويبات القائمة في admin.html ─────── */

#view-users .tabs-bar {
  display: flex; gap: 22px; border-block-end: 1px solid var(--y-line);
  margin-bottom: 16px; overflow-x: auto; scrollbar-width: none;
  background: none; padding: 0;
}
#view-users .tabs-bar::-webkit-scrollbar { display: none; }
#view-users .tabs-bar .tab {
  background: none; border: 0; cursor: pointer;
  padding: 8px 2px; min-height: 44px; margin-block-end: -1px;
  font: inherit; font-family: var(--y-font);
  font-size: 14px; color: var(--y-muted); white-space: nowrap;
  border-block-end: 2.5px solid transparent; border-radius: 0;
}
#view-users .tabs-bar .tab.is-active {
  color: var(--y-brand); font-weight: 700; border-block-end-color: var(--y-brand);
}

/* ─────── محرّر الدور ─────── */

/* العمود الضيّق أولًا في الاتجاه المنطقي: في RTL يقع يمينًا كما في
   المرجع، وفي LTR يسارًا — بلا قاعدة ثانية. */
.y-perm-cols { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: start; }
.y-perm-side { display: grid; gap: 8px; }
.y-perm-group {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px; font-size: 13.5px; font-weight: 600; cursor: default;
}
.y-perm-main {
  border: 1px solid var(--y-line); border-radius: var(--y-rad-soft);
  background: var(--y-card); overflow: hidden;
}
.y-perm-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-block-end: 1px solid var(--y-line);
  background: var(--y-field);
}
.y-perm-head-t { font-size: 13.5px; font-weight: 700; }
.y-perm-slot .y-perm { border: 0; border-radius: 0; }
.y-scope { margin-top: 18px; }
.y-scope-list { display: grid; gap: 2px; margin-top: 8px; }

/* ─────── المظهر ─────── */

.y-theme-cols {
  display: grid; grid-template-columns: 290px minmax(0, 1fr);
  gap: 18px; align-items: start;
}
.y-theme-opts { min-width: 0; }
.y-preview-slot { margin-top: 8px; }

.y-subtabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.y-subtabs button {
  background: var(--y-field); border: 0; border-radius: 8px;
  padding: 6px 12px; min-height: 36px;
  font: inherit; font-size: 12px; color: var(--y-ink-2); cursor: pointer;
}
.y-subtabs button.is-on {
  background: var(--y-brand-soft); color: var(--y-brand); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--y-brand);
}
.y-fontlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.y-fontcard {
  display: grid; gap: 4px; text-align: start; cursor: pointer;
  background: var(--y-card); border: 1px solid var(--y-line);
  border-radius: var(--y-rad-soft); padding: 10px 12px; font: inherit;
}
.y-fontcard.is-on { border-color: var(--y-brand); box-shadow: 0 0 0 2px var(--y-brand-soft); }
.y-fontsample { font-size: 15px; color: var(--y-ink); }
.y-fontname { font-size: 11px; color: var(--y-muted); direction: ltr; text-align: start; }

.y-pick-mark {
  width: 22px; height: 22px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid #d1d5db; border-radius: 6px;
  background: var(--y-card); color: #fff; font-size: 13px;
}
.y-pick-mark.is-on { background: var(--y-success); border-color: var(--y-success); }
.y-view-glyph { color: var(--y-muted); }
.y-radio {
  width: 16px; height: 16px; flex: none; display: inline-block;
  border: 1.5px solid #d1d5db; border-radius: 50%;
}
.y-radio.is-on { border-color: var(--y-brand); border-width: 5px; }
.y-card-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.y-thumb-chip { border-radius: 6px; padding: 6px 10px; font-size: 10px; }

.y-custom { display: block; padding: 14px; margin-top: 12px; cursor: default; }
.y-custom-head { background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
.y-custom-caret { color: var(--y-muted); font-size: 16px; }
.y-split-wide { display: flex; width: 100%; margin: 12px 0 4px; }
.y-split-wide button { flex: 1 1 0; }
.y-contrast-box { display: grid; gap: 2px; }

/* معاينة الجوّال: أبعاد ثابتة نسبيًّا كي لا يتغيّر شكلها مع طول الاسم */
.y-p-cover { height: 74px; }
.y-p-logo {
  width: 56px; height: 56px; border-radius: 50%;
  margin: -28px auto 6px; border: 3px solid;
}
.y-p-name { text-align: center; font-size: 13px; font-weight: 700; }
.y-p-social { text-align: center; font-size: 11px; letter-spacing: 4px; margin: 4px 0; }
.y-p-cats { display: flex; gap: 10px; justify-content: center; font-size: 9.5px; margin-bottom: 8px; }
.y-p-cat { padding-bottom: 2px; border-block-end: 2px solid transparent; }
.y-p-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 10px; }
.y-p-grid.is-small { grid-template-columns: 1fr 1fr 1fr; }
.y-p-item { border-radius: 10px; padding: 6px; display: grid; gap: 4px; justify-items: start; }
.y-p-photo { width: 100%; height: 34px; border-radius: 7px; }
.y-p-item-name { font-size: 10px; font-weight: 600; }
.y-p-price, .y-p-tag { border-radius: 999px; padding: 1px 7px; font-size: 8.5px; }
.y-p-btn {
  margin: 10px 10px 0; border-radius: 999px; padding: 7px;
  text-align: center; font-size: 10px; font-weight: 700;
}

@media (max-width: 980px) {
  .y-theme-cols { grid-template-columns: 1fr; }
  .y-perm-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .y-fontlist { grid-template-columns: 1fr; }
  .y-repeat-row { grid-template-columns: 1fr; }
  .y-repeat-row .y-icon-btn { justify-self: end; }
}

/* ══════════════════════════════════════════════════════════════════
   مُستبقًى من القشرة — ترميز قائم يستعمله
   ══════════════════════════════════════════════════════════════════ */

/* ── المودال (حدود الباقة والتأكيدات) ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(24, 27, 18, 0.4);
}
.modal-overlay.is-closing { opacity: 0; transition: opacity 0.15s ease; }
.modal {
  width: 100%; max-width: 420px;
  background: var(--card, var(--bg));
  border: 1px solid var(--line, var(--ring));
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  box-shadow: var(--shadow-3);
  animation: aPopIn 0.2s var(--ease-out-quint) both;
}
.modal-title { margin: 0 0 8px; font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.modal-text { margin: 0 0 16px; font-size: 13px; color: var(--text-muted); line-height: 1.8; }
.modal-actions { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; }

/* ── أدوات صغيرة مشتركة ── */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; direction: ltr; unicode-bidi: isolate; }
.is-busy { pointer-events: none; opacity: 0.6; }

/* حقل ببادئة رابط ثابتة: المستخدم يكتب اسم المستخدم فقط.
   المحتوى LTR لأن الروابط لاتينية، والبادئة على طرف النهاية البصري. */
.pfx { display: flex; direction: ltr; }
.pfx .pfx-p {
  display: flex; align-items: center; white-space: nowrap;
  padding: 0 11px; font-size: 12px; color: var(--text-muted);
  background: color-mix(in srgb, var(--field) 55%, var(--line));
  border: 1px solid var(--line);
  border-inline-end: 0;
  border-start-start-radius: 11px; border-end-start-radius: 11px;
}
.pfx .input {
  flex: 1; min-width: 0; direction: ltr; text-align: start;
  border-start-start-radius: 0; border-end-start-radius: 0;
}

/* عيّنة لون: تسمية + قيمة HEX + دائرة تفتح منتقي الألوان */
.swatch {
  display: flex; align-items: center; gap: 10px;
  background: var(--field); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 8px 6px 14px;
}
.swatch .mono { flex: 1; font-size: 12px; background: transparent; border: 0; padding: 0; color: var(--text); min-width: 0; }
.swatch .dot {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 0; cursor: pointer; position: relative; overflow: hidden;
}
.swatch .dot input[type="color"] {
  position: absolute; inset: -8px; width: 44px; height: 44px;
  border: 0; padding: 0; cursor: pointer; opacity: 0;
}

/* ══════════════════════════════════════════════════════════════════
   المكوّنات التي بقيت بلا تنسيق بعد أن كُتب عليها الملف.

   ‎ui.js‎ و‎languages.js‎ و‎restaurant.js‎ و‎theme.js‎ كُتبت بعد نظام
   التصميم أعلاه، وأنماطها ضاعت مع الكتابة فوق الملف. أظهر أثر ذلك
   في «منتقي الدور»: ‎.y-pop-overlay‎ بلا `position` فسقط في السياق
   العادي أسفل الصفحة بدل أن يطفو فوق الدرج — يراه المستخدم صندوقًا
   غريبًا يزيح الشاشة كلها.
   ══════════════════════════════════════════════════════════════════ */

/* ── منتقي القوائم الطويلة (الدور · الدولة · المدينة) ── */
.y-pop-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(17, 24, 39, .5);
  backdrop-filter: blur(2px);
}
.y-pop {
  width: min(420px, 100%);
  max-height: min(560px, 86vh);
  display: flex; flex-direction: column;
  background: var(--y-card);
  border: 1px solid var(--y-line);
  border-radius: var(--y-rad-lg);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
  padding: 16px;
  font-family: var(--y-font);
}
.y-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.y-pop-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--y-ink); }
.y-pop-search { margin-bottom: 10px; }
.y-pop-create { align-self: flex-start; margin-bottom: 8px; }

.y-pop-list {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  margin-inline-end: -6px; padding-inline-end: 6px;
}
.y-pop-item {
  appearance: none; border: 0; background: transparent;
  font-family: inherit; font-size: 13.5px; color: var(--y-ink);
  display: flex; align-items: center; gap: 9px;
  padding: 10px 11px; border-radius: var(--y-rad-soft);
  text-align: start; cursor: pointer; min-height: 42px;
}
.y-pop-item:hover { background: var(--y-field); }
.y-pop-item.is-on { background: var(--y-brand-soft); color: var(--y-brand); font-weight: 700; }
.y-pop-item:focus-visible { outline: 2px solid var(--y-brand); outline-offset: -2px; }
.y-pop-lead { font-size: 15px; line-height: 1; flex: none; }
.y-pop-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.y-pop-trail { color: var(--y-faint); font-size: 12px; direction: ltr; flex: none; }

/* الإجراءات صفٌّ شقيق للزرّ لا داخله (زرّ داخل زرّ تركيب غير صالح)،
   فنسحبها فوقه بهامش سالب لتبدو في طرفه. */
.y-pop-actions {
  display: flex; gap: 2px; justify-content: flex-end;
  margin-top: -42px; margin-inline-start: auto;
  padding-inline-end: 8px; height: 42px; align-items: center;
  position: relative; pointer-events: none;
}
.y-pop-actions > * { pointer-events: auto; }
.y-pop-item.with-actions .y-pop-label { padding-inline-end: 62px; }

/* ── تفاصيل صغيرة في ui.js ── */
.y-chk-label, .y-tg-label { font-size: 13px; color: var(--y-ink-2); }
.y-dial-caret { font-size: 9px; color: var(--y-faint); }
.y-head-title { display: flex; align-items: center; gap: 9px; min-width: 0; }

/* ── شاشة اللغات ── */
.y-lang-panel { max-width: 560px; }
.y-lang-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-block-end: 1px solid var(--y-line-soft);
}
.y-lang-row:last-child { border-block-end: 0; }
.y-lang-name { font-size: 13.5px; font-weight: 600; color: var(--y-ink); }
.y-lang-sw { flex: none; }
.y-lang-sw.is-locked { opacity: .55; pointer-events: none; }
.y-lang-star { font-size: 12.5px; font-weight: 700; color: var(--y-brand); }
.y-lang-set { font-size: 12.5px; }

/* ── غلاف المطعم (restaurant.js) ── */
.y-cover {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 6;
  border-radius: var(--y-rad); overflow: hidden;
  border: 1px solid var(--y-line); background: var(--y-field);
  cursor: pointer;
}
.y-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.y-cover.is-empty {
  display: flex; align-items: center; justify-content: center;
  border-style: dashed;
}
.y-cover:focus-visible { outline: 2px solid var(--y-brand); outline-offset: 2px; }
.y-cover-empty { font-size: 12.5px; color: var(--y-faint); text-align: center; padding: 0 16px; }
.y-cover-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ── صفّ مفتاح داخل نموذج ── */
.y-inline-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; }

/* ── صندوق الخطوط (theme.js) ── */
.y-fontbox { display: flex; flex-direction: column; gap: 12px; }

/* شارة قائمة الفرع داخل جدول الفروع */
.y-branch-menu { font-size: 11.5px; font-weight: 600; white-space: nowrap; }