/* ─── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:        #fdf6ee;
  --cream-dark:   #f5ead8;
  --cream-border: #e8d9c0;
  --brown:        #4a3728;
  --brown-mid:    #7a5c45;
  --brown-light:  #a07850;
  --alert-bg:     #fff0e0;
  --alert-border: #e07020;
  --alert-text:   #8b3a00;
  --accent:       #c4763a;
  --white:        #ffffff;
  --shadow:       rgba(74, 55, 40, 0.10);
  --radius:       12px;
  --radius-sm:    8px;
  font-size: 16px;
}

html, body {
  height: 100%;
  background: var(--cream);
  color: var(--brown);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
}

/* ─── Views ────────────────────────────────────────────────────── */
.view { display: none; }
.view.active { display: block; }

/* ─── Profile Card ─────────────────────────────────────────────── */
.profile-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 12px var(--shadow);
  padding: 20px;
  margin: 16px 16px 12px;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.05em;
}

.profile-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brown);
  line-height: 1.2;
}

.profile-meta {
  font-size: 0.9rem;
  color: var(--brown-mid);
  margin-top: 2px;
}

/* ─── DO NOT Alerts ────────────────────────────────────────────── */
.do-not-alerts {
  background: var(--alert-bg);
  border: 2px solid var(--alert-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.do-not-title {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--alert-text);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.do-not-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.do-not-list li {
  font-size: 0.88rem;
  color: var(--alert-text);
  padding-left: 18px;
  position: relative;
  line-height: 1.4;
}

.do-not-list li::before {
  content: "✕";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--alert-border);
}

/* ─── Mobile Nav Buttons ───────────────────────────────────────── */
.section-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 24px;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 1rem;
  color: var(--brown);
  cursor: pointer;
  text-align: left;
  box-shadow: 0 1px 4px var(--shadow);
  transition: background 0.15s, box-shadow 0.15s;
  width: 100%;
}

.nav-btn:hover, .nav-btn:focus-visible {
  background: var(--cream-dark);
  box-shadow: 0 2px 8px var(--shadow);
  outline: none;
}

.nav-btn:active { background: var(--cream-border); }

.nav-icon { font-size: 1.15rem; }

.nav-btn span:nth-child(2) { flex: 1; font-weight: 500; }

.nav-arrow {
  color: var(--brown-light);
  font-size: 1.3rem;
  font-weight: 300;
}

/* ─── Accordion (hidden on mobile) ─────────────────────────────── */
.accordion-container { display: none; }

/* ─── Mobile Detail View ───────────────────────────────────────── */
.detail-header {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--white);
}

/* Full-width tappable back bar */
.back-btn {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  background: var(--cream-dark);
  border: none;
  border-bottom: 1px solid var(--cream-border);
  color: var(--accent);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  padding: 14px 24px;
  min-height: 52px;
  -webkit-tap-highlight-color: transparent;
}

.back-label {
  letter-spacing: 0.04em;
  text-align: center;
}

.back-arrow {
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
}

.back-arrow:first-child { justify-self: start; }
.back-arrow:last-child  { justify-self: end; }

.back-btn:hover,
.back-btn:focus-visible {
  background: var(--cream-border);
  color: var(--brown);
  outline: none;
}
.back-btn:active { background: #e0cdb0; }

/* Non-tappable title row below the back bar */
.detail-title-bar {
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--cream-border);
  background: var(--white);
}

.detail-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brown);
  margin: 0;
}

.detail-body {
  padding: 16px;
}

/* ─── Medications ────────────────────────────────────────────────── */
.med-toggle {
  display: block;
  width: 100%;
  padding: 10px 16px;
  margin-bottom: 12px;
  background: var(--cream-dark);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius-sm);
  color: var(--brown-mid);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, color 0.15s;
}

.med-toggle:hover {
  background: var(--cream-border);
  color: var(--brown);
}

.med-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--cream-border);
  border-radius: var(--radius-sm);
}

.med-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.med-table th {
  text-align: left;
  padding: 8px 14px;
  background: var(--cream-dark);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brown-light);
  border-bottom: 1px solid var(--cream-border);
  white-space: nowrap;
  hyphens: none;
}

.med-table td {
  padding: 11px 14px;
  color: var(--brown);
  border-bottom: 1px solid var(--cream-dark);
  vertical-align: top;
  /* Global wrapping rule: break only at word boundaries;
     split a single token only when it cannot fit the column at all;
     never hyphenate. Applies on desktop, tablet, and phone. */
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: none;
}

.med-table-fixed { table-layout: fixed; }
.med-nowrap { white-space: nowrap; }

.med-table tbody tr:last-child td { border-bottom: none; }
.med-table td:first-child { font-weight: 600; }

/* Extra columns: hidden until table has .expanded class */
.med-table .med-extra { display: none; }
.med-table.expanded .med-extra { display: table-cell; }

/* ─── Cards ─────────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px var(--shadow);
}

.card-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--cream-dark);
}

.card-row:last-child { border-bottom: none; }

.card-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brown-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 110px;
  padding-top: 1px;
  flex-shrink: 0;
}

.card-value {
  font-size: 0.9rem;
  color: var(--brown);
  flex: 1;
}

.card-primary {
  font-weight: 600;
  color: var(--brown);
}

.card-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
  flex: 1;
}
.card-link:hover { text-decoration: underline; }

/* ─── Contacts sub-buttons ──────────────────────────────────────── */
.contact-subbtn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--brown);
  cursor: pointer;
  text-align: left;
  box-shadow: 0 1px 4px var(--shadow);
  transition: background 0.15s, box-shadow 0.15s;
  margin-bottom: 8px;
}

.contact-subbtn:last-child { margin-bottom: 0; }

.contact-subbtn:hover {
  background: var(--cream-dark);
  box-shadow: 0 2px 8px var(--shadow);
}

.contact-subbtn-icon { font-size: 1.15rem; }
.contact-subbtn span:nth-child(2) { flex: 1; }

/* ─── Contacts back button (desktop only) ───────────────────────── */
.contact-back-btn {
  display: none; /* hidden on mobile — top back bar handles it */
}

@media (min-width: 768px) {
  .contact-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--cream-border);
    border-radius: var(--radius-sm);
    padding: 7px 14px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--brown-mid);
    cursor: pointer;
    margin-bottom: 16px;
    transition: background 0.15s, color 0.15s;
  }

  .contact-back-btn:hover {
    background: var(--cream-dark);
    color: var(--brown);
  }
}

/* ─── Physical Attributes ───────────────────────────────────────── */
.physical-list {
  background: var(--white);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 12px;
}

.physical-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--cream-dark);
}

.physical-row:last-child { border-bottom: none; }

.physical-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brown-light);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 110px;
}

.physical-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brown);
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}

.physical-other {
  background: var(--white);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.physical-other-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brown-light);
  background: var(--cream-dark);
  padding: 8px 16px;
  border-bottom: 1px solid var(--cream-border);
}

.physical-other-text {
  font-size: 0.9rem;
  color: var(--brown);
  padding: 12px 16px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* ─── Badges ─────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.badge-severe   { background: #fde8e8; color: #9b1c1c; border: 1px solid #f5a0a0; }
.badge-moderate { background: #fff3e0; color: #92400e; border: 1px solid #fbbf5a; }
.badge-mild     { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }

/* ─── Timing Badges ─────────────────────────────────────────────── */
/* Base badge — displayed in the Time of day column */
.timing-badge {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 3px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.timing-badge:last-child { margin-bottom: 0; }

/* Morning — warm amber */
.timing-morning            { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

/* Breakfast group — sage green (lighter → darker) */
.timing-breakfast-before   { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.timing-breakfast-with     { background: #dcfce7; color: #14532d; border: 1px solid #86efac; }
.timing-breakfast-after    { background: #bbf7d0; color: #14532d; border: 1px solid #4ade80; }

/* Lunch group — sky blue (lighter → darker) */
.timing-lunch-before       { background: #f0f9ff; color: #0c4a6e; border: 1px solid #bae6fd; }
.timing-lunch-with         { background: #e0f2fe; color: #0c4a6e; border: 1px solid #7dd3fc; }
.timing-lunch-after        { background: #bae6fd; color: #0c4a6e; border: 1px solid #38bdf8; }

/* Evening meal group — lavender (lighter → darker) */
.timing-evening-before     { background: #faf5ff; color: #6b21a8; border: 1px solid #e9d5ff; }
.timing-evening-with       { background: #f3e8ff; color: #6b21a8; border: 1px solid #d8b4fe; }
.timing-evening-after      { background: #e9d5ff; color: #581c87; border: 1px solid #c084fc; }

/* Before bed — soft slate */
.timing-bed                { background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; }

/* ─── Medication / supplement strength ─────────────────────────── */
/* Shown below the item name in view-mode table cells */
.med-strength {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--brown-mid);
  margin-top: 1px;
}

/* Inline version used in the timing edit form next to the item name */
.med-strength-inline {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--brown-mid);
  margin-left: 4px;
}

/* ─── Section timing edit ───────────────────────────────────────── */
/* Row holding the More Info toggle and Edit Timing button side-by-side */
.section-btn-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

/* Med toggle becomes a flex child — no longer full-width */
.section-btn-row .med-toggle {
  flex: 1;
  margin-bottom: 0;
  width: auto;
}

.section-edit-btn {
  background: none;
  border: 1px solid var(--cream-border);
  border-radius: var(--radius-sm);
  color: var(--brown-light);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.section-edit-btn:hover {
  background: var(--cream-dark);
  color: var(--brown);
}

/* Edit form: list of per-item rows */
.timing-edit-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.timing-edit-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.timing-edit-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brown);
}

.timing-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--cream-border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--brown);
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  appearance: auto;
}

.timing-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(196, 118, 58, 0.15);
}

/* Multiple dropdowns per row (items with more than one timing slot) */
.timing-select-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ─── Profile edit form ─────────────────────────────────────────── */

/* Edit button — sits bottom-right of the profile card view */
.profile-edit-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.profile-edit-btn {
  background: none;
  border: 1px solid var(--cream-border);
  border-radius: var(--radius-sm);
  color: var(--brown-light);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 16px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.profile-edit-btn:hover {
  background: var(--cream-dark);
  color: var(--brown);
}

/* Each label + input pair */
.edit-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}

.edit-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brown-light);
}

/* Subdued hint text next to the label */
.edit-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72rem;
}

/* Shared style for all inputs and the textarea */
.edit-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--cream-border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--brown);
  font-size: 0.9rem;
  font-family: inherit;
  line-height: 1.5;
}

.edit-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(196, 118, 58, 0.15);
}

/* Age field — narrow so it doesn't stretch full width */
.edit-input-narrow { max-width: 100px; }

/* DO NOT textarea */
.edit-textarea {
  resize: vertical;
  min-height: 110px;
}

/* Save / Cancel row */
.edit-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 6px;
}

.btn-save {
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 9px 24px;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-save:hover { background: var(--brown-mid); }

.btn-cancel {
  background: none;
  border: 1px solid var(--cream-border);
  border-radius: var(--radius-sm);
  color: var(--brown-mid);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 9px 24px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.btn-cancel:hover {
  background: var(--cream-dark);
  color: var(--brown);
}

/* ─── Desktop Layout (≥768px) ──────────────────────────────────── */
@media (min-width: 768px) {

  body { background: var(--cream-dark); }

  #main-view {
    max-width: 980px;
    margin: 32px auto;
    padding: 0 16px 40px;
  }

  .profile-card {
    margin: 0 0 20px;
    padding: 28px 32px;
  }

  .profile-name { font-size: 1.7rem; }
  .profile-avatar { width: 66px; height: 66px; font-size: 1.4rem; }

  /* ── Desktop two-column layout ── */
  .desktop-layout {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }

  /* Sidebar button list */
  .section-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: var(--white);
    border: 1px solid var(--cream-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 4px var(--shadow);
    flex-shrink: 0;
    width: fit-content;
    min-width: 200px;
  }

  .nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: var(--cream);
    border: 1px solid var(--cream-border);
    border-left: 3px solid transparent;
    border-radius: 6px;
    padding: 10px 14px 10px 11px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--brown);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }

  .nav-btn:hover {
    background: var(--cream-dark);
    border-color: var(--cream-border);
    border-left-color: var(--brown-light);
  }

  .nav-btn.active {
    background: var(--cream-dark);
    border-color: var(--cream-border);
    border-left-color: var(--accent);
    font-weight: 600;
  }

  /* Hide the mobile-style right arrow on desktop */
  .nav-btn .nav-arrow { display: none; }

  .nav-btn .nav-icon { font-size: 1.05rem; }

  /* Content panel */
  .desktop-panel {
    flex: 1;
    background: var(--white);
    border: 1px solid var(--cream-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 4px var(--shadow);
    padding: 24px;
    min-height: 320px;
  }

  .desktop-panel-empty {
    color: var(--brown-light);
    text-align: center;
    padding: 60px 20px;
    font-size: 0.95rem;
  }

  .desktop-panel-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brown);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cream-border);
  }

  .card-label { min-width: 140px; }
}

/* ─── Large screens ─────────────────────────────────────────────── */
@media (min-width: 1024px) {
  #main-view { max-width: 860px; }
}

/* ─── Mobile / tablet layout overrides (≤767px) ─────────────────── */
/* Wrapping rules (word-break, overflow-wrap, hyphens) are global above.
   This block handles layout-only concerns: auto sizing, nowrap release,
   tighter padding, and proportional width hints. */
@media (max-width: 767px) {
  /* Release fixed-layout tables so columns share space by content */
  .med-table {
    table-layout: auto !important;
    width: 100%;
  }

  /* Release any nowrap constraints so no column monopolises width */
  .med-table td,
  .med-table th {
    white-space: normal !important;
    padding: 8px 10px;
  }

  /* Proportional width hints — with white-space:normal these are reliably
     honoured; last column takes the remainder automatically:
     first (names/labels) ~35% | interior (severity/since/dose) ~22–20% */
  .med-table th:first-child                   { width: 35%; }
  .med-table th:nth-child(2):not(:last-child) { width: 22%; }
  .med-table th:nth-child(3):not(:last-child) { width: 20%; }

  /* Dense sections (Allergies, Side Effects, Medical Conditions):
     width:auto !important overrides the width:100% rule above — a table
     told to be "100% of container" can ignore min-width in some browsers.
     With width:auto the table sizes to content; min-width is the floor.
     The wrapper's overflow-x:auto then scrolls rather than crushing columns. */
  .med-table-dense .med-table {
    width: auto !important;
    min-width: 500px;
  }

  /* Medications / Supplements — More Info expanded state:
     The compact view (3 cols) fits on screen normally.
     When expanded (5–6 cols), use the same dense-scroll strategy. */
  .med-table.expanded {
    width: auto !important;
    min-width: 600px;
  }
}