/* REHunter Roofing — Phase 2A shared mobile stylesheet
   Version: 2026-09-05 (p2a-v1)
   Scope: mobile responsiveness only. No branding, color-scheme, or layout
   changes on desktop. All rules are additive and gated behind media queries
   or target elements that are safe to enhance.
   Guardrails: no changes to AI/billing/auth/DB/Terms/specimen. */

/* ---------- Small hardening that is safe at all widths ---------- */
img { max-width: 100%; height: auto; }
/* Long emails / addresses must never force horizontal overflow */
.value, .result-address, .scan-address { overflow-wrap: anywhere; word-break: break-word; }

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

  /* --- Dashboard header: wrap instead of clipping --- */
  .header { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .header .logo { font-size: 1.15rem; }
  .header .user-info { flex-wrap: wrap; gap: 8px; width: 100%; }
  .header .user-info a { padding: 8px 12px; }

  /* --- Home top-bar (already stacks, keep consistent) --- */
  .top-bar { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .user-area { flex-wrap: wrap; gap: 8px; }

  /* --- Stats bar: allow wrap --- */
  .stats-bar { flex-wrap: wrap; gap: 10px 16px; padding: 10px 14px; }

  /* --- Main content padding (extra bottom clearance so the floating Home
         button never overlaps the last history card) --- */
  .main { padding: 0 14px 96px; margin-top: 16px; }

  /* --- Scan form: stack input + button; address field must not clip --- */
  .scan-form { flex-direction: column; }
  .scan-form input,
  .scan-form #addressInput { width: 100%; box-sizing: border-box; min-width: 0; }
  .scan-form button { width: 100%; }

  /* --- Scan mode tabs: full-width, larger touch targets --- */
  #tabSatellite, #tabPhoto { flex: 1; padding: 12px 10px; min-height: 44px; }

  /* --- Property-detail selects: single column, no fixed min-width clipping --- */
  #scanOptions > div { flex-direction: column; }
  #scanOptions > div > div { min-width: 0 !important; width: 100%; }

  /* --- Touch targets: table action buttons and small controls --- */
  .btn-pdf,
  .history td button,
  .history td a.btn-pdf { min-height: 40px; padding: 8px 12px; display: inline-flex; align-items: center; }

  /* --- Chat widget (rehunterchat): keep the launcher bubble tidy and out of
         the way of text/cards on mobile. The widget's own styles are !important
         to override; nudge it up slightly and keep it compact. --- */
  #rhc-bubble { bottom: 14px !important; right: 14px !important; width: 50px !important; height: 50px !important; z-index: 60 !important; }
  #rhc-bubble svg { width: 24px !important; height: 24px !important; }
  /* Give page content bottom clearance so the bubble doesn't sit on the footer/cards */
  body > .footer, .network { margin-bottom: 72px; }

  /* --- Floating Home button (dashboard): smaller + slightly transparent so it
         stays clear of history-card content; the .main bottom padding keeps the
         last card fully above it. --- */
  .fab-home { width: 44px !important; height: 44px !important; bottom: 16px !important; right: 12px !important; opacity: 0.9; font-size: 1.15rem !important; }
}

/* ==================================================================
   PHONE (<= 600px) — scan history table becomes cards
   ================================================================== */
@media (max-width: 600px) {

  /* --- Hide both floating controls on phones: they overlapped card text and
         stats. The chat launcher and the redundant floating Home button are
         removed at this width (the header "Home" link already covers nav).
         Desktop/tablet controls are unaffected. --- */
  #rhc-bubble, #rhc-win, #rhc-dot { display: none !important; }
  .fab-home { display: none !important; }
  /* Controls hidden here, so no bottom reservation needed at phone width. */
  body > .footer, .network { margin-bottom: 0; }

  /* Container clamps width so nothing can overflow horizontally.
     Left/right padding so the heading + cards have breathing room from edges. */
  .history { max-width: 100%; overflow-x: hidden; padding: 0 10px; }
  .history h3 { padding: 0 2px; }

  /* Turn table into a stack of block "cards". Reset table sizing quirks. */
  .history table { display: block; width: 100%; max-width: 100%; border-collapse: collapse; }
  .history thead { display: none; }               /* hide the column header row */
  .history tbody { display: block; width: 100%; }
  .history tr {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid #334;
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #0d1117;
  }
  .history tr:hover { background: #0d1117; }       /* neutralize desktop row hover */

  /* Each cell is a block row inside the card: label on the left, value on the
     right, wrapping under if long. No flin-row overflow. */
  .history td {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: none;
    padding: 6px 0;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .history td::before {
    content: attr(data-label);
    display: block;
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
  }
  .history td a { overflow-wrap: anywhere; word-break: break-word; }

  /* Actions cell: no label, buttons wrap in a row with real touch targets */
  .history td.actions-cell {
    padding-top: 10px;
    white-space: normal !important;                /* override inline nowrap */
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .history td.actions-cell::before { content: none; }
  .history td.actions-cell a,
  .history td.actions-cell button { margin-left: 0 !important; min-height: 40px; }
}

/* ==================================================================
   MODAL: fit small screens, larger close target, internal scroll
   (targets the upgrade modal inner container + close button)
   ================================================================== */
@media (max-width: 600px) {
  #upgradeModal > div { padding: 20px 16px !important; width: 94% !important; max-height: 88vh !important; }
  #upgradeModal > div > button { /* close (x) */
    min-width: 44px; min-height: 44px;
    font-size: 1.9rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
  }
}