/* =====================================================================
   THOPPIA INVENTORY — RESPONSIVE ENHANCEMENT LAYER
   =====================================================================
   Load this AFTER the existing inline <style> block in index.php.
   It does not replace any of your CSS — it only adds breakpoints and
   overrides so the app behaves well on phones, tablets, laptops and
   large desktops.

   Breakpoints used:
     - Small phones   : max-width 400px
     - Phones         : max-width 600px
     - Tablets        : 601px – 1024px
     - Small laptops  : 1025px – 1366px
     - Desktops       : 1367px and up
   ===================================================================== */

/* ---------- 0. Global fluid basics (all sizes) ---------- */
html { -webkit-text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: transparent; }
img, svg, canvas, video { max-width: 100%; height: auto; }

/* Make every table horizontally scrollable with momentum on touch */
.table-wrap { -webkit-overflow-scrolling: touch; }

/* Prevent iOS auto-zoom on inputs (needs >=16px font on focus) */
input, select, textarea { font-size: 16px; }
@media (min-width: 601px) {
  input, select, textarea { font-size: 13px; }
}

/* ---------- 1. DESKTOP (default / large screens 1367px+) ---------- */
@media (min-width: 1367px) {
  :root { --sidebar-w: 264px; }
  #content { padding: 24px 32px; }
  .stats-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* ---------- 2. LAPTOP / SMALL DESKTOP (1025px – 1366px) ---------- */
@media (min-width: 1025px) and (max-width: 1366px) {
  :root { --sidebar-w: 232px; }
  #content { padding: 18px 22px; }
  .stats-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .grid-main { grid-template-columns: 1fr 300px; }
}

/* ---------- 3. TABLET (601px – 1024px) ---------- */
@media (max-width: 1024px) {
  :root { --sidebar-w: 0px; }
  #sidebar {
    transform: translateX(-280px);
    width: 272px;
  }
  #sidebar.mobile-open { transform: translateX(0); width: 272px; }
  #main { margin-left: 0; }
  #header { padding: 0 14px; gap: 10px; }
  #content { padding: 16px; }

  .page-header { gap: 10px; }
  .page-header h2 { font-size: 17px; }
  .btn-group { width: 100%; margin-left: 0; }

  .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .grid-2, .grid-main { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .form-row-3 { grid-template-columns: 1fr 1fr; }

  .modal-lg, .modal-xl { max-width: 92vw; }
  .modal { max-width: 92vw; max-height: 88vh; overflow-y: auto; }

  /* Product card grids that use auto-fill also tighten up nicely */
  [style*="grid-template-columns: repeat(auto-fill"] { gap: 10px !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Landscape tablets / iPad: keep header search visible & roomy */
  .header-search { max-width: 360px; }
}

/* ---------- 4. PHONES (max-width 600px) ---------- */
@media (max-width: 600px) {
  html { font-size: 13px; }

  #header { padding: 0 10px; gap: 8px; }
  .header-search { order: 3; width: 100%; margin-top: 8px; }
  #header { flex-wrap: wrap; height: auto; min-height: var(--header-h); padding-top: 8px; padding-bottom: 8px; }
  .header-right { margin-left: auto; }

  #content { padding: 12px; }

  .page-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .page-header .sub { margin-top: 0; }
  .btn-group { width: 100%; }
  .btn-group .btn { flex: 1 1 auto; justify-content: center; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-card { padding: 12px !important; }

  .grid-2, .grid-3, .grid-4, .grid-main { grid-template-columns: 1fr; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }

  .card-body { padding: 14px; }
  .card-header { padding: 14px 14px 10px; }

  /* Tables: allow horizontal scroll, shrink padding & font */
  .data-table { font-size: 11.5px; }
  .data-table thead th, .data-table tbody td { padding: 8px 9px; }

  .modal-overlay { padding: 10px; }
  .modal, .modal-lg, .modal-xl { max-width: 100%; width: 100%; max-height: 92vh; }
  .modal-header, .modal-body, .modal-footer { padding: 14px 16px; }
  .modal-footer { flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 auto; }

  /* Sidebar becomes a full-height drawer that covers most of the screen */
  #sidebar { width: 82vw; max-width: 300px; }
  #sidebar.mobile-open { width: 82vw; max-width: 300px; }
}

/* ---------- 5. SMALL PHONES (max-width 400px) ---------- */
@media (max-width: 400px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .page-header h2 { font-size: 15px; }
  .btn { padding: 8px 12px; font-size: 12px; }
  .data-table { font-size: 11px; }
  .sidebar-logo h1 { font-size: 13px; }
}

/* ---------- 6. Touch-friendly tap targets (tablet & phone) ---------- */
@media (max-width: 1024px) {
  .btn, .header-btn, .header-toggle, .nav-item, .modal-close {
    min-height: 40px;
  }
  .header-btn, .header-toggle { min-width: 40px; }
  .nav-item { padding-top: 10px; padding-bottom: 10px; }
}

/* ---------- 7. Landscape phones (short viewport height) ---------- */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
  #sidebar { overflow-y: auto; }
  .modal, .modal-lg, .modal-xl { max-height: 94vh; }
}

/* ---------- 8. Print (bonus: keep reports usable if printed) ---------- */
@media print {
  #sidebar, #header, .btn-group, .header-toggle { display: none !important; }
  #main { margin-left: 0 !important; }
  #content { padding: 0 !important; }
}