/* ══════════════════════════════════════════════════════════
   KENKI FIX — Universal mobile layout & style fixes
   Add to EVERY page on the server:
   <link rel="stylesheet" href="/css/kenki-fix.css?v=2">
   ══════════════════════════════════════════════════════════ */

/* ── Uniform fonts ── */
body, button, input, select, textarea, label, span, p, div, a {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
h1, h2, h3, h4, h5, h6,
.page-title, .card-title, .section-title {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-weight: 400;
  font-variant-numeric: lining-nums;
}

/* ── Base box model fix ── */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ── Prevent horizontal overflow on all pages ── */
html, body {
  max-width: 100vw;
}
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
}

/* ── Card system — prevent overlapping ── */
.card, .p-card, .record-card, .history-card, .med-card,
.entry-card, .item-card, .medication-card, .supplement-card,
.appointment-card, .vital-card, .insurance-card {
  position: relative;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin-bottom: 12px;
  box-sizing: border-box;
  max-width: 100%;
}

/* ── Grid containers — stack on mobile ── */
@media (max-width: 900px) {
  /* Hide legacy desktop nav on mobile */
  nav.desktop-nav, nav.main-nav, .desktop-nav { display: none !important; }

  /* Stack all grids vertically (except prism grids & nav grids) */
  .grid, .card-grid, .cards-grid, .records-grid,
  .modules-grid, .two-col, .three-col,
  [class*="-grid"]:not(.check-grid):not(.nav-cards-grid):not(.stat-row):not(.chart-grid), [class*="columns"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Preserve 2-column checkbox grid on mobile */
  .check-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }

  /* Full-width cards */
  .card, .p-card, .record-card, .history-card, .med-card,
  .entry-card, .item-card, .medication-card, .supplement-card,
  .appointment-card, .vital-card, .insurance-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* ══════════════════════════════════════════
   MEDICAL HISTORY — Fix overlapping records
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  .records-list, .history-list, .conditions-list,
  .surgeries-list, .allergies-list,
  [class*="records"], [class*="history-list"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .record-card, .history-card, .condition-card,
  .surgery-card, .allergy-card {
    width: 100% !important;
    padding: 16px !important;
    overflow: hidden;
  }

  /* Fix any absolute positioned elements causing overlap */
  .record-card *, .history-card * {
    position: relative !important;
    float: none !important;
  }

  /* Fix date/status badges overlapping card content */
  .record-date, .record-status, .card-badge,
  [class*="badge"], [class*="status"] {
    position: relative !important;
    margin-top: 8px;
  }
}

/* ══════════════════════════════════════════
   MEDICATIONS / SUPPLEMENTS — Fix card layout
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  .med-card, .medication-card, .supplement-card,
  .schedule-card, .dosage-card,
  [class*="medication"], [class*="supplement"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 16px !important;
    gap: 8px;
  }

  /* Fix text overflow in med cards */
  .med-name, .med-dosage, .med-frequency,
  .medication-name, .supplement-name,
  [class*="med-"] > *, [class*="medication-"] > * {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    font-size: 14px !important;
  }

  .med-card h3, .medication-card h3, .supplement-card h3 {
    font-size: 16px !important;
    word-break: break-word;
  }

  /* Fix side-by-side layout in med cards */
  .med-info, .med-details, .med-actions,
  [class*="med-info"], [class*="med-detail"] {
    width: 100% !important;
    flex-direction: column !important;
  }

  /* Mark as taken / action buttons */
  .med-actions, .card-actions, [class*="actions"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
  }
}

/* ══════════════════════════════════════════
   FILE UPLOAD — Fix card width
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  .upload-area, .upload-card, .file-list,
  .drop-zone, [class*="upload"], [class*="file-"] {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .file-item, .uploaded-file {
    width: 100% !important;
    flex-direction: column !important;
    gap: 8px;
    padding: 12px !important;
  }
}

/* ══════════════════════════════════════════
   SUBSCRIPTION PAGE — Fix layout
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  .plan-card, .pricing-card, .subscription-card,
  [class*="plan"], [class*="pricing"] {
    width: 100% !important;
    padding: 20px !important;
    margin-bottom: 16px;
  }

  .plans-grid, .pricing-grid,
  [class*="plans"], [class*="pricing-grid"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
}

/* ══════════════════════════════════════════
   SETTINGS PAGE — Fix layout
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  .settings-tabs, .tab-buttons, [class*="tab-btn"],
  [class*="settings-tab"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .settings-section, .settings-card,
  [class*="settings-"] {
    width: 100% !important;
    padding: 16px !important;
  }
}

/* ══════════════════════════════════════════
   GENERAL — Stat rows, form inputs
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  .stat-row {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .stat-row .p-stat,
  .stat-row > * {
    min-width: calc(50% - 8px) !important;
    flex: 1 1 calc(50% - 8px) !important;
  }

  input, select, textarea {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important; /* prevent iOS zoom */
  }

  /* Buttons */
  .btn, button[class*="btn"],
  [class*="button"], [class*="action-btn"] {
    min-height: 44px; /* touch-friendly */
    font-size: 14px;
  }
}

/* ══════════════════════════════════════════
   IMAGE / SVG / CANVAS — Responsive
   ══════════════════════════════════════════ */
img, canvas, svg, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ══════════════════════════════════════════
   SCROLL / TOUCH — Mobile UX
   ══════════════════════════════════════════ */
@media (max-width: 900px) {
  body {
    -webkit-overflow-scrolling: touch;
    padding-top: 0;
  }

  main {
    padding-top: 0.5rem;
    padding-bottom: 2rem;
  }

  /* Hide scrollbars for horizontal scroll areas */
  [class*="scroll"]::-webkit-scrollbar {
    display: none;
  }
}