/* ==========================================================================
   mgiot-responsive.css — consolidated responsive layer (loaded LAST)
   --------------------------------------------------------------------------
   The dashboard accumulated several overlapping responsive blocks across
   style.css / mgiot-v2.css / mgiot-pro.css / mgiot-parity.css with conflicting
   breakpoints (768px vs 1023px) and competing !important rules. This file does
   NOT remove them (that would risk regressions); instead it establishes one
   coherent, final set of rules for phones and tablets so behaviour is
   consistent at 360 / 390 / 430 / 768 / 1024 / 1366 / 1920.

   Additive only — no markup or JS changes. Safe to delete to revert.
   ========================================================================== */

/* ---- Small icon buttons (Active Customers row actions) ---- */
.mg-btn--sm {
  padding: 6px 10px !important;
  min-height: 34px !important;
  line-height: 1;
  font-size: 14px !important;
}

/* ---- Global: never allow accidental horizontal scroll on small screens ---- */
@media (max-width: 1024px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  * { box-sizing: border-box; }
}

/* =====================  TABLET + PHONE: sidebar is a drawer  ===============
   Unifies the breakpoint at <=1024px so iPad portrait/landscape and all phones
   behave identically (the inline critical layout only switched at 768px). */
@media (max-width: 1024px) {
  .app-page.active > .sidebar,
  .sidebar {
    position: fixed !important;
    top: 0; bottom: 0;
    height: 100vh !important;
    width: min(86vw, 320px) !important;
    z-index: 130 !important;
    overflow-y: auto;
    transition: transform .25s ease !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
  }
  /* Direction-aware off-canvas position */
  html[dir="rtl"] .app-page.active > .sidebar,
  html[dir="rtl"] .sidebar { right: 0; left: auto; transform: translateX(105%) !important; }
  html[dir="ltr"] .app-page.active > .sidebar,
  html[dir="ltr"] .sidebar { left: 0; right: auto; transform: translateX(-105%) !important; }

  body.sidebar-open .app-page.active > .sidebar,
  body.sidebar-open .sidebar { transform: translateX(0) !important; }

  /* Main fills the width — no reserved sidebar gutter */
  .app-page.active > .main,
  .main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding: 14px !important;
  }

  /* Hamburger visible; backdrop covers content when drawer open */
  .sidebar-toggle { display: inline-grid !important; place-items: center; }
  .sidebar-backdrop {
    position: fixed !important; inset: 0 !important;
    background: rgba(15, 23, 42, .45) !important;
    z-index: 120 !important; backdrop-filter: blur(2px);
  }
  body.sidebar-open .sidebar-backdrop { display: block !important; }
}

/* =====================  DESKTOP (>=1025px): static sidebar  =============== */
@media (min-width: 1025px) {
  .sidebar-toggle { display: none !important; }
  .sidebar-backdrop { display: none !important; }
}

/* =====================  Stat cards: graceful reflow  ====================== */
@media (max-width: 1024px) {
  .mg-stat-grid, .stats-grid, .summary-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 12px !important;
  }
}
@media (max-width: 430px) {
  .mg-stat-grid, .stats-grid, .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* =====================  Tables: scroll horizontally, stay readable  ======= */
@media (max-width: 1024px) {
  .mg-table-wrap, .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }
  .mg-table, .table-wrap table {
    min-width: 640px;            /* keep columns legible; wrapper scrolls */
  }
  .mg-table th, .mg-table td, th, td {
    padding: 12px 10px !important;
    font-size: 12.5px !important;
    white-space: nowrap;
  }
}

/* =====================  Toolbars / filters / forms: single column  ======= */
@media (max-width: 768px) {
  .mg-toolbar, .toolbar, .filter-bar,
  .form-row, .form-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .mg-card-head, .card-head, .section-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .main-header { gap: 10px !important; }
  .main-header h1, #viewTitle { font-size: 22px !important; }
  .wh-switcher { width: 100%; overflow-x: auto; padding-bottom: 4px; }
}

/* =====================  Tap targets: comfortable on touch  =============== */
@media (max-width: 1024px) {
  button, .btn, .mg-btn, .nav-item, .nav-section-hdr,
  input[type="submit"], input[type="button"] {
    min-height: 42px;
  }
  .nav-item, .nav-section-hdr { padding-top: 11px !important; padding-bottom: 11px !important; }
}

/* =====================  Modals: fit small screens  ======================= */
@media (max-width: 1024px) {
  .modal-bg.show, .mg-modal-overlay {
    align-items: flex-start !important;
    padding: 12px !important;
  }
  .modal-card, .mg-modal {
    width: 100% !important;
    max-width: 720px !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
  }
}