@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── Tokens: Light ──────────────────────────────────────────────── */
:root, [data-theme="light"] {
  --bg:        #ffffff;
  --bg-alt:    #f7f7f7;
  --bg-card:   #ffffff;
  --bg-hover:  #f7f7f7;
  --border:    #e2e2e2;
  --border-hi: #c0c0c0;
  --text:      #0a0a0a;
  --text-2:    #666666;
  --text-3:    #999999;
  --nav-bg:    rgba(255,255,255,0.88);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow:    0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --ok:        #0a0a0a;
  --ok-bg:     #f7f7f7;
  --ok-check:  #ffffff;
  --err:       #cc0000;
  --accent:    #0a0a0a;
  --dot:       #0a0a0a;
  --dot-bg:    #f7f7f7;
  --dot-text:  #0a0a0a;
  --tag-bg:    #f7f7f7;
  --tag-border:#e2e2e2;
  --tag-text:  #666666;
}

/* ─── Tokens: Dark ───────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:        #0d0d0d;
  --bg-alt:    #161616;
  --bg-card:   #111111;
  --bg-hover:  #161616;
  --border:    #2a2a2a;
  --border-hi: #444444;
  --text:      #f0f0f0;
  --text-2:    #aaaaaa;
  --text-3:    #666666;
  --nav-bg:    #0d0d0d;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.50);
  --shadow:    0 2px 10px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.40);
  --shadow-lg: 0 8px 28px rgba(0,0,0,0.65), 0 2px 8px rgba(0,0,0,0.45);
  --ok:        #f0f0f0;
  --ok-bg:     #161616;
  --ok-check:  #0d0d0d;
  --err:       #ff5555;
  --accent:    #f0f0f0;
  --dot:       #f0f0f0;
  --dot-bg:    #161616;
  --dot-text:  #f0f0f0;
  --tag-bg:    #161616;
  --tag-border:#2a2a2a;
  --tag-text:  #aaaaaa;
}

/* ─── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  transition: background 280ms ease, color 280ms ease;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
ul { list-style: none; }
img { display: block; }

/* ─── Topbar ─────────────────────────────────────────────────────── */
.topbar-blur {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  transition: background 280ms ease, border-color 280ms ease;
}

/* ─── Fields ─────────────────────────────────────────────────────── */
.field-input:focus {
  border-color: var(--border-hi);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent);
  outline: none;
}
.field-input::placeholder { color: var(--text-3); }

/* ─── Tabs ───────────────────────────────────────────────────────── */
.tab-active   { color: var(--text);   border-bottom: 2px solid var(--text); }
.tab-inactive { color: var(--text-3); border-bottom: 2px solid transparent; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ─── Grocery ────────────────────────────────────────────────────── */
.grocery-add-form { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.field-qty { width: 90px; flex-shrink: 0; }
.grocery-list { display: flex; flex-direction: column; gap: .35rem; }
.grocery-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .75rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 6px; box-shadow: var(--shadow-sm);
  transition: border-color 150ms ease;
}
.grocery-item.done .grocery-item-name { text-decoration: line-through; color: var(--text-3); }
.grocery-item-name { flex: 1; font-size: .875rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grocery-item-qty { font-family: 'JetBrains Mono', monospace; font-size: .7rem; color: var(--text-3); flex-shrink: 0; }

/* Check button */
.check-btn {
  width: 22px; height: 22px; border-radius: 5px;
  border: 1.5px solid var(--border-hi); background: transparent;
  color: transparent; font-size: .7rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 150ms ease;
}
.check-btn:hover { border-color: var(--text-2); }

/* Done state — only the toggle button, not the delete button */
.grocery-item.done .check-btn[title="Toggle done"] {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--ok-check);
}

/* ─── Badges ─────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 600;
  background: var(--tag-bg); color: var(--tag-text);
  border: 1px solid var(--tag-border);
  border-radius: 999px; padding: .05rem .4rem; min-width: 1.4rem;
}
.badge.done { background: var(--ok-bg); color: var(--text-2); }

/* ─── Recipe grid ────────────────────────────────────────────────── */
.recipe-grid { display: flex; flex-direction: column; gap: .35rem; }
/* ─── Recipe cards (horizontal layout) ───────────────────────────── */
.recipe-card {
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-card);
  box-shadow: var(--shadow-sm); transition: all 150ms ease;
  display: flex; flex-direction: row; align-items: stretch;
}
.recipe-card:hover { box-shadow: var(--shadow); border-color: var(--border-hi); }
.recipe-card-img {
  width: 80px; height: 80px; flex-shrink: 0;
  background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.recipe-card-img img { width: 100%; height: 100%; object-fit: cover; }
.recipe-card-body { padding: .6rem .75rem; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.recipe-card-title { font-size: .8rem; font-weight: 500; line-height: 1.35; }
.recipe-card-meta { font-family: 'JetBrains Mono', monospace; font-size: .67rem; color: var(--text-3); margin-top: .3rem; }

/* ─── Recipe detail ──────────────────────────────────────────────── */
.recipe-detail-hero {
  width: 100%; aspect-ratio: 21/9; object-fit: cover;
  border-radius: 14px; margin-bottom: 1.5rem;
  border: 1px solid var(--border);
}
.recipe-columns { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; }
.ingredient-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .5rem .75rem;
  border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg-card); font-size: .875rem;
  transition: border-color 150ms ease;
}
.ingredient-row:hover { border-color: var(--border-hi); }
.ingredient-add-btn {
  font-size: .65rem; padding: .15rem .5rem;
  border: 1px solid var(--tag-border); border-radius: 999px;
  background: var(--tag-bg); color: var(--tag-text);
  cursor: pointer; font-family: inherit;
  transition: all 150ms ease; white-space: nowrap; flex-shrink: 0;
}
.ingredient-add-btn:hover { border-color: var(--border-hi); color: var(--text); }

/* ─── Week plan ──────────────────────────────────────────────────── */
.week-row {
  display: flex; flex-direction: row; align-items: stretch;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 6px; box-shadow: var(--shadow-sm);
  overflow: hidden; transition: border-color 150ms ease;
}
.week-row-day {
  width: 80px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg-alt); border-right: 1px solid var(--border);
  gap: .1rem; padding: .6rem 0;
}
.week-row.empty .week-row-day {
  opacity: .45;
}
[data-theme="dark"] .week-row-day {
  background: #181818;
}
.week-row.empty .week-row-body {
  padding: .45rem .75rem;
}
.week-row-day-name {
  font-size: .65rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text);
}
.week-row-day-today {
  font-size: .55rem; color: var(--text-3); font-family: 'JetBrains Mono', monospace;
}
.week-row-body { flex: 1; min-width: 0; padding: .6rem .75rem; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.week-row-edit { padding-top: .75rem; border-top: 1px solid var(--border); margin-top: .6rem; }
.week-row-edit.hidden { display: none; }
.week-row-view.hidden { display: none; }

/* ─── Autocomplete ───────────────────────────────────────────────── */
.hidden { display: none !important; }
.suggestions {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  background: var(--bg-card); border: 1px solid var(--border-hi);
  border-radius: 6px; box-shadow: var(--shadow);
  margin-top: 2px; overflow: hidden;
}
.suggestion-item { padding: .5rem .8rem; font-size: .875rem; cursor: pointer; transition: background 150ms ease; }
.suggestion-item:hover, .suggestion-item.active { background: var(--bg-hover); }

/* ─── Archive ────────────────────────────────────────────────────── */
.archive-section { margin-top: 2rem; }
.archive-section-title {
  font-size: .7rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text); margin-bottom: .75rem;
  display: flex; align-items: center; gap: .4rem;
}
.archive-list { display: flex; flex-direction: row; align-items: stretch; gap: .4rem; }
.archive-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .6rem .85rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 6px; box-shadow: var(--shadow-sm);
}
.archive-item-name { font-size: .825rem; font-weight: 500; }
.archive-item-meta { font-family: 'JetBrains Mono', monospace; font-size: .67rem; color: var(--text-3); margin-top: .15rem; }
.archive-item-actions { display: flex; gap: .35rem; flex-shrink: 0; }

/* ─── Picnic ─────────────────────────────────────────────────────── */
.picnic-btn {
  font-size: .65rem; padding: .2rem .55rem;
  border: 1px solid var(--tag-border); border-radius: 999px;
  background: var(--tag-bg); color: var(--tag-text);
  cursor: pointer; font-family: inherit;
  transition: all 150ms ease; white-space: nowrap; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .25rem;
}
.picnic-btn:hover { border-color: var(--border-hi); color: var(--text); }

.picnic-btn.mapped {
  border-color: var(--border-hi);
  color: var(--text);
  background: var(--bg-alt);
}

.picnic-toggle {
  width: 22px; height: 22px; border-radius: 5px;
  border: 1.5px solid var(--border-hi); background: transparent;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; transition: all 150ms ease;
  font-size: .65rem; color: transparent;
}
.picnic-toggle.on {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--ok-check);
}
.picnic-toggle:hover { border-color: var(--text-2); }

.picnic-search-wrap {
  margin-top: .5rem; padding: .75rem;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 6px;
}
.picnic-results { display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; }
.picnic-result {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .6rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; transition: all 150ms ease;
}
.picnic-result:hover { border-color: var(--border-hi); }
.picnic-result-img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; flex-shrink: 0; background: var(--bg-alt); }
.picnic-result-name { font-size: .8rem; font-weight: 500; flex: 1; line-height: 1.3; }
.picnic-result-meta { font-family: 'JetBrains Mono', monospace; font-size: .65rem; color: var(--text-3); white-space: nowrap; }

/* ─── Users table ────────────────────────────────────────────────── */
.users-table { width: 100%; border-collapse: collapse; }
.users-table th {
  font-size: .67rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text);
  text-align: left; padding: .5rem .75rem;
  border-bottom: 1px solid var(--border);
}
.users-table td { padding: .7rem .75rem; border-bottom: 1px solid var(--border); font-size: .875rem; vertical-align: middle; }
.users-table tr:last-child td { border-bottom: none; }

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .recipe-columns { grid-template-columns: 1fr; }
}