/* ============================================================
   Okara Sales — Mobile optimization (global)
   Áp dụng cho width < 768px
   ============================================================ */

/* ── Touch targets minimum ─────────────────────────────────── */
@media (max-width: 1024px) {
  button, a.btn, .btn, .btn-filled, .btn-outlined, .btn-icon,
  .nav-item, .nav-sub, input[type="checkbox"], input[type="radio"] {
    min-height: 36px;
  }
  .btn-icon { width: 36px; height: 36px; }
}

/* ── Mobile (< 768px) ──────────────────────────────────────── */
@media (max-width: 768px) {

  /* Page padding shrink */
  main { padding: 12px !important; }
  body { padding: 0 !important; }

  /* Top header */
  header.bg-white > div { padding-left: 12px !important; padding-right: 12px !important; height: 56px !important; }
  header h1 { font-size: 15px !important; }
  header p { font-size: 11px !important; }

  /* Cards: shrink padding */
  .card { padding: 12px !important; }
  .card.p-6 { padding: 12px !important; }
  .card.p-5 { padding: 12px !important; }
  .card.p-4 { padding: 10px !important; }

  /* Modals: full-screen bottom sheet style */
  .modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal-box {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 95vh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
  }

  /* Form grid: cols-2/3 → single column */
  .grid.grid-cols-2,
  .grid.grid-cols-3,
  .grid.md\:grid-cols-2,
  .grid.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* Inputs: 16px to prevent iOS auto-zoom */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="date"], input[type="password"],
  select, textarea {
    font-size: 16px !important;
  }
  .form-input { font-size: 16px !important; padding: 10px 12px !important; }

  /* Tables: horizontal scroll smooth */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  table { font-size: 13px; }
  th, td { padding: 8px 10px !important; }

  /* Stepper: scroll ngang nếu tràn */
  .step-item, .step-circle { flex-shrink: 0; }
  .step-line { min-width: 14px !important; }

  /* Filter bar: cuộn ngang nếu nhiều */
  .filter-row { overflow-x: auto; flex-wrap: nowrap !important; }

  /* Buttons: text gọn lại */
  .btn-filled, .btn-outlined, .btn-primary, .btn-secondary {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  /* Sidebar: chữ trong sidebar to hơn dễ chạm */
  .sidebar .nav-item { padding: 12px 16px !important; }
  .sidebar .nav-sub  { padding: 10px 16px 10px 36px !important; }

  /* Chip nhỏ gọn */
  .chip { padding: 2px 8px !important; font-size: 11px !important; }

  /* Pagination buttons */
  .btn-icon { min-width: 36px; }

  /* Hide non-essential columns on phones (mỗi page có thể override) */
  .hide-mobile { display: none !important; }

  /* Toast: vị trí dưới */
  #toast {
    bottom: 12px !important;
    right: 12px !important;
    left: 12px !important;
  }
  #toast > div { font-size: 13px !important; }

  /* Modal action buttons: stack full-width */
  .modal-box .flex.gap-3:has(button[type="submit"]),
  .modal-box .flex.justify-end { flex-direction: column-reverse; }
  .modal-box .flex.gap-3 > button,
  .modal-box .flex.justify-end > button { width: 100%; }
}

/* ── Tablet (768-1024) ─────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  main { padding: 16px !important; }
  .grid.grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Small phones (< 380px): extra tight ───────────────────── */
@media (max-width: 380px) {
  header h1 { font-size: 13px !important; }
  .btn-filled span:not(.material-icons-round),
  .btn-outlined span:not(.material-icons-round) {
    display: none;  /* Chỉ hiện icon trên button khi quá hẹp */
  }
  .modal-box { border-radius: 16px 16px 0 0 !important; }
}