/* ── MIGRAINE SEVERITY BUTTONS ──────────────── */
.migraine-row {
  display: flex;
  gap: 6px;
  width: 100%;
  margin-bottom: 12px;
}

.migraine-btn {
  flex: 1;
  min-height: var(--tap-min-wide);
  border: 3px solid transparent;
  border-radius: var(--radius);
  font-size: var(--font-xlarge);
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  color: #fff;
}

.migraine-btn[data-score="0"] { background: rgba(46,125,50,0.6); }
.migraine-btn[data-score="1"] { background: rgba(85,139,47,0.6); }
.migraine-btn[data-score="2"] { background: rgba(249,168,37,0.6); }
.migraine-btn[data-score="3"] { background: rgba(239,108,0,0.6); }
.migraine-btn[data-score="4"] { background: rgba(198,40,40,0.6); }
.migraine-btn[data-score="5"] { background: rgba(123,31,162,0.6); }

.migraine-btn.active[data-score="0"] { background: var(--migraine-0); border-color: var(--text-primary); }
.migraine-btn.active[data-score="1"] { background: var(--migraine-1); border-color: var(--text-primary); }
.migraine-btn.active[data-score="2"] { background: var(--migraine-2); border-color: var(--text-primary); }
.migraine-btn.active[data-score="3"] { background: var(--migraine-3); border-color: var(--text-primary); }
.migraine-btn.active[data-score="4"] { background: var(--migraine-4); border-color: var(--text-primary); }
.migraine-btn.active[data-score="5"] { background: var(--migraine-5); border-color: var(--text-primary); }

/* ── STRESS BUTTONS ─────────────────────────── */
.stress-btn[data-stress="1"] { background: rgba(46,125,50,0.6); }
.stress-btn[data-stress="2"] { background: rgba(124,179,66,0.6); }
.stress-btn[data-stress="3"] { background: rgba(249,168,37,0.6); }
.stress-btn[data-stress="4"] { background: rgba(239,108,0,0.6); }
.stress-btn[data-stress="5"] { background: rgba(198,40,40,0.6); }

.stress-btn.active[data-stress="1"] { background: var(--stress-1); border-color: var(--text-primary); }
.stress-btn.active[data-stress="2"] { background: var(--stress-2); border-color: var(--text-primary); }
.stress-btn.active[data-stress="3"] { background: var(--stress-3); border-color: var(--text-primary); }
.stress-btn.active[data-stress="4"] { background: var(--stress-4); border-color: var(--text-primary); }
.stress-btn.active[data-stress="5"] { background: var(--stress-5); border-color: var(--text-primary); }

/* ── PAIN GROUPS (hidden until migraine > 0) ── */
#pain-groups {
  display: none;
}

#pain-groups.visible {
  display: block;
}

/* ── MEDICINE SECTION ───────────────────────── */
.medicine-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bg-input);
}

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

.show-more-meds-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  background: var(--bg-input);
  border: none;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: var(--font-base);
  cursor: pointer;
  text-align: center;
}
.show-more-meds-btn:active { opacity: 0.7; }

.medicine-name {
  font-weight: 700;
  flex: 1;
  min-width: 0;
  font-size: var(--font-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dose-select {
  background: var(--bg-input);
  border: 2px solid transparent;
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: var(--font-base);
  height: var(--tap-min);
  padding: 0 4px;
  cursor: pointer;
  width: 82px;
  flex-shrink: 0;
}

.dose-select:focus {
  outline: none;
  border-color: var(--bg-active);
}

.fraction-btns {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.fraction-btn {
  width: 44px;
  min-height: var(--tap-min);
  background: var(--bg-input);
  border: 2px solid transparent;
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: var(--font-base);
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fraction-btn:active,
.fraction-btn.active {
  background: var(--bg-active);
  color: var(--text-on-active);
}

.applied-btn {
  min-width: 100px;
  min-height: var(--tap-min);
  background: var(--bg-input);
  border: 2px solid transparent;
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: var(--font-base);
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.applied-btn:active,
.applied-btn.active {
  background: var(--bg-active);
  color: var(--text-on-active);
}

.med-log-feedback {
  font-size: 14px;
  color: #2e7d32;
  white-space: nowrap;
}


/* ── LIQUIDS SECTION ────────────────────────── */
.liquid-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.liquid-label {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--text-primary);
  min-width: 110px;
  flex-shrink: 0;
}

.liquid-row .btn-group-row {
  flex: 1;
}

/* ── MEAL SLOT BUTTONS ──────────────────────── */
.meal-slot-row {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

/* ── RECENT ITEMS GRID ──────────────────────── */
.recent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.recent-item-btn {
  min-height: 56px;
  background: var(--bg-input);
  border: 2px solid transparent;
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 6px;
  text-align: center;
  word-break: break-word;
}

.recent-item-btn.active {
  border-color: var(--bg-active);
  background: rgba(233, 69, 96, 0.2);
}

/* ── RISK TAGS ──────────────────────────────── */
.risk-tags-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.risk-tag-btn {
  min-height: var(--tap-min);
  background: var(--bg-input);
  border: 2px solid transparent;
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.risk-tag-btn.active {
  border-color: var(--bg-active);
  background: rgba(233, 69, 96, 0.2);
}

/* ── ADD ITEM BUTTON ────────────────────────── */
.add-item-btn {
  width: 100%;
  min-height: var(--tap-min);
  background: var(--bg-input);
  border: 2px dashed var(--text-secondary);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: var(--font-base);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-bottom: 12px;
}

/* ── SAME AS USUAL ──────────────────────────── */
.same-as-usual {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-input);
  border-radius: var(--radius);
  margin-bottom: 12px;
}

.same-as-usual-name {
  flex: 1;
  font-size: var(--font-base);
}

.use-template-btn {
  min-height: 44px;
  min-width: 60px;
  background: var(--bg-frank-active);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  font-size: var(--font-base);
  font-weight: 700;
  cursor: pointer;
  padding: 0 12px;
}

/* ── SELECTED ITEMS LIST ────────────────────── */
.selected-items {
  margin-top: 12px;
}

.selected-items-title {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

/* ── FOOD SEARCH RESULTS ────────────────────── */
.food-search-results {
  max-height: 300px;
  overflow-y: auto;
}

.food-search-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--bg-input);
  cursor: pointer;
  min-height: var(--tap-min);
  -webkit-tap-highlight-color: transparent;
}

.food-search-item:hover {
  background: var(--bg-input);
}

.food-search-name {
  flex: 1;
  font-size: var(--font-base);
}

.food-search-meta {
  font-size: 14px;
  color: var(--text-secondary);
}