/* ============================================================================
   Lab Carriers · LC-MOBILE
   ----------------------------------------------------------------------------
   Shared responsive overlay for client-facing pages
   (client-portal, client-deliveries, client-onboarding, track).
   Cosmetic only — no logic changes, no class renames. Every existing
   bp-/cd-/tk- hook is preserved; this stylesheet only tunes layout +
   sizing for narrow viewports.

   Breakpoints used:
     ≤ 920px  — tablet / large phone (collapse multi-column grids)
     ≤ 700px  — phone (single column, larger touch targets)
     ≤ 420px  — small phone (typography pull-back)

   Include order in each client page:
     <link rel="stylesheet" href="styles.css" />
     <link rel="stylesheet" href="lc-glass.css" />
     <link rel="stylesheet" href="lc-mobile.css" />   ← last, so it wins
   ============================================================================ */

/* ── Universal mobile primitives ─────────────────────────────────── */
@media (max-width: 920px) {
  /* Calm down absurdly wide max-widths so the content actually fits */
  body.lc-glass-page .bp-greet,
  body.lc-glass-page .bp-section,
  body.lc-glass-page main { max-width: 100% !important; }

  /* Most click targets become a comfortable 44px+ thumb target */
  body.lc-glass-page button,
  body.lc-glass-page .btn,
  body.lc-glass-page a.cta { min-height: 44px; }
}

@media (max-width: 700px) {
  /* ── client-portal.html ─────────────────────────────────────── */
  /* Greeting card: stack the avatar + text + CTA so nothing
     overflows on narrow screens */
  body.lc-glass-page .bp-greet {
    padding: 20px 18px 22px !important;
    border-radius: 22px !important;
    gap: 16px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.lc-glass-page .bp-greet .left {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  body.lc-glass-page .bp-greet .avatar {
    width: 54px !important; height: 54px !important;
    border-radius: 16px !important;
    font-size: 18px !important;
  }
  body.lc-glass-page .bp-greet h1,
  body.lc-glass-page .bp-greet .hello {
    font-size: 24px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
  }
  body.lc-glass-page .bp-greet .meta {
    font-size: 10.5px !important;
    letter-spacing: 0.12em !important;
  }

  /* Two-column main grids collapse to single column */
  body.lc-glass-page .bp-grid,
  body.lc-glass-page .bp-main,
  body.lc-glass-page .bp-two-col,
  body.lc-glass-page .bp-bill-summary {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Bill summary cards become a single column too */
  body.lc-glass-page .bp-bill-summary { grid-template-columns: 1fr !important; }
  body.lc-glass-page .bp-bill-card { padding: 18px 18px !important; }
  body.lc-glass-page .bp-bill-card.hero { padding: 22px 18px !important; }

  /* Hero live-map area shrinks but doesn't disappear */
  body.lc-glass-page .bp-hero { min-height: 280px !important; }
  body.lc-glass-page .bp-hero-no-route { padding: 40px 22px !important; }
  body.lc-glass-page .bp-hero-no-route h2 { font-size: 20px !important; }
  body.lc-glass-page .bp-hero-no-route p { font-size: 13px !important; max-width: 100% !important; }
  body.lc-glass-page .bp-hero-no-route .ico {
    width: 66px !important; height: 66px !important;
    border-radius: 20px !important;
  }
  body.lc-glass-page .bp-hero-no-route .ico svg { width: 28px !important; height: 28px !important; }

  /* ── Pay Now hero button — full width thumb target ─────────── */
  body.lc-glass-page .bp-bill-card.hero .pay,
  body.lc-glass-page #billPayBtn {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    justify-content: center !important;
  }

  /* ── New delivery request modal ─────────────────────────────── */
  body.lc-glass-page #reqModal {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  body.lc-glass-page #reqModal > div {
    border-radius: 20px 20px 0 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }
  body.lc-glass-page #reqModal > div > div:first-child {
    padding: 16px 18px !important;
  }
  body.lc-glass-page #reqModal > div > div:first-child > div > div:first-child { font-size: 10px !important; }
  body.lc-glass-page #reqModal > div > div:first-child > div > div:nth-child(2) { font-size: 17px !important; }

  /* Stop rows in the request modal — stack so the address field
     gets the full width, no horizontal scroll on phones */
  body.lc-glass-page [data-stop] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  body.lc-glass-page [data-stop] > div:first-child { font-size: 11px !important; min-width: 0 !important; }
  body.lc-glass-page [data-stop] > input {
    width: 100% !important;
    font-size: 16px !important;       /* prevents iOS zoom on focus */
  }
  body.lc-glass-page [data-stop] > button[data-remove] {
    align-self: flex-end !important;
    font-size: 22px !important;
    padding: 0 !important;
    width: 36px !important; height: 36px !important;
  }

  /* + Add pickup / + Add delivery buttons — stack */
  body.lc-glass-page #reqAddPickupBtn,
  body.lc-glass-page #reqAddDeliveryBtn {
    width: 100% !important;
    min-height: 46px !important;
  }
  body.lc-glass-page #reqModal [style*="display:flex"][style*="gap:10px"] {
    /* The wrapper around the two add buttons — make it stack */
    flex-direction: column !important;
  }

  /* Notes textarea + service date input scale */
  body.lc-glass-page #reqDate,
  body.lc-glass-page #reqNotes {
    width: 100% !important;
    font-size: 16px !important;
  }

  /* Bottom action row — full width buttons */
  body.lc-glass-page #reqCancelBtn,
  body.lc-glass-page #reqSubmitBtn {
    flex: 1 !important;
    min-height: 48px !important;
    font-size: 15px !important;
  }

  /* ── Per-invoice overlay (route invoice viewer) ─────────────── */
  body.lc-glass-page #clientInvOverlay {
    padding: 0 !important;
    align-items: flex-start !important;
  }
  body.lc-glass-page #clientInvOverlay > div {
    max-width: 100% !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }
  body.lc-glass-page #clientInvOverlay #cinvPdfBtn,
  body.lc-glass-page #clientInvOverlay #cinvCloseBtn {
    padding: 10px 14px !important;
    font-size: 12.5px !important;
  }

  /* ── Itemized statement table → card-style on mobile ────────── */
  body.lc-glass-page .bp-statement th { font-size: 10px !important; }
  body.lc-glass-page .bp-statement td { font-size: 12.5px !important; padding: 10px 8px !important; }
  body.lc-glass-page .bp-statement .col-meta { display: none !important; }   /* drop the densest columns */

  /* Section headings shrink */
  body.lc-glass-page .bp-section-head,
  body.lc-glass-page .bp-section-title { font-size: 22px !important; }
  body.lc-glass-page .bp-section .eyebrow { font-size: 10px !important; }

  /* ── client-deliveries.html (cd-*) ──────────────────────────── */
  body.lc-glass-page .cd-hero {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  body.lc-glass-page .cd-hero h1 { font-size: 28px !important; }
  body.lc-glass-page .cd-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  body.lc-glass-page .cd-kpi { padding: 14px 14px !important; }
  body.lc-glass-page .cd-kpi .v { font-size: 22px !important; }
  body.lc-glass-page .cd-toolbar {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  body.lc-glass-page .cd-toolbar input,
  body.lc-glass-page .cd-toolbar select {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }

  /* ── client-onboarding.html ─────────────────────────────────── */
  body.lc-glass-page .wrap { padding: 22px 16px 60px !important; }
  body.lc-glass-page .nameplate { gap: 12px !important; margin-bottom: 22px !important; }
  body.lc-glass-page .nameplate .logo { width: 48px !important; height: 48px !important; }
  body.lc-glass-page input[type="text"],
  body.lc-glass-page input[type="email"],
  body.lc-glass-page input[type="tel"],
  body.lc-glass-page input[type="password"],
  body.lc-glass-page input[type="url"],
  body.lc-glass-page input[type="number"],
  body.lc-glass-page select,
  body.lc-glass-page textarea {
    font-size: 16px !important;   /* iOS focus-zoom prevention */
  }
  body.lc-glass-page button.primary,
  body.lc-glass-page .btn-primary,
  body.lc-glass-page input[type="submit"] {
    width: 100% !important;
    min-height: 48px !important;
  }

  /* ── track.html (tk-*) — public tracking page ───────────────── */
  body.lc-glass-page .tk-nav {
    padding: 10px 14px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  body.lc-glass-page .tk-hero {
    padding: 22px 16px !important;
    border-radius: 18px !important;
  }
  body.lc-glass-page .tk-hero h1 { font-size: 26px !important; line-height: 1.15 !important; }
  body.lc-glass-page .tk-status,
  body.lc-glass-page .tk-stops,
  body.lc-glass-page .tk-stop,
  body.lc-glass-page .tk-pod,
  body.lc-glass-page .tk-foot { padding: 16px !important; border-radius: 18px !important; }
  body.lc-glass-page .tk-map-wrap { height: 320px !important; }
  body.lc-glass-page .tk-driver-overlay {
    left: 12px !important; right: 12px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
  }
  body.lc-glass-page .tk-driver-name { font-size: 14px !important; }
  body.lc-glass-page .tk-help-btn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 15px !important;
  }

  /* Recharge nav: tap-friendly hamburger / logo + login */
  body.lc-glass-page #topbar .topbar { padding: 10px 14px !important; }
  body.lc-glass-page #topbar .topbar .links { flex-wrap: wrap !important; gap: 12px !important; }
}

/* ── Very small phones — tighten typography ─────────────────────── */
@media (max-width: 420px) {
  body.lc-glass-page .bp-greet h1 { font-size: 21px !important; }
  body.lc-glass-page .cd-hero h1  { font-size: 24px !important; }
  body.lc-glass-page .tk-hero h1  { font-size: 22px !important; }
  body.lc-glass-page .bp-bill-card.hero { padding: 20px 16px !important; }
  body.lc-glass-page .bp-bill-card.hero .val { font-size: 32px !important; }

  /* Stat tile values still readable */
  body.lc-glass-page .cd-kpi .v { font-size: 20px !important; }
  body.lc-glass-page .bp-bill-card .val { font-size: 26px !important; }

  /* Hide decorative chrome that's too dense on tiny screens */
  body.lc-glass-page .bp-greet::before,
  body.lc-glass-page .bp-greet::after { display: none !important; }
}

/* ── Tablet-and-up: keep the layout breath, just tame max-widths ── */
@media (min-width: 921px) and (max-width: 1180px) {
  body.lc-glass-page .bp-main { gap: 18px !important; }
}

/* ── Touch device niceties (regardless of width) ─────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover-only lift effects on touch — feels broken otherwise */
  body.lc-glass-page .bp-card:hover,
  body.lc-glass-page .bp-route-card:hover,
  body.lc-glass-page .cd-pickup-card:hover { transform: none !important; }

  /* iOS Safari: bottom-bar overlap protection */
  body.lc-glass-page .bp-section:last-child { padding-bottom: env(safe-area-inset-bottom, 16px); }
}