/* ═══════════════════════════════════════════════════════════════════════════
 * mobile-overrides.css — ISOLATED MOBILE FIXES
 *
 * Loaded LAST in index.html (after all desktop rules) so any rule in this
 * file only takes effect under its own media query. Every rule MUST live
 * inside a @media (max-width: <n>) block so desktop is untouched.
 *
 * Boundary: 768px (boundary mobile/tablet/desktop retained in the audit).
 * Fine-grained: 360px (phones extra-small), 480px (small phones),
 * 640px (large phones / small tablets), 767.98px (general mobile).
 *
 * Generated as part of Phase 2 of the MOBILE_AUDIT.md plan.
 * ═══════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────
 * LOT 1 — Universal critical
 * ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {

  /* 1.1 — KPI grids that use 4-col on desktop should drop to 2-col on
     mobile.  Catches both Tailwind-like `.grid-cols-N` utility classes used
     across many dashboards (farmer, vet, equinevet, vendor) and inline
     `grid-template-columns: repeat(4, 1fr)`.  Specific page-level grids
     remain untouched if they use other class names. */
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-cols-2 { grid-template-columns: 1fr !important; }

  /* 1.2 — Modal must never exceed the viewport on mobile. */
  .modal { max-width: min(560px, calc(100vw - 24px)) !important; }
  .modal.modal-sm,
  .modal-sm { max-width: min(400px, calc(100vw - 24px)) !important; }
  .modal-backdrop { padding: 12px !important; }
  .modal-footer { padding-bottom: max(var(--space-3), env(safe-area-inset-bottom)) !important; }

  /* 1.3 — Toast: clamp to viewport + safe-area insets. */
  .toast-container {
    max-width: calc(100vw - 24px) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    top: max(12px, env(safe-area-inset-top)) !important;
  }

  /* 1.4 — Bottom navigation: respect iPhone home-indicator safe-area. */
  .app-bottom-nav {
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

  /* 1.5 — Topbar title must truncate on long page names. */
  .app-topbar h1 {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * LOT 2 — Per-page critical
 * ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {

  /* 2.1 — Vet agenda: planning is full-width, the requests panel (urgences /
     en attente) collapses into accordions inline.  We keep the same column
     layout for the appointments but stack everything in a single column. */
  .ag-layout,
  .ag-root,
  .ag-container,
  [class*='ag-grid-2col'] {
    grid-template-columns: 1fr !important;
  }
  /* Agenda 7-day week view: each day cell is unusable at ≤56px wide.
     Switch the week grid to a horizontal scroller with snap. */
  .ag-week-grid,
  .ag-week-days,
  [class*='week-7col'] {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: none !important;
  }
  .ag-week-grid > *,
  .ag-week-days > * {
    flex: 0 0 calc(100vw - 48px);
    scroll-snap-align: start;
  }
  /* Agenda stats row */
  .ag-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .ag-stat-label { font-size: 11px !important; }

  /* 2.2 — Billing tables → card-mode (each row becomes a stacked card) */
  .billing-table,
  .invoice-table,
  table.responsive-mobile {
    display: block !important;
  }
  .billing-table thead,
  .invoice-table thead,
  table.responsive-mobile thead { display: none !important; }
  .billing-table tbody,
  .invoice-table tbody,
  table.responsive-mobile tbody { display: flex !important; flex-direction: column; gap: 10px; }
  .billing-table tr,
  .invoice-table tr,
  table.responsive-mobile tbody tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px 12px;
    padding: 12px;
    border: 1px solid var(--color-neutral-200);
    border-radius: 10px;
    background: white;
  }
  .billing-table td,
  .invoice-table td,
  table.responsive-mobile td {
    display: block !important;
    border: 0 !important;
    padding: 4px 0 !important;
  }
  /* Field-label hint: requires `data-label="<label>"` attribute on each td */
  .billing-table td[data-label]::before,
  .invoice-table td[data-label]::before,
  table.responsive-mobile td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
  }

  /* 2.3 — Prescription med-row: stack each medication form vertically */
  .med-row,
  .prescription-med-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px;
    border: 1px solid var(--color-neutral-200);
    border-radius: 10px;
    background: white;
    margin-bottom: 12px;
  }
  .med-row > *,
  .prescription-med-row > * {
    width: 100%;
  }

  /* 2.4 — Pet/horse/farmer messages: the single-pane mobile pattern is
     already implemented per-page (msg-chat-panel / msg-thread-list toggle
     based on activeThreadId).  No additional CSS needed here.
     We just guarantee the 2-col grid collapses to 1-col on mobile. */
  .msg-container { grid-template-columns: 1fr !important; }

  /* 2.5 — Vendor catalogue: KPI 4→2 and product grid 1-col */
  .vendor-kpi-row,
  .catalogue-kpi { grid-template-columns: repeat(2, 1fr) !important; }
  .vendor-product-grid,
  .catalogue-product-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * LOT 3 — Major (touch targets, sticky CTAs, chips, form rows)
 * ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {

  /* 3.1 — Universal minimum touch target 44×44 px.  Targets the smallest
     interactive elements that recurred in the audit (voice mic, exam stars,
     chevrons, segmented btn-sm, qty +/-). */
  .exam-field-star,
  .exam-region-chevron,
  .voice-input-btn,
  .mic-btn,
  .btn-icon-sm,
  .icon-btn-sm,
  .qty-minus,
  .qty-plus,
  .qty-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
  }
  .qty-input {
    min-width: 56px !important;
    height: 44px !important;
    font-size: 16px !important;
  }

  /* 3.2 — Form rows (animal-form, vet-request, vendor catalogue forms):
     2-col stacks vertically. */
  .form-row,
  .reg-row,
  .form-2col {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: var(--space-3) !important;
  }

  /* 3.3 — Submit buttons on wizards should be sticky-bottom so the keyboard
     doesn't hide them.  Applies to symptom wizards and consultation steps. */
  .wizard-nav,
  .consult-nav,
  .sticky-cta-mobile {
    position: sticky !important;
    bottom: 0;
    background: white;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    margin: 0 -16px -16px;
    box-shadow: 0 -4px 12px rgba(15, 23, 33, 0.06);
    z-index: 10;
  }
  .wizard-next-btn,
  .consult-nav .btn {
    min-width: 0 !important;
    flex: 1 !important;
    min-height: 48px;
  }

  /* 3.4 — Inputs (text, email, number, password) must be at least 16px so
     iOS Safari does not auto-zoom.  Don't override custom oversized inputs. */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    font-size: 16px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * LOT 4 — Polish (body-map, animations, lazy)
 * ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {

  /* 4.1 — Body-map SVG: maintain aspect ratio + never overflow */
  .body-map-svg,
  .bm-svg {
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: auto;
  }

  /* 4.2 — Lazy images cosmetic hint (browsers handle the actual lazy
     loading via `loading="lazy"` attribute set in JS).  This just smooths
     the transition. */
  img[loading="lazy"] {
    transition: opacity 200ms ease;
  }

  /* 4.3 — Skeleton loader animation — opt-in via `.skeleton` class on
     placeholders. */
  .skeleton {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s infinite;
    border-radius: 8px;
    color: transparent;
  }
  @keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Boutique (farmer/petowner/horseowner) — product grid + qty controls
 * The product card embeds a `[-][1][+][Ajouter]` row that needs ~280px
 * minimum. Below 480px we drop to a single column so the row fits.
 * ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  /* Always show 2 columns on tablet-ish phones (480-768px) */
  #product-grid,
  .farmer-product-grid,
  .petowner-product-grid,
  .horseowner-product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  /* Inside each card, let the qty-control row wrap if it needs to so the
     "Ajouter" button never gets clipped */
  .qty-control {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .qty-control .add-to-cart-btn {
    flex: 1 1 100% !important;
    min-height: 40px;
    margin-top: 4px;
  }
}

@media (max-width: 479.98px) {
  /* Single column on small phones — each card uses the full row */
  #product-grid,
  .farmer-product-grid,
  .petowner-product-grid,
  .horseowner-product-grid {
    grid-template-columns: 1fr !important;
  }
  /* With a wider card we can keep the qty row inline */
  .qty-control { flex-wrap: nowrap !important; }
  .qty-control .add-to-cart-btn { flex: 1 1 auto !important; margin-top: 0; }
}

/* Bottom navigation overlaps boutique grid — add bottom padding to the app
   content so the last row of products stays above the nav on mobile */
@media (max-width: 1024px) {
  .app-content,
  .app-main {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Cart page (farmer/cart.js) — mobile redesign
 * Desktop uses `grid 1fr 300px` (items + sticky summary). On mobile we
 * stack everything in one column and each cart item becomes a card with
 * elements stacked vertically instead of squeezed in one row.
 * ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  /* Cart grid: stack items + summary vertically */
  .cart-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Each cart item card: stack info row + qty + total + remove */
  .cart-item {
    flex-wrap: wrap !important;
    row-gap: 12px !important;
    padding: 12px !important;
    gap: 12px !important;
  }
  .cart-item-info {
    flex: 1 1 calc(100% - 80px) !important;
    min-width: 0;
  }
  /* Quantity controls row: full width, centered */
  .cart-qty-row {
    flex: 1 1 100% !important;
    justify-content: center !important;
    border-top: 1px solid var(--color-neutral-100);
    padding-top: 12px;
    margin-top: 4px;
  }
  /* Item total: align with qty row on the right side */
  .cart-item-total {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  /* Remove button positioned top-right of card */
  .cart-item-remove {
    position: absolute;
    top: 8px;
    right: 8px;
  }
  .cart-item { position: relative !important; }
  /* Summary card: full width, no sticky-top (would conflict with bottom-nav) */
  .cart-summary {
    position: static !important;
    margin-bottom: 16px;
  }
  /* Summary item-name truncation OK now that card is wider */
  .cart-summary span[style*="max-width: 160px"] {
    max-width: none !important;
    flex: 1;
    min-width: 0;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Extra-small phones (< 480px) — tighter overrides
 * ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 479.98px) {

  /* Cards: tighter padding */
  .card { padding: var(--space-3) !important; }

  /* KPI value font shrinks to avoid overflow at 320–360 px */
  .kpi-value { font-size: clamp(16px, 5vw, 24px) !important; }
  .kpi-label { font-size: 10px !important; }

  /* Demo login button row stacks */
  .demo-login-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .demo-login-row > * { width: 100%; }

  /* Animal selector / picker list height */
  .animal-list,
  .farmer-symptoms-animal-list,
  [data-mobile-vh-list] {
    max-height: 50vh !important;
  }

  /* Filter pill bars: enable horizontal scroll snap */
  .filter-pills,
  .species-filter,
  .chip-row {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 8px !important;
    padding-bottom: 4px;
  }
  .filter-pills > *,
  .species-filter > *,
  .chip-row > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Emergency / declaration 3-col method picker → 1-col */
  .symptom-method-cards,
  .method-picker-3 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Extra extra small phones (< 360px) — safety net
 * ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 359.98px) {
  body { font-size: 14px; }
  .btn-lg { padding: 10px 14px; font-size: 14px; }
}


/* ═══════════════════════════════════════════════════════════════════════
 * DEFENSIVE UNIVERSAL FALLBACKS
 * The codebase has hundreds of inline-styled grids and elements. Attribute
 * selectors below catch the most common broken patterns so even pages we
 * haven't tagged with semantic classes degrade gracefully on mobile.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

  /* Inline N-col grids (N >= 3): collapse to 2 cols */
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: repeat(6"],
  [style*="grid-template-columns: repeat(7"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* "1fr <fixed>" or "<fixed> 1fr" sidebars: stack vertically */
  [style*="grid-template-columns: 1fr 300px"],
  [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns: 1fr 350px"],
  [style*="grid-template-columns: 1fr 380px"],
  [style*="grid-template-columns: 1fr 400px"],
  [style*="grid-template-columns: 300px 1fr"],
  [style*="grid-template-columns: 320px 1fr"],
  [style*="grid-template-columns: 350px 1fr"],
  [style*="grid-template-columns: 380px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Reset large inline min-widths so children can't push layout */
  [style*="min-width: 200px"],
  [style*="min-width: 250px"],
  [style*="min-width: 280px"],
  [style*="min-width: 300px"],
  [style*="min-width: 320px"],
  [style*="min-width: 350px"],
  [style*="min-width: 400px"],
  [style*="min-width: 500px"],
  [style*="min-width: 600px"],
  [style*="min-width: 700px"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Canvas / iframe / video / table / pre: never overflow */
  canvas, iframe, video, table, pre {
    max-width: 100% !important;
  }
  canvas { height: auto !important; touch-action: none; }
  iframe { width: 100% !important; }

  /* Generic table card-mode (opt-in via `data-mobile="card"`) */
  table[data-mobile="card"] { display: block !important; }
  table[data-mobile="card"] thead { display: none !important; }
  table[data-mobile="card"] tbody { display: flex !important; flex-direction: column; gap: 10px; }
  table[data-mobile="card"] tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    padding: 12px;
    border: 1px solid var(--color-neutral-200);
    border-radius: 10px;
    background: white;
  }
  table[data-mobile="card"] td {
    display: block !important;
    border: 0 !important;
    padding: 4px 0 !important;
  }
  table[data-mobile="card"] td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-neutral-500);
    text-transform: uppercase;
    margin-bottom: 2px;
  }

  /* Any inline fixed-width pushing layout */
  [style*="width: 600px"],
  [style*="width: 500px"],
  [style*="width: 400px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Inline-styled tiny buttons (qty +/-, etc.) lifted to 44px touch */
  button[style*="min-width: 28px"],
  button[style*="min-width: 30px"],
  button[style*="min-width: 32px"],
  button.btn-sm[style*="padding: 2px"] {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    font-size: 18px !important;
  }
}

@media (max-width: 479.98px) {
  /* Inline 2-col form rows → 1-col */
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Drop default 2-col fallback to 1-col for tall content cards */
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: repeat(6"],
  [style*="grid-template-columns: repeat(7"] {
    /* keep 2-col for compact KPI rows that benefit from grid */
  }
}