/* ============================================================================
   mobile.css — Global phone-friendly responsive layer
   ----------------------------------------------------------------------------
   Loaded LAST in every page's <head> so it can override the inline <style>
   blocks that each template ships. Intentionally scoped to small screens via
   @media queries so desktop rendering is left untouched.

   Strategy (no per-page HTML restructuring required):
     • Stop pages being wider than the viewport (fluid containers, scroll tables)
     • Stack horizontal filter / button / flex rows
     • Enlarge tap targets and form controls
     • Keep modals within the screen
   ============================================================================ */

/* ---- Universal safety net (all screen sizes) ---------------------------- */
img, video, canvas, svg { max-width: 100%; height: auto; }

/* ==========================================================================
   PHONE / SMALL TABLET  (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {

  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  /* --- Fluid containers: kill fixed desktop widths ----------------------- */
  .container,
  .filter-container,
  .cdn-filter-container,
  .table-container,
  .table-wrap,
  .products-table-wrap,
  .attachments-container,
  .attachment-input-container,
  .step-content,
  .page-header,
  .popup-content,
  .wrap,
  .card,
  .panel,
  .content,
  .main,
  .lp-pages {
    max-width: 100% !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Trim the big desktop side paddings that push content off-screen */
  .container,
  .step-content,
  .page-header,
  .card,
  .panel {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* --- Tables: make them horizontally scrollable instead of overflowing -- */
  .table-container,
  .table-wrap,
  .products-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Bare tables not wrapped in a scroll container: let the table itself scroll */
  table {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  /* A table sitting inside an explicit scroll wrapper can stay a normal table */
  .table-container > table,
  .table-wrap > table,
  .products-table-wrap > table {
    display: table;
    white-space: normal;
  }

  /* --- Frozen (sticky) table columns: degrade to normal cells ------------
     Big list pages freeze the first/last columns with position:sticky —
     either via .sticky-left / .sticky-right classes (sales_orders_list,
     delivery notes, payments, credit notes, …) or via nth-child / last-child
     rules without classes (po_list). On a narrow phone screen the frozen
     columns cover most of the scroll area, so let them scroll normally. */
  th.sticky-left,  td.sticky-left,
  th.sticky-right, td.sticky-right {
    position: static !important;
    box-shadow: none !important;
  }
  /* Their edge-shadow gradient overlays serve no purpose once unfrozen */
  .sticky-left::after,
  .sticky-right::before {
    display: none !important;
  }
  /* po_list-style frozen first/last column (no class, plain nth-child CSS).
     Scoped to paginated list tables; harmless no-op on cells that were
     already static. */
  table[data-paginate] th:first-child,
  table[data-paginate] td:first-child,
  table[data-paginate] th:last-child,
  table[data-paginate] td:last-child {
    position: static !important;
  }

  /* --- Stack horizontal flex rows (filters, toolbars, button groups) ----- */
  .filter-container,
  .cdn-filter-container,
  .status-select-container,
  .toolbar,
  .actions,
  .action-bar,
  .button-group,
  .btn-group,
  .form-row,
  .header-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: wrap;
  }
  .filter-container > *,
  .cdn-filter-container > *,
  .form-row > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* --- Form controls: full-width, comfortable tap height ----------------- */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select,
  textarea {
    max-width: 100% !important;
    font-size: 16px; /* prevents iOS auto-zoom on focus */
  }
  input, select, textarea, button, .btn, a.btn {
    min-height: 40px;
  }

  /* Buttons easier to tap; let standalone buttons fill the row */
  button, .btn, a.btn, input[type=submit], input[type=button] {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  /* --- Headers: allow wrapping, shrink oversized titles ------------------ */
  .admin-header,
  .td-header,
  .page-header {
    padding-left: 14px !important;
    padding-right: 14px !important;
    flex-wrap: wrap;
  }
  .admin-header { padding-left: 16px !important; padding-right: 16px !important; }
  h1 { font-size: 1.25em !important; }
  h2 { font-size: 1.1em !important; }
  .td-header h1 { white-space: normal !important; }

  /* Navigation / tab strips wrap instead of overflowing */
  .admin-tabs,
  .tabs,
  .nav,
  .navbar,
  nav ul {
    flex-wrap: wrap !important;
    overflow-x: auto;
  }

  /* --- Generic page "header" bar (title + right-aligned action cluster) ---
     Many templates (po_list, po_detail, list pages …) use a bare `.header`
     that is `display:flex; justify-content:space-between` on desktop. On a
     phone the title and the action cluster collide and the wrapped buttons
     spill over the card edge. Stack the bar vertically and centre the
     controls so each group flows onto its own tidy, tappable row. */
  .header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
    text-align: center;
  }
  .header > h1 {
    margin: 0 0 4px !important;
  }
  /* The action cluster (and inline flex groups inside it) centre and wrap
     instead of right-aligning off-screen. !important beats inline styles. */
  .header > div,
  .header > div > div {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  /* --- Modals / popups stay on screen ------------------------------------ */
  .modal-content,
  .popup-content {
    width: 95% !important;
    max-width: 95% !important;
    max-height: 90vh;
    overflow-y: auto;
    margin: 5vh auto !important;
  }

  /* Grids collapse to a single column */
  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .cards,
  .card-grid,
  .summary-cards,
  .stats-grid {
    display: block !important;
  }
  .grid > *,
  .cards > *,
  .card-grid > * { width: auto !important; margin-bottom: 12px; }

  /* Long pre/code blocks shouldn't blow out the layout */
  pre, code { white-space: pre-wrap; word-break: break-word; }
}

/* ==========================================================================
   TABLET / SMALL LAPTOP  (769px – 1100px)
   ----------------------------------------------------------------------------
   Light, spacing-only adjustments — nothing structural. Desktop CSS built
   for >1200px viewports gets a bit too much side padding here, and wide
   tables should scroll inside their wrappers instead of squeezing columns.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1100px) {

  /* Moderate side padding on the main page containers.
     (No !important: pages that deliberately set tighter padding keep it.) */
  .container,
  .step-content,
  .page-header,
  .admin-container,
  .wrap {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Fixed-width desktop containers shouldn't exceed the viewport */
  .container,
  .wrap,
  .card,
  .panel,
  .content {
    max-width: 100%;
  }

  /* Tables stay scrollable inside their wrappers instead of overflowing */
  .table-container,
  .table-wrap,
  .products-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tile grids defined as 3–4 fixed columns fit better as 2 columns here.
     grid-template-columns only affects elements that are already
     display:grid — a safe no-op on flex/block containers. */
  .grid-3,
  .grid-4,
  .card-grid,
  .summary-cards,
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ==========================================================================
   VERY SMALL PHONES  (<= 430px)
   ========================================================================== */
@media (max-width: 430px) {
  body { font-size: 15px; }
  .container,
  .step-content,
  .card,
  .panel { padding-left: 10px !important; padding-right: 10px !important; }
  h1 { font-size: 1.15em !important; }
  /* Tighten table cells so more data is visible per scroll */
  table th, table td { padding: 6px 8px !important; }
}
