/* ============================================================
   nutritrack.css  — NutriTrack v2
   Clean, clinical-meets-warm design
   Fonts: DM Sans (body) + DM Serif Display (headings)
   ============================================================ */

:root {
  --nt-green:     #16a34a;
  --nt-green-lt:  #dcfce7;
  --nt-yellow:    #ca8a04;
  --nt-yellow-lt: #fef9c3;
  --nt-orange:    #ea580c;
  --nt-orange-lt: #ffedd5;
  --nt-red:       #dc2626;
  --nt-red-lt:    #fee2e2;
  --nt-blue:      #2563eb;
  --nt-blue-lt:   #dbeafe;
  --nt-navy:      #1e3a5f;
  --nt-navy-lt:   #e8f0fa;
  --nt-gray:      #6b7280;
  --nt-gray-lt:   #f9fafb;
  --nt-border:    #e5e7eb;
  --nt-white:     #ffffff;
  --nt-shadow:    0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --nt-shadow-md: 0 4px 20px rgba(0,0,0,.12);
  --nt-radius:    12px;
  --nt-radius-sm: 8px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #1f2937;
  background: #f3f4f6;
  min-height: 100vh;
}

h1, h2, h3, .display-heading {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
}

/* ── Navbar ─────────────────────────────────────────────────── */
.nt-navbar {
  background: var(--nt-navy);
  padding: 12px 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  position: sticky;
  top: 0;
  z-index: 1050;
}

.brand-icon { font-size: 1.4rem; }
.brand-text {
  font-family: 'DM Serif Display', serif;
  font-size: 1.35rem;
  color: #fff;
  letter-spacing: -.3px;
}
.brand-text span { color: #6ee7b7; }

.nt-navbar .nav-link {
  color: rgba(255,255,255,.8);
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--nt-radius-sm);
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.nt-navbar .nav-link:hover,
.nt-navbar .nav-link.active { color: #fff; background: rgba(255,255,255,.12); }

.btn-nav-register {
  background: var(--nt-green) !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 5px 18px !important;
}
.btn-nav-register:hover { background: #15803d !important; }

.user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6ee7b7, #3b82f6);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; color: #1e3a5f;
}

/* ── Main Content ───────────────────────────────────────────── */
.nt-main { padding: 28px 0 60px; min-height: calc(100vh - 140px); }

/* ── Cards ──────────────────────────────────────────────────── */
.nt-card {
  background: var(--nt-white);
  border-radius: var(--nt-radius);
  box-shadow: var(--nt-shadow);
  padding: 24px;
  margin-bottom: 20px;
  border: 1px solid var(--nt-border);
  transition: box-shadow .2s;
}
.nt-card:hover { box-shadow: var(--nt-shadow-md); }

.nt-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--nt-gray-lt);
}
.nt-card-header h2, .nt-card-header h3 {
  margin: 0; font-size: 1.15rem; color: var(--nt-navy);
  display: flex; align-items: center; gap: 8px;
}

/* ── Pain Level Colors ──────────────────────────────────────── */
.pain-0 { --pain-color: var(--nt-green);  --pain-bg: var(--nt-green-lt);  }
.pain-1 { --pain-color: var(--nt-yellow); --pain-bg: var(--nt-yellow-lt); }
.pain-2 { --pain-color: var(--nt-orange); --pain-bg: var(--nt-orange-lt); }
.pain-3 { --pain-color: var(--nt-red);    --pain-bg: var(--nt-red-lt);    }

.pain-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: .78rem; font-weight: 600;
  background: var(--pain-bg, #f3f4f6);
  color: var(--pain-color, var(--nt-gray));
  border: 1px solid var(--pain-color, var(--nt-border));
}

/* ── Calendar ───────────────────────────────────────────────── */
.nt-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.nt-cal-dow {
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--nt-gray);
  padding: 6px 0 8px;
}

.nt-cal-cell {
  min-height: 78px;
  border-radius: var(--nt-radius-sm);
  border: 2px solid transparent;
  background: var(--nt-white);
  padding: 7px 8px;
  position: relative;
  cursor: pointer;
  transition: all .18s;
  text-decoration: none;
  display: block;
  color: inherit;
}
.nt-cal-cell:hover { transform: translateY(-2px); box-shadow: var(--nt-shadow-md); border-color: var(--nt-blue); }
.nt-cal-cell.nt-today { border-color: var(--nt-blue) !important; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.nt-cal-cell.nt-empty { background: transparent; pointer-events: none; box-shadow: none; }

/* Pain-coded calendar cells */
.nt-cal-cell.pain-0 { background: var(--nt-green-lt);  border-color: #bbf7d0; }
.nt-cal-cell.pain-1 { background: var(--nt-yellow-lt); border-color: #fde68a; }
.nt-cal-cell.pain-2 { background: var(--nt-orange-lt); border-color: #fed7aa; }
.nt-cal-cell.pain-3 { background: var(--nt-red-lt);    border-color: #fca5a5; }

.cal-day-num {
  font-size: .82rem;
  font-weight: 700;
  color: #374151;
}
.cal-today-label {
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--nt-blue);
  letter-spacing: .05em;
}
.cal-meal-count, .cal-sym-count {
  font-size: .68rem;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ── Food Autocomplete ──────────────────────────────────────── */
.food-autocomplete-wrap { position: relative; }

.ui-autocomplete {
  max-height: 260px !important;
  overflow-y: auto !important;
  border-radius: var(--nt-radius-sm) !important;
  border: 1px solid var(--nt-border) !important;
  box-shadow: var(--nt-shadow-md) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .9rem !important;
  z-index: 9999 !important;
}

.ui-menu-item-wrapper {
  padding: 8px 14px !important;
  border-bottom: 1px solid var(--nt-gray-lt);
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.ui-menu-item-wrapper:hover,
.ui-state-active { background: var(--nt-navy-lt) !important; color: var(--nt-navy) !important; }

.food-ac-name { font-weight: 600; flex: 1; }
.food-ac-meta { font-size: .75rem; color: var(--nt-gray); white-space: nowrap; }
.food-ac-allergen { font-size: .68rem; font-weight: 700; color: #fff;
  background: var(--nt-red); padding: 1px 6px; border-radius: 10px; }

/* ── Allergen Warning Banner ───────────────────────────────── */
.allergen-warning {
  display: none;
  background: #fff7ed;
  border: 2px solid #fb923c;
  border-radius: var(--nt-radius-sm);
  padding: 10px 14px;
  margin-top: 8px;
  font-size: .88rem;
  color: #9a3412;
}
.allergen-warning.show { display: flex; align-items: flex-start; gap: 10px; }
.allergen-warning i { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }

/* ── Food Detail Modal ─────────────────────────────────────── */
.food-detail-btn {
  background: none; border: none; padding: 0;
  color: var(--nt-blue); cursor: pointer;
  font-size: .8rem; text-decoration: underline;
  font-family: inherit;
}
.food-detail-btn:hover { color: var(--nt-navy); }

#foodDetailModal .modal-header {
  background: var(--nt-navy);
  color: #fff;
  border-radius: var(--nt-radius) var(--nt-radius) 0 0;
}
#foodDetailModal .modal-title { font-family: 'DM Serif Display', serif; }

.nutrient-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0;
}
.nutrient-box {
  text-align: center;
  padding: 12px 8px;
  border-radius: var(--nt-radius-sm);
  background: var(--nt-gray-lt);
  border: 1px solid var(--nt-border);
}
.nutrient-box .val { font-size: 1.3rem; font-weight: 700; color: var(--nt-navy); }
.nutrient-box .lbl { font-size: .72rem; color: var(--nt-gray); text-transform: uppercase; letter-spacing: .05em; }

.ingredient-list { list-style: none; padding: 0; margin: 0; }
.ingredient-list li {
  padding: 7px 0;
  border-bottom: 1px solid var(--nt-gray-lt);
  font-size: .88rem;
  display: flex; align-items: flex-start; gap: 8px;
}
.ingredient-list li:last-child { border-bottom: none; }
.ing-allergen-flag {
  font-size: .68rem; font-weight: 700;
  background: #fef2f2; color: var(--nt-red);
  border: 1px solid #fca5a5;
  padding: 1px 6px; border-radius: 10px;
  white-space: nowrap; flex-shrink: 0;
}

/* ── Trend Alert ────────────────────────────────────────────── */
.trend-alert {
  background: linear-gradient(135deg, #fff7ed, #fef3c7);
  border: 2px solid #fb923c;
  border-radius: var(--nt-radius);
  padding: 18px 22px;
  margin-bottom: 20px;
}
.trend-alert h5 {
  color: #92400e;
  font-family: 'DM Serif Display', serif;
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.trend-food-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; border: 1px solid #fb923c;
  color: #9a3412; border-radius: 20px;
  padding: 3px 12px; font-size: .82rem; font-weight: 600;
  margin: 3px;
}

/* ── Stat Cards ─────────────────────────────────────────────── */
.stat-card {
  background: var(--nt-white);
  border-radius: var(--nt-radius);
  border: 1px solid var(--nt-border);
  padding: 20px;
  text-align: center;
  box-shadow: var(--nt-shadow);
}
.stat-card .stat-num {
  font-family: 'DM Serif Display', serif;
  font-size: 2rem;
  color: var(--nt-navy);
  line-height: 1;
}
.stat-card .stat-lbl {
  font-size: .78rem;
  color: var(--nt-gray);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 5px;
}
.stat-card .stat-icon {
  font-size: 1.6rem;
  margin-bottom: 8px;
  display: block;
}

/* ── Meal Sections ──────────────────────────────────────────── */
.meal-card {
  border: 1.5px solid var(--nt-border);
  border-radius: var(--nt-radius);
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--nt-white);
  box-shadow: var(--nt-shadow);
}
.meal-card-header {
  background: var(--nt-navy-lt);
  padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1.5px solid var(--nt-border);
}
.meal-type-badge {
  font-weight: 700; font-size: .88rem; color: var(--nt-navy);
  display: flex; align-items: center; gap: 6px;
}
.meal-time-badge {
  background: var(--nt-navy);
  color: #fff;
  font-size: .72rem;
  padding: 2px 10px;
  border-radius: 20px;
  font-weight: 600;
}

.food-item-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--nt-gray-lt);
  font-size: .88rem;
}
.food-item-row:last-child { border-bottom: none; }
.food-item-name { flex: 1; font-weight: 500; }
.food-item-meta { color: var(--nt-gray); font-size: .78rem; }

/* ── Pain Level Selector ────────────────────────────────────── */
.pain-selector { display: flex; gap: 8px; flex-wrap: wrap; }
.pain-option input[type=radio] { display: none; }
.pain-option label {
  cursor: pointer; padding: 8px 14px; border-radius: 20px;
  font-size: .82rem; font-weight: 600;
  border: 2px solid transparent;
  transition: all .18s;
  display: flex; align-items: center; gap: 6px;
}
.pain-option.p0 label { background: var(--nt-green-lt);  color: var(--nt-green);  border-color: #bbf7d0; }
.pain-option.p1 label { background: var(--nt-yellow-lt); color: var(--nt-yellow); border-color: #fde68a; }
.pain-option.p2 label { background: var(--nt-orange-lt); color: var(--nt-orange); border-color: #fed7aa; }
.pain-option.p3 label { background: var(--nt-red-lt);    color: var(--nt-red);    border-color: #fca5a5; }
.pain-option input:checked + label {
  border-color: currentColor;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
  transform: scale(1.04);
}

/* ── Symptom Checklist ──────────────────────────────────────── */
.symptom-check-group {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.symptom-pill {
  position: relative;
}
.symptom-pill input[type=checkbox] { display: none; }
.symptom-pill label {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: .8rem;
  background: var(--nt-gray-lt);
  border: 1.5px solid var(--nt-border);
  color: #374151;
  transition: all .15s;
  user-select: none;
}
.symptom-pill label:hover { border-color: var(--nt-blue); }
.symptom-pill input:checked + label {
  background: var(--nt-red-lt);
  border-color: var(--nt-red);
  color: var(--nt-red);
  font-weight: 600;
}

/* ── Profile Allergen Tags ──────────────────────────────────── */
.allergen-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 20px;
  font-size: .8rem; font-weight: 600;
  background: var(--nt-red-lt);
  color: var(--nt-red);
  border: 1.5px solid #fca5a5;
  margin: 3px;
}
.allergen-tag .remove-allergen {
  cursor: pointer; font-size: .7rem; margin-left: 4px;
  opacity: .7;
}
.allergen-tag .remove-allergen:hover { opacity: 1; }

/* ── Tables ─────────────────────────────────────────────────── */
.nt-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; }
.nt-table thead th {
  background: var(--nt-navy-lt);
  color: var(--nt-navy);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 10px 14px;
  border-bottom: 2px solid var(--nt-border);
}
.nt-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--nt-gray-lt);
  vertical-align: middle;
}
.nt-table tbody tr:hover td { background: var(--nt-navy-lt); }
.nt-table tbody tr:last-child td { border-bottom: none; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-label { font-weight: 600; font-size: .85rem; color: #374151; margin-bottom: 5px; }
.form-control, .form-select {
  border-radius: var(--nt-radius-sm);
  border: 1.5px solid var(--nt-border);
  font-family: 'DM Sans', sans-serif;
  font-size: .9rem;
  transition: border-color .2s, box-shadow .2s;
  padding: 9px 12px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--nt-blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  outline: none;
}
.form-control.food-search-input {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 12px center;
  padding-left: 36px;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn { font-family: 'DM Sans', sans-serif; font-weight: 600; border-radius: var(--nt-radius-sm); }
.btn-nt-primary { background: var(--nt-navy); color: #fff; border: none; }
.btn-nt-primary:hover { background: #162d4a; color: #fff; }
.btn-nt-success { background: var(--nt-green); color: #fff; border: none; }
.btn-nt-success:hover { background: #15803d; color: #fff; }
.btn-nt-danger { background: var(--nt-red); color: #fff; border: none; }
.btn-nt-danger:hover { background: #b91c1c; color: #fff; }
.btn-nt-outline { background: transparent; border: 1.5px solid var(--nt-navy); color: var(--nt-navy); }
.btn-nt-outline:hover { background: var(--nt-navy-lt); }
.btn-nt-sm { padding: 5px 12px; font-size: .78rem; border-radius: 6px; }

/* ── Footer ──────────────────────────────────────────────────── */
.nt-footer {
  background: var(--nt-navy);
  color: rgba(255,255,255,.6);
  padding: 18px 0;
  font-size: .83rem;
  margin-top: auto;
}
.brand-text-sm { color: #6ee7b7; font-weight: 600; }

/* ── Legend ──────────────────────────────────────────────────── */
.cal-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; font-size: .8rem; }
.cal-legend-item { display: flex; align-items: center; gap: 6px; }
.cal-legend-dot {
  width: 14px; height: 14px; border-radius: 4px;
  border: 2px solid transparent;
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nt-card, .meal-card, .stat-card {
  animation: fadeInUp .3s ease-out both;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nt-main { padding: 16px 0 40px; }
  .nutrient-grid { grid-template-columns: repeat(2, 1fr); }
  .nt-cal-cell { min-height: 52px; padding: 4px 5px; }
  .cal-day-num { font-size: .72rem; }
  .cal-meal-count, .cal-sym-count { display: none; }
}

/* ── Nutrition Facts Panel (FDA-style) ───────────────────────── */
.nf-panel {
  border: 2px solid #1e3a5f;
  border-radius: 4px;
  overflow: hidden;
  font-family: 'DM Sans', sans-serif;
}
.nf-header {
  background: #1e3a5f;
  color: #fff;
  padding: 10px 14px;
}
.nf-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -.5px;
}
.nf-serving {
  font-size: .8rem;
  opacity: .8;
  margin-top: 3px;
}
.nf-panel table tr {
  border-bottom: 1px solid #e5e7eb;
}
.nf-panel table tr:last-child { border-bottom: none; }
.nf-footer {
  background: #f9fafb;
  border-top: 2px solid #1e3a5f;
  padding: 6px 10px;
  font-size: .72rem;
  color: var(--nt-gray);
}

/* ── Ingredient list rows ─────────────────────────────────────── */
.ingredient-list { list-style: none; padding: 0; margin: 0; }
.ingredient-list li {
  padding: 6px 4px;
  border-bottom: 1px solid var(--nt-gray-lt);
  font-size: .85rem;
  display: flex; align-items: flex-start; gap: 8px;
  line-height: 1.5;
}
.ingredient-list li:last-child { border-bottom: none; }
.ing-allergen-row { background: #fff7ed; }
.ing-allergen-flag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .68rem; font-weight: 700;
  background: #fef2f2; color: var(--nt-red);
  border: 1px solid #fca5a5;
  padding: 2px 7px; border-radius: 10px;
  white-space: nowrap; flex-shrink: 0;
}

/* ── Autocomplete allergen hit row ──────────────────────────── */
.ui-allergen-hit {
  background: #fff7ed !important;
}