/* style.css — SRVG design system, matching approved mockups exactly.
   Self-hosted fonts (no CDN dependency, per NVWL convention). */

@font-face {
  font-family: 'Lato';
  font-weight: 400;
  src: url('../fonts/Lato-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-weight: 700;
  src: url('../fonts/Lato-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-weight: 900;
  src: url('../fonts/Lato-Black.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 400;
  src: url('../fonts/IBMPlexMono-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 500;
  src: url('../fonts/IBMPlexMono-Medium.ttf') format('truetype');
}

:root {
  --bg: #000000;
  --card-bg: #0d0d0d;
  --card-border: #262626;
  --text-primary: #ffffff;
  --text-secondary: #999999;
  --text-muted: #777777;
  --divider: #1e1e1e;

  --ok-bg: #16241a;
  --ok-text: #7bcf8e;
  --close-bg: #2a2410;
  --close-text: #e0c95f;
  --over-bg: #2a1414;
  --over-text: #f08787;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: 'Lato', sans-serif;
  min-height: 100vh;
}

body {
  max-width: 480px;
  margin: 0 auto;
  padding: 118px 20px 24px 20px; /* top clears the fixed header+nav stack; bottom is now just normal spacing since nothing is fixed at the screen bottom anymore */
  position: relative;
}

/* Persistent top bar (header + nav stacked) — an NVWL-wide pattern going
   forward. Single rule handles the notch/Dynamic Island: padding-top on
   the header itself only. Do NOT also add compensating padding/margin on
   body or anywhere else — that's the exact mistake DPRT's header hit
   early on (padding-top on body AND a negative margin on header AND
   padding-top on header again, three rules fighting each other). env()'s
   0px fallback means this is a no-op on any non-notch device. Requires
   viewport-fit=cover on the meta viewport tag (see index.html) — without
   it env() always returns 0.

   #top-bar is the single fixed element; #app-header and .bottom-nav are
   just its stacked flex children in normal document flow. This means the
   nav always sits directly below the header regardless of the header's
   actual rendered height (which varies with the safe-area inset) — no
   manual pixel math needed to keep them adjacent, matching DPRT's tabs-
   under-header pattern. */
#top-bar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 20;
  display: flex;
  flex-direction: column;
}
#app-header {
  background: #000000;
  padding: 14px 20px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--card-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#app-header .app-header-logo { height: 30px; width: auto; }

.mono { font-family: 'IBM Plex Mono', monospace; }

/* Views: only one visible at a time, toggled by the router in app.js */
.view { display: none; }
.view.active { display: block; }

/* ===== Header ===== */
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.header-row h1 { font-size: 20px; font-weight: 900; }

/* For back-button headers with a centered title: space-between divides
   room based on each item's actual width, so an empty spacer span next
   to a much-wider "back" button pushes the title off true-center. This
   centers the title absolutely against the full row width instead,
   independent of what's on either side. */
.subheader-row { position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.subheader-title {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 13px; color: #999; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  white-space: nowrap;
}
.greeting { font-size: 20px; font-weight: 900; }
.date-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.settings-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: #ccc;
  background: transparent;
  border: none;
  cursor: pointer;
}
.settings-btn:hover { color: #fff; }

/* ===== Tabs ===== */
.tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.tab {
  flex: 1; text-align: center; padding: 8px 0;
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  border: none; background: transparent;
  border-bottom: 2px solid #333;
  cursor: pointer;
}
.tab.active { color: var(--text-primary); border-bottom-color: var(--text-primary); }

/* ===== Cards ===== */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 10px;
}

/* ===== Metric card (dashboard hero) ===== */
.metric-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.metric-name { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: #ddd; text-transform: uppercase; }
.metric-status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.metric-status.ok { background: var(--ok-bg); color: var(--ok-text); }
.metric-status.close { background: var(--close-bg); color: var(--close-text); }
.metric-status.over { background: var(--over-bg); color: var(--over-text); }

.metric-values { display: flex; align-items: baseline; gap: 6px; margin-bottom: 12px; }
.metric-values .current { font-family: 'IBM Plex Mono'; font-weight: 500; font-size: 32px; }
.metric-values.over .current { color: #e85d5d; }
.metric-values .of { font-size: 14px; color: var(--text-muted); }
.metric-values .target { font-family: 'IBM Plex Mono'; font-size: 14px; color: var(--text-secondary); }

.remaining-label { font-size: 12px; color: var(--text-secondary); }
.remaining-label.over { color: #e85d5d; font-weight: 700; }

.bar-track { height: 6px; border-radius: 3px; background: #1e1e1e; overflow: hidden; margin-bottom: 8px; }
.bar-fill { height: 100%; border-radius: 3px; background: #4a4a4a; }
.bar-fill.close { background: #c9a227; }
.bar-fill.over { background: #e85d5d; }

/* ===== Compact nutrient row (secondary list) ===== */
.compact-list { padding: 4px 4px; }
.compact-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 4px; border-bottom: 1px solid var(--divider);
}
.compact-row:last-child { border-bottom: none; }
.compact-left { display: flex; align-items: center; gap: 8px; }
.compact-name { font-size: 13px; font-weight: 700; color: #ddd; }
.compact-right { display: flex; align-items: center; gap: 8px; }
.compact-values { font-family: 'IBM Plex Mono'; font-size: 13px; color: var(--text-secondary); }
.compact-values b { color: #eee; font-weight: 500; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #444; }
.status-dot.ok { background: #6fbf7f; }
.status-dot.close { background: #d1b34a; }
.status-dot.over { background: #d96b6b; }
.no-limit { font-size: 10px; color: #555; font-style: italic; }

.section-label {
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em; margin: 22px 0 10px 0;
}

/* ===== Meal journal ===== */
.day-label {
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em; margin: 18px 0 10px 0;
}
.day-label.today { color: var(--text-primary); }

.meal-container { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; }
.meal-container.draft { border: 1px dashed #555; background: #0a0a0a; }
.meal-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.meal-type { font-size: 14px; font-weight: 700; }
.meal-time { font-size: 12px; color: var(--text-secondary); font-family: 'IBM Plex Mono'; }
.draft-badge { font-size: 10px; font-weight: 700; color: #d9b84a; background: #2a2410; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; }

.food-item { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-top: 1px solid var(--divider); font-size: 13px; }
.food-item:first-of-type { border-top: none; }
.food-name { color: #e5e5e5; }
.food-servings { font-family: 'IBM Plex Mono'; color: var(--text-secondary); font-size: 12px; white-space: nowrap; margin-left: 10px; }

.meal-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--divider); }
.meal-totals { font-size: 11px; color: var(--text-secondary); }
.meal-totals b { font-family: 'IBM Plex Mono'; color: #ccc; font-weight: 500; }

/* ===== Buttons ===== */
.btn-primary {
  width: 100%; padding: 15px; background: #fff; color: #000; border: none;
  border-radius: 12px; font-family: 'Lato'; font-weight: 900; font-size: 15px;
  cursor: pointer;
}
.btn-secondary {
  width: 100%; padding: 14px; background: transparent; color: #fff;
  border: 1px solid #444; border-radius: 12px; font-family: 'Lato';
  font-weight: 700; font-size: 14px; margin-top: 10px; cursor: pointer;
}
.link-btn { background: none; border: none; color: #ccc; font-weight: 700; font-size: 13px; cursor: pointer; }

/* ===== Bottom nav ===== */
.bottom-nav {
  display: flex; justify-content: space-around;
  padding: 12px 20px;
  background: #000000;
  border-bottom: 1px solid var(--card-border);
}
.nav-item {
  background: none; border: none; font-size: 10px; color: var(--text-secondary);
  text-align: center; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; cursor: pointer;
}
.nav-item.active { color: var(--text-primary); }

/* ===== Auth screen ===== */
.auth-screen { display: flex; flex-direction: column; justify-content: center; min-height: 80vh; }
.auth-logo { display: block; width: 220px; height: auto; margin: 0 auto 6px auto; }
.auth-sub { font-size: 13px; color: var(--text-secondary); text-align: center; margin-bottom: 32px; }
.auth-input {
  width: 100%; padding: 14px 16px; background: var(--card-bg);
  border: 1px solid #333; border-radius: 12px; color: #fff;
  font-family: 'Lato'; font-size: 15px; margin-bottom: 12px;
}
.auth-input:focus { outline: none; border-color: #fff; }
.auth-error { font-size: 12px; color: #e85d5d; margin-bottom: 12px; min-height: 16px; }
.auth-hint { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 16px; }

/* ===== Loading / empty states ===== */
.loading-text, .empty-text {
  text-align: center; color: var(--text-secondary); font-size: 13px; padding: 40px 0;
}

/* ===== Add-food flow ===== */
.method-row { display: flex; gap: 12px; margin-bottom: 24px; }
.method-card {
  flex: 1; border: 1px solid #333; border-radius: 16px; padding: 26px 14px;
  text-align: center; background: transparent; color: #fff; cursor: pointer;
}
.method-card .icon { font-size: 30px; margin-bottom: 12px; }
.method-card .label { font-size: 14px; font-weight: 700; }
.method-card .sub { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }

.divider-or {
  text-align: center; font-size: 11px; color: #666;
  text-transform: uppercase; letter-spacing: 0.06em; margin: 4px 0 20px 0;
}
.search-input {
  width: 100%; border: 1px solid #333; border-radius: 12px; padding: 12px 16px;
  font-size: 13px; color: #fff; background: transparent; margin-bottom: 8px;
  font-family: 'Lato';
}
.search-result-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer;
}

.already-added-item {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
}

/* Nutrition Facts label styling (OCR confirm + manual-entry review) */
.name-field {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid #333;
  color: #fff; font-family: 'Lato'; font-weight: 700; font-size: 19px;
  padding: 6px 0 10px 0; margin-bottom: 18px;
}
.name-field:focus { outline: none; border-bottom-color: #fff; }

.trust-note { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-bottom: 16px; }

.label-card { border: 2px solid #fff; border-radius: 2px; padding: 10px 14px 14px 14px; margin-bottom: 20px; }
.lf-header { font-size: 26px; font-weight: 900; letter-spacing: -0.02em; border-bottom: 9px solid #fff; padding-bottom: 4px; margin-bottom: 6px; }
.row-serving { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 14px; padding: 4px 0; }
.row-serving input {
  background: transparent; border: none; border-bottom: 1px dashed #666; color: #fff;
  font-family: 'IBM Plex Mono'; font-weight: 500; font-size: 14px; text-align: right;
  width: 140px; padding: 2px 0;
}
.thick-rule { border-top: 9px solid #fff; margin: 6px 0; }
.med-rule { border-top: 5px solid #fff; margin: 6px 0; }
.amount-per { font-size: 11px; font-weight: 700; padding-top: 4px; }
.calories-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; }
.calories-row .label { font-size: 20px; font-weight: 900; }
.calories-row input {
  background: transparent; border: none; color: #fff; font-family: 'IBM Plex Mono';
  font-weight: 500; font-size: 28px; text-align: right; width: 100px;
}
.nutrient-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #333; }
.nutrient-row.indent { padding-left: 16px; }
.nutrient-row .label { font-weight: 700; }
.nutrient-row.indent .label { font-weight: 400; }
.nutrient-row .valgroup { display: flex; align-items: center; gap: 8px; }
.nutrient-row input.val {
  background: transparent; border: none; border-bottom: 1px dashed #555; color: #fff;
  font-family: 'IBM Plex Mono'; font-size: 13px; text-align: right; width: 60px;
}
.nutrient-row .unit { font-size: 12px; color: var(--text-secondary); width: 22px; }

.servings-picker { text-align: center; margin: 24px 0; }
.servings-picker .caption { font-size: 12px; color: var(--text-secondary); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.stepper-lg { display: flex; align-items: center; justify-content: center; gap: 28px; }
.stepper-lg button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #444; background: #111; color: #fff; font-size: 22px; font-weight: 700; }
.stepper-lg .val { font-family: 'IBM Plex Mono'; font-weight: 500; font-size: 40px; min-width: 90px; display: inline-block; text-align: center; }

.nutrient-preview { display: flex; gap: 10px; margin: 20px 0; }
.nutrient-preview .item { flex: 1; text-align: center; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 10px; }
.nutrient-preview .item .num { font-family: 'IBM Plex Mono'; font-size: 16px; font-weight: 500; }
.nutrient-preview .item .lbl { font-size: 9px; color: var(--text-secondary); margin-top: 3px; text-transform: uppercase; }

.form-field { margin-bottom: 12px; }
.form-field label { display: block; font-size: 11px; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 4px; }
.form-field input {
  width: 100%; background: var(--card-bg); border: 1px solid #333; border-radius: 10px;
  padding: 10px 12px; color: #fff; font-family: 'IBM Plex Mono'; font-size: 14px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ===== Onboarding ===== */
.progress-dots { display: flex; gap: 6px; margin-bottom: 24px; }
.progress-dots span { height: 3px; flex: 1; border-radius: 2px; background: #2a2a2a; }
.progress-dots span.done { background: #fff; }
.progress-dots span.active { background: #888; }

.step-heading { font-size: 22px; font-weight: 900; margin-bottom: 6px; }
.step-sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 26px; line-height: 1.5; }

.preset-card {
  border: 1px solid #333; border-radius: 14px; padding: 16px 16px; margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center; cursor: pointer;
}
.preset-card.sel { border: 2px solid #fff; padding: 15px; }
.preset-name { font-size: 14px; font-weight: 700; }
.preset-metrics { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.preset-check {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid #444;
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: transparent;
}
.preset-check.on { background: #fff; border-color: #fff; color: #000; }