/* ==========================================================================
   Portal admin — mobile layer
   --------------------------------------------------------------------------
   Enqueued last so it overrides style.css / original-style.css without
   editing them. Those two carry ~164 fixed pixel widths between them; this
   file relaxes the ones that break a phone rather than rewriting either.

   Uses `max-width` rather than the `max-device-width` queries in
   mobile-style.css. `device-width` refers to the physical screen and is
   deprecated — it ignores orientation and browser chrome, so a landscape
   phone or a split-screen tablet misses the rules entirely.

   Breakpoints: 480px phones, 820px small tablets / landscape phones.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1a. jsGrid, generic — scroll instead of overlapping
   Six grids across the admin (users, products, product options, paywall,
   pricing, categories). jsGrid uses table-layout: fixed with per-field pixel
   widths, so on a narrow screen the content does not shrink — it overflows its
   cell and paints on top of the next column. Text from two columns ends up
   drawn over each other.
   Fix: let columns size to content, keep the table wider than the viewport,
   and scroll it inside its own container. Cells clip rather than bleed.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {

   #jsAdminGrid-wrapper,
   .js-admin-grid-cls {
      max-width: 100%;
      padding-left: 8px;
      padding-right: 8px;
      overflow-x: hidden;
   }

   .jsgrid {
      max-width: 100% !important;
   }

   /* Header and body scroll as one unit. */
   .jsgrid-grid-header,
   .jsgrid-grid-body {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
      max-width: 100%;
   }

   .jsgrid-table {
      table-layout: auto !important;
      min-width: 640px;
      width: auto !important;
   }

   .jsgrid-table th,
   .jsgrid-table td {
      white-space: nowrap !important;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 240px;
      padding: 10px 8px !important;
      font-size: 14px;
   }

   /* The header is 0.8em with hidden borders, which is illegible on a phone
      and makes the grid look headerless. */
   .jsgrid-header-cell {
      font-size: 13px !important;
      font-weight: 600;
      background: #f1f3f5;
   }

   /* jsGrid's own height calculation assumes a desktop viewport. */
   .jsgrid-grid-body {
      height: auto !important;
      max-height: 60vh;
   }

   .jsgrid-row > td,
   .jsgrid-alt-row > td {
      min-height: 44px;
   }
}

/* --------------------------------------------------------------------------
   1b. Users management grid — card layout
   A four-column table is never going to be readable at 390px, so this grid
   stops being a table below 600px and becomes one card per user.

   Safe to target precisely: admin_users_management_grid() uses a custom
   rowRenderer that tags every cell with td1-cls .. td4-cls, in a fixed order
   (id, site_name, url, email). The <tr> is preserved, so rowClick,
   set_active_row() and showDetailsDialog() keep working untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {

   #jsAdminUsersMgmntGrid .jsgrid-table {
      min-width: 0 !important;
      width: 100% !important;
      display: block;
   }

   /* Column headings mean nothing once each cell carries its own label. */
   #jsAdminUsersMgmntGrid .jsgrid-grid-header,
   #jsAdminUsersMgmntGrid .jsgrid-header-row {
      display: none !important;
   }

   /* jsGrid writes pixel widths inline on the grid and its body to keep the
      heading and body tables aligned. Inline styles beat a plain rule, so these
      need !important or the cards inherit a width wider than the phone and
      overflow to the right — which is also what squeezed the cells. */
   #jsAdminUsersMgmntGrid,
   #jsAdminUsersMgmntGrid .jsgrid-grid-body,
   #jsAdminUsersMgmntGrid .jsgrid-grid-header {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box;
   }

   #jsAdminUsersMgmntGrid .jsgrid-grid-body {
      overflow-x: hidden !important;
      max-height: none;
   }

   #jsAdminUsersMgmntGrid tbody,
   #jsAdminUsersMgmntGrid .jsgrid-table > tbody {
      display: block;
      width: 100%;
   }

   #jsAdminUsersMgmntGrid tr.jsgrid-row,
   #jsAdminUsersMgmntGrid tr.jsgrid-alt-row {
      display: block;
      width: 100%;
      margin: 0 0 10px;
      padding: 4px 0;
      border: 1px solid #dde1e5;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
   }

   /* Label above value, not beside it.

      This was display:flex with the label as a fixed 78px flex item and the
      value left as an anonymous one. An anonymous flex item cannot be selected,
      so nothing could stop it shrinking, and `overflow-wrap: anywhere` — needed
      so long shop URLs and emails break — makes its min-content width exactly
      one character. Whenever the cell was narrower than the flex basis plus the
      text, the value collapsed to a single character per line and the row grew
      into a tall vertical ribbon.

      Stacking removes the failure mode rather than tuning around it: a block
      value always takes the full width of the cell, and there is no flex
      shrinking to get wrong. */
   #jsAdminUsersMgmntGrid tr.jsgrid-row > td,
   #jsAdminUsersMgmntGrid tr.jsgrid-alt-row > td {
      display: block;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box;
      border: 0;
      padding: 7px 12px !important;
      white-space: normal !important;
      overflow-wrap: anywhere;   /* long shop URLs and emails break cleanly */
      text-overflow: clip;
      overflow: visible;
      text-align: left;
      font-size: 15px;
      line-height: 1.35;
   }

   /* The column percentages have to be undone at their own specificity.

      admin-users-grid.css pins the five column widths outside any media query
      with

         #jsAdminUsersMgmntGrid .jsgrid-table > tbody > tr > td:nth-child(1)
            { width: 7% !important; }

      so the heading and body tables line up on a desktop. That selector scores
      (1,2,3); the card rule above scores (1,1,2). Both are !important, so the
      more specific one wins and every card cell kept its desktop column width —
      7% for the ID, 22% for the site, and so on. On a phone that is what made
      each cell a narrow column, stepping wider down the card, with the text
      wrapping every few characters.

      Matching the selector shape puts this at equal specificity, and this
      stylesheet is enqueued after that one, so it wins on order. :nth-child(n)
      matches every cell while keeping the same specificity as :nth-child(1). */
   #jsAdminUsersMgmntGrid .jsgrid-table > tbody > tr > td:nth-child(n) {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      display: block;
   }

   /* Labels, since the header row is gone. Order is fixed by rowRenderer. */
   #jsAdminUsersMgmntGrid td.td1-cls::before { content: "ID"; }
   #jsAdminUsersMgmntGrid td.td2-cls::before { content: "Site"; }
   #jsAdminUsersMgmntGrid td.td3-cls::before { content: "Shop URL"; }
   #jsAdminUsersMgmntGrid td.td4-cls::before { content: "Email"; }
   #jsAdminUsersMgmntGrid td.td5-cls::before { content: "Shopify"; }

   #jsAdminUsersMgmntGrid td[class*="td"]::before {
      display: block;      /* its own line, so it cannot compete for width */
      margin-bottom: 1px;
      color: #6b7280;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .03em;
   }

   /* The ID doubles as the card heading. */
   #jsAdminUsersMgmntGrid td.td1-cls {
      font-weight: 700;
      border-bottom: 1px solid #eef0f2 !important;
      padding-bottom: 9px !important;
   }

   /* Keep the selected-row highlight legible in card form. */
   #jsAdminUsersMgmntGrid td.selected {
      background: #eaf4ff;
   }

   #jsAdminUsersMgmntGrid tr.jsgrid-row:has(td.selected),
   #jsAdminUsersMgmntGrid tr.jsgrid-alt-row:has(td.selected) {
      border-color: #2b7cd3;
      box-shadow: 0 0 0 2px rgba(43, 124, 211, .18);
   }

   /* Filter and paging bars wrap rather than overflow. */
   tr.jsgrid-filter-row input,
   tr.jsgrid-filter-row select {
      max-width: 100%;
      font-size: 16px; /* iOS zooms the page for anything under 16px */
   }

   .jsgrid-pager-container {
      text-align: center;
      padding: 12px 0;
   }

   .jsgrid-pager-page,
   .jsgrid-pager-nav-button {
      display: inline-block;
      padding: 10px 12px;
      min-width: 44px;
   }
}

/* --------------------------------------------------------------------------
   2. Detail dialogs and panels
   #detailsDialog and the product panels are laid out for a wide screen and
   sit off-canvas on a phone.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {

   #detailsDialog,
   .admin-details,
   .portal-product-panel-admin-action-button-wrapper-cls {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      left: 0 !important;
      right: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      box-sizing: border-box;
   }

   #detailsDialog table,
   #detailsDialog tbody,
   #detailsDialog tr,
   #detailsDialog td {
      display: block;
      width: 100%;
      box-sizing: border-box;
   }

   #detailsDialog td {
      padding: 10px 12px;
      border-bottom: 1px solid rgba(0, 0, 0, .08);
   }

   /* Bootstrap modals go full-bleed. */
   .modal-dialog {
      margin: 0;
      max-width: 100%;
      min-height: 100vh;
   }

   .modal-content {
      border-radius: 0;
      min-height: 100vh;
   }

   .modal-body {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
   }
}

/* --------------------------------------------------------------------------
   3. Action buttons and admin menu
   The action-button rows are horizontal on desktop and run off the edge on
   a phone. Stack them and give them a real tap target.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {

   .portal-admin-action-button-cls,
   .portal-admin-action-button-dropdown-cls,
   .product-detail-return-button,
   .admin-product-category-action-buttons-wrapper .btn {
      display: block;
      width: 100%;
      margin: 6px 0;
      min-height: 44px;
      padding: 11px 14px;
      white-space: normal; /* long labels wrap instead of overflowing */
      text-align: left;
   }

   .portal-product-panel-admin-action-button-wrapper-cls,
   .admin-product-category-action-buttons-wrapper,
   .product-detail-return-button-wrapper {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
   }

   .admin-menu-cls {
      width: 100% !important;
      max-width: 100%;
   }

   .admin-menu-cls .sub-link,
   .admin-menu-cls .sub-link-long,
   .admin-menu-cls .dropdown-item {
      padding: 12px 14px;
      min-height: 44px;
      line-height: 1.4;
      white-space: normal;
   }
}

/* --------------------------------------------------------------------------
   4. Forms
   The product detail forms use fixed-width inputs. Anything under 16px
   makes iOS Safari zoom the viewport on focus, which is disorienting on a
   form with many fields.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {

   .product-detail-simple-form-fields,
   .admin-size-cls,
   .form-table td,
   .form-table th {
      display: block;
      width: 100% !important;
      max-width: 100%;
      box-sizing: border-box;
   }

   .product-detail-simple-form-fields input,
   .product-detail-simple-form-fields select,
   .product-detail-simple-form-fields textarea,
   .admin-size-cls input,
   .form-table input[type="text"],
   .form-table input[type="password"],
   .form-table select {
      width: 100% !important;
      max-width: 100%;
      font-size: 16px;
      min-height: 44px;
      box-sizing: border-box;
   }

   .form-table th {
      padding-bottom: 4px;
      font-weight: 600;
   }
}

/* --------------------------------------------------------------------------
   5. Tabs
   Bootstrap nav-tabs wrap onto several rows and lose their meaning. Turn
   them into a single horizontally scrollable strip.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {

   .nav-tabs,
   #product-tabs,
   .admin-utils-tab {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border-bottom: 1px solid #dee2e6;
   }

   .nav-tabs::-webkit-scrollbar {
      display: none;
   }

   .nav-tabs .nav-item,
   .nav-tabs .nav-link {
      flex: 0 0 auto;
      white-space: nowrap;
      min-height: 44px;
      padding: 11px 14px;
   }
}

/* --------------------------------------------------------------------------
   6. Page-level guards
   A single overflowing child makes the whole document scroll sideways, which
   reads as "the site is broken" more than any individual layout problem.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {

   html,
   body {
      overflow-x: hidden;
      max-width: 100%;
   }

   .container,
   .container-fluid,
   .bootstrapiso .container {
      max-width: 100%;
      padding-left: 12px;
      padding-right: 12px;
   }

   img,
   canvas,
   table {
      max-width: 100%;
   }

   /* Anything still using a hard pixel width wider than a phone. */
   [style*="width: 400px"],
   [style*="width:400px"],
   [style*="width: 500px"],
   [style*="width:500px"],
   [style*="width: 600px"],
   [style*="width:600px"] {
      width: 100% !important;
      max-width: 100% !important;
   }
}