/* Food Log — mobile-first styles */

:root {
  color-scheme: light;
  --bg: #f6f4ef;
  --card: #ffffff;
  --text: #23211c;
  --muted: #8a857b;
  --accent: #e07b39;
  --accent-dark: #c2622a;
  --danger: #c0392b;
  --border: #e4dfd4;
  --toast-bg: #2b2823;
  --toast-text: #ffffff;
  --radius: 0.75rem;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171512;
  --card: #211e19;
  --text: #ece7dc;
  --muted: #9b9486;
  --accent: #e8834a;
  --accent-dark: #f09a5f;
  --danger: #e26d5c;
  --border: #37332b;
  --toast-bg: #ece7dc;
  --toast-text: #23211c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }

.fs-1 { font-size: 3rem; }
.fs-2 { font-size: 2rem; }
.fs-3 { font-size: 1.5rem; }
.fs-4 { font-size: 1rem; }

.ms-auto { margin-inline-start: auto; }
.text-muted { color: var(--muted); } 
.fst-italic { font-style: italic; }

.svg-icon { width: 1em; height: 1em; }

/* ---------- buttons & inputs ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 0.063rem solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 0.625rem;
  padding: 0.75rem 0.875rem;
  font-size: 0.938rem;
  min-height: 2.75rem;
  cursor: pointer;
  user-select: none;
}
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.danger { color: var(--danger); }
.btn.small { min-height: 2.25rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; }
.btn.block { width: 100%; margin-top: 0.5rem; }

input, textarea {
  font: inherit;
  color: var(--text);
  background: var(--card);
  border: 0.063rem solid var(--border);
  border-radius: 0.625rem;
  padding: 0.625rem 0.75rem;
  width: 100%;
}
textarea { resize: vertical; min-height: 3.5rem; }

/* ---------- auth view ---------- */
#auth-view {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.auth-card {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 0.375rem 1.5rem rgba(0, 0, 0, 0.08);
  padding: 1.75rem 1.5rem;
  width: 100%;
  max-width: 380px;
}

/* ---------- theme toggle ---------- */
.theme-toggle {
  border: none;
  background: transparent;
  font-size: 1.188rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.375rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
}
.theme-toggle.topbar-theme { flex-shrink: 0; }
#auth-theme-toggle { position: absolute; top: 0.625rem; right: 0.625rem; }
.auth-card h1 { margin: 0 0 0.25rem; font-size: 1.625rem; }
.tabs { display: flex; gap: 0.5rem; margin: 1.125rem 0 0.875rem; }
.tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.625rem;
  font-size: 0.938rem;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 0.125rem solid transparent;
}
.tab.active { color: var(--accent-dark); border-bottom-color: var(--accent); font-weight: 600; }
.auth-card label { display: block; margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted); }
.auth-card input { margin-top: 0.25rem; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: calc(0.625rem + env(safe-area-inset-top)) 1rem 0.625rem;
  background: var(--bg);
  border-bottom: 0.063rem solid var(--border);
}
.topbar h1 { font-size: 1.25rem; margin: 0; flex: 1; text-wrap: nowrap;}
#whoami {
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
}
#logout-btn {
  display: flex;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0;
}

/* ---------- offline banner ---------- */
#offline-banner {
  background: var(--accent);
  color: #fff;
  text-align: center;
  font-size: 0.813rem;
  padding: 0.375rem 1rem;
}

/* ---------- period bar ---------- */
.period-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0.25rem;
}
.presets { display: flex; gap: 0.5rem; padding-bottom: 0.5rem; overflow-x: auto; }
.chip {
  border: 0.063rem solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 999px;
  padding: 0.438rem 0.875rem;
  font-size: 0.875rem;
  white-space: nowrap;
  cursor: pointer;
}
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.range-inputs { display: flex; align-items: center; gap: 0.5rem; }
.range-inputs input { width: auto; flex: 1; min-width: 0; padding: 0.438rem 0.625rem; font-size: 0.875rem; }

/* ---------- timeline / day cards ---------- */
.day-list { padding: 0.5rem 1rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.day-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05);
  padding: 0.875rem;
  cursor: pointer;
}
.day-card:active { transform: scale(0.995); }
.day-card.empty-day { background: transparent; box-shadow: none; border: 0.063rem dashed var(--border); }
.empty-note { margin: 0; font-size: 0.875rem; text-align: center; padding: 0.125rem 0 0.375rem; }
.day-card header { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; }
.day-card h2 { font-size: 1.063rem; margin: 0; }
.count { font-size: 0.813rem; }

.entry-row { display: flex; gap: 0.625rem; align-items: center; padding: 0.375rem 0; border-top: 0.063rem solid var(--border); }
.entry-row:first-child { border-top: none; }
.entry-row img { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 0.5rem; flex-shrink: 0; }
.entry-row div.no-photo { width: 3.5rem; height: 3.5rem; border-radius: 0.5rem; flex-shrink: 0; background: #0001; border: 0.063rem solid #0004; }
.entry-row p { margin: 0; font-size: 0.906rem; overflow-wrap: anywhere; }
.cal-badge { color: var(--muted); font-size: 0.813rem; white-space: nowrap; flex-shrink: 0; }
.entry-row .cal-badge { margin-inline-start: auto; padding-left: 0.5rem; }

.empty { text-align: center; padding: 2rem 1rem; font-size: 0.938rem; }
#scroll-sentinel { text-align: center; padding: 1rem; min-height: 1.25rem; }

/* ---------- day detail ---------- */
.day-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: calc(0.5rem + env(safe-area-inset-top)) 1rem 0.5rem;
  background: var(--bg);
  border-bottom: 0.063rem solid var(--border);
}
#back-btn {
  width: 2.75rem; height: 2.75rem;
  border: none; background: transparent;
  font-size: 1.375rem; cursor: pointer; color: var(--text);
}
#day-date { flex: 1; padding: 0.5rem 0.625rem; }

.entry-list { padding: 0.75rem 1rem 15rem; display: flex; flex-direction: column; gap: 0.75rem; }
.entry-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05);
  padding: 0.875rem;
}
.entry-desc { margin: 0 0 0.625rem; overflow-wrap: anywhere; }
.entry-card > .cal-badge { display: inline-block; margin-bottom: 0.625rem; }

.entry-photos, .pending-photos { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.625rem; }
.pending-photos { padding: 0; }
.entry-photos figure, .pending-photos figure { position: relative; margin: 0; }
.entry-photos img, .pending-photos img {
  width: 6rem; height: 6rem; object-fit: cover; border-radius: 0.625rem; cursor: pointer;
}
.photo-x {
  position: absolute; top: -0.5rem; right: -0.5rem;
  width: 1.625rem; height: 1.625rem;
  border: none; border-radius: 50%;
  background: var(--danger); color: #fff;
  font-size: 0.938rem; line-height: 1;
  cursor: pointer;
}

.entry-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.entry-card textarea, .entry-card input[type="date"], .entry-card input[type="number"] { margin-bottom: 0.5rem; }

/* ---------- bottom add-entry bar ---------- */
.bottom-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  background: var(--card);
  border-top: 0.063rem solid var(--border);
  padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom));
  box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.06);
}
.bottom-bar #new-calories { margin-top: 0.5rem; }
.bottom-bar .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.camera-btn, .gallery-btn { flex: 1; font-size: 0.875rem; padding: 0.75rem 0.5rem; }
.save-btn { flex: 1.2; font-size: 0.938rem; }

.photo-processing {
  width: 1rem;
  height: 1rem;
  border: 0.125rem solid var(--text);
  border-radius: 50%;
  border-right-color: transparent;
  animation: 2s rotate-animation linear infinite;
}

@keyframes rotate-animation {
  from { rotate: 0;}
  to {rotate: 360deg;}
}

/* ---------- lightbox ---------- */
#lightbox {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.9);
  display: flex; align-items: center; justify-content: center;
}
#lightbox img { max-width: 100%; max-height: 100dvh; object-fit: contain; }
#lightbox button {
  position: absolute; top: calc(0.75rem + env(safe-area-inset-top)); right: 1rem;
  width: 2.75rem; height: 2.75rem;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18); color: #fff;
  font-size: 1.625rem; cursor: pointer;
}

/* ---------- toast ---------- */
#toast {
  position: fixed;
  left: 50%; bottom: calc(5.625rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  background: var(--toast-bg); color: var(--toast-text);
  padding: 0.625rem 1rem; border-radius: 0.625rem;
  font-size: 0.875rem; max-width: 90vw; text-align: center;
}

/* ---------- wider screens (graceful desktop) ---------- */
@media (min-width: 720px) {
  .day-list, .entry-list { max-width: 640px; margin: 0 auto; }
  .bottom-bar { max-width: 640px; left: 50%; transform: translateX(-50%); border-radius: var(--radius) var(--radius) 0 0; }
}

@media (max-width: 767px) {
  html {
    font-size: 120%; 
  }
}