/* mobile.css — Matrix responsive overrides */

/* Hamburger button: hidden on desktop, shown by JS on mobile */
.mob-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  color: var(--text, #0f172a);
  border-radius: 6px;
  flex-shrink: 0;
  margin-left: auto;
  order: 5;
  transition: background .15s;
}
.mob-menu-btn:hover { background: var(--surface2, #f8fafc); }

/* Back button for products detail pane */
.mob-back-btn {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  background: var(--surface2, #f8fafc);
  border-bottom: 1px solid var(--border, #e2e8f0);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  color: var(--primary, #2563eb);
  width: 100%;
  text-align: left;
}

@media (max-width: 768px) {
  /* ──────────── NAV ──────────── */
  .mob-menu-btn { display: flex; }

  nav, .nav {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 54px !important;
    padding: 0 14px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 300 !important;
  }

  /* logo stays on first row */
  .nav-logo { order: 1; margin-right: 0 !important; }

  /* nav-right (user badge, logout) stays inline */
  .nav-right { order: 4; margin-left: 0 !important; padding-left: 0 !important; }

  /* hamburger */
  .mob-menu-btn { order: 5; }

  /* tabs collapse to a dropdown */
  .nav-tabs {
    order: 10;
    display: none !important;
    flex-direction: column !important;
    width: 100% !important;
    background: var(--surface, #fff) !important;
    border-top: 1px solid var(--border, #e2e8f0) !important;
    max-height: 65vh !important;
    overflow-y: auto !important;
    height: auto !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
  }
  .nav-tabs.mob-open { display: flex !important; }

  .nav-tab {
    height: 46px !important;
    padding: 0 18px !important;
    border-bottom: 1px solid var(--border, #e2e8f0) !important;
    border-right: none !important;
    width: 100% !important;
    justify-content: flex-start !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  .nav-tab.active {
    border-bottom: 1px solid var(--border, #e2e8f0) !important;
    border-left: 3px solid var(--primary, #2563eb) !important;
    background: var(--pl, #dbeafe) !important;
  }

  /* hide username on mobile to save space */
  .nav-user { display: none !important; }

  /* ──────────── BODY / MAIN ──────────── */
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh;
  }

  main {
    padding: 10px 12px !important;
    max-width: 100% !important;
  }

  /* ──────────── PRODUCTS: sidebar+detail stacked ──────────── */
  .main {
    flex-direction: column !important;
    overflow: visible !important;
    height: auto !important;
  }
  .sidebar {
    width: 100% !important;
    height: auto !important;
    max-height: 45vh !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border, #e2e8f0) !important;
    overflow-y: auto !important;
    flex-shrink: 0 !important;
  }
  .mob-detail-active .sidebar { display: none !important; }
  .detail {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 50vh;
  }
  .mob-back-btn { display: flex !important; }

  /* ──────────── purchases.html page tabs (no position:fixed here) ──────────── */
  .page {
    overflow: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .page.active {
    display: flex !important;
    flex-direction: column !important;
    overflow: auto !important;
    min-height: calc(100vh - 60px) !important;
    height: auto !important;
  }

  /* ──────────── index.html: iframe tab pages stay fixed, just ensure iframe fills ──────────── */
  #page-purchases iframe,
  #page-movements iframe {
    min-height: calc(100vh - 54px);
  }

  /* ──────────── TABLES ──────────── */
  .tbl-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }
  table {
    min-width: 480px;
  }
  .rec-table, .order-items-table, .mapping-table, .bl-table {
    font-size: 11px !important;
  }
  /* let known containers scroll */
  #recContent,
  #ordersContent,
  #custContent,
  #mvContent,
  #retContent,
  #invContent,
  .order-card-body,
  .added-items {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ──────────── TOOLBAR ──────────── */
  .toolbar {
    padding: 8px 12px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  /* ──────────── MODALS: bottom sheet ──────────── */
  .modal-bg, .modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 93vh !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
  }

  /* ──────────── GRIDS → single column ──────────── */
  .fields-grid,
  .form-grid,
  .modal-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .dims-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .rcv-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 8px !important;
  }
  .status-panel-header,
  .status-panel-row {
    grid-template-columns: minmax(100px,1fr) 80px 70px !important;
    overflow-x: auto;
  }

  /* ──────────── BUTTONS: bigger touch targets ──────────── */
  .btn, .btn-add, .btn-logout, .btn-action, .filter-btn {
    min-height: 36px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
  input[type="submit"], button[type="submit"] {
    min-height: 44px !important;
  }

  /* ──────────── INPUTS: font-size 16px to prevent iOS zoom ──────────── */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="search"],
  input[type="password"],
  input[type="tel"],
  select,
  textarea,
  .inp,
  .search-box {
    font-size: 16px !important;
    min-height: 36px !important;
  }

  /* ──────────── CARDS ──────────── */
  .cust-card { margin: 6px 10px !important; }

  /* ──────────── FIXED PANELS ──────────── */
  .bl-panel {
    width: 95vw !important;
    left: 2.5vw !important;
    right: 2.5vw !important;
  }

  /* ──────────── MISC ──────────── */
  .sidebar-head { padding: 10px 12px !important; }
  .sidebar-head-row { flex-wrap: wrap !important; gap: 4px !important; }
  .items-add-row { flex-wrap: wrap !important; }
  .desc-preview-img { display: none !important; }
}

/* Extra tight for small phones */
@media (max-width: 480px) {
  .hide-mobile { display: none !important; }

  .rcv-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .rcv-photo, .rcv-photo-ph {
    height: 90px !important;
  }
  .modal {
    max-height: 96vh !important;
    border-radius: 12px 12px 0 0 !important;
  }
  nav, .nav {
    padding: 0 10px !important;
  }
  .toolbar {
    padding: 6px 10px !important;
  }
}