/* ============================================================
   Sweet You POS - واجهة الموبايل (PWA)
   أحجام لمس مريحة + سلة منسدلة + جداول قابلة للتمرير
   ============================================================ */

/* منع تكبير الشاشة عند الكتابة في الحقول */
input, select, textarea {
  font-size: 16px;
}

/* أزرار وأسطح لمس مريحة (>= 44px) */
button, .btn, a.btn, .nav a, .lang-btn, .logout, .cart-item button,
.pos-item, .menu-btn, .order-card, .table-row-clickable {
  min-height: 44px;
  touch-action: manipulation;
}

.pos-item { min-height: 64px; }

@media (max-width: 768px) {

  /* الشريط العلوي */
  .topbar { flex-wrap: wrap; padding: 8px; gap: 8px; }
  .topbar-main-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .topbar-start { justify-content: space-between; width: 100%; }
  .topbar-start .brand { font-size: 16px; flex: 1; text-align: center; }
  .topbar-end { justify-content: space-between; width: 100%; gap: 6px; }
  .topbar .nav { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 4px; }
  .topbar-back-btn, .topbar-menu-btn { padding: 10px 12px; font-size: 14px; }
  .user-badge { display: none; }

  /* شاشة البيع: كل خطوة في صفحة مستقلة لوحدها */
  .pos-sidebar { position: static; width: 100%; }
  #saleCartPanel {
    position: static;
    width: 100%;
    max-height: none;
    overflow: visible;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    transform: none;
  }

  .mobile-cart-btn {
    display: flex !important;
    position: fixed;
    bottom: 14px;
    inset-inline-end: 14px;
    z-index: 210;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  }
  .mobile-cart-btn .badge { position: absolute; top: -4px; inset-inline-end: -4px; }

  /* الجداول: تمرير أفقي داخل حاوية */
  table { display: block; overflow-x: auto; white-space: nowrap; }
  .table-wrap { overflow-x: auto; }

  /* شبكات الأصناف */
  .menu-grid, .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }

  /* شاشة المطبخ: بطاقات عمودية مريحة */
  .kitchen-grid { grid-template-columns: 1fr !important; }

  /* النماذج الفائضة */
  .form-row { flex-direction: column; }
  .form-col { width: 100% !important; }

  /* الإشعارات */
  .flash-msg { font-size: 13px; padding: 10px; }

}

@media (max-width: 480px) {
  .menu-grid, .products-grid { grid-template-columns: 1fr 1fr !important; }
  .modal-content { width: 95% !important; }
  .btn { font-size: 14px; }
}