/* ══════════════════════════════════════════════════════════════════
   نمليه — طبقة هوية لوحة التحكّم
   ------------------------------------------------------------------
   تُحمَّل **بعد** admin.css و settings.css، ولا تلمس أيًّا منهما.
   الفكرة: اللوحة دفترُ نملية — رفوفٌ عليها أصناف، وأهمّ ما يُقرأ منها
   بنظرة واحدة هو ما **نفد**. لذلك:

     • للّوحة لوحةُ ألوان خاصّة بها لا ترثها من قائمة الزبون. كانت
       ترث `menu/tokens.css` ومعها انقلابُه التلقائي على الوضع
       الداكن، فتخرج زيتونيةً موحلة لا يُقرأ فيها شيء. هنا نهارٌ
       صريح وليلٌ مصمَّم — لا انقلاب.
     • الصورة هي أسرع تعريف لصنف طعام، وكانت ٣٨ بكسل باهتة. صارت ٦٠.
     • «نفد» يُفرغ الصورة فعلًا (رمادية + شريط سمّاق)، فتُقرأ الفجوات
       في الرفّ من بعيد. هذه هي العلامة الوحيدة التي نصرف فيها الجرأة،
       وما عداها هادئ عمدًا.

   الرجوع: احذف وسم <link> الخاص بهذا الملف من admin.html.
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────── ١. الرموز ─────────────── */

/*
 * لا لوحةَ ألوانٍ خاصّة باللوحة.
 *
 * كانت هنا لوحةٌ مستقلّة (أرضية أفتح، بطاقاتٌ قاربت البياض، وشريطٌ
 * جانبيّ زيتونيّ مصمت). أُزيلت بطلبٍ صريح: البياض كسر دفء العائلة
 * البيجيّة، والشريط المصمت ثقّل الشاشة. اللوحة تعود إلى رموز
 * `menu/tokens.css` — نفس كريم نمليه وبيجها وزيتونها — فتتناسق مع
 * قائمة الزبون بدل أن تعيش بهويةٍ ثانية.
 *
 * ما يبقى هنا رموزٌ **إضافية** لا بديلة: ألوانُ حالةٍ لا وجود لها في
 * `tokens.css`، وأدوارُ خطٍّ للنصوص الكثيفة. لا نعيد تعريف أي لونٍ
 * أساسيّ، فيبقى تبديل الوضع الفاتح/الداكن كما كان بالضبط.
 */
.admin-body {
  /* السمّاق: لا يظهر إلا على «نفد» والحذف. الزيت: على «مخفي» والتنبيه. */
  --sumac: #9C3A2B;
  --oil: #9A6F1F;
  --oil-soft: #F3E9CF;
  /* خلفية شريحة السعر — مشتقّة من الزيتون نفسه لا لونٌ ثالث. */
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);

  /* الخطّ يعود إلى «ثمانية» — وجهُ نمليه نفسه في اللوحة وفي قائمة
     الزبون. كان هنا تبديلٌ إلى IBM Plex للصفوف الكثيفة (أوضح تحت ١٤
     بكسل)، وأُلغي مع اللوحة: خطٌّ مختلف يكسر التناسق مثلما يكسره لونٌ
     مختلف. الرمزان باقيان اسمين مستعارين، فإعادة بلكس سطرٌ واحد.
     التصفيف العمودي للأرقام يبقى عبر `font-variant-numeric` وحده. */
  --font-ui: var(--font-body);
  --font-num: var(--font-display);
}

/*
 * ألوان الحالة وحدها تُعدَّل للوضع الداكن — الباقي يأتي من `tokens.css`
 * و`admin.css` كما كان. نستعمل **نفس** محدِّدَي admin.css لا استعلام
 * الوسائط وحده: اللوحة تُبدَّل أيضًا بسمة `data-theme` من الإعدادات،
 * ومن يختار الداكن يدويًّا على جهازٍ نهاريّ لا يطابق الاستعلام، فتبقى
 * شريحة «مخفي» فاتحةً على بطاقة داكنة.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .admin-body {
    --sumac: #D4705E;
    --oil: #D4A845;
    --oil-soft: #322A16;
  }
}
[data-theme="dark"] .admin-body {
  --sumac: #D4705E;
  --oil: #D4A845;
  --oil-soft: #322A16;
}

/* ─────────────── ٢. الهيكل ─────────────── */

/* ١١٠٠ بكسل كانت تترك ثلث الشاشة فارغًا. الشاشات ذات الشبكات
   (اللوحة، التقارير، الإعدادات) تستفيد من العرض. */
.admin-body .app-main { max-width: 1280px; padding: 28px 32px 72px; }

/* شاشة القائمة **لا** تستفيد منه: صفٌّ فيه اسمٌ وسعرٌ ومفتاح، ومدّه
   إلى ١٢٠٠ بكسل يفتح واديًا بين الاسم والمفتاح تتوه فيه العين وهي
   تتتبّع أيَّ صنفٍ يخصّ أيَّ مفتاح. عمودٌ واحد بعرضٍ مقروء. */
.admin-body #view-menu { max-width: 880px; }

/*
 * الشريط الجانبي = بطاقة منيو.
 *
 * لونه ليس زيتونًا جديدًا اخترتُه، بل `--card-a` و`--on-card` أنفسهما —
 * أي الزيتون والكريم اللذان يراهما الزبون على كل بطاقة في القائمة.
 * ربطُه بالرمزين لا بأرقام محفورة يعني أنه يتبع الوضع الفاتح والداكن
 * تلقائيًّا (‎#4F5A40‎ نهارًا و‎#4B5539‎ ليلًا) بلا قاعدة ثانية.
 *
 * والمحتوى يبقى كريميًّا دافئًا كما كان: اللوح الزيتوني يفصل الأدوات
 * عن العمل، ولو صُبغت البطاقات معه لعاد كسرُ الدفء الذي أُزيل.
 */
.admin-body {
  --side-bg: var(--card-a);
  --side-ink: var(--on-card);
}

.admin-body .side {
  width: 232px;
  background: var(--side-bg);
  color: var(--side-ink);
  border-inline-start: 0;
  border-inline-end: 0;
}
.admin-body .side-logo {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--side-ink);
}
.admin-body .side-logo small {
  color: color-mix(in srgb, var(--side-ink) 60%, transparent);
  font-weight: 400;
}

/* «الإعدادات» زرٌّ من صنف `.nav-group` لا `.nav-btn`، ولونه في حالته
   النشطة `--accent` — زيتونٌ على زيتون، فيختفي البند تمامًا من الشريط.
   لا بدّ من ذكره صراحةً مع إخوته. */
.admin-body .nav-btn,
.admin-body .nav-sub-btn,
.admin-body .nav-group {
  color: color-mix(in srgb, var(--side-ink) 80%, transparent);
  border-radius: 10px;
}
.admin-body .nav-btn:hover,
.admin-body .nav-sub-btn:hover,
.admin-body .nav-group:hover {
  background: color-mix(in srgb, var(--side-ink) 12%, transparent);
  color: var(--side-ink);
}
.admin-body .nav-btn.is-active,
.admin-body .nav-sub-btn.is-active,
.admin-body .nav-group.is-active {
  background: color-mix(in srgb, var(--side-ink) 16%, transparent);
  color: var(--side-ink);
  font-weight: 600;
}
.admin-body .nav-group.is-active { background: transparent; }
/* الشريط المميِّز للبند النشط كان بلون `--accent` — يختفي على الزيتون. */
.admin-body .nav-btn.is-active::before { background: var(--side-ink); }

.admin-body .side-foot { border-top-color: color-mix(in srgb, var(--side-ink) 18%, transparent); }
.admin-body .side-foot .btn-primary {
  background: var(--side-ink);
  color: var(--side-bg);
  border-color: transparent;
}
/* «خروج» كان أحمر `#E2445C` — أحمرُ صارخ على لوحٍ زيتوني، وهو زرّ
   خروجٍ عادي لا فعلٌ مدمِّر. نُهدّئه إلى حبر الشريط نفسه. */
.admin-body .side-foot .btn-cancel,
.admin-body .side-foot .btn-ghost {
  background: transparent;
  border-color: color-mix(in srgb, var(--side-ink) 28%, transparent);
  color: color-mix(in srgb, var(--side-ink) 75%, transparent);
}
.admin-body .side-foot .btn-cancel:hover,
.admin-body .side-foot .btn-ghost:hover {
  background: color-mix(in srgb, var(--side-ink) 12%, transparent);
  color: var(--side-ink);
}
/* «تغييرات غير محفوظة» ذهبيٌّ داكن لا يُقرأ على الزيتون. */
.admin-body .side-foot .dirty-flag { color: #E8C86A; }

.admin-body .side :is(button, a):focus-visible { outline-color: var(--side-ink); }

/* ─────────────── ٣. الطباعة ─────────────── */

.admin-body .h-title,
.admin-body .panel-title,
.admin-body .gate-title,
.admin-body .stat-value,
.admin-body .bignum {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}
.admin-body .h-title { font-size: 22px; font-weight: 700; }

/* الأرقام مصفوفة عموديًّا — سعرٌ فوق سعر يجب أن تتطابق خاناته. */
.admin-body .tprice,
.admin-body .stat-value,
.admin-body .tkcal,
.admin-body .tree-count,
.admin-body .cat-meta,
.admin-body .top-count {
  font-variant-numeric: tabular-nums;
}

/* ─────────────── ٤. البطاقات والإحصاءات ─────────────── */

.admin-body .panel,
.admin-body .stat,
.admin-body .report-card {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-1);
}
.admin-body .panel-title { font-size: 17px; }

/* الرقم يقود، والتسمية تتبع صغيرةً منفرجة الحروف — كانت التسمية
   بحجم الرقم تقريبًا فلا يقود شيء. */
.admin-body .stat { padding: 20px 22px; gap: 4px; }
.admin-body .stat-value {
  font-size: 40px;
  line-height: 1.05;
  font-weight: 700;
  font-family: var(--font-num), var(--font-display);
  color: var(--text);
}
.admin-body .stat-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* ─────────────── ٥. الشجرة: الرفّ والصنف ─────────────── */

/* رأس القسم = حافة الرفّ: خطّ زيتوني رفيع يحمل الاسم والعدد. */
.admin-body .trow-cat {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--accent);
  border-radius: 0;
  box-shadow: none;
  padding: 12px 4px 8px;
  margin: 22px 0 4px;
}
.admin-body .trow-cat:first-child { margin-top: 6px; }
.admin-body .trow-cat .tttl {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
}
.admin-body .trow-cat .tmeta,
.admin-body .trow-cat .cat-meta { color: var(--text-muted); font-size: 12px; }

/* الصنف */
.admin-body .trow-item {
  gap: 14px;
  padding: 9px 13px;
  margin: 6px 0;
  border-radius: 12px;
  border-color: var(--line);
  background: var(--surface);
}
.admin-body .trow-item:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: var(--shadow-2);
}

/* الصورة: أسرع تعريفٍ لصنف طعام، وكانت ٣٨ بكسل لا يُميَّز فيها شيء. */
.admin-body .trow-item .tthumb {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background: var(--field);
  transition: filter 0.18s ease;
}
.admin-body .trow-item .tthumb-empty {
  font-size: 10px;
  line-height: 1.25;
  border-style: dashed;
  border-color: var(--line);
  color: var(--text-muted);
}

.admin-body .trow-item .tttl {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
/* `.tinfo` كان بلا `flex`، فيبتلع `.grow` كلَّ الفراغ ويُترك الاسم
   بعرض **صفر** متى ضاق الصف — النصّ يفيض فوق المفتاح ولا شيء يُقرأ.
   يظهر على الهاتف دائمًا، وعلى سطح المكتب عند اسمٍ طويل. */
.admin-body .tinfo { flex: 1 1 auto; min-width: 0; }
.admin-body .tinfo .tsub { margin-top: 5px; gap: 8px; }
.admin-body .tprice {
  font-family: var(--font-num), var(--font-ui);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 6px;
}

/* الحالة نصٌّ صغير هادئ — المفتاح نفسه هو ما يُقرأ لونه. */
.admin-body .tstate { font-size: 12px; font-weight: 500; }
.admin-body .trow-item.is-sold .tstate { color: var(--sumac); }

/* أزرار الترتيب والقائمة كانت ظاهرةً دائمًا على ٥٠ صفًّا: ضجيجٌ خالص.
   تظهر عند المرور أو التركيز، وتبقى مساحتها محجوزة فلا يقفز الصف.
   على اللمس (لا مؤشّر) تبقى ظاهرة — لا مرورَ هناك. */
@media (hover: hover) and (pointer: fine) {
  .admin-body .trow-item .tmove,
  .admin-body .trow-item .tkebab {
    opacity: 0;
    transition: opacity 0.14s ease;
  }
  .admin-body .trow-item:hover .tmove,
  .admin-body .trow-item:hover .tkebab,
  .admin-body .trow-item:focus-within .tmove,
  .admin-body .trow-item:focus-within .tkebab { opacity: 1; }
}

/* مفتاح التوفّر: أخضرُ يعني «على الرفّ»، ورماديٌّ يعني «نفد». */
.admin-body .tg { width: 40px; height: 23px; }
.admin-body .tg[aria-checked="false"] { background: var(--line); }

/* ─────────────── ٦. العلامة: الرفّ يفرغ ─────────────── */

/* «نفد» — الصورة تفقد لونها، وتنزل على حافّة الصفّ (الحافّة التي تبدأ
   منها العين في العربية) علامةُ سمّاق. حين تنفد أصناف، تصير العلامات
   عمودًا من الشرطات الحمراء يُقرأ من بعيد: هذه هي فجوات الرفّ، وهذا
   بالضبط عمل دفتر النملية. هي العلامة الوحيدة التي نصرف فيها الجرأة.

   بديلُها الأوّل كان شريطًا مائلًا فوق الصورة بموضعٍ مطلق — يتطلّب
   معرفة إزاحة الصورة داخل الصف، وهي تتغيّر مع مربّع التحديد ومع
   التفاف الصفّ على الهاتف، فينزلق الشريط بجانب الصورة لا فوقها.
   العلامة على الحافّة لا تحتاج حسابًا وتصمد مع أيّ ترتيب. */
.admin-body .trow-item.is-sold {
  background: var(--surface-2);
  border-inline-start: 4px solid var(--sumac);
  padding-inline-start: 10px; /* ١٣ − ٣ = عرض النصّ لا يتزحزح */
}
.admin-body .trow-item.is-sold .tthumb { filter: grayscale(1) contrast(0.92) brightness(0.97); }
.admin-body .trow-item.is-sold .tttl { color: var(--text-muted); }
.admin-body .trow-item.is-sold .tprice {
  background: transparent;
  color: var(--text-muted);
  padding-inline: 0;
}

/* «مخفي» قرارٌ آخر تمامًا: الصنف موجود وسليم، لكنه خارج نظر الزبون.
   حدٌّ متقطّع بلون الزيت — لا رماد ولا سمّاق. */
.admin-body .trow-item.is-veiled {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--oil) 75%, var(--line));
  background: var(--surface);
}
/* صنفٌ مخفيّ **ونافد** معًا: تبقى الحافّة سمّاقًا صريحًا فوق التقطيع. */
.admin-body .trow-item.is-veiled.is-sold {
  border-inline-start-style: solid;
  border-inline-start-color: var(--sumac);
  background: var(--surface-2);
}
.admin-body .badge-hidden {
  background: var(--oil-soft);
  color: var(--oil);
  border-color: transparent;
}
.admin-body .badge-sold { background: color-mix(in srgb, var(--sumac) 12%, transparent); color: var(--sumac); }

/* ─────────────── ٧. عناصر التحكّم ─────────────── */

.admin-body .btn { font-family: var(--font-ui); border-radius: 10px; font-weight: 600; }
.admin-body .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.admin-body .btn-danger { background: var(--sumac); border-color: transparent; color: #FCFAF5; }
.admin-body .input,
.admin-body .tree-search input {
  font-family: var(--font-ui);
  border-radius: 10px;
  background: var(--field);
  border-color: var(--line);
  color: var(--text);
}
.admin-body .input:focus-visible,
.admin-body .tree-search input:focus-visible { border-color: var(--accent); }

/* أرضية الجودة: تركيزٌ مرئيّ على كل ما يُطال بلوحة المفاتيح. */
.admin-body :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .admin-body *,
  .admin-body *::before,
  .admin-body *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ─────────────── ٨. الهاتف ─────────────── */

/* عند ٨٦٠ بكسل يتحوّل الشريط الجانبي في admin.css إلى شريطٍ علويّ
   بـ`width:auto`. قاعدتُنا `‎.admin-body .side { width: 232px }` أقوى
   منها فتفوز حتى داخل استعلامها، فيبقى الشريط ٢٣٢ بكسل ويترك ثلثَي
   عرض الهاتف فارغًا. نعيد ما ألغيناه بالخطأ عند نفس النقطة. */
@media (max-width: 860px) {
  .admin-body .side {
    width: auto;
    border-bottom: 1px solid color-mix(in srgb, var(--side-ink) 16%, transparent);
  }
  .admin-body #view-menu { max-width: none; }
}

@media (max-width: 760px) {
  .admin-body .app-main { padding: 18px 14px 64px; }
  .admin-body .stat { padding: 15px 16px; }
  .admin-body .stat-value { font-size: 30px; }
  .admin-body .trow-item { gap: 11px; padding: 9px 11px; }
  .admin-body .trow-item .tthumb { width: 50px; height: 50px; }
  /* على الشاشة الضيّقة نصُّ الحالة زائدٌ عن المفتاح بجانبه. */
  .admin-body .trow-item .tstate { display: none; }

  /* الصفّ سطران على الهاتف: الصورة والاسم والسعر والمفتاح أوّلًا، ثم
     التحرير والترتيب تحتها. حشرُها في سطر واحد على ٣٧٥ بكسل هو ما
     كان يُصفّر عرض الاسم. `.grow` يمنع الالتفاف فيسقط هنا،
     ومربّع التحديد الجماعي أداةُ سطح مكتب أصلًا. */
  .admin-body .trow-item { flex-wrap: wrap; gap: 8px 10px; padding: 9px 10px; }
  .admin-body .trow-item.is-sold { padding-inline-start: 7px; }
  .admin-body .trow-item .grow,
  .admin-body .trow-item .tcheck { display: none; }
  .admin-body .trow-item .tinfo { flex: 1 1 120px; }
  .admin-body .trow-item .tmove { margin-inline-start: auto; }

  /* إزاحة الشجرة تأكل ربع عرض الهاتف بلا فائدة على مستوًى واحد. */
  .admin-body .tnest { padding-inline-start: 0; }
  .admin-body .tnest .tnest { padding-inline-start: 8px; }
}

/* ─────────────── ٩. منتقي الوسوم في درج الصنف ─────────────── */

.admin-body .tagpick { align-items: start; gap: 26px; }
.admin-body .tagpick-head {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}
.admin-body .tagpick-note {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-muted);
  margin-inline-start: 8px;
}
/* شبكة تتدفّق: الوسوم أطوالٌ مختلفة، وعمودٌ ثابت يترك فجوات واسعة
   بعد «سمك» ويقصّ «زبدة الفول السوداني». */
.admin-body .tagpick-grid { display: flex; flex-wrap: wrap; gap: 7px; }

.admin-body .tagchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid transparent;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.admin-body .tagchip-ico { font-size: 13px; line-height: 1; }
.admin-body .tagchip:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* المختار زيتونٌ مصمت لا إطارٌ خفيف: المنتقي فيه ٣٣ وسمًا، والفرق
   الخفيف بينها يجعل عدّ المختار منها عملًا بصريًّا شاقًّا. */
.admin-body .tagchip.is-on {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
  font-weight: 600;
}
.admin-body .tagchip.is-on:hover { border-color: transparent; }