/* ==========================================================================
   GetPassive Admin - narrow-viewport (phone / small tablet) layout
   Added 2026-08-30.

   Every rule in this file lives inside a max-width media query, so viewports
   wider than 1024px render byte-for-byte identically to before. Nothing here
   changes markup, data or behaviour - layout and styling only.

   Rollback: remove the <link ... mobile.css> line from index.html.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Touch navigation  (<1024px - the desktop sidebar is hidden below lg,
      so this is exactly the range where the hamburger + drawer are the nav)
      min-height / min-width clamp the used value regardless of which
      Tailwind height class is on the element, so no specificity fight.
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {

  /* Hamburger in the top bar: h-9 w-9 (36px) -> 44px tap target */
  button.lg\:hidden {
    min-height: 44px;
    min-width: 44px;
  }

  /* Sidebar / drawer rows: py-2.5 (~39px) -> 44px tap target */
  .nav-item {
    min-height: 44px;
  }

  /* Drawer close button */
  .drawer-panel button,
  [class*="drawer"] > div > div > button {
    min-height: 44px;
  }
}


/* --------------------------------------------------------------------------
   2. Structural fixes  (<768px - below Tailwind's md breakpoint.
      The .98 avoids a dead zone on fractional viewport widths, e.g. browser
      zoom levels that produce a 767.5px viewport.)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

  /* ---- 2a. Breakdown rows (country / tier / session-duration) -------------
     These are "label | progress bar | value [| note]" grids built on fixed
     tracks: 170px + 140px (+260px) or 88px + 130px + 120px. The fixed tracks
     alone are wider than a phone card, so the row forced the whole page to
     scroll sideways. Restack them: label and value share the first line, the
     bar (and any note) go full width underneath.                            */
  main :is(
    [class~="grid-cols-[170px_minmax(0,1fr)_140px]"],
    [class~="grid-cols-[170px_minmax(0,1fr)_140px_minmax(0,260px)]"],
    [class~="grid-cols-[88px_minmax(0,1fr)_130px_minmax(0,120px)]"]
  ) {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    gap: 5px 10px !important;
    padding-bottom: 4px;
  }
  main :is(
    [class~="grid-cols-[170px_minmax(0,1fr)_140px]"],
    [class~="grid-cols-[170px_minmax(0,1fr)_140px_minmax(0,260px)]"],
    [class~="grid-cols-[88px_minmax(0,1fr)_130px_minmax(0,120px)]"]
  ) > *:nth-child(1) { grid-column: 1; grid-row: 1; min-width: 0; }

  main :is(
    [class~="grid-cols-[170px_minmax(0,1fr)_140px]"],
    [class~="grid-cols-[170px_minmax(0,1fr)_140px_minmax(0,260px)]"],
    [class~="grid-cols-[88px_minmax(0,1fr)_130px_minmax(0,120px)]"]
  ) > *:nth-child(3) { grid-column: 2; grid-row: 1; }

  main :is(
    [class~="grid-cols-[170px_minmax(0,1fr)_140px]"],
    [class~="grid-cols-[170px_minmax(0,1fr)_140px_minmax(0,260px)]"],
    [class~="grid-cols-[88px_minmax(0,1fr)_130px_minmax(0,120px)]"]
  ) > *:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }

  main :is(
    [class~="grid-cols-[170px_minmax(0,1fr)_140px]"],
    [class~="grid-cols-[170px_minmax(0,1fr)_140px_minmax(0,260px)]"],
    [class~="grid-cols-[88px_minmax(0,1fr)_130px_minmax(0,120px)]"]
  ) > *:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }


  /* ---- 2b. Tables --------------------------------------------------------
     Most wide tables already sit in their own .overflow-x-auto scroller and
     work as-is (one of them has a sticky <thead> that display:block would
     break) - those are deliberately excluded by the :not() below. The three
     tables with no scroll wrapper (status page, registry, 2FA roles) get
     their own horizontal scroller instead.                                  */
  main :not([class*="overflow-x-auto"]) > table {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Grid items default to min-width:auto, i.e. they refuse to shrink below
     their content's min-content width. A wide table or a long identifier in
     one card therefore inflated the whole single-column track and pushed the
     page sideways. Letting the items shrink is what makes the scrollers above
     actually scroll instead of expanding the page. */
  main .grid > * { min-width: 0; }

  /* Existing scrollers: momentum scrolling + keep them inside the card */
  main [class*="overflow-x-auto"] {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }


  /* ---- 2c. Long identifiers ---------------------------------------------
     Device UUIDs, SDK keys and hashes are unbreakable strings that push the
     page wider than the screen. Let them wrap outside tables; inside tables
     leave them intact so the row scrolls instead of growing tall.           */
  main .font-mono { overflow-wrap: anywhere; }
  main table .font-mono { overflow-wrap: normal; }


  /* ---- 2d. Form fields ---------------------------------------------------
     Fixed-width filter inputs (w-[260px] / w-[280px] / w-[220px]) must never
     exceed the card. 16px font stops iOS Safari zooming in on focus.        */
  main .field,
  main input:not([type="checkbox"]):not([type="radio"]),
  main select,
  main textarea {
    max-width: 100% !important;
    font-size: 16px !important;
  }
  main input:not([type="checkbox"]):not([type="radio"]),
  main select { min-height: 40px; }

  /* Checkboxes stay small but get a comfortable hit area via their label */
  main label:has(> input[type="checkbox"]) { min-height: 44px; }


  /* ---- 2e. Action buttons: 44px tap target ------------------------------- */
  main .btn-primary,
  main .btn-secondary,
  main .btn-accent,
  main .btn-danger,
  main .btn-danger-solid { min-height: 44px; }
}


/* --------------------------------------------------------------------------
   3. Space reclamation  (<481px - iPhone 15 Pro 393px / Pro Max 430px)
      Desktop-sized padding costs ~90px of a 393px screen.
   -------------------------------------------------------------------------- */
@media (max-width: 480.98px) {

  /* Page gutter: 20px -> 12px */
  main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Card padding: 24px -> 16px; section rows: 24/20px -> 14/12px */
  main .p-6  { padding: 16px !important; }
  main .p-5  { padding: 12px !important; }
  main .px-6 { padding-left: 14px !important; padding-right: 14px !important; }
  main .px-5 { padding-left: 12px !important; padding-right: 12px !important; }

  /* Oversized corner radii look wrong on a narrow card */
  main .rounded-3xl { border-radius: 20px !important; }
  main .rounded-4xl { border-radius: 22px !important; }

  /* Modal gets the full width it is allowed */
  .fixed.inset-0 > .relative.rounded-3xl { border-radius: 20px; }
}

/* The mobile nav close button was left at 36x36: it is not a .drawer-panel
   (that class is only on the two right-hand detail drawers), so neither of the
   rules above reached it. The backdrop closes the drawer too, so this was a
   miss rather than a trap, but 36px is below the 44px minimum. */
@media (max-width: 1023.98px) {
  [class~="lg:hidden"][class~="inset-0"] button {
    min-height: 44px;
    min-width: 44px;
  }
}