/* ============================================================================
   QOVERED — MOBILE RESPONSIVE LAYER
   Loaded last so it overrides style.css / components.css / shell.css at equal
   specificity. Phone-first refinements at <=600px. Desktop is untouched.
   Built from a full responsive audit of every tab, modal and form.
   ============================================================================ */

/* Bottom navigation lives only on phones (hidden by default on desktop). */
.q-bottomnav { display: none; }

@media (max-width: 600px) {

  /* ─────────────────────────────────────────────────────────────
     1. NAVIGATION — replace the cramped top tab bar with a fixed
     bottom navigation bar (all 4 destinations always reachable).
     ───────────────────────────────────────────────────────────── */
  #dashboard #appTabs.app-tabs { display: none !important; }

  .q-bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--q-surface); border-top: 1px solid var(--q-border);
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 24px rgba(13, 16, 22, 0.07);
  }
  .q-bnav-item {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
    align-items: center; gap: 3px; padding: 4px 2px;
    background: none; border: none; cursor: pointer; border-radius: 12px;
    color: var(--q-text-muted); font-family: var(--q-font-sans);
    font-size: 10px; font-weight: 600; letter-spacing: -0.01em;
    transition: color var(--q-dur-fast);
  }
  .q-bnav-item svg { width: 22px; height: 22px; flex-shrink: 0; }
  .q-bnav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .q-bnav-item.active { color: var(--q-accent); }
  .q-bnav-item:active { background: var(--q-surface-2); }

  /* Make room so the bottom bar never covers content or the footer. */
  #dashboard .tab-panel { padding: 4px 14px 84px; }
  .app-footer { margin-bottom: 68px; }
  /* Cookie banner sits above the bottom nav. */
  .cookie-notice { bottom: 70px; }

  /* ─────────────────────────────────────────────────────────────
     2. APP BAR + PANEL GUTTERS — reclaim side space on narrow screens.
     ───────────────────────────────────────────────────────────── */
  .q-appbar-inner { padding: 0 14px; }
  .dash-hero .big { font-size: 36px; }
  .dash-cat .q-amt, .q-row-trail .q-amt { font-size: 15px; }
  .dash-cat > div:nth-child(2) { min-width: 0; }

  /* ─────────────────────────────────────────────────────────────
     3. SECTION HEADERS — stack title above its action buttons.
     ───────────────────────────────────────────────────────────── */
  .section-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .section-header-buttons { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .section-header-buttons .btn-accent,
  .section-header-buttons .btn-outline { flex: 1 1 auto; justify-content: center; white-space: nowrap; }

  /* ─────────────────────────────────────────────────────────────
     4. COST TABLE — let it collapse to the screen instead of a
     620px sideways-scrolling block. (Critical overflow source.)
     ───────────────────────────────────────────────────────────── */
  .cost-table { min-width: 0; table-layout: auto; font-size: 0.72rem; }
  .cost-premium, .cost-period { white-space: normal; }
  .cost-policy-name { max-width: none; white-space: normal; }
  .cost-totals { grid-template-columns: 1fr; }
  .cost-table th, .cost-table td { padding-left: 0.4rem; padding-right: 0.4rem; }
  /* Drop the lowest-value columns on phones so the table fits with no sideways
     scroll: Categorie (already shown on each policy card) and the per-row p/m+p/j
     amounts (the premie cell shows the amount and the totals are stacked below). */
  .cost-table th:nth-child(2), .cost-table td:nth-child(2),
  .cost-table .cost-pm, .cost-table .cost-py,
  .cost-table th:nth-last-child(1), .cost-table th:nth-last-child(2) { display: none; }

  /* ─────────────────────────────────────────────────────────────
     5. MODALS + FORMS — fit the viewport, stack two-column rows.
     ───────────────────────────────────────────────────────────── */
  .modal { align-items: flex-start; padding: 14px; }
  .modal-content,
  .modal-content.modal-lg,
  .modal-content.modal-sm { width: 100%; max-width: 100%; padding: 1.25rem 1rem; }
  .modal-lg, .modal-sm { max-width: 100%; }
  .modal-actions { flex-wrap: wrap; }

  .form-row { flex-direction: column; gap: 0; }
  .form-row .form-group { max-width: 100%; width: 100%; }
  .manual-cost-section { grid-template-columns: 1fr; gap: 0; }
  .toggle-row-3 { grid-template-columns: 1fr; }
  .premium-dates { grid-template-columns: 1fr; }
  .welcome-cta { flex-direction: column; align-items: stretch; }
  .welcome-cta .btn-sm { width: 100%; }
  .hh-member-controls { flex-wrap: wrap; }
  .hh-relationship-select { flex: 1 1 120px; }
  .onboard-q { gap: 0.5rem; }
  .onboard-q .form-select { min-width: 0; flex: 0 1 130px; }

  /* ─────────────────────────────────────────────────────────────
     6. q-* COMPONENT LAYER — segmented controls / tabs scroll,
     modal action buttons stack, big amounts shrink.
     ───────────────────────────────────────────────────────────── */
  .q-modal { width: 100%; max-width: 100%; }
  .q-modal-actions { flex-direction: column-reverse; gap: 8px; }
  .q-modal-actions .q-btn { width: 100%; }

  .q-segment, .q-tabs {
    display: flex; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .q-segment::-webkit-scrollbar, .q-tabs::-webkit-scrollbar { display: none; }
  .q-segment button, .q-tab { flex: 0 0 auto; white-space: nowrap; }

  .q-card-head, .q-modal-head { gap: 10px; }
  .q-display { font-size: 2.5rem; }
  .q-metric { font-size: 1.875rem; }
  .bal-hero-amt { font-size: clamp(28px, 9vw, 42px); white-space: normal; line-height: 1.1; }
  .q-field-row { flex-direction: column; gap: 0; }

  /* ─────────────────────────────────────────────────────────────
     7. TEXT TRUNCATION GUARDS — let flexible columns shrink/ellipsize
     instead of pushing rows wider than the screen.
     ───────────────────────────────────────────────────────────── */
  .policy-insurer { min-width: 0; flex: 1; }
  .payment-insurer { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .account-header-info { min-width: 0; }
  .account-header-info h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ─────────────────────────────────────────────────────────────
     8. TOUCH TARGETS — raise small controls toward ~40px.
     ───────────────────────────────────────────────────────────── */
  .q-btn--sm { min-height: 40px; }
  .bal-receipt-x { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
  .view-toggle-btn { padding: 0.55rem 0.65rem; min-height: 40px; min-width: 40px; justify-content: center; }
  .btn-accent, .btn-outline, .btn-primary { min-height: 40px; }
  .gap-hide-btn, .gap-unhide-btn { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0.4rem; }
  .hh-x-btn, .person-remove, .file-queue-remove, .todo-dismiss { min-width: 40px; min-height: 40px; }
}

/* Very small phones (<=360px): one more notch tighter. */
@media (max-width: 360px) {
  .q-bnav-item span { font-size: 9px; }
  .dash-hero .big { font-size: 32px; }
  #dashboard .tab-panel { padding-left: 12px; padding-right: 12px; }
}