/* ═══════════════════════════════════════════════════════
   FATHI USTA — ADMIN MOBILE / RESPONSIVE LAYER
   يُحمَّل بعد style.css في كل صفحات لوحة التحكم.
   يعالج تخطيط الهاتف بالكامل: الشريط العلوي، القائمة الجانبية،
   صفوف الفئات/الأصناف، النماذج، وأحجام اللمس.
   ═══════════════════════════════════════════════════════ */

/* ── 0) رموز خاصة بهذه الطبقة ── */
:root {
  --tap: 44px;                    /* أصغر مساحة لمس مريحة */
}

/* ═══════════════════════════════════
   1) إصلاحات تسري على كل المقاسات
   ═══════════════════════════════════ */

/* عنصر flex بدون min-width:0 يتمدد بعرض محتواه ويكسر الصفحة أفقياً */
.admin-main { min-width: 0; }
.admin-content { min-width: 0; max-width: 1100px; }

/* أي صف مرن فيه نص طويل يجب أن يُقصّ لا أن يدفع الصفحة */
.cat-names, .item-info-sm, .sort-cat-names,
.quick-name, .ingredient-info, .prod-item-info { min-width: 0; }

.cat-name-main, .cat-name-subs,
.item-name-sm, .sort-cat-name-ar,
.ingredient-title, .ingredient-sub { overflow-wrap: anywhere; }

/* الجداول تُمرَّر أفقياً بسلاسة على اللمس */
.admin-table-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* زر إغلاق القائمة الجانبية — للهاتف فقط */
.sidebar-close { display: none; }


/* ═══════════════════════════════════
   2) الهاتف واللوحي الصغير  ≤ 768px
   ═══════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 2.1 الهيكل العام ── */
  html, body { overflow-x: hidden; }

  /* الشريط الجانبي ثابت (fixed) أصلاً، فلا حاجة لـ flex هنا.
     التحويل إلى block يمنع تمدد .admin-main خارج الشاشة. */
  .admin-body { display: block; }

  .admin-main {
    margin: 0 !important;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .admin-content {
    padding: 14px 12px calc(40px + env(safe-area-inset-bottom));
    max-width: 100%;
  }

  /* ── 2.2 الشريط العلوي: سطر للعنوان وسطر للأزرار ── */
  .admin-topbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top));
  }

  .admin-topbar > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
    gap: 10px !important;
  }

  .topbar-title {
    display: block;
    font-size: 1rem;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* حاوية الأزرار (ثاني div) تنزل لسطر كامل وتُمرَّر أفقياً
     بدل أن تتكدس في 3 أسطر أو تخرج عن الشاشة */
  .admin-topbar > div + div {
    flex: 1 0 100%;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .admin-topbar > div + div::-webkit-scrollbar { display: none; }
  .admin-topbar > div + div > .btn,
  .admin-topbar > div + div > a,
  .admin-topbar > div + div > button { flex: 0 0 auto; }

  /* نص توضيحي طويل داخل شريط الأزرار (quick.php) لا لزوم له على الهاتف */
  .admin-topbar > div + div > span { display: none; }

  /* صفحة الإعدادات: زر خروج وحيد يبقى بجانب العنوان */
  .admin-topbar > a:last-child { flex: 0 0 auto; }

  /* ── 2.3 القائمة الجانبية المنسدلة ── */
  .admin-sidebar {
    width: min(84vw, 300px);
    height: 100vh;
    height: 100dvh;
    overscroll-behavior: contain;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .admin-sidebar.open { box-shadow: 0 0 60px rgba(0,0,0,0.65); }

  .sidebar-brand { padding: 18px 20px; position: relative; }
  .sidebar-logo  { width: 48px; height: 48px; }

  .sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(201,169,110,0.10);
    border: var(--border-gold);
    color: var(--gold);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
  }

  /* أهداف لمس أكبر في التنقل */
  .nav-item { padding: 14px 16px; font-size: 0.95rem; margin-bottom: 2px; }
  .sidebar-nav { padding: 12px 10px; }
  .sidebar-footer { padding: 14px; }

  /* منع تمرير الخلفية أثناء فتح القائمة */
  body.sidebar-open { overflow: hidden; }

  /* ── 2.4 أهداف اللمس والنماذج ── */
  .btn { min-height: var(--tap); padding: 10px 18px; }
  .btn-sm { min-height: 38px; padding: 8px 14px; font-size: 0.82rem; }

  /* 16px تمنع تكبير Safari/iOS التلقائي عند التركيز — سبب رئيسي لـ"خربطة" التخطيط */
  .form-control,
  .cat-search-input,
  .inline-edit-input,
  .quick-price-input,
  .prod-search-input,
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="email"],
  input[type="time"],
  input[type="url"],
  select,
  textarea { font-size: 16px !important; }

  .form-control { padding: 12px 14px; }

  .form-section { padding: 16px 14px; border-radius: 16px; margin-bottom: 16px; }
  .form-section-title { font-size: 0.95rem; flex-wrap: wrap; margin-bottom: 14px; }
  .form-row { gap: 0; }             /* أعمدة واحدة أصلاً — الفراغ يأتي من form-group */
  .alert { padding: 11px 14px; font-size: 0.86rem; }

  /* ملفات الرفع تخرج عن الحاوية بسهولة */
  input[type="file"].form-control { padding: 10px; max-width: 100%; }

  /* ── 2.5 بطاقات الإحصاء ── */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }
  .stat-card  { padding: 16px 10px; border-radius: 16px; }
  .stat-icon  { font-size: 1.6rem; margin-bottom: 4px; }
  .stat-value { font-size: 1.8rem; }
  .stat-label { font-size: 0.74rem; }

  .cat-stats-grid,
  .info-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cat-stat-card, .info-card { padding: 10px 8px; }
  .cat-stat-card .val { font-size: 1.3rem; }
  .info-card .val     { font-size: 1.35rem; }
  .cat-stat-card .lbl, .info-card .lbl { font-size: 0.7rem; }

  /* ── 2.6 صفوف الفئات (categories.php) ──
     تسعة عناصر في سطر واحد تتزاحم على الهاتف.
     نعيد ترتيبها: سطر للاسم، وسطر للأزرار. */
  .drag-item-header {
    flex-wrap: wrap;
    gap: 8px !important;
    padding: 12px !important;
    row-gap: 10px;
  }
  .cat-order-num   { order: 1; }
  .drag-handle     { order: 2; font-size: 1.35rem; padding: 6px 4px; }
  .cat-icon-big    { order: 3; font-size: 1.5rem; }
  .cat-names       { order: 4; flex: 1 1 120px; }
  .cat-name-main   { font-size: 0.95rem; }
  .cat-name-subs   { font-size: 0.72rem; }

  /* كسر سطر إجباري بين الاسم ومجموعة الأزرار */
  .drag-item-header::after {
    content: '';
    order: 5;
    flex: 0 0 100%;
    height: 0;
  }

  .cat-quick-arrows { order: 6; flex-direction: row !important; gap: 6px !important; }
  .drag-item-header > form,
  .drag-item-header > a.btn,
  .drag-item-header > .expand-btn { order: 7; }
  .drag-item-header > form:first-of-type { margin-inline-start: auto; }

  .cat-arrow-btn { width: 40px; height: 34px; font-size: 0.8rem; }
  .expand-btn    { width: 40px; height: 34px; }
  .drag-item-header > a.btn,
  .drag-item-header > form .btn-sm { min-height: 34px; padding: 6px 12px; }
  /* شارة الحالة زر قابل للنقر — تحتاج مساحة لمس كافية */
  .drag-item-header .badge {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 0.74rem;
    justify-content: center;
  }
  /* زر تعديل الاسم السريع بجانب اسم الفئة */
  .inline-rename-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    padding: 0;
  }
  /* زر مسح البحث */
  .cat-search-clear {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 6px;
    padding: 0;
  }

  /* أصناف الفئة المنسدلة */
  .cat-items-panel { padding: 10px !important; }
  .cat-item-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px !important;
    row-gap: 8px;
  }
  .item-thumb-sm { width: 44px !important; height: 44px !important; }
  .item-info-sm  { flex: 1 1 120px !important; }
  .item-actions-sm {
    flex: 1 0 100% !important;
    justify-content: flex-end;
    gap: 6px !important;
  }
  .item-actions-sm .btn-xs,
  .item-actions-sm button,
  .item-actions-sm a { min-height: 34px; padding: 6px 12px !important; font-size: 0.8rem !important; }

  /* حقل السعر السريع داخل الصف (items.php) */
  .item-price-sm input[type="number"] { width: 96px !important; padding: 6px 8px !important; }

  /* بحث الفئات */
  .cat-search-input { padding: 12px 42px !important; }
  .drag-hint { font-size: 0.76rem; padding: 10px 12px; align-items: flex-start; }

  /* التعديل السريع للاسم */
  .inline-edit-form { padding: 12px !important; }
  .inline-edit-row  { flex-wrap: wrap; }
  .inline-edit-label { flex: 0 0 100%; min-width: 0; }
  .inline-edit-input { flex: 1 1 100%; min-width: 0; }
  .inline-edit-actions { flex-wrap: wrap; }
  .inline-edit-save, .inline-edit-cancel { flex: 1 1 auto; min-height: 40px; }

  /* نقل الأصناف بين الفئات */
  .move-items-row { flex-direction: column; align-items: stretch; }
  .move-items-select { width: 100%; min-height: 42px; }
  .move-items-row .btn { width: 100%; justify-content: center; }

  /* منتقي الإيموجي — أهداف لمس أكبر */
  #cat_icon ~ div > button { min-width: 44px; min-height: 44px; }

  /* ── 2.7 صفحة ترتيب الفئات (sort_categories.php) ── */
  .sort-header-bar { flex-wrap: wrap; gap: 10px; padding: 14px; }
  .sort-header-icon { font-size: 1.8rem; }
  .sort-header-text { flex: 1 1 140px; min-width: 0; }
  .sort-header-text h2 { font-size: 1rem; }
  .sort-header-text p  { font-size: 0.76rem; }
  .save-status {
    margin-right: 0;
    flex: 1 0 100%;
    justify-content: center;
  }

  .sort-item-inner { flex-wrap: wrap; gap: 10px; padding: 12px; row-gap: 10px; }
  .sort-number   { width: 30px; height: 30px; font-size: 0.82rem; }
  .sort-handle   { width: 34px; height: 34px; font-size: 1.35rem; }
  .sort-cat-icon { width: 38px; height: 38px; font-size: 1.5rem; }
  .sort-cat-names { flex: 1 1 100px; }
  .sort-cat-name-ar { font-size: 0.98rem; }
  .sort-cat-name-sub { font-size: 0.72rem; }

  /* الأسهم تأخذ سطراً كاملاً بأزرار كبيرة سهلة اللمس */
  .sort-arrows {
    flex: 1 0 100%;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .arrow-btn { width: 100%; height: 40px; font-size: 0.95rem; }

  .menu-preview-tip { flex-direction: column; align-items: stretch; text-align: center; }
  .menu-preview-tip .btn { width: 100%; justify-content: center; }

  /* ── 2.8 التحكم السريع (quick.php) ── */
  /* شريط الفئات يُمرَّر أفقياً بدل تكديس عشرات الأزرار */
  .quick-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 12px;
  }
  .quick-filter::-webkit-scrollbar { display: none; }
  .quick-filter-btn { flex: 0 0 auto; min-height: 38px; display: inline-flex; align-items: center; }

  .summary-bar { gap: 12px; padding: 12px 14px; justify-content: space-around; }

  .quick-row { flex-wrap: wrap; gap: 10px; padding: 12px 10px; row-gap: 10px; }
  .quick-name { flex: 1 0 100%; }
  .quick-name-main { white-space: normal; }
  .quick-price-wrap { flex: 0 0 auto; }
  .quick-price-input { width: 110px !important; min-height: 42px; }
  .avail-switch-wrap { margin-inline-start: auto; }

  /* ── 2.9 المكونات (ingredients.php) ── */
  .ingredient-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
  }
  .ingredient-title { font-size: 1rem; }
  .ingredient-sub   { font-size: 0.8rem; line-height: 1.6; }
  .ingredient-actions > .btn { flex: 1 1 0; justify-content: center; }

  /* ── 2.10 الإعدادات (settings.php) — أوقات العمل ── */
  .hours-inputs {
    flex: 1 0 100% !important;
    gap: 10px !important;
  }
  .hours-inputs > div { flex: 1 1 0; min-width: 0; }
  .hours-inputs input[type="time"] { width: 100%; min-height: 42px; }

  /* ── 2.11 المنتجات (products.php) ── */
  .prod-filter-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .prod-filter-tabs::-webkit-scrollbar { display: none; }
  .prod-filter-tab { flex: 0 0 auto; }
  .prod-item-handle { flex-shrink: 0; }
  .prod-item-actions > * { min-height: 34px; }

  /* ── 2.12 النوافذ المنبثقة (modal المكونات في items.php) ── */
  #ing-modal-overlay > div {
    width: calc(100% - 24px) !important;
    max-width: 460px !important;
    max-height: 85vh !important;
    max-height: 85dvh !important;
    padding: 18px !important;
    border-radius: 18px !important;
  }

  /* ── 2.13 إشعارات ثابتة أسفل الشاشة ── */
  #sort-toast, #prod-toast { bottom: calc(20px + env(safe-area-inset-bottom)); }

  /* ── 2.14 الجداول ── */
  .admin-table { font-size: 0.82rem; }
  .admin-table th { padding: 10px 12px; }
  .admin-table td { padding: 10px 12px; }

  /* ── 2.15 زر القائمة ── */
  .hamburger { width: var(--tap); height: var(--tap); flex-shrink: 0; }

  /* ── 2.16 صفحة الدخول ── */
  .login-page {
    min-height: 100dvh;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  }
}


/* ═══════════════════════════════════
   3) هواتف ضيقة  ≤ 400px
   ═══════════════════════════════════ */
@media (max-width: 400px) {
  .admin-content { padding: 12px 10px calc(36px + env(safe-area-inset-bottom)); }

  .topbar-title { font-size: 0.92rem; }

  .stats-grid { gap: 8px; }
  .stat-value { font-size: 1.55rem; }
  .stat-card  { padding: 14px 8px; }

  .cat-stats-grid, .info-grid { grid-template-columns: repeat(2, 1fr); }

  /* الفئات: نُخفي الترجمات الثانوية للحفاظ على وضوح الاسم */
  .cat-name-subs { font-size: 0.68rem; }
  .sort-cat-name-sub { font-size: 0.68rem; }

  .sort-number   { width: 28px; height: 28px; }
  .sort-cat-icon { width: 34px; height: 34px; font-size: 1.3rem; }

  .quick-price-input { width: 96px !important; }

  .form-section { padding: 14px 12px; }
}


/* ═══════════════════════════════════
   4) الهاتف بالوضع الأفقي (ارتفاع منخفض)
   ═══════════════════════════════════ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .admin-sidebar { height: 100vh; height: 100dvh; }
  .sidebar-brand { padding: 12px 16px; }
  .sidebar-logo  { width: 36px; height: 36px; margin-bottom: 6px; }
  .sidebar-title { font-size: 0.88rem; }
  .sidebar-subtitle { display: none; }
  .nav-item { padding: 9px 14px; font-size: 0.88rem; }
  .admin-topbar { position: static; }   /* لا نهدر ارتفاعاً محدوداً */
}


/* ═══════════════════════════════════
   5) تفضيلات المستخدم
   ═══════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .admin-sidebar, .sidebar-overlay, .btn, .stat-card,
  .drag-item, .sort-item, .arrow-btn { transition: none !important; }
  .orb, .p { animation: none !important; }
}