/* ============================================================
   Meal Planner — Shared Stylesheet
   Colors, fonts and spacing come from theme.css.
   Load order: theme.css → style.css
   ============================================================ */

/* ── Backward-compatible aliases ────────────────────────────
   Maps the old variable names used throughout all PHP inline
   styles to the new semantic names defined in theme.css.
   Remove an alias here once all PHP inline styles that use it
   have been migrated to the new --color-* / --text-* names.
   ──────────────────────────────────────────────────────────── */
:root {
  --cream:        var(--color-bg);
  --warm-white:   var(--color-surface);
  --ink:          var(--color-text);
  --ink-light:    var(--color-text-secondary);
  --ink-muted:    var(--color-text-muted);
  --accent:       var(--color-primary);
  --accent-light: var(--color-primary-light);
  --accent-hover: var(--color-primary-hover);
  --green:        var(--color-secondary);
  --green-light:  var(--color-secondary-light);
  --border:       var(--color-border);
}

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

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  font-size: var(--text-base);
  line-height: 1.6;
}

/* ---- HEADER ---- */
.site-header {
  background: var(--color-text);
  color: var(--color-bg);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.logo {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-bg);
  text-decoration: none;
  letter-spacing: -0.3px;
}
.logo em { color: var(--color-primary); font-style: normal; }

.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: all 0.18s;
}
.header-nav a:hover { color: var(--color-bg); background: rgba(255,255,255,0.08); }
.header-nav a.active { color: var(--color-bg); background: var(--color-primary); }
.header-nav a.console-link { color: var(--color-secondary); }
.header-nav a.console-link:hover { background: var(--color-secondary-light); color: var(--color-secondary); }

.header-user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,0.12);
}

.header-user span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.header-user strong { color: var(--color-bg); font-weight: 500; }

.hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--color-bg);
  cursor: pointer;
  padding: 6px;
  flex-direction: column;
  gap: 5px;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-bg);
  border-radius: 2px;
  transition: all 0.2s;
}

@media (max-width: 680px) {
  .hamburger { display: flex; }
  .header-nav {
    display: none;
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--color-text);
    flex-direction: column;
    padding: 16px;
    gap: 4px;
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: var(--shadow-lg);
    z-index: 199;
  }
  .header-nav.open { display: flex; }
  .header-nav a { width: 100%; text-align: left; }
  .header-user { margin-left: 0; border: none; padding: 0; }
}

/* ---- MAIN WRAP ---- */
.main-wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 36px 24px 80px;
}

/* ---- PAGE TITLE ---- */
.page-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
}
.page-title em { font-style: italic; color: var(--color-primary); }

.page-subtitle {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 300;
  margin-bottom: 32px;
}

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.18s;
  white-space: nowrap;
}

/* Primary CTA — dark slate for sufficient contrast against white text.
   --color-primary (#e07a5f terracotta) gives only ~2.9:1 vs white;
   --color-text    (#3d405b dark slate) gives ~10:1 — passes WCAG AA & AAA. */
.btn-primary   { background: var(--color-text); color: #fff; }
.btn-primary:hover { background: var(--color-text-secondary); color: #fff; }
.btn-secondary { background: var(--color-surface); color: var(--color-text); border: 1.5px solid var(--color-border); }
.btn-secondary:hover { border-color: var(--color-text); }
.btn-danger    { background: #fee2e2; color: #b91c1c; border: 1.5px solid #fca5a5; }
.btn-danger:hover { background: #fca5a5; }
.btn-ghost     { background: transparent; color: var(--color-text-secondary); border: 1.5px solid var(--color-border); }
.btn-ghost:hover { background: var(--color-surface); }
.btn-sm        { padding: 7px 14px; font-size: var(--text-xs); }
.btn-icon      { padding: 8px; border-radius: 6px; }

/* ---- FORMS ---- */
.form-group { margin-bottom: 18px; }

label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.18s, box-shadow 0.18s;
  appearance: none;
}

/* All <select> elements get a consistent chevron arrow.
   Defined separately so inputs/textareas don't inherit it. */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 36px;
  cursor: pointer;
}

/* Placeholder text — clearly lighter than real content everywhere in the app */
::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

textarea { resize: vertical; min-height: 80px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

/* ---- ALERTS ---- */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.alert-error   { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.alert-success { background: var(--color-secondary-light); color: var(--color-secondary); border: 1px solid #a7d4bd; }
.alert-info    { background: var(--color-primary-light); color: var(--color-primary); border: 1px solid #f3b8a8; }

/* ---- CARDS ---- */
.card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
}

/* ---- MODAL ---- */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(61,64,91,0.5);
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}
.modal-backdrop.open { display: flex; }

.modal {
  background: var(--color-surface);
  border-radius: var(--radius);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.25s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--color-border);
}

.modal-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1;
  padding: 4px;
  transition: color 0.15s;
}
.modal-close:hover { color: var(--color-text); }

.modal-body { padding: 24px; }

/* ---- RECIPE TAG PILLS ---- */
.tag-pill {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  text-transform: capitalize;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.tag-vegetarian   { background: #dcfce7; color: #166534; }
.tag-vegan        { background: #bbf7d0; color: #14532d; }
.tag-gluten-free  { background: #fef9c3; color: #713f12; }
.tag-quick        { background: #dbeafe; color: #1e3a8a; }
.tag-high-protein { background: #ffedd5; color: #7c2d12; }
.tag-dairy-free   { background: #f3e8ff; color: #581c87; }

/* tag checkboxes in forms */
.tags-checkboxes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tag-checkbox { display: flex; align-items: center; gap: 0; cursor: pointer; }
.tag-checkbox input[type="checkbox"] {
  width: auto; padding: 0; border: none; background: none;
  box-shadow: none; accent-color: var(--color-primary);
  margin-right: 5px; cursor: pointer;
}

/* ---- RECIPE CARD PHOTO ---- */
.recipe-card-photo {
  height: 160px;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}
.recipe-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.recipe-card:hover .recipe-card-photo img { transform: scale(1.04); }

/* ---- ANALYTICS SECTION ---- */
.analytics-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 700px) { .analytics-summary { grid-template-columns: repeat(2, 1fr); } }

.analytics-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 16px;
  text-align: center;
}
.analytics-card--warn { border-color: #fcd34d; background: #fffbeb; }

.analytics-card-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  margin-bottom: 6px;
}
.analytics-card-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.analytics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.analytics-table th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-border);
  padding: 6px 10px 8px;
}
.analytics-table td { padding: 10px 10px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.analytics-table tr:last-child td { border: none; }
.analytics-row:hover td { background: var(--color-bg); }

/* ---- Help button (shared across user pages) ---- */
.help-page-btn {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.help-page-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }