/* ============================================================
   DoseBuddy — Full Responsive Stylesheet
   Breakpoints: 320 | 375 | 425 | 480 | 640 | 768 | 1024
   ============================================================ */

/* ── Base resets ─────────────────────────────────────────── */
html, body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, canvas, svg, video { max-width: 100%; }

/* ── Typography scale ────────────────────────────────────── */
@media (max-width: 768px) {
  h1 { font-size: 1.35rem; }
  h2 { font-size: 1.1rem; }
  h3 { font-size: 0.95rem; }
  .page-title    { font-size: 1.1rem; }
  .page-subtitle { font-size: 0.75rem; }
}
@media (max-width: 480px) {
  h1 { font-size: 1.15rem; }
  h2 { font-size: 1rem; }
  .page-title { font-size: 1rem; }
}

/* ── App shell & Sidebar ─────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --sidebar-w: 240px; }

  .app-shell {
    grid-template-areas: "topnav" "main";
    grid-template-columns: 1fr;
    grid-template-rows: var(--topnav-h) 1fr;
  }

  .sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-w);
    height: 100dvh;
    transform: translateX(-100%);
    z-index: 200;
    box-shadow: var(--shadow-lg);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  }
  .sidebar.open { transform: translateX(0); }
  .hamburger-fab { display: flex !important; }
  .main-content { padding: var(--space-5); }
}

@media (max-width: 768px) {
  .main-content { padding: var(--space-4); }
}
@media (max-width: 480px) {
  .main-content {
    padding: var(--space-3);
    /* prevent any child from blowing out the viewport */
    max-width: 100vw;
    overflow-x: hidden;
  }
}
@media (max-width: 375px) {
  .main-content { padding: var(--space-2); }
}

/* ── Top navigation ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .topnav { padding: 0 var(--space-4); }
}
@media (max-width: 768px) {
  .topnav { padding: 0 var(--space-3); gap: var(--space-2); }
  .topnav-center { display: none; }
  .brand-title { font-size: 0.88rem; }
}
@media (max-width: 400px) {
  .brand-title { display: none; }
}

/* ── Page header ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  .page-header-left { gap: var(--space-2); }
  .page-icon-wrap   { width: 38px; height: 38px; }
  .page-icon        { width: 18px; height: 18px; }
  .vitals-header-right { width: 100%; flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .page-header { gap: var(--space-2); }
}

/* ── Cards ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .card { padding: var(--space-4); }
  .card-header { margin-bottom: var(--space-3); flex-wrap: wrap; }
  .card-title  { font-size: 0.88rem; }
}
@media (max-width: 375px) {
  .card { padding: var(--space-3); border-radius: var(--radius-md); }
}

/* ── Greeting / Hero banner ──────────────────────────────── */
@media (max-width: 1024px) {
  .greeting-row {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
  }
  .greeting-right  { align-self: flex-start; }
  .greeting-title  { font-size: 1.25rem; }
}
@media (max-width: 768px) {
  .greeting-row { padding: var(--space-4); }
  .greeting-title { font-size: 1.1rem; }
  .today-stats-text { font-size: 0.72rem; white-space: normal; }
  .greeting-summary-pill { padding: 5px 10px; }
}
@media (max-width: 480px) {
  .greeting-row {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
  }
  .greeting-title { font-size: 1rem; }
  .greeting-right { display: none; }
  .greeting-sub   { font-size: 0.75rem; }
}
@media (max-width: 375px) {
  .greeting-title { font-size: 0.95rem; }
  .greeting-summary-pill { flex-wrap: wrap; }
}

/* ── Stats row ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .stats-row         { grid-template-columns: repeat(2, 1fr); }
  .reports-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .stats-row, .reports-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }
  .stat-card       { padding: var(--space-3); gap: var(--space-2); }
  .stat-icon-wrap  { width: 36px; height: 36px; }
  .stat-icon-wrap svg { width: 16px; height: 16px; }
  .stat-label      { font-size: 0.62rem; }
  .stat-value      { font-size: 1.1rem; }
  .rsc-icon        { width: 32px; height: 32px; }
  .rsc-icon svg    { width: 15px; height: 15px; }
  .rsc-value       { font-size: 1rem; }
  .rsc-label       { font-size: 0.6rem; }
  .reports-stat-card { padding: var(--space-3) var(--space-2); gap: var(--space-2); }
}
@media (max-width: 375px) {
  .stat-value { font-size: 1rem; }
  .stat-label { font-size: 0.6rem; }
}

/* ── Two-column & Dashboard grids ───────────────────────── */
@media (max-width: 1024px) {
  .two-col-grid         { grid-template-columns: 1fr; }
  .dashboard-main-grid  { grid-template-columns: 1fr; }
  .reports-insight-strip { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .two-col-grid { gap: var(--space-4); }
}

/* ── Charts ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .chart-container       { height: 200px; }
  .chart-container-lg    { height: 220px; }
  .reports-chart-wrapper { height: 200px; }
  .vitals-chart-wrap     { height: 90px; }
}
@media (max-width: 480px) {
  .chart-container       { height: 170px; }
  .reports-chart-wrapper { height: 160px; }
  .vitals-chart-wrap     { height: 80px; }
  .mds-chart-wrap        { height: 80px; }
}
@media (max-width: 375px) {
  .chart-container       { height: 150px; }
  .reports-chart-wrapper { height: 140px; }
}

/* ── Tables ──────────────────────────────────────────────── */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  /* Ensure wrapper never escapes the card */
  max-width: 100%;
}

@media (max-width: 768px) {
  /* schedule-table mobile layout is handled in FIX 1 below — no min-width here */
  .schedule-table th,
  .schedule-table td { padding: 8px 8px; }
  /* hide Instructions column at 768px on desktop-table — FIX 1 overrides on phones */
  .schedule-table th:nth-child(4),
  .schedule-table td:nth-child(4) { display: none; }

  .history-table { min-width: 400px; font-size: 0.75rem; }
  .history-table th,
  .history-table td { padding: 8px 8px; }
  .history-table th:nth-child(4),
  .history-table td:nth-child(4) { display: none; }

  .vitals-table { min-width: 540px; font-size: 0.75rem; }
  .vitals-table th,
  .vitals-table td { padding: 8px 8px; }
  .vitals-table th:nth-child(7),
  .vitals-table td:nth-child(7) { display: none; }
}
@media (max-width: 480px) {
  /* schedule-table handled in FIX 1b — no min-width override needed */
  .history-table  { min-width: 360px; font-size: 0.72rem; }
  .action-cell    { flex-direction: column; align-items: stretch; gap: 5px; }
  .schedule-table .action-btn { width: 100%; text-align: center; justify-content: center; }
}
@media (max-width: 375px) {
  /* schedule-table handled in FIX 1c */
  .history-table  { min-width: 320px; }
}

/* ── Add Medication page ─────────────────────────────────── */
@media (max-width: 1024px) {
  .addmed-layout {
    grid-template-columns: 1fr;
  }
  .addmed-upload-col { order: 2; }
  .addmed-form-col   { order: 1; }
}
@media (max-width: 768px) {
  .addmed-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .addmed-header-tip    { display: none; }
  .form-grid-2          { grid-template-columns: 1fr; }
  .form-grid-3          { grid-template-columns: 1fr; }
  .upload-dropzone      { padding: var(--space-4) var(--space-3); }
  .upload-action-row    { flex-direction: column; align-items: stretch; }
  .autofill-btn         { width: 100%; }
  .submit-med-btn       { font-size: 0.85rem; }
}
@media (max-width: 480px) {
  .addmed-header-icon   { width: 36px; height: 36px; font-size: 1.1rem; }
  .upload-formats       { gap: var(--space-1); }
  .format-tag           { font-size: 0.62rem; padding: 2px 8px; }
  .upload-dropzone-title { font-size: 0.82rem; }
  .upload-dropzone-sub  { font-size: 0.7rem; }
}

/* ── Reports page ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .reports-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .reports-header-right { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 768px) {
  .reports-period-badge { font-size: 0.7rem; padding: 5px 10px; }
  .reports-stat-card    { padding: var(--space-3); gap: var(--space-2); }
  .reports-header-right,
  .history-header-right {
    width: 100%; justify-content: flex-start; gap: 8px;
  }
  .export-controls      { gap: 8px; flex-wrap: wrap; }
  .export-btn           { height: 36px; padding: 0 12px; font-size: 0.75rem; }
}
@media (max-width: 480px) {
  .export-btn           { height: 38px; font-size: 0.72rem; }
}

/* ── History page ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .history-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .history-header-right { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 768px) {
  .history-legend-strip { gap: var(--space-3); padding: var(--space-2) var(--space-3); flex-wrap: wrap; }
  .hist-legend-sep,
  .hist-legend-note     { display: none; }
  .hist-add-btn         { font-size: 0.75rem; padding: 7px 12px; }
}
@media (max-width: 480px) {
  .hist-legend-label { font-size: 0.68rem; }
  .hist-legend-count { font-size: 0.68rem; }
}

/* ── BMI Calculator ──────────────────────────────────────── */
@media (max-width: 768px) {
  .bmi-input-row    { grid-template-columns: 1fr; gap: var(--space-3); }
  .bmi-value-number { font-size: 2.4rem; }
  .bmi-result-card  { padding: var(--space-3); }
}
@media (max-width: 480px) {
  .bmi-value-number  { font-size: 2rem; }
  .bmi-status-badge  { font-size: 0.78rem; padding: 6px 12px; }
  .bmi-disclaimer    { font-size: 0.68rem; }
  .insight-list li   { font-size: 0.8rem; }
  .suggestions-list li { font-size: 0.75rem; }
}
@media (max-width: 375px) {
  .bmi-value-number  { font-size: 1.8rem; }
}

/* ── Vitals Log ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .vitals-header-right  { flex-wrap: wrap; gap: 8px; }
  .vitals-main-grid     { grid-template-columns: 1fr; }
  .vitals-summary-row   { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .vitals-summary-row  { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .vitals-form-row-2   { grid-template-columns: 1fr; }
  .vitals-period-tabs  { flex-wrap: wrap; }
  .vitals-card         { padding: var(--space-3); gap: var(--space-2); }
  .vitals-card-value   { font-size: 1.1rem; }
  .vitals-card-icon    { width: 32px; height: 32px; }
  .vitals-card-icon svg { width: 15px; height: 15px; }
  .vitals-header-right  { width: 100%; }
}
@media (max-width: 480px) {
  .vitals-summary-row  { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .vitals-card-label   { font-size: 0.62rem; }
  .vitals-card-value   { font-size: 1rem; }
  .vitals-card-unit    { font-size: 0.62rem; }
}

/* ── AI Tools page ───────────────────────────────────────── */
@media (max-width: 768px) {
  .ai-textarea        { min-height: 70px; font-size: 0.82rem; }
  .ai-disclaimer-card { flex-direction: column; gap: var(--space-2); }
  .ai-disclaimer-icon { font-size: 1.2rem; }
  .ai-chips           { gap: var(--space-1); }
  .ai-chip            { font-size: 0.7rem; padding: 4px 10px; }
  .ai-input-row       { flex-wrap: wrap; gap: var(--space-2); }
  .ai-search-btn      { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .ai-input           { font-size: 0.8rem; }
  .ai-result-box      { font-size: 0.78rem; min-height: 70px; padding: var(--space-3); }
  .ai-heading         { font-size: 0.75rem; }
}
@media (max-width: 375px) {
  .ai-chip { font-size: 0.68rem; padding: 3px 8px; }
}

/* ── Notifications panel ─────────────────────────────────── */
/* On small screens: pin to viewport, not to the button */
@media (max-width: 768px) {
  .notif-panel {
    position: fixed;
    top: calc(var(--topnav-h) + 6px);
    right: 8px;
    left: 8px;
    width: auto;
    max-width: 420px;
    margin-left: auto;
  }
  .notif-items-list { max-height: 60vh; }
}
@media (max-width: 480px) {
  .notif-panel {
    right: 4px;
    left: 4px;
  }
  .notif-item        { padding: var(--space-3); gap: var(--space-2); }
  .notif-item-icon   { width: 30px; height: 30px; font-size: 0.9rem; }
  .notif-item-title  { font-size: 0.78rem; }
  .notif-item-desc   { font-size: 0.7rem; }
  .notif-panel-title { font-size: 0.82rem; }
}
@media (max-width: 375px) {
  .notif-panel { right: 2px; left: 2px; }
  .notif-item-title { font-size: 0.75rem; }
}

/* ── Profile dropdown ────────────────────────────────────── */
@media (max-width: 768px) {
  .profile-dropdown {
    position: fixed;
    top: calc(var(--topnav-h) + 6px);
    right: 8px;
    width: calc(100vw - 16px);
    max-width: 320px;
  }
}
@media (max-width: 375px) {
  .profile-dropdown { right: 4px; max-width: calc(100vw - 8px); }
}

/* ── Modals ──────────────────────────────────────────────── */
/* Note: detailed mobile modal rules are in FIX 4 below.
   These earlier rules are intentionally minimal to avoid conflicts. */
@media (max-width: 768px) {
  .modal-form-grid   { grid-template-columns: 1fr; }
}
/* (padding adjustments handled in FIX 4) */

/* ── Toast notifications ─────────────────────────────────── */
@media (max-width: 480px) {
  .toast-container { bottom: 12px; right: 8px; left: 8px; }
  .toast { min-width: unset; max-width: 100%; font-size: 0.78rem; }
}
@media (max-width: 375px) {
  .toast-container { bottom: 8px; right: 4px; left: 4px; }
}

/* ── Streak & Gamification ───────────────────────────────── */
@media (max-width: 1024px) {
  .streak-gamification-row { grid-template-columns: 1fr 1fr; }
  .streak-badges-card      { grid-column: 1 / -1; }
  .rpt-streak-summary      { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .streak-gamification-row { grid-template-columns: 1fr; }
  .streak-count            { font-size: 1.8rem; }
  .streak-card-inner       { gap: var(--space-3); }
  .streak-fire-icon        { font-size: 2rem; }
  .badges-grid             { grid-template-columns: repeat(3, 1fr); }
  .rpt-streak-summary      { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .badges-grid        { grid-template-columns: repeat(2, 1fr); }
  .streak-week-dots   { flex-wrap: wrap; gap: var(--space-2); }
  .streak-dot-label   { display: none; }
}

/* ── Medication Daily Summary ────────────────────────────── */
@media (max-width: 1024px) {
  .mds-stats-row { grid-template-columns: repeat(2, 1fr); }
  .mds-bottom-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .mds-stats-row  { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .mds-stat-value { font-size: 1.3rem; }
  .mds-header     { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* ── Auth / Login / Signup pages ─────────────────────────── */
@media (max-width: 540px) {
  .auth-page         { padding: var(--space-4) var(--space-3); }
  .auth-card         { padding: var(--space-4); border-radius: var(--radius-lg); }
  .auth-card-wide    { max-width: 100%; }
  .form-row-2col     { grid-template-columns: 1fr; }
  .gender-cards      { grid-template-columns: repeat(2, 1fr); }
  .step-nav-row      { flex-direction: column; }
  .step-nav-row .primary-btn,
  .step-nav-row .secondary-btn { width: 100%; }
  .signup-steps { gap: 0; }
  .step-label   { display: none; }
}
@media (max-width: 380px) {
  .auth-card      { padding: var(--space-3); }
  .role-card      { padding: var(--space-3); }
  .role-card-icon { width: 36px; height: 36px; }
  .gender-cards   { grid-template-columns: repeat(2, 1fr); }
}

/* ── Legal / Terms modal ─────────────────────────────────── */
@media (max-width: 540px) {
  .legal-modal-overlay { padding: var(--space-2); }
  .legal-modal         { max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px); border-radius: var(--radius-lg); }
  .legal-modal-header  { padding: var(--space-4); }
  .legal-modal-body    { padding: var(--space-3); gap: var(--space-3); }
  .legal-modal-footer  { padding: var(--space-3) var(--space-4); }
  .legal-modal-footer .primary-btn { width: 100%; justify-content: center; }
}

/* ── Onboarding tooltip ──────────────────────────────────── */
@media (max-width: 768px) {
  .onboarding-tooltip {
    width: calc(100vw - 32px);
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  .onboarding-tooltip.ob-visible {
    transform: translate(-50%, -50%) !important;
  }
  .onboarding-spotlight { display: none !important; }
}

/* ── Touch-friendly tap targets ──────────────────────────── */
@media (max-width: 768px) {
  .primary-btn,
  .secondary-btn,
  .modal-btn-primary,
  .modal-btn-secondary,
  .modal-btn-danger,
  .export-btn,
  .upload-browse-btn,
  .autofill-btn,
  .tab-btn,
  .vitals-period-btn,
  .hist-add-btn,
  .ai-search-btn,
  .calculate-btn         { min-height: 44px; }

  /* sidebar-link sizing is handled in FIX 2 with compact values */

  .icon-btn          { width: 40px; height: 40px; }
  .user-avatar-btn   { width: 36px; height: 36px; }
  .action-btn        { min-height: 36px; }

  /* inputs are easy to tap */
  .form-group input,
  .form-group select,
  .form-group textarea,
  .bmi-input,
  .ai-input          { min-height: 44px; font-size: 16px; /* prevent iOS zoom */ }
}
@media (max-width: 480px) {
  .form-group input,
  .form-group select,
  .form-group textarea,
  .bmi-input,
  .ai-input          { padding: 10px 12px; }
}

/* ── Misc page-specific bits ─────────────────────────────── */
@media (max-width: 768px) {
  .insight-item  { padding: var(--space-3); font-size: 0.75rem; }
  .insight-icon  { width: 16px; height: 16px; }
}
@media (max-width: 480px) {
  .activity-item       { gap: var(--space-2); padding: var(--space-2) var(--space-1); }
  .activity-icon-wrap  { width: 30px; height: 30px; font-size: 0.9rem; }
  .activity-name       { font-size: 0.8rem; }
  .activity-time       { font-size: 0.65rem; }
  .vitals-insight-item { padding: var(--space-2) var(--space-3); font-size: 0.78rem; }

  .rpt-streak-summary { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .rpt-streak-stat    { padding: var(--space-3); gap: var(--space-2); }
  .rpt-streak-val     { font-size: 1.1rem; }
  .rpt-streak-icon    { font-size: 1.2rem; }
  .rpt-badge-chip     { font-size: 0.7rem; padding: 4px 10px; }

  .security-form .form-group { margin-bottom: var(--space-3); }
  .pw-input-wrap input       { font-size: 0.82rem; }
  .security-info-cards       { gap: var(--space-2); }
  .sec-info-card             { font-size: 0.75rem; padding: var(--space-2) var(--space-3); }

  .faq-question  { font-size: 0.78rem; padding: var(--space-2) var(--space-3); }
  .faq-answer    { font-size: 0.75rem; padding: 0 var(--space-3) var(--space-2); }
  .help-contact-card  { flex-wrap: wrap; gap: var(--space-2); }
  .help-copy-btn,
  .help-mailto-btn    { margin-left: 0; }

  .pref-row   { gap: var(--space-2); }
  .pref-title { font-size: 0.78rem; }
  .pref-desc  { font-size: 0.68rem; }

  .signup-header-row  { gap: var(--space-2); }
  .signup-header-icon { width: 36px; height: 36px; }
  .signup-main-title  { font-size: 1rem; }
  .signup-main-sub    { font-size: 0.7rem; }
  .step-section-label { font-size: 0.65rem; }
  .phone-input-wrap   { gap: var(--space-1); }
  .phone-code-select  { min-width: 80px; font-size: 0.75rem; }
}

/* ── Prevent hover transforms on touch devices ───────────── */
@media (hover: none) {
  .card:hover,
  .stat-card:hover,
  .reports-stat-card:hover,
  .vitals-card:hover,
  .streak-card:hover,
  .badge-item.badge-unlocked:hover,
  .suggestions-list li:hover,
  .sidebar-link:hover { transform: none; }
}

/* ── Specific overflow guards ────────────────────────────── */
/* Ensure nothing inside a card blows past its boundary */
@media (max-width: 768px) {
  .card,
  .stat-card,
  .reports-stat-card { overflow: hidden; }

  /* schedule, history, vitals tables need the outer wrapper */
  .history-table-card,
  .reports-chart-card { overflow: visible; }
}

/* Chips / badge strips that could overflow */
@media (max-width: 480px) {
  .ai-chips,
  .upload-formats,
  .vitals-period-tabs,
  .tabs { flex-wrap: wrap; }
}

/* Prescription debug box on narrow screens */
@media (max-width: 480px) {
  .prescription-debug-pre { font-size: 0.68rem; }
}

/* ── 320 px — absolute minimum width pass ────────────────── */
@media (max-width: 320px) {
  :root {
    --space-3: 10px;
    --space-4: 14px;
    --space-5: 18px;
  }
  .main-content      { padding: var(--space-2); }
  .card              { padding: var(--space-3); border-radius: var(--radius-md); }
  .stats-row         { grid-template-columns: 1fr 1fr; gap: var(--space-1); }
  .stat-card         { padding: var(--space-2); }
  .stat-value        { font-size: 0.95rem; }
  .stat-label        { font-size: 0.58rem; }
  .greeting-row      { padding: var(--space-2); }
  .greeting-title    { font-size: 0.88rem; }
  .notif-panel       { right: 2px; left: 2px; }
  .profile-dropdown  { right: 2px; max-width: calc(100vw - 4px); }
  .bmi-value-number  { font-size: 1.6rem; }
  .page-title        { font-size: 0.95rem; }
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .sidebar, .topnav, .toast-container,
  .hamburger-fab, .menu-overlay,
  .export-controls, .export-btn,
  .vitals-period-tabs { display: none !important; }
  .main-content { padding: 0; }
  .app-shell    { display: block; }
  .card         { box-shadow: none; border: 1px solid #ccc; }
}

/* ── AI Chat — keyboard & scroll fix (mobile) ────────────── */
/*
   ROOT CAUSES:
   1. On Android Chrome, 100vh does NOT shrink when the virtual keyboard
      opens. The JS-driven --app-viewport-height variable (set from
      window.visualViewport.height) already updates correctly, but
      min-height:var(--app-viewport-height,100dvh) on .app-shell was
      re-pinning the container to the pre-keyboard height.
      Fixed in style.css: min-height:0 on .app-shell (height alone sets
      the size; min-height must not re-assert the old value).
   2. Document-level scroll was competing with the chat-panel scroll on
      mobile, causing awkward dual-scroll behavior.
   3. The medical disclaimer could push the composer off-screen on very
      short viewports (e.g. 320px height after keyboard opens).
*/
@media (max-width: 768px) {
  /* Prevent the document from scrolling while the AI chat is active.
     The chat-messages region is the ONE scroll area.
     :has() is supported on all modern browsers (Chrome 105+, Safari 15.4+). */
  html:has(body.view-ai) {
    overflow: hidden;
  }
}

/* Hide the medical disclaimer on very short viewports (keyboard open on
   small phones) so the composer is never pushed off-screen. The disclaimer
   is still visible when the keyboard is closed. */
@media (max-width: 768px) and (max-height: 700px) {
  body.view-ai #ai-view > .ai-disclaimer-card {
    display: none;
  }
}


   Issues addressed:
   1. Today's Medicines — stacked cards, no horizontal scroll
   2. Sidebar — sticky footer, nav scrolls, 100dvh enforced
   3. Auth pages — icon overlap fix for all inputs
   4. Profile modal — 95vw cap, vertical scroll, stacked buttons
   5. Full audit pass — Dashboard, Reports, Profile, Notif, Sidebar
   ============================================================ */


/* ── FIX 1: Today's Medicines — Compact card layout on mobile ─────── */
/*
   APPROACH: Convert the desktop table into a compact information-dense
   card on ≤ 767px. Each card uses a 2-column CSS Grid:
     Col 1 (left):  Medicine name (prominent), then dosage + instructions
     Col 2 (right): Time badge + status pill (right-aligned)
   Action buttons live in a slim horizontal row at the bottom of the card.

   This eliminates the tall label-per-row pattern and makes each card
   roughly 90–110px tall instead of 250px+. No JS changes needed.
*/
@media (max-width: 767px) {

  /* ── 1. Kill the table wrapper's horizontal scroll ── */
  .table-wrapper {
    overflow-x: visible;
  }

  /* ── 2. Turn every table element into a block so CSS grid works ── */
  #schedule-table,
  #schedule-table thead,
  #schedule-table tbody,
  #schedule-table tr,
  #schedule-table td,
  #schedule-table th {
    display: block !important;
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
  }
  #schedule-table {
    min-width: 0;
    width: 100%;
  }
  #schedule-table tbody td:last-child {
    width: auto;
    white-space: normal;
  }

  /* ── 3. Hide the desktop column headers ── */
  #schedule-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
    visibility: hidden;
  }

  /* ── 4. Each row → compact card ── */
  #schedule-table tbody tr {
    display: grid;
    width: 100%;
    /* [name+dosage+instructions] | [time+status] */
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    /*  td order:  1=time  2=name  3=dosage  4=instructions  5=status  6=actions */
    grid-template-areas:
      "med   time"
      "dose  status"
      "instr instr"
      "acts  acts";
    column-gap: 10px;
    row-gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    padding: 10px 12px 8px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
  }

  /* Subtle left accent stripe based on status */
  #schedule-table tbody tr::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--border);
    border-radius: 3px 0 0 3px;
  }

  /* ── 5. Hide all pseudo-element labels (we use grid layout instead) ── */
  #schedule-table tbody td::before {
    display: none !important;
    content: "" !important;
  }

  /* ── 6. Place each cell into the named grid area ── */

  /* td:nth-child(1) = Time  →  top-right */
  #schedule-table tbody td:nth-child(1) {
    grid-area: time;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary);
    text-align: right;
    white-space: nowrap;
    padding-top: 1px;
    align-self: start;
  }

  /* td:nth-child(2) = Medicine name  →  top-left, prominent */
  #schedule-table tbody td:nth-child(2) {
    grid-area: med;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: normal;
    overflow: visible;
    align-self: start;
    line-height: 1.3;
  }

  /* td:nth-child(3) = Dosage  →  second row left */
  #schedule-table tbody td:nth-child(3) {
    grid-area: dose;
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding-top: 2px;
    align-self: center;
  }

  /* td:nth-child(4) = Instructions  →  third row, spans both cols */
  #schedule-table tbody td:nth-child(4) {
    grid-area: instr;
    font-size: 0.72rem;
    color: var(--text-muted);
    padding-top: 3px;
    padding-bottom: 6px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    /* prefix the instructions inline so we don't need a label row */
  }
  #schedule-table tbody td:nth-child(4):not(:empty)::after {
    /* nothing — we'll use a data-prefix approach via content below */
    display: none;
  }

  /* td:nth-child(5) = Status pill  →  second row right */
  #schedule-table tbody td:nth-child(5) {
    grid-area: status;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 2px;
  }

  #schedule-table tbody td:nth-child(5) .status-pill {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    line-height: 1.4;
  }

  /* td:nth-child(6) = Action buttons  →  bottom row, spans both cols */
  #schedule-table tbody td:nth-child(6) {
    grid-area: acts;
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
    padding-top: 7px;
    display: flex;
    align-items: center;
  }

  /* Action wrapper: horizontal row, right-aligned, compact */
  #schedule-table tbody td:nth-child(6) .action-cell {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    justify-content: flex-end;
  }

  /* Action buttons: compact pill, not full-width */
  #schedule-table tbody td:nth-child(6) .action-btn {
    width: auto;
    flex: 1 1 90px;
    min-width: 80px;
    max-width: 120px;
    min-height: 32px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 12px;
    text-align: center;
    justify-content: center;
    border-radius: var(--radius-full);
  }

  /* ── 7. Dark mode — left accent stripe uses status color ── */
  #schedule-table tbody tr:has(.status-taken)::before   { background: var(--success); }
  #schedule-table tbody tr:has(.status-missed)::before  { background: var(--danger); }
  #schedule-table tbody tr:has(.status-pending)::before { background: var(--warning); }
}

/* ── FIX 1b: Small phone refinements (≤ 480px) ── */
@media (max-width: 480px) {
  #schedule-table tbody tr {
    padding: 9px 10px 7px;
    margin-bottom: 8px;
  }

  #schedule-table tbody td:nth-child(2) { font-size: 0.84rem; }
  #schedule-table tbody td:nth-child(3) { font-size: 0.72rem; }
  #schedule-table tbody td:nth-child(4) { font-size: 0.68rem; }

  #schedule-table tbody td:nth-child(6) .action-btn {
    min-width: 72px;
    font-size: 0.68rem;
    padding: 4px 10px;
    min-height: 30px;
  }
}

/* ── FIX 1c: Very small phones (≤ 375px) ── */
@media (max-width: 375px) {
  #schedule-table tbody tr {
    padding: 8px 9px 6px;
    column-gap: 6px;
  }

  #schedule-table tbody td:nth-child(2) {
    font-size: 0.8rem;
  }

  #schedule-table tbody td:nth-child(6) .action-cell {
    gap: 5px;
  }

  #schedule-table tbody td:nth-child(6) .action-btn {
    min-width: 64px;
    padding: 4px 8px;
    font-size: 0.67rem;
  }
}


/* ── FIX 2: Sidebar — no-scroll fit on all mobile phones ───────── */
/*
   ROOT CAUSE:
   1. `height: 100dvh` on the sidebar measures the full browser viewport
      including the browser's address bar and navigation chrome. On Android
      Chrome this leaves ~128px less visible space, so the sidebar footer
      can fall off-screen while overflow:hidden hides it.
   2. `min-height: 44px` on every sidebar-link (from the touch-target rule
      in style.css) makes each of the 9 links tall enough that the total
      content height can exceed the visible drawer area.

   FIX:
   - Switch to `100dvh` (dynamic viewport height — excludes browser chrome).
   - Reduce sidebar link height to 40px on mobile (still fully accessible).
   - Tighten nav/footer padding and gaps so all 9 items fit in ≤ 600px.
   - Keep `.sidebar-footer` pinned with `flex-shrink: 0` so it never scrolls.
   - Desktop layout (≥ 1025px) is completely unchanged.
*/
@media (max-width: 1024px) {

  /* ── 1. Use dynamic viewport height so browser chrome is excluded ── */
  .sidebar {
    height: 100dvh !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
  }

  /* ── 2. Nav occupies remaining space and scrolls only if truly needed ── */
  .sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;           /* critical — lets flex shrink below content size */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }

  /* ── 3. Footer always pinned — never scrolls away ── */
  .sidebar-footer {
    flex-shrink: 0;
    z-index: 1;
    background: var(--surface);
    border-top: 1px solid var(--border);
  }
}

/* ── Mobile phones (≤ 768px): compact sizing to fit all items on screen ── */
/*
   Height budget for 360×800 (worst case — ~660px usable after browser chrome):
     Nav padding top/bottom:  10 + 8  = 18px
     7 nav links × 40px       = 280px
     6 gaps × 2px             = 12px
     Footer border + padding: = 29px  (1 + 10 + 8 + 10)
     2 footer links × 40px    = 80px
     1 footer gap × 2px       = 2px
     TOTAL                    ≈ 421px  ← well within 660px
*/
@media (max-width: 768px) {

  /* Compact nav padding */
  .sidebar-nav {
    padding: 10px var(--space-3) 8px;
    gap: 2px;
  }

  /* Reduce each nav link height: 40px is large enough to tap comfortably */
  .sidebar-link {
    padding: 8px var(--space-3) !important;
    min-height: 40px !important;
    font-size: 0.8rem;
    gap: var(--space-2);
  }

  /* Icons: 15px saves 2px per link while remaining readable */
  .nav-icon {
    width: 15px;
    height: 15px;
  }

  /* Compact footer padding */
  .sidebar-footer {
    padding: 8px var(--space-3) 10px;
    gap: 2px;
  }

  /* Dark mode toggle row mirrors nav link sizing */
  .sidebar-theme-row {
    padding: 8px var(--space-3) !important;
    min-height: 40px !important;
    font-size: 0.8rem;
    gap: var(--space-2);
  }

  .sidebar-theme-label {
    font-size: 0.8rem;
  }

  /* Section label (if any): tighter margins */
  .nav-section-label {
    padding: var(--space-2) var(--space-2) var(--space-1);
    margin-top: var(--space-2);
    margin-bottom: 0;
    font-size: 0.6rem;
  }
}

/* ── Extra compact for shortest common Android screen (360×640) ── */
@media (max-width: 768px) and (max-height: 680px) {
  .sidebar-link,
  .sidebar-theme-row {
    padding: 6px var(--space-3) !important;
    min-height: 36px !important;
    font-size: 0.76rem;
  }

  .sidebar-nav { padding: 8px var(--space-3) 6px; gap: 1px; }
  .sidebar-footer { padding: 6px var(--space-3) 8px; gap: 1px; }

  .nav-icon { width: 14px; height: 14px; }
  .sidebar-theme-label { font-size: 0.76rem; }
}

/* Scrollbar styling for webkit (Chrome, Safari, Edge) */
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }


/* ── FIX 3: Auth pages — icon overlap on email/password ───── */
/*
   Issue: on some devices the icon and the input text overlap.
   Root cause: height:42px on the input but top-centering of the
   icon via position:absolute relies on the parent flex alignment.
   Fix: force absolute vertical centering and ensure left padding
   is always enough for the icon.
*/
.input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* Icon: always vertically centred, never moves */
.input-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
  flex-shrink: 0;
  z-index: 2;
}

/* All icon-wrapped inputs: guaranteed left padding */
.input-icon-wrap input,
.input-icon-wrap input[type="email"],
.input-icon-wrap input[type="password"],
.input-icon-wrap input[type="text"],
.input-icon-wrap input[type="date"],
.input-icon-wrap input[type="tel"] {
  padding-left: 40px !important;
  padding-right: 13px;
}

/* Mobile: bigger touch target, keep 16px font to prevent iOS zoom */
@media (max-width: 768px) {
  .input-icon-wrap input,
  .input-icon-wrap input[type="email"],
  .input-icon-wrap input[type="password"],
  .input-icon-wrap input[type="text"],
  .input-icon-wrap input[type="date"],
  .input-icon-wrap input[type="tel"] {
    min-height: 48px;
    font-size: 16px;            /* prevent iOS auto-zoom */
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 42px !important;
  }

  .input-icon {
    left: 13px;
    width: 17px;
    height: 17px;
  }
}

@media (max-width: 375px) {
  .input-icon-wrap input,
  .input-icon-wrap input[type="email"],
  .input-icon-wrap input[type="password"],
  .input-icon-wrap input[type="text"],
  .input-icon-wrap input[type="date"],
  .input-icon-wrap input[type="tel"] {
    padding-left: 40px !important;
    font-size: 16px;
  }
}

/* Auth card itself must never overflow the viewport */
@media (max-width: 540px) {
  .auth-page {
    padding: var(--space-4) var(--space-3);
    min-height: 100dvh;          /* dvh = dynamic viewport height (iOS) */
  }

  .auth-card {
    width: 100%;
    max-width: 100%;
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-lg);
    box-sizing: border-box;
  }

  /* Forgot password link — ensure it stays on its own line */
  .auth-forgot-row {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  /* Auth submit button — full width, easy tap */
  .auth-submit-btn,
  .signup-submit-btn {
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
  }

  /* Tabs strip on auth page */
  .tabs {
    width: 100%;
  }

  .tab-btn {
    flex: 1;
    min-height: 44px;
  }
}


/* ── FIX 4: Profile Settings modal — compact mobile sheet ─────── */
/*
   APPROACH: Slide up from the bottom as a sheet on all phones.
   Compact the avatar header, tighten field spacing, keep buttons
   sticky at the bottom in a slim row. The desktop modal (≥769px)
   is completely unchanged.
*/
@media (max-width: 768px) {

  /* Overlay: sheet from the bottom, no side padding */
  .modal {
    align-items: flex-end;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Modal box: full width, top-rounded corners, max height capped to the safe viewport.
     Use the actual wrapper height as a fallback when 100dvh can overshoot Android browser chrome.
     This prevents the sheet from extending below the visible screen and hiding the sticky footer. */
  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px), 100%);
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Compact header: tighter padding, no wasted vertical space */
  .modal-header {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }

  .modal-header-icon {
    width: 32px;
    height: 32px;
  }

  .modal-header-icon svg {
    width: 16px;
    height: 16px;
  }

  .modal-title    { font-size: 0.88rem; }
  .modal-subtitle { font-size: 0.68rem; }

  /* Body scrolls independently so header and footer stay visible */
  .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 14px;
    padding-bottom: calc(12px + 96px);
  }

  /* Footer stays visible while the body scrolls beneath it */
  .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
  }

  /* Avatar row: compact horizontal layout, reduce height significantly */
  .profile-avatar-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 10px;
    border-radius: var(--radius-md);
  }

  .profile-avatar-preview {
    width: 38px;
    height: 38px;
    font-size: 1rem;
    flex-shrink: 0;
  }

  .profile-avatar-name { font-size: 0.82rem; margin-bottom: 1px; }
  .profile-avatar-role { font-size: 0.68rem; margin-top: 0; }

  /* Section label: tighter */
  .modal-section-label {
    font-size: 0.62rem;
    margin: 8px 0 6px;
  }

  /* Form: single column, compact row gaps */
  .modal-form-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Form fields: reduce label+input height */
  .modal-body .form-group {
    margin-bottom: 0;
  }

  .modal-body .form-group label {
    font-size: 0.72rem;
    margin-bottom: 3px;
    display: block;
  }

  .modal-body .form-group input,
  .modal-body .form-group select {
    font-size: 0.85rem;
    padding: 8px 10px;
    min-height: 40px;
    border-radius: var(--radius-md);
  }

  /* Footer: sticky at the bottom, slim horizontal layout */
  .modal-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 14px;
    flex-shrink: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    justify-content: stretch;
    box-sizing: border-box;
    width: 100%;
  }

  /* Save button: flex-grow takes more space, Cancel is narrower */
  .modal-btn-primary {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
    min-height: 42px;
    font-size: 0.82rem;
    text-align: center;
    justify-content: center;
    border-radius: var(--radius-full);
    box-sizing: border-box;
  }

  .modal-btn-secondary {
    flex: 0 0 auto;
    width: auto;
    min-width: 80px;
    min-height: 42px;
    font-size: 0.82rem;
    text-align: center;
    justify-content: center;
    border-radius: var(--radius-full);
    box-sizing: border-box;
  }

  .modal-btn-danger {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
    min-height: 42px;
    font-size: 0.82rem;
    text-align: center;
    justify-content: center;
    border-radius: var(--radius-full);
    box-sizing: border-box;
  }

  /* Legal modals share the same sheet behavior as generic modals on phones */
  .legal-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .legal-modal {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px);
    border-radius: 16px 16px 0 0;
    margin: 0;
  }

  .legal-modal-header {
    padding: 12px 14px 10px;
  }

  .legal-modal-body {
    min-height: 0;
    padding: 12px 14px;
    padding-bottom: calc(12px + 96px);
  }

  .legal-modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 10px 14px 14px;
    flex-direction: column-reverse;
    gap: 10px;
    background: var(--surface);
  }

  .legal-modal-footer .primary-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Slightly larger phones (480px–768px): centered card instead of sheet ── */
@media (min-width: 480px) and (max-width: 768px) {
  .modal {
    align-items: center;
    padding: var(--space-3);
  }
  .modal-box {
    max-width: 460px !important;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px);
    border-radius: var(--radius-xl);
  }

  .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
  }
}

/* ── Extra-small phones (≤ 375px): squeeze padding further ── */
@media (max-width: 375px) {
  .modal-box       { max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px); }
  .modal-header    { padding: 10px 12px 8px; }
  .modal-body      { padding: 10px 12px; padding-bottom: calc(10px + 96px); }
  .modal-footer    { position: sticky; bottom: 0; z-index: 2; padding: 8px 12px 12px; gap: 6px; }

  .modal-body .form-group input,
  .modal-body .form-group select {
    font-size: 0.82rem;
    padding: 7px 9px;
    min-height: 38px;
  }

  .modal-btn-primary,
  .modal-btn-secondary,
  .modal-btn-danger { min-height: 40px; font-size: 0.78rem; box-sizing: border-box; }

  .profile-avatar-preview { width: 34px; height: 34px; font-size: 0.9rem; }

  .modal-form-grid { gap: 6px; }
  .modal-section-label { font-size: 0.6rem; margin: 6px 0 4px; }
}


/* ── FIX 5: Full audit — Dashboard ───────────────────────── */

/* Greeting row: never overflows */
@media (max-width: 767px) {
  .greeting-row {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Stats row: 2 columns on all small phones */
  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-3);
  }

  /* Ensure stat cards never shrink text to illegibility */
  .stat-card {
    min-width: 0;
    overflow: hidden;
  }

  .stat-value { font-size: clamp(0.9rem, 4vw, 1.5rem); }
  .stat-label { font-size: clamp(0.58rem, 2.5vw, 0.72rem); }
}

@media (max-width: 380px) {
  .stats-row { gap: var(--space-2); }
  .stat-card { padding: var(--space-2); }
}

/* Dashboard main grid single column */
@media (max-width: 767px) {
  .dashboard-main-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-4);
  }

  /* Chart height must be explicit to prevent collapse */
  .chart-container canvas {
    max-height: 200px;
  }
}


/* ── FIX 5b: Full audit — Medicines page ─────────────────── */
@media (max-width: 767px) {
  /* "Add medicine" page: header row wraps cleanly */
  .addmed-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* Upload zone: never causes horizontal scroll */
  .upload-dropzone {
    width: 100%;
    box-sizing: border-box;
  }

  /* Form sections: single column */
  .form-grid-2,
  .form-grid-3 {
    grid-template-columns: 1fr !important;
  }

  /* Submit button full width */
  .submit-med-btn {
    width: 100%;
    min-height: 48px;
  }
}


/* ── FIX 5c: Full audit — Reports page ───────────────────── */
@media (max-width: 767px) {
  .reports-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .reports-header-right {
    width: 100%;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* Period tabs: scrollable strip */
  .reports-period-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-1);
    padding-bottom: 2px; /* room for scrollbar */
    scrollbar-width: none; /* hide thin scrollbar */
  }
  .reports-period-tabs::-webkit-scrollbar { display: none; }

  .reports-stat-card { min-width: 0; overflow: hidden; }

  /* Charts never overflow card */
  .reports-chart-wrapper {
    width: 100%;
    overflow: hidden;
  }

  .export-controls {
    width: 100%;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* Export button takes full width on narrow phones */
  .export-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .export-btn {
    flex: 1 1 100%;
  }
}


/* ── FIX 5d: Full audit — Profile modal (all sub-sections) ── */
@media (max-width: 767px) {

  /* Profile avatar row: centre and stack */
  .profile-avatar-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
  }

  /* Profile form sections */
  .profile-form-section {
    grid-template-columns: 1fr !important;
  }

  /* Emergency contact wrap on small screens */
  .phone-input-wrap {
    flex-wrap: wrap;
  }

  .phone-code-select {
    min-width: 90px;
    flex-shrink: 0;
  }
}


/* ── FIX 5e: Full audit — Notification Preferences ────────── */
@media (max-width: 767px) {
  /* Preference row: keep toggle always visible */
  .pref-row {
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-3);
  }

  .pref-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .pref-title { font-size: 0.82rem; }
  .pref-desc  { font-size: 0.7rem; word-break: break-word; }

  /* Toggle switch: never wrap below text */
  .toggle-switch {
    flex-shrink: 0;
  }
}


/* ── FIX 5f: Full audit — Login / Signup / Forgot Password ── */
@media (max-width: 540px) {

  /* Forgot password page specific */
  #forgot-password-view .auth-card,
  .forgot-card {
    padding: var(--space-4);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Step nav row in signup: stack on tiny screens */
  .step-nav-row {
    flex-direction: column;
    gap: var(--space-2);
  }

  .step-nav-row .primary-btn,
  .step-nav-row .secondary-btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  /* Role cards: allow wrapping on 320px */
  .role-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .role-card {
    width: 100%;
    box-sizing: border-box;
  }

  /* Gender cards: 2-column grid */
  .gender-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Auth disclaimer: wrap text */
  .auth-disclaimer {
    font-size: 0.72rem;
    flex-wrap: wrap;
    text-align: center;
  }
}

@media (max-width: 380px) {
  .auth-card {
    padding: var(--space-3);
    border-radius: var(--radius-md);
  }

  .auth-brand-name { font-size: 1.2rem; }
  .auth-tagline    { font-size: 0.7rem; }
}


/* ── FIX 5g: Full audit — Sidebar Navigation ─────────────── */
@media (max-width: 1024px) {

  /* Hamburger button: large enough tap target */
  .hamburger-fab {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
  }

  /* When sidebar is open, the overlay catches backdrop taps */
  .menu-overlay.open {
    cursor: pointer;
  }

  /* Sidebar brand/logo area: compact but readable */
  .sidebar-brand {
    padding: var(--space-4) var(--space-3);
    flex-shrink: 0;
  }

  /* Sidebar open: use 100dvh so virtual keyboard doesn't affect height */
  .sidebar.open {
    height: 100dvh !important;
  }
}


@media (max-width: 767px) {
  .app-view,
  .card,
  .page-header,
  .two-col-grid,
  .dashboard-main-grid {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* Any inline flex/grid that hasn't been individually fixed */
  .card-header {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .card-badge {
    flex-shrink: 0;
  }

  button {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  /* Breadcrumb-style page icons */
  .page-icon-wrap { flex-shrink: 0; }

  /* Activity feed items */
  .activity-item {
    flex-wrap: wrap;
  }

  .milestone-meta {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .milestone-name {
    flex: 1;
    min-width: 0;
  }
}


/* ── FIX 5i: History table — card layout on mobile ────────── */
/*
   Same treatment as the schedule table above, applied to
   the dose-history table on the History page.
*/
@media (max-width: 767px) {
  .history-table,
  .history-table thead,
  .history-table tbody,
  .history-table tr,
  .history-table td,
  .history-table th {
    display: block;
  }

  .history-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .history-table tbody tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    box-shadow: var(--shadow-sm);
  }

  .history-table tbody td {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 4px 0;
    font-size: 0.82rem;
    border: none;
    width: 100%;
  }

  .history-table tbody td::before {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    min-width: 86px;
    flex-shrink: 0;
    padding-top: 2px;
  }

  /* nth-child labels for history table */
  .history-table tbody td:nth-child(1)::before { content: "Date"; }
  .history-table tbody td:nth-child(2)::before { content: "Medicine"; }
  .history-table tbody td:nth-child(3)::before { content: "Time"; }
  .history-table tbody td:nth-child(4)::before { content: "Status"; }
  .history-table tbody td:nth-child(5)::before { content: "Notes"; }
}


/* ── 320 px safety pass (augments existing rules) ─────────── */
@media (max-width: 320px) {
  .auth-card      { padding: var(--space-2); }
  .modal-box      { border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .action-btn     { font-size: 0.7rem; padding: 6px 8px; }
  .input-icon-wrap input { padding-left: 38px !important; }
  .pref-row { gap: var(--space-2); }
}


/* ═══════════════════════════════════════════════════════════════
   MASTER FIX — PARTS 4, 5, 9, 10
   Mobile responsiveness, auth light-theme guard, signup form,
   logo alignment, modal body scroll lock
   ═══════════════════════════════════════════════════════════════ */

/* ── PART 4a: intl phone group — stack on narrow screens ────── */
@media (max-width: 480px) {
  /* Phone country picker + input: stack vertically on very small screens */
  .intl-phone-group {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Country picker pill: full width when stacked */
  .intl-country-picker {
    width: 100%;
  }

  .intl-picker-btn {
    width: 100%;
    justify-content: space-between;
    border-radius: var(--radius-lg, 10px);
  }

  /* Phone input: full width below picker */
  .intl-phone-input {
    width: 100%;
    border-radius: var(--radius-lg, 10px);
  }

  /* Dropdown: constrained to screen width */
  .intl-dropdown-menu {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    left: 0;
  }
}

/* ── PART 4b: signup phone + DOB separate rows on narrow screens */
/* Phone and DOB are already in separate form-group divs in the DOM.
   Ensure the form-group stack doesn't get cramped on smallest screens. */
@media (max-width: 400px) {
  #signup-step-2 .form-group + .form-group {
    margin-top: 8px;
  }
}

/* ── PART 4c: password field spacing in signup ───────────────── */
/* Ensure spacing between password and confirm-password fields */
#su-password,
#su-confirm-password {
  /* inherits from existing styles */
}

/* Guaranteed gap between the two password form-groups */
.form-group:has(#su-password) {
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .form-group:has(#su-password) {
    margin-bottom: 14px;
  }
}

/* ── PART 4d: modal body padding-bottom guard ────────────────── */
/* On ≤ 768px the sticky modal footer is ~64px tall.
   The existing padding-bottom: calc(12px + 96px) is generous but
   needs a fallback for browsers that don't support it */
@media (max-width: 768px) {
  .modal-body {
    padding-bottom: max(96px, calc(12px + env(safe-area-inset-bottom, 0px) + 80px));
  }
}

/* ── PART 4e: profile modal phone + dob always full width on mobile */
@media (max-width: 540px) {
  /* Profile Settings form: force single column */
  .modal-form-grid {
    grid-template-columns: 1fr !important;
  }

  /* Emergency contact and phone fields: never too cramped */
  #ps-phone,
  #ps-dob,
  #ps-emergency {
    width: 100%;
    box-sizing: border-box;
  }
}

/* ── PART 4f: no horizontal overflow anywhere ────────────────── */
/* NOTE: a global `* { min-width: 0 }` was here previously but it let table
   action-cells (width: 1%) collapse below their button content, causing the
   Delete / Mark-taken buttons to render blank/clipped. Horizontal-overflow
   prevention is handled by the scoped rules below instead. */

@media (max-width: 768px) {
  .card,
  .page-header,
  .addmed-form-card,
  .upload-card {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
}

/* ── PART 9: Signup confirm-password field — no pw-toggle duplication */
/* The confirm-password field does not have a pw-toggle-btn in HTML,
   so no CSS fix needed. Ensure the field padding is consistent. */
#su-confirm-password {
  padding-right: 16px; /* no toggle button — standard padding */
}

/* ── PART 10: Logo vertical alignment in nav ─────────────────── */
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.brand-logo-circle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-title {
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Auth screen logo consistent sizing */
.auth-brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── PART 5: Auth screens always cream theme guard ───────────── */
/* The JS showAuthView() removes .dark-mode from body.
   This CSS rule adds a hard fallback so auth screens ALWAYS render in DoseBuddy's
   warm cream theme (#E4DDD3 / #f5f1ec), even if body.dark-mode is present or pending. */
#auth-view,
body.dark-mode #auth-view {
  --primary:        #00A19B !important;
  --primary-hover:  #008f89 !important;
  --primary-light:  #e6f7f7 !important;
  --primary-muted:  #b3e5e3 !important;
  --bg:             #E4DDD3 !important;
  --surface:        #f5f1ec !important;
  --border:         #cfc8be !important;
  --border-light:   #e8e3dc !important;
  --text-primary:   #1a1714 !important;
  --text-secondary: #4a4540 !important;
  --text-muted:     #8c8278 !important;
  background: var(--bg, #E4DDD3) !important;
  color: var(--text-primary, #1a1714) !important;
}

#auth-view .auth-brand-panel,
body.dark-mode #auth-view .auth-brand-panel {
  background: #087f78 !important;
  color: #fff !important;
}

#auth-view .auth-brand-headline,
body.dark-mode #auth-view .auth-brand-headline,
#auth-view .auth-brand-title,
body.dark-mode #auth-view .auth-brand-title {
  color: #fff !important;
}

#auth-view .auth-brand-desc,
body.dark-mode #auth-view .auth-brand-desc {
  color: rgba(255, 255, 255, 0.9) !important;
}

#auth-view .auth-brand-footer,
body.dark-mode #auth-view .auth-brand-footer,
#auth-view .auth-brand-footer span,
body.dark-mode #auth-view .auth-brand-footer span {
  color: rgba(255, 255, 255, 0.85) !important;
}

#auth-view .auth-card,
body.dark-mode #auth-view .auth-card {
  background: var(--bg, #E4DDD3) !important;
  color: var(--text-primary, #1a1714) !important;
}

#auth-view .auth-card .form-label,
#auth-view .auth-card label,
#auth-view .auth-card p,
#auth-view .auth-card h1,
#auth-view .auth-card h2,
#auth-view .auth-card h3,
body.dark-mode #auth-view .auth-card .form-label,
body.dark-mode #auth-view .auth-card label,
body.dark-mode #auth-view .auth-card p,
body.dark-mode #auth-view .auth-card h1,
body.dark-mode #auth-view .auth-card h2,
body.dark-mode #auth-view .auth-card h3 {
  color: var(--text-primary, #1a1714) !important;
}

#auth-view .auth-tagline,
#auth-view .auth-subtitle,
#auth-view .small-text,
#auth-view .step-section-label,
body.dark-mode #auth-view .auth-tagline,
body.dark-mode #auth-view .auth-subtitle,
body.dark-mode #auth-view .small-text,
body.dark-mode #auth-view .step-section-label {
  color: var(--text-muted, #8c8278) !important;
}

#auth-view input:not([type="checkbox"]):not([type="radio"]),
#auth-view select,
body.dark-mode #auth-view input:not([type="checkbox"]):not([type="radio"]),
body.dark-mode #auth-view select {
  background: var(--bg, #E4DDD3) !important;
  color: var(--text-primary, #1a1714) !important;
  border-color: var(--border, #cfc8be) !important;
}

#auth-view input:not([type="checkbox"]):not([type="radio"]):focus,
#auth-view select:focus,
body.dark-mode #auth-view input:not([type="checkbox"]):not([type="radio"]):focus,
body.dark-mode #auth-view select:focus {
  background: var(--surface, #f5f1ec) !important;
  border-color: var(--primary, #00A19B) !important;
  box-shadow: 0 0 0 3px rgba(0,161,155,0.12) !important;
}

/* ── PRX MODAL mobile ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .prx-modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .prx-modal-box {
    width: 100%;
    max-width: 100%;
    max-height: calc(92dvh - env(safe-area-inset-bottom, 0px));
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
  }

  .prx-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    padding-bottom: 80px; /* room above sticky footer */
  }

  .prx-modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Reminder Delivery Health panel (modal-notif) ──────────────────────────── */
@media (max-width: 480px) {
  .notif-health-row {
    flex-direction: column;
    gap: 6px;
  }
  .notif-health-copy {
    flex-basis: auto;
  }
  .notif-health-action-row .notif-health-action-btn {
    width: 100%;
  }
}

/* ── Laptop Responsive Rules (1024px–1280px) ───────────────── */
@media (max-width: 1280px) and (min-width: 961px) {
  .auth-page {
    width: min(1020px, calc(100vw - 48px)) !important;
    min-height: 680px !important;
  }
  .auth-brand-panel {
    padding: 36px 30px 28px 30px !important;
  }
  .auth-card {
    padding: 38px 36px !important;
  }
  .auth-illustration-card {
    max-width: 350px !important;
  }
}

/* ── Split Screen Auth Layout Responsive Rules ───────────────── */
@media (max-width: 960px) {
  #auth-view.active {
    padding: 24px 16px !important;
  }
  .auth-page {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 500px !important;
    border-radius: 20px !important;
    min-height: auto !important;
    margin: 16px auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .auth-brand-panel {
    padding: 24px 22px 20px 22px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  }
  .auth-brand-badge {
    margin-bottom: 12px !important;
  }
  .auth-brand-headline {
    font-size: 1.35rem !important;
    margin-bottom: 6px !important;
  }
  .auth-brand-desc {
    font-size: 0.85rem !important;
    margin-bottom: 0 !important;
  }
  .auth-brand-illustration-wrap {
    display: none !important; /* Hide illustration on mobile for focused form access */
  }
  .auth-brand-footer {
    display: none !important;
  }
  .auth-card {
    padding: 24px 22px !important;
  }
  #auth-view #auth-title {
    font-size: 1.4rem !important;
  }
}

@media (max-width: 480px) {
  #auth-view.active {
    padding: 12px 10px !important;
    align-items: flex-start !important;
  }
  .auth-page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px auto 20px !important;
    border-radius: 16px !important;
    padding: 0 !important;
  }
  .auth-brand-panel {
    padding: 20px 16px 16px 16px !important;
  }
  .auth-card {
    padding: 20px 16px !important;
  }
  #auth-view .input-icon-wrap input,
  #auth-view .intl-phone-input {
    height: 44px !important;
    font-size: 0.88rem !important;
  }
}

@media (max-width: 360px) {
  .auth-brand-headline {
    font-size: 1.2rem !important;
  }
  .auth-brand-title {
    font-size: 1.15rem !important;
  }
  .auth-card {
    padding: 16px 12px !important;
  }
  #auth-view .tabs .tab-btn {
    font-size: 0.82rem !important;
    padding: 8px 0 !important;
  }
}