/* ─── Shared site styles for filter pages ────────────────────────────────────
 * One stylesheet, four filter pages.  Aligns the look with the dashboard
 * (GitHub-dark palette).  Drop-in replacement for each page's old \3c style>
 * block — it's loaded via <link> so future tweaks happen in one place.
 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  background: #0d1117;
  color: #cdd9e5;
}

/* ── Top nav (matches index.html / meal-analysis.html) ───────────────────── */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  align-items: center;
  padding: 12px 22px;
  background: #161b22;
  border-bottom: 1px solid #21262d;
  position: sticky;
  top: 0;
  z-index: 20;
  font-size: 0.82rem;
}

.site-nav a {
  color: #8b949e;
  text-decoration: none;
  padding: 4px 0;
}

.site-nav a:hover {
  color: #cdd9e5;
}

.site-nav a[aria-current='page'] {
  color: #fff;
  font-weight: 600;
}

.site-nav-brand {
  color: #fff !important;
  font-weight: 700;
  margin-right: 12px;
}

/* ── Page header ─────────────────────────────────────────────────────────── */
h1 {
  padding: 18px 22px 4px;
  font-size: 1.2rem;
  color: #fff;
  font-weight: 700;
}

.page-sub {
  padding: 0 22px 14px;
  font-size: 0.8rem;
  color: #6e7681;
}

.page-sub .ts {
  color: #8b949e;
}

/* ── Sticky stats strip ──────────────────────────────────────────────────── */
#stats {
  position: sticky;
  top: 47px;
  z-index: 10;
  background: #161b22;
  color: #cdd9e5;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 12px 22px;
  align-items: center;
  border-bottom: 1px solid #21262d;
}

#stats .stat {
  text-align: center;
}

#stats .stat .val {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

#stats .stat .lbl {
  font-size: 0.66rem;
  color: #6e7681;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

#stats .sep {
  width: 1px;
  background: #30363d;
  align-self: stretch;
}

/* ── Controls row ─────────────────────────────────────────────────────────── */
#controls {
  padding: 12px 22px;
  background: #0d1117;
  border-bottom: 1px solid #21262d;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

#controls input[type='text'] {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #cdd9e5;
  padding: 6px 10px;
  font-size: 0.82rem;
  width: 280px;
}

#controls input[type='text']:focus {
  outline: none;
  border-color: #58a6ff;
}

button {
  background: #21262d;
  color: #cdd9e5;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 0.78rem;
}

button:hover {
  background: #30363d;
}

button.danger {
  background: #5a1d1d;
  color: #fda4a4;
  border-color: #6e2222;
}

button.danger:hover {
  background: #7a2424;
}

#excluded-count {
  font-size: 0.78rem;
  color: #8b949e;
  margin-left: 4px;
}

/* ── Product table ───────────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
}

th {
  background: #161b22;
  color: #8b949e;
  border-bottom: 1px solid #30363d;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  position: sticky;
  top: 119px;
  z-index: 5;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

th:hover {
  color: #cdd9e5;
}

th .sort-arrow {
  margin-left: 4px;
  opacity: 0.4;
}

th.sorted .sort-arrow {
  opacity: 1;
}

td {
  padding: 7px 12px;
  border-bottom: 1px solid #21262d;
  vertical-align: middle;
  color: #cdd9e5;
}

tr:hover td {
  background: #161b22;
}

tr.excluded {
  opacity: 0.4;
}

tr.excluded td {
  text-decoration: line-through;
  color: #6e7681;
}

td.name {
  max-width: 360px;
}

td.name a {
  color: inherit;
  text-decoration: none;
}

td.name a:hover {
  text-decoration: underline;
  color: #58a6ff;
}

td.price,
td.kcal,
td.protein {
  text-align: right;
  width: 90px;
}

td.excl {
  text-align: center;
  width: 40px;
}

input[type='checkbox'] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: #f85149;
}

.null {
  color: #484f58;
  font-style: italic;
}

.deal,
.ambient {
  font-size: 0.66rem;
  color: #3fb950;
  font-weight: 600;
  background: #1a3a1a;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
}

.finest {
  border-left: 2px solid #d29922;
}

.finest td.name::before {
  content: '★ ';
  color: #d29922;
  font-size: 0.78rem;
}