/* ─────────────────────────────────────────────────────────────
   mobile.css — Safe global mobile responsiveness layer
   • All rules are scoped inside @media (max-width: 768px) or
     narrower sub-breakpoints.
   • Desktop layout, colours, branding, button styling,
     typography and component design are completely untouched.
   • No existing desktop rule is overridden above 768px.
   ───────────────────────────────────────────────────────────── */


/* ── 1. Global: constrain width on every page ───────────── */
/* NOTE: overflow-x:hidden is intentionally NOT set on html or body.
   On iOS Safari, setting it on both html and body disables vertical
   scrolling entirely, producing a white/blank screen.
   dashboard.css already contains horizontal overflow at the
   .db-layout / .db-main level. Other pages use narrow centred layouts
   that don't produce horizontal overflow. */
html,
body {
  max-width: 100%;
}

/* Ensure every element participates in border-box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Root layout containers: never wider than viewport */
.db-layout,
.db-main,
.db-section,
.db-content,
.modal,
.modal-body,
.modal-overlay,
.card,
.wrap,
.page-wrap,
.app,
.landing,
.landing-inner,
#adminContent {
  max-width: 100%;
  min-width: 0;
}


/* ═══════════════════════════════════════════════════════════
   DASHBOARD  (dashboard.html + dashboard.css)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Dashboard header: 2-row mobile layout ───────────────── */
  /* Row 1: [☰] [Title …]                        [avatar]    */
  /* Row 2: [🔔] [Support Inbox]          [Log Out]          */

  .db-header {
    display: flex;
    flex-wrap: wrap;
    height: auto !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
    padding-bottom: 8px;
    align-items: center;
    row-gap: 0;
  }

  /* Row 1 left: title section fills available width */
  .db-header-left {
    flex: 1 1 auto;
    min-width: 0;
    flex-shrink: 1;
    box-sizing: border-box;
    order: 1;
    overflow: hidden;
  }

  /* Title: truncate rather than overflow */
  .db-header-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Row 1 right: avatar only — compact, never grows */
  .db-header-right {
    flex: 0 0 auto;
    min-width: 0;
    box-sizing: border-box;
    order: 1;
    margin-left: 8px;
  }

  /* Row 2: bell + Support Inbox + Log Out — full-width action bar */
  .db-header-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    order: 2;
    margin-left: 0;
    padding: 6px 0 2px;
    margin-bottom: 4px;
    border-top: 1px solid rgba(201,168,76,0.07);
    align-items: center;
    overflow: hidden;
  }

  /* Bell in action row: never shrinks */
  .db-header-secondary .notif-bell-wrap {
    flex-shrink: 0;
  }

  /* Support Inbox: shrinks with ellipsis before overflowing */
  .db-header-secondary #supportInboxBtn {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    margin-right: 0 !important;
  }

  /* Log Out: always readable, pushed to the right */
  .db-header-secondary .db-logout {
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: auto;
  }

  /* ── Stat grid: 2-col on tablet ──────────────────────────── */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Section header: allow actions to wrap ───────────────── */
  .section-header {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* ── Table filter bar: wrap ──────────────────────────────── */
  .table-filter-bar {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ── Modals: fit viewport width ──────────────────────────── */
  .modal-overlay {
    padding: 12px 8px;
    align-items: flex-start;
  }

  .modal {
    width: 100%;
    max-width: 96vw;
    max-height: 92vh;
    margin: 0 auto;
  }

  .modal-header {
    padding: 16px 18px;
  }

  .modal-body {
    padding: 18px 16px;
  }

  /* ── Form grids: stack vertically ────────────────────────── */
  .form-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Named inline grid helpers ─────────────────────────────── */
  .wl-form-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Overview meta strip: allow wrapping ─────────────────── */
  .overview-meta {
    flex-wrap: wrap;
  }

  /* ── Content bottom padding: safe area for iOS nav bar ───── */
  .db-content {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 110px);
  }

  /* ── Content padding (horizontal only — no top safe-area here) ─────
     .db-header is position:sticky so it sits in normal flow; no extra
     padding-top on .db-main or .db-content is needed to clear the header.
     The header itself carries its own env(safe-area-inset-top) padding. */
  .db-main,
  main {
    padding-top: 0;
  }

  .db-content {
    padding-top: 20px;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ── Overflow containment for layout wrappers ─────────────── */
  .app,
  .app-shell {
    max-width: 100%;
    box-sizing: border-box;
  }

  .db-layout {
    overflow-x: hidden;
  }

  /* ── Generic header classes: safe stacking on mobile ──────── */
  .mobile-header,
  .app-header,
  .dashboard-header,
  .page-header {
    position: relative;
    z-index: 10;
    max-width: 100%;
    box-sizing: border-box;
  }

  .mobile-header + .db-content,
  .app-header + .db-content,
  .dashboard-header + .db-content,
  .page-header + .db-content {
    margin-top: 16px;
  }
}

@media (max-width: 480px) {

  /* ── Stats: single column on very small phones ───────────── */
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 16px;
  }

  .stat-card {
    padding: 16px 18px 14px;
  }

  /* ── Section title: shrink on very small screens ─────────── */
  .section-title {
    font-size: 1.35rem;
  }

  /* ── Content: tighter horizontal padding ─────────────────── */
  .db-content {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* ── Modals: fully fill small viewport ───────────────────── */
  .modal {
    max-width: 100%;
    width: 100%;
  }

  /* ── Modal body inline 2-col grids: stack ────────────────── */
  /* Targets divs with inline style grid-template-columns:1fr 1fr */
  .modal-body div[style*="grid-template-columns:1fr 1fr"],
  .modal-body div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Inline 3-col grids inside modals ───────────────────────── */
  .modal-body div[style*="grid-template-columns:repeat(3"],
  .modal-body div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Inline 2-col grids inside db-sections ───────────────── */
  .db-section div[style*="grid-template-columns:1fr 1fr"],
  .db-section div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Inline 3-col grids inside db-sections ─────────────────── */
  .db-section div[style*="grid-template-columns:repeat(3,1fr)"],
  .db-section div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Wide-minmax grids: allow single col on phone ─────────── */
  #kitpackGrid {
    grid-template-columns: 1fr !important;
  }

  /* ── PawPeds search: stack inputs + button ────────────────── */
  #ppSearchGrid {
    grid-template-columns: 1fr !important;
  }

  /* ── Client stats row: 2-col ─────────────────────────────── */
  #csStatsRow {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Notification bell: tighten ─────────────────────────── */
  .notif-bell-btn {
    width: 34px;
    height: 34px;
  }

  /* ── Support inbox dash banner: wrap text ────────────────── */
  .si-dash-banner {
    flex-wrap: wrap;
  }
}


/* ═══════════════════════════════════════════════════════════
   ADMIN PAGE  (admin.html)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Admin wrapper: no overflow, safe padding ─────────────── */
  #adminContent {
    padding-left: 8px;
    padding-right: 8px;
    overflow-x: hidden;
  }

  /* Table action cells: wrap instead of overflow ─────────── */
  .actions-cell {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Support chat two-panel layout: stack vertically ───────── */
  #scLayout {
    flex-direction: column !important;
  }

  /* Support conversation list + reply panel: full width ───── */
  #scConvList,
  #scConvPanel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Broadcast fields: constrain to viewport ─────────────── */
  #broadcastSubject,
  #broadcastBody,
  #broadcastAudience {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Admin header: allow wrapping ─────────────────────────── */
  .header {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Stat bar columns: allow wrapping ─────────────────────── */
  .bar-col {
    min-width: 80px;
    flex: 1 1 80px;
  }

  /* Admin inline 2-col form rows ─────────────────────────── */
  .row {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  /* Hide wide chat preview text ───────────────────────────── */
  #scConvPanel div[style*="max-width:440px"] {
    max-width: 100% !important;
    white-space: normal !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   PUBLIC PAGES
   (login, register, forgot-password, reset-password, apply,
    subscribe, subscribe-success, portal, sign, contract-view,
    contract-confirmed, index)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Generic card: ensure it fits ───────────────────────── */
  .card {
    width: 100%;
    max-width: 100%;
  }

  /* ── Centering wrapper for apply / portal ────────────────── */
  .wrap {
    padding-left: 4px;
    padding-right: 4px;
  }

  /* ── Subscribe page: two-column grid → single column ─────── */
  /* (belt-and-braces alongside the inline @media already there) */
  .page-wrap {
    grid-template-columns: 1fr !important;
  }

  /* ── Portal: tighter header + hero padding ───────────────── */
  .portal-header {
    padding: 32px 20px 28px;
  }

  .portal-hero {
    padding: 28px 20px 22px;
  }

  /* ── Sign / contract: action bar wrap ───────────────────── */
  .action-bar {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ── Landing: ensure auth actions wrap cleanly ───────────── */
  .auth-actions {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* ── Landing app card: reduce side padding ───────────────── */
  .app {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 480px) {

  /* ── Public page body: tighter side padding ─────────────── */
  /* Only pages that use padding on body (login, subscribe etc.) */
  body {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ── Card padding: tighter on very small phones ─────────── */
  .card {
    padding: 22px 16px 20px;
  }

  /* ── Subscribe features: allow rows to stack ─────────────── */
  .feature-row,
  .feature-list-item {
    flex-wrap: wrap;
  }

  /* ── Portal kitten meta chips: centre + wrap ─────────────── */
  .portal-kitten-meta {
    justify-content: center;
    flex-wrap: wrap;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   KITTEN WEIGHT TRACKER MODAL  (mobile only, ≤768px)
   Fixes: double-scroll, background-scroll leak, buried add-weight form.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Overlay: prevent background scroll on iOS ────────────── */
  #kwTrackerModal {
    padding: 0;
    align-items: stretch;
  }

  /* ── Modal: ONE scroll container, header sticks to top ─────── */
  /* display:flex on the modal is set inline — need !important to override */
  #kwTrackerModal .modal {
    display: block !important;
    max-width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    width: 100%;
    border-radius: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* ── Header: sticky at top, matches modal gradient top colour ─ */
  #kwTrackerModal .modal-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #0d1b42;
    padding: 12px 14px;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* ── Info card: hidden on mobile — name & DOB already in sticky header ── */
  #kwInfoCard {
    display: none !important;
  }

  /* ── Breed/stats row: single compact strip ────────────────── */
  #kwBreedRow {
    padding: 6px 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }

  #kwBreedRow > div:first-child {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    overflow-x: auto;
  }

  /* Breed label: hide the long text, keep the select */
  #kwBreedRow label:first-of-type {
    display: none;
  }

  #kwBreedRow select {
    width: auto !important;
    max-width: 160px !important;
    font-size: 0.78rem !important;
    padding: 5px 8px !important;
  }

  /* Chart unit label: shorten */
  #kwBreedRow label:last-of-type {
    font-size: 0.72rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Stats chips: one line, smaller ─────────────────────────── */
  #kwStats {
    gap: 8px;
    font-size: 0.72rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    width: 100%;
  }

  /* Neonatal note: clamp to 2 lines, no expansion ─────────── */
  #kwNeonatalNote {
    margin: 0 14px 6px !important;
    padding: 5px 10px !important;
    font-size: 0.67rem !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ── Body: no longer its own scroll zone (modal handles it) ── */
  #kwBody {
    overflow: visible !important;
    flex: unset !important;
    padding: 12px 14px 60px;
    display: flex;
    flex-direction: column;
  }

  /* ADD WEIGHT ENTRY → top of the scrollable area on mobile ── */
  #kwAddForm {
    order: -1;
    margin-bottom: 14px;
  }

  /* Chart: below the form ──────────────────────────────────── */
  #kwChartWrap {
    order: 0;
    margin-bottom: 14px !important;
    padding: 10px !important;
  }

  /* Weight log table: last ─────────────────────────────────── */
  #kwTableWrap {
    order: 1;
  }

  /* Compact the add-entry inputs: stack on very small screens ─ */
  #kwAddForm > div:last-child {
    flex-direction: column;
    align-items: stretch;
  }

  #kwAddForm > div:last-child > div,
  #kwAddForm > div:last-child > button {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  #kwAddForm button.btn {
    width: 100%;
    padding: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-top: 2px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   TABLE → CARD CONVERSION  (mobile only, ≤768px)
   Converts all .db-table rows into stacked labelled cards.
   Desktop layout is completely untouched above 768px.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* 1. Table-wrap: cards don't need horizontal scroll ──────────── */
  .table-wrap {
    overflow-x: visible;
    -webkit-overflow-scrolling: auto;
  }

  /* 2. Table + tbody: block so cards flow vertically ──────────── */
  .db-table,
  .db-table tbody {
    display: block;
    width: 100%;
  }

  /* 3. Hide column headers ──────────────────────────────────────── */
  .db-table thead {
    display: none;
  }

  /* 4. Each row becomes a card ─────────────────────────────────── */
  .db-table tbody tr {
    display: block;
    width: 100%;
    max-width: 100%;
    background: linear-gradient(135deg, #0c1a40 0%, #091436 100%);
    border: 1px solid rgba(201,168,76,0.12);
    border-left: 3px solid rgba(201,168,76,0.28);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    box-sizing: border-box;
  }

  /* 5. Each td becomes a labelled flex row ─────────────────────── */
  .db-table tbody td {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    box-sizing: border-box;
    font-size: 0.83rem;
    vertical-align: top;
  }

  .db-table tbody td:last-child {
    border-bottom: none;
  }

  /* 6. Label from data-label attribute ─────────────────────────── */
  .db-table tbody td[data-label]::before {
    content: attr(data-label);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(201,168,76,0.5);
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 3px;
    min-width: 72px;
  }

  /* No label for action cells (data-label="") ────────────────── */
  .db-table tbody td[data-label=""]::before {
    display: none;
  }

  /* Action cell: full-width, right-aligned button row ──────────── */
  .db-table tbody td[data-label=""] {
    justify-content: flex-end;
    padding: 10px 14px;
    background: rgba(0,0,0,0.12);
    gap: 6px;
    flex-wrap: wrap;
  }

  /* 7. col-hide-md: restore visibility in card layout ──────────── */
  /* (hidden globally at ≤1350px in dashboard.css — override here) */
  .db-table tbody td.col-hide-md {
    display: flex !important;
  }

  /* 8. Table-action buttons: always visible on mobile ─────────── */
  .db-table .table-actions {
    opacity: 1 !important;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    width: 100%;
  }

  /* 9. cat-name cell: card "title" row — larger, no label ──────── */
  .db-table tbody td.cat-name {
    font-size: 0.9rem !important;
    color: #e5e7eb;
    font-weight: 600;
    border-bottom: 1px solid rgba(201,168,76,0.1) !important;
    background: rgba(0,0,0,0.1);
    padding: 11px 14px;
  }

  .db-table tbody td.cat-name::before {
    display: none;
  }

  /* 10. Empty-state rows (colspan) — transparent, no card chrome */
  .db-table tbody td[colspan] {
    display: block !important;
    border: none;
  }

  .db-table tbody td[colspan]::before {
    display: none;
  }

  .db-table tbody tr:has(td[colspan]) {
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    margin-bottom: 0;
  }

  /* 11. Group-header rows in Studs section ─────────────────────── */
  .db-table tbody tr[style*="pointer-events:none"] {
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    margin-bottom: 4px;
  }

  .db-table tbody tr[style*="pointer-events:none"] td {
    display: block !important;
    padding: 6px 4px 2px;
    font-size: 0.65rem;
    font-weight: 700;
    border-bottom: none;
    background: none;
  }

  .db-table tbody tr[style*="pointer-events:none"] td::before {
    display: none;
  }

  /* 12. Hover: no background flicker on touch devices ─────────── */
  .db-table tbody tr:hover td {
    background: transparent;
    color: inherit;
  }

  .db-table tbody td.cat-name:hover {
    background: rgba(0,0,0,0.1) !important;
  }

  /* 13. COI table exception — keep as scrollable table ─────────── */
  #section-coi .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #section-coi .db-table,
  #section-coi .db-table tbody {
    display: table !important;
    display: revert !important;
  }

  #section-coi .db-table thead {
    display: table-header-group !important;
  }

  #section-coi .db-table tbody tr {
    display: table-row !important;
    background: revert !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
  }

  #section-coi .db-table tbody td {
    display: table-cell !important;
    border-bottom: revert !important;
    padding: 10px 8px !important;
    white-space: nowrap !important;
  }

  #section-coi .db-table tbody td::before {
    display: none !important;
  }

  #section-coi .db-table tbody td.col-hide-md {
    display: none !important;
  }

  /* ══ 14. Calendar: full-width, no horizontal overflow ═════════ */

  /* Section wrapper: contain everything */
  #section-calendar {
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* Header row: allow filter pills to wrap */
  .calendar-header {
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 8px;
  }

  .calendar-nav {
    flex-wrap: wrap;
    gap: 6px;
  }

  .cal-type-filters {
    flex-wrap: wrap !important;
    gap: 5px !important;
    width: 100%;
  }

  /* Layout: collapse the 2-col (grid + sidebar) into single column */
  .cal-layout {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* Month grid box: full width, no overflow escape */
  .cal-grid {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }

  /* Weekday header row: 7 equal, never exceed 100% */
  .cal-weekdays {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
    box-sizing: border-box;
  }

  .cal-weekday {
    padding: 6px 2px;
    font-size: 0.5rem;
    letter-spacing: 0.06em;
    min-width: 0;
    overflow: hidden;
    text-align: center;
  }

  /* Day cells grid: 7 equal columns, content clipped */
  .cal-days {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
    box-sizing: border-box;
  }

  .cal-day {
    min-width: 0;
    max-width: 100%;
    padding: 3px 2px;
    overflow: hidden;
    box-sizing: border-box;
  }

  .cal-day-num {
    font-size: 0.65rem;
  }

  /* Events container inside each day cell */
  .cal-events {
    overflow: hidden;
    width: 100%;
    min-width: 0;
  }

  /* Individual event chips: clamp to cell width */
  .cal-event {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    line-height: 1.2;
    padding: 2px 3px;
  }

  /* Day cells: reduce min-height on mobile — cells are ~58px wide so 80px is too tall */
  .cal-day {
    min-height: 56px;
  }

  /* Upcoming panel: release sticky + height cap so it sits naturally below the grid */
  .cal-upcoming-panel {
    position: static !important;
    max-height: none !important;
    width: 100%;
    max-width: 100%;
    margin-top: 16px;
    box-sizing: border-box;
    padding-bottom: 120px;
    overflow: visible;
  }

  /* Upcoming scroll: uncap height on mobile so it doesn't clip */
  .cal-upcoming-scroll {
    max-height: none !important;
    overflow-y: visible;
  }

}