/*
 * MealMind theme layer (UI redesign, phase 1)
 * Loaded after all page stylesheets and lightmode.css.
 * Tokens per theme via [data-bs-theme]; legacy variables and gradient classes are remapped here.
 * Spec: Obsidian 99-System/Servers/remote/mealmind.net/UI Redesign/02 - UI Redesign - Design Direction
 */

/* Fonts (self-hosted, SIL OFL) */
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/bricolage-grotesque/bricolage-grotesque-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/bricolage-grotesque/bricolage-grotesque-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/instrument-sans/instrument-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/instrument-sans/instrument-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens */
:root,
[data-bs-theme="dark"] {
    --mm-ground: #121614;
    --mm-surface: #1B201D;
    --mm-surface-2: #232925;
    --mm-line: #2A312D;
    --mm-line-strong: #3A423D;
    --mm-ink: #E8ECE9;
    --mm-muted: #A3ADA6;
    --mm-accent: #7FBF9B;
    --mm-accent-ink: #0F1E16;
    --mm-accent-hover: #95CDAD;
    --mm-accent-soft: #1E3328;
    --mm-no: #F0A07A;
    --mm-no-soft: #3A2219;
    --mm-no-line: #6B3A26;
    --mm-saffron: #E7B54A;
    --mm-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -18px rgba(0, 0, 0, 0.6);
    --mm-focus: 0 0 0 3px rgba(127, 191, 155, 0.35);
}

[data-bs-theme="light"] {
    --mm-ground: #F6F7F4;
    --mm-surface: #FFFFFF;
    --mm-surface-2: #EEF0EC;
    --mm-line: #E2E5E0;
    --mm-line-strong: #D5D9D3;
    --mm-ink: #1A1F1C;
    --mm-muted: #5B635E;
    --mm-accent: #2D6A4F;
    --mm-accent-ink: #FFFFFF;
    --mm-accent-hover: #24563F;
    --mm-accent-soft: #E6F0EA;
    --mm-no: #9A3412;
    --mm-no-soft: #FDEEE6;
    --mm-no-line: #F3B99B;
    --mm-saffron: #E7B54A;
    --mm-shadow: 0 1px 2px rgba(26, 31, 28, 0.04), 0 12px 32px -18px rgba(26, 31, 28, 0.25);
    --mm-focus: 0 0 0 3px rgba(45, 106, 79, 0.25);
}

:root,
[data-bs-theme] {
    --mm-font-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
    --mm-font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mm-radius: 10px;
    --mm-radius-card: 16px;

    /* Legacy variables used across page stylesheets */
    --primary-gradient: var(--mm-accent);
    --secondary-gradient: var(--mm-accent);
    --neon-gradient: var(--mm-accent);
    --background-color: var(--mm-ground);
    --text-color: var(--mm-ink);
    --text-light: var(--mm-muted);
    --card-bg: var(--mm-surface);
    --nav-bg: var(--mm-surface);
    --border-radius: var(--mm-radius-card);
    --heading-font: var(--mm-font-display);
    --body-font: var(--mm-font-body);
    --error-color: var(--mm-no);
    --success-color: var(--mm-accent);

    /* Bootstrap */
    --bs-body-font-family: var(--mm-font-body);
    --bs-body-bg: var(--mm-ground);
    --bs-body-color: var(--mm-ink);
    --bs-emphasis-color: var(--mm-ink);
    --bs-secondary-color: var(--mm-muted);
    --bs-tertiary-bg: var(--mm-surface-2);
    --bs-border-color: var(--mm-line);
    --bs-link-color: var(--mm-accent);
    --bs-link-color-rgb: var(--mm-accent-rgb);
    --bs-link-hover-color: var(--mm-accent-hover);
    --bs-success: var(--mm-accent);
    --bs-danger: var(--mm-no);
    --bs-warning: var(--mm-saffron);
}
[data-bs-theme="dark"] { --mm-accent-rgb: 127, 191, 155; }
[data-bs-theme="light"] { --mm-accent-rgb: 45, 106, 79; }

/* Base */
body {
    font-family: var(--mm-font-body);
    background: var(--mm-ground);
    color: var(--mm-ink);
    -webkit-font-smoothing: antialiased;
}
body::before { display: none; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mm-font-display);
    color: var(--mm-ink);
    letter-spacing: -0.015em;
}
h1, h2,
.gradient-text,
.neon-gradient-text,
.neon-gradient-header h1,
.onboarding-title,
.onboarding-tile-title,
.card h2,
.footer-links h4,
.error-code {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--mm-ink);
}
h1 { font-weight: 700; }
h2 { font-weight: 700; }

a { color: var(--mm-accent); }
a:hover { color: var(--mm-accent-hover); }
.text-muted { color: var(--mm-muted) !important; }

/* Header */
header {
    background: var(--mm-surface);
    border-bottom: 1px solid var(--mm-line);
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow: visible;
}
/* Brand: mark + wordmark, one link to the homepage (header and footer) */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--mm-ink);
    text-decoration: none;
}
.brand:hover { color: var(--mm-ink); }
.brand:focus-visible { outline: none; box-shadow: var(--mm-focus); border-radius: var(--mm-radius); }
.brand-mark { flex: none; width: 36px; height: 36px; }
.brand-utensils, .brand-dot { color: var(--mm-accent); }
.brand-word {
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 1.45rem;
    line-height: 1;
    letter-spacing: -0.02em;
}
header h1 {
    position: static;
    order: 1;
    margin: 0;
    font-size: 1.35rem;
    line-height: 1;
    opacity: 1;
    letter-spacing: -0.01em;
    text-align: left;
    color: var(--mm-ink);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
header h1 .beta-tag {
    position: static;
    order: 2;
    font-family: var(--mm-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--mm-accent-soft);
    color: var(--mm-accent);
    padding: 0.25em 0.55em;
    border-radius: 999px;
}
header h1 .beta-tag.bg-danger {
    background: var(--mm-no-soft) !important;
    color: var(--mm-no) !important;
}
header .greeting-container {
    position: static;
    order: 3;
    margin-left: auto;
    font-size: 0.9rem;
    color: var(--mm-muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
header .greeting-container {
    gap: 0.25rem 1rem;
    min-width: 0;
}
header .greeting-container a,
header .greeting-container i {
    color: var(--mm-muted);
    text-decoration: none;
}
header .greeting-container a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    white-space: nowrap;
}
header .greeting-container a span {
    overflow: hidden;
    text-overflow: ellipsis;
}
header .greeting-container a:hover,
header .greeting-container a:hover i { color: var(--mm-ink); }

/* Phones: one header row, the name only; the family lives under Account */
@media (max-width: 767.98px) {
    header { padding: 0.6rem 1rem; }
    header h1 { min-width: 0; }
    .brand-mark { width: 30px; height: 30px; }
    .brand-word { font-size: 1.25rem; }
    header .greeting-container { flex-wrap: nowrap; max-width: 45%; }
    header .greeting-family { display: none !important; }
    header .greeting-user {
        max-width: 100%;
        padding: 0.35rem 0.7rem;
        border: 1px solid var(--mm-line-strong);
        border-radius: 999px;
    }
}

/* Navigation */
nav {
    background: var(--mm-surface);
    border-radius: 0;
    margin: 0;
    padding: 0.4rem 1rem;
    border-bottom: 1px solid var(--mm-line);
    box-shadow: none;
}
nav.scrolled { box-shadow: var(--mm-shadow); }
nav ul li a {
    color: var(--mm-muted);
    letter-spacing: 0;
    font-weight: 500;
    border-radius: var(--mm-radius);
    padding: 0.55rem 0.9rem;
}
nav ul li a:hover {
    color: var(--mm-ink);
    background: var(--mm-surface-2);
}
nav ul li a.active {
    color: var(--mm-ink);
    background: var(--mm-surface-2);
    font-weight: 600;
}
nav ul li a:hover::after,
nav ul li a.active::after { display: none; }

.theme-toggle,
.language-dropdown select {
    background: var(--mm-surface);
    border: 1px solid var(--mm-line-strong);
    color: var(--mm-ink);
}
.theme-toggle { width: 44px; height: 44px; }
.theme-toggle:hover,
.language-dropdown select:hover {
    border-color: var(--mm-accent);
    box-shadow: none;
}
.hamburger-menu span { background: var(--mm-ink); }

/* Cards */
.card {
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-card);
    box-shadow: none;
    backdrop-filter: none;
    color: var(--mm-ink);
}
.card-header {
    background: transparent;
    border-bottom-color: var(--mm-line);
}
.card-accent,
.error-details {
    border: 1px solid var(--mm-line);
    border-image: none;
}
.gradient-border {
    border: 1px solid var(--mm-line);
    border-image: none;
}

/* Buttons: restore Bootstrap variable-driven buttons, calm shape */
.btn {
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-padding-y: 0.6rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--mm-radius);
    --bs-btn-focus-box-shadow: var(--mm-focus);
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    background: var(--bs-btn-bg);
    color: var(--bs-btn-color);
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    font-family: var(--mm-font-body);
    font-weight: 600;
    min-height: 44px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover {
    transform: none;
    box-shadow: none;
    background: var(--bs-btn-hover-bg);
    color: var(--bs-btn-hover-color);
    border-color: var(--bs-btn-hover-border-color);
}
.btn:active,
.btn.active {
    background: var(--bs-btn-active-bg);
    color: var(--bs-btn-active-color);
    border-color: var(--bs-btn-active-border-color);
}
.btn-sm {
    --bs-btn-padding-x: 0.7rem;
    --bs-btn-padding-y: 0.35rem;
    min-height: 36px;
}

.btn-primary,
.btn-gradient,
.gradient-bg,
.btn-success {
    --bs-btn-bg: var(--mm-accent);
    --bs-btn-color: var(--mm-accent-ink);
    --bs-btn-border-color: var(--mm-accent);
    --bs-btn-hover-bg: var(--mm-accent-hover);
    --bs-btn-hover-color: var(--mm-accent-ink);
    --bs-btn-hover-border-color: var(--mm-accent-hover);
    --bs-btn-active-bg: var(--mm-accent-hover);
    --bs-btn-active-color: var(--mm-accent-ink);
    --bs-btn-active-border-color: var(--mm-accent-hover);
    --bs-btn-disabled-bg: var(--mm-accent);
    --bs-btn-disabled-color: var(--mm-accent-ink);
    --bs-btn-disabled-border-color: var(--mm-accent);
    background-image: none;
}
.btn-secondary,
.btn-dark {
    --bs-btn-bg: var(--mm-surface-2);
    --bs-btn-color: var(--mm-ink);
    --bs-btn-border-color: var(--mm-line-strong);
    --bs-btn-hover-bg: var(--mm-line);
    --bs-btn-hover-color: var(--mm-ink);
    --bs-btn-hover-border-color: var(--mm-line-strong);
    --bs-btn-active-bg: var(--mm-line);
    --bs-btn-active-color: var(--mm-ink);
    --bs-btn-active-border-color: var(--mm-line-strong);
}
.btn-danger {
    --bs-btn-bg: var(--mm-no-soft);
    --bs-btn-color: var(--mm-no);
    --bs-btn-border-color: var(--mm-no-line);
    --bs-btn-hover-bg: var(--mm-no-soft);
    --bs-btn-hover-color: var(--mm-no);
    --bs-btn-hover-border-color: var(--mm-no);
    --bs-btn-active-bg: var(--mm-no-soft);
    --bs-btn-active-color: var(--mm-no);
    --bs-btn-active-border-color: var(--mm-no);
    background-image: none;
}
.btn-warning {
    --bs-btn-bg: var(--mm-saffron);
    --bs-btn-color: #1A1F1C;
    --bs-btn-border-color: var(--mm-saffron);
    --bs-btn-hover-bg: #D9A43A;
    --bs-btn-hover-color: #1A1F1C;
    --bs-btn-hover-border-color: #D9A43A;
    background-image: none;
}
.btn-outline-secondary,
.btn-outline-gradient,
.btn-light {
    --bs-btn-bg: var(--mm-surface);
    --bs-btn-color: var(--mm-ink);
    --bs-btn-border-color: var(--mm-line-strong);
    --bs-btn-hover-bg: var(--mm-surface-2);
    --bs-btn-hover-color: var(--mm-ink);
    --bs-btn-hover-border-color: var(--mm-line-strong);
    --bs-btn-active-bg: var(--mm-surface-2);
    --bs-btn-active-color: var(--mm-ink);
    --bs-btn-active-border-color: var(--mm-ink);
}
.btn-outline-primary,
.btn-outline-success {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--mm-accent);
    --bs-btn-border-color: var(--mm-accent);
    --bs-btn-hover-bg: var(--mm-accent-soft);
    --bs-btn-hover-color: var(--mm-accent);
    --bs-btn-hover-border-color: var(--mm-accent);
    --bs-btn-active-bg: var(--mm-accent);
    --bs-btn-active-color: var(--mm-accent-ink);
    --bs-btn-active-border-color: var(--mm-accent);
}
.btn-outline-danger {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--mm-no);
    --bs-btn-border-color: var(--mm-no-line);
    --bs-btn-hover-bg: var(--mm-no-soft);
    --bs-btn-hover-color: var(--mm-no);
    --bs-btn-hover-border-color: var(--mm-no);
}
.btn-close { filter: none; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Forms */
.form-control,
.form-select {
    background-color: var(--mm-surface);
    color: var(--mm-ink);
    border: 1px solid var(--mm-line-strong);
    border-radius: var(--mm-radius);
    min-height: 44px;
}
.form-control:focus,
.form-select:focus {
    background-color: var(--mm-surface);
    color: var(--mm-ink);
    border-color: var(--mm-accent);
    box-shadow: var(--mm-focus);
}
.form-control::placeholder { color: var(--mm-muted); }
.form-check-input:checked {
    background-color: var(--mm-accent);
    border-color: var(--mm-accent);
}

/* Badges, alerts, tables, modals */
.badge { font-family: var(--mm-font-body); font-weight: 600; border-radius: 999px; }
.badge-required,
.badge.bg-primary {
    background: var(--mm-accent-soft) !important;
    color: var(--mm-accent) !important;
}
/* Alerts: neutral surface card, type shown by a 3px left rule instead of tinted Bootstrap fills */
.alert {
    --mm-alert-rule: var(--mm-line-strong);
    background: var(--mm-surface);
    color: var(--mm-ink);
    border: 1px solid var(--mm-line);
    border-left: 3px solid var(--mm-alert-rule);
    border-radius: var(--mm-radius);
    box-shadow: none;
}
.alert a, .alert .alert-link { color: var(--mm-accent); }
.alert-info, .alert-primary { --mm-alert-rule: var(--mm-accent); }
.alert-success { --mm-alert-rule: var(--mm-accent); background: var(--mm-accent-soft); }
.alert-warning { --mm-alert-rule: var(--mm-saffron); }
.alert-danger { --mm-alert-rule: var(--mm-no); background: var(--mm-no-soft); border-color: var(--mm-no-line); border-left-color: var(--mm-no); }
.alert-secondary { --mm-alert-rule: var(--mm-line-strong); background: var(--mm-surface-2); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--mm-ink); --bs-table-border-color: var(--mm-line); }
.modal-content,
.auth-card {
    background: var(--mm-surface);
    color: var(--mm-ink);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-card);
    box-shadow: var(--mm-shadow);
    backdrop-filter: none;
}
.auth-card::before { display: none; }
.modal-header,
.modal-footer { border-color: var(--mm-line); }
.modal-title { color: var(--mm-ink); }

/* SweetAlert */
.swal2-popup,
.swal-neon-gradient {
    background: var(--mm-surface) !important;
    color: var(--mm-ink) !important;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-card) !important;
    font-family: var(--mm-font-body);
}
.swal2-title,
.swal-neon-gradient .swal2-title {
    color: var(--mm-ink) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    font-family: var(--mm-font-display);
}
.swal2-html-container,
.swal-neon-gradient .swal2-html-container { color: var(--mm-muted) !important; }

/* Recipe search results in the change-recipe dialogs (/next-week, /mealplan);
   overrides main.css #searchResults span { width: 100% } */
#searchResults .recipe-result {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
    font-size: 0.9rem;
    color: var(--mm-ink);
    background: var(--mm-surface);
    border: 1px solid var(--mm-line) !important;
    border-radius: var(--mm-radius) !important;
    padding: 0.6rem 0.75rem !important;
}
#searchResults .recipe-result:hover {
    background: var(--mm-surface-2);
    color: var(--mm-ink);
    border-color: var(--mm-line-strong) !important;
}
#searchResults span.badge {
    flex: none;
    width: auto;
    margin: 0;
    border: 0;
    padding: 0.3em 0.6em;
    border-radius: 999px;
    font-size: 0.72rem;
    background: var(--mm-accent-soft) !important;
    color: var(--mm-accent);
}
.swal2-styled.swal2-confirm,
.swal-neon-gradient .swal2-confirm {
    background: var(--mm-accent) !important;
    color: var(--mm-accent-ink) !important;
    border-radius: var(--mm-radius) !important;
}
.swal2-styled.swal2-cancel,
.swal-neon-gradient .swal2-cancel {
    background: var(--mm-surface-2) !important;
    color: var(--mm-ink) !important;
    border-radius: var(--mm-radius) !important;
}
.swal2-styled:focus { box-shadow: var(--mm-focus) !important; }

/* Footer */
footer {
    background: var(--mm-surface);
    color: var(--mm-muted);
    border-top: 1px solid var(--mm-line);
}
.footer-links h4 {
    font-family: var(--mm-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mm-ink);
}
.footer-links a { color: var(--mm-muted); }
.footer-links a:hover { color: var(--mm-ink); }

/* Misc legacy decorations */
.scroll-to-top {
    background: var(--mm-surface);
    color: var(--mm-ink);
    border: 1px solid var(--mm-line-strong);
    box-shadow: var(--mm-shadow);
}
.account-tabs .tab-btn.active::after,
.tab-btn.active {
    border-image: none;
}

/* Page-level gradient leftovers (phase 2+ will replace these in their owning files) */
.card-header.bg-gradient { background: var(--mm-surface-2); color: var(--mm-ink); }
.meal-day-card.today-highlight,
.user-tiles-grid .today-highlight {
    border: 2px solid var(--mm-accent);
    border-image: none;
}
.meal-day-card.today-highlight .card-header,
.user-tiles-grid .today-highlight .card-header {
    background: var(--mm-accent-soft);
}
.onboarding-tile.finished .onboarding-tile-content { background: none; }

/* Rating buttons on every page (thumbs/meh/thumbs/star): state by fill, never purple */
.btn.rating-btn {
    --bs-btn-bg: var(--mm-surface);
    --bs-btn-color: var(--mm-muted);
    --bs-btn-border-color: var(--mm-line);
    --bs-btn-hover-bg: var(--mm-surface-2);
    --bs-btn-hover-color: var(--mm-ink);
    --bs-btn-hover-border-color: var(--mm-line-strong);
    box-shadow: none;
}
.btn.rating-btn.active { background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); color: var(--bs-btn-color); }
.btn.rating-btn.active[data-rating="0"] {
    --bs-btn-bg: var(--mm-no-soft); --bs-btn-color: var(--mm-no); --bs-btn-border-color: var(--mm-no-line);
    --bs-btn-hover-bg: var(--mm-no-soft); --bs-btn-hover-color: var(--mm-no); --bs-btn-hover-border-color: var(--mm-no);
    --bs-btn-active-bg: var(--mm-no-soft); --bs-btn-active-color: var(--mm-no); --bs-btn-active-border-color: var(--mm-no-line);
}
.btn.rating-btn.active[data-rating="1"] {
    --bs-btn-bg: var(--mm-surface-2); --bs-btn-color: var(--mm-ink); --bs-btn-border-color: var(--mm-line-strong);
    --bs-btn-hover-bg: var(--mm-surface-2); --bs-btn-hover-color: var(--mm-ink);
    --bs-btn-active-bg: var(--mm-surface-2); --bs-btn-active-color: var(--mm-ink); --bs-btn-active-border-color: var(--mm-line-strong);
}
.btn.rating-btn.active[data-rating="2"] {
    --bs-btn-bg: var(--mm-accent); --bs-btn-color: var(--mm-accent-ink); --bs-btn-border-color: var(--mm-accent);
    --bs-btn-hover-bg: var(--mm-accent-hover); --bs-btn-hover-color: var(--mm-accent-ink); --bs-btn-hover-border-color: var(--mm-accent-hover);
    --bs-btn-active-bg: var(--mm-accent); --bs-btn-active-color: var(--mm-accent-ink); --bs-btn-active-border-color: var(--mm-accent);
}
.btn.rating-btn.active[data-rating="3"] {
    --bs-btn-bg: var(--mm-saffron); --bs-btn-color: #1A1F1C; --bs-btn-border-color: var(--mm-saffron);
    --bs-btn-hover-bg: var(--mm-saffron); --bs-btn-hover-color: #1A1F1C; --bs-btn-hover-border-color: var(--mm-saffron);
    --bs-btn-active-bg: var(--mm-saffron); --bs-btn-active-color: #1A1F1C; --bs-btn-active-border-color: var(--mm-saffron);
}
.btn.rating-btn.active .favorite-star { color: inherit !important; }

/* Shared recipe components: type tag, meta line, macro bar (cards and recipe modal) */
:root, [data-bs-theme="dark"] { --mm-macro-p: #CFE5D7; --mm-macro-c: #5E8F74; }
[data-bs-theme="light"] { --mm-macro-p: #1F4D3A; --mm-macro-c: #8DB7A0; }

.mm-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    color: var(--mm-accent);
    background: var(--mm-accent-soft);
}

.mm-tag:empty {
    display: none;
}

.mm-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--mm-muted);
}

.mm-meta i {
    margin-right: 0.15rem;
}

.mm-macro-bar {
    display: flex;
    gap: 2px;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--mm-surface-2);
}

.mm-macro-bar span {
    flex: 1 1 0;
}

.mm-macro-p, .mm-dot-p { background: var(--mm-macro-p); }
.mm-macro-c, .mm-dot-c { background: var(--mm-macro-c); }
.mm-macro-f, .mm-dot-f { background: var(--mm-saffron); }


.mm-macro-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--mm-muted);
}

.mm-macro-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.mm-macro-legend .protein,
.mm-macro-legend .carbs,
.mm-macro-legend .fat {
    color: var(--mm-ink);
    font-weight: 600;
}

.mm-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

/* Recipe modal (SweetAlert2, recipedetails.js) */
body.swal2-shown .scroll-to-top { display: none !important; }
.swal2-close { color: var(--mm-muted); border-radius: 10px; }
.swal2-close:hover { color: var(--mm-ink); }
.swal2-close:focus { box-shadow: none; }
.swal2-close:focus-visible { box-shadow: var(--mm-focus); }

.recipe-modal-popup.swal2-popup {
    padding: 1.75rem 1.75rem 1.5rem;
    text-align: left;
}
.recipe-modal-popup .swal2-title {
    padding: 0 2.5rem 0 0;
    text-align: left;
    font-size: 1.6rem;
    line-height: 1.2;
}
.recipe-modal-popup .swal2-html-container {
    margin: 0.75rem 0 0;
    padding: 0;
    text-align: left;
    color: var(--mm-ink) !important;
    font-size: 1rem;
    overflow: visible;
}
.recipe-modal-content .recipe-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0;
}
.recipe-modal-content .recipe-kicker .mm-meta { margin: 0; }
.recipe-modal-content .recipe-macros { max-width: 420px; margin-top: 1rem; }
.recipe-modal-content .recipe-body {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 2rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mm-line);
}
.recipe-modal-content h3 {
    margin: 0 0 0.75rem;
    font-family: var(--mm-font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mm-muted);
    text-align: left;
}
.recipe-modal-content .ingredients-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.recipe-modal-content .ingredients-list li {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--mm-line);
    font-size: 0.95rem;
    line-height: 1.35;
}
.recipe-modal-content .ingredients-list li:last-child { border-bottom: 0; }
.recipe-modal-content .ingredient-amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.recipe-modal-content .is-optional { color: var(--mm-muted); }
.recipe-modal-content .ingredient-optional {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mm-muted);
    background: var(--mm-surface-2);
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}
.recipe-modal-content .recipe-steps ol {
    margin: 0;
    padding-left: 1.4rem;
}
.recipe-modal-content .recipe-steps li {
    margin-bottom: 0.85rem;
    padding-left: 0.25rem;
    line-height: 1.55;
}
.recipe-modal-content .recipe-steps li::marker {
    font-weight: 600;
    color: var(--mm-accent);
}
.recipe-modal-content .recipe-ai-note {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0 0;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    background: var(--mm-surface-2);
    color: var(--mm-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}
.recipe-modal-content .recipe-ai-note i { margin-top: 0.15rem; }
.recipe-modal-content .recipe-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}
.recipe-modal-content .recipe-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
@media (max-width: 767.98px) {
    .recipe-modal-popup.swal2-popup { padding: 1.25rem 1rem 1rem; }
    .recipe-modal-popup .swal2-title { font-size: 1.3rem; }
    .recipe-modal-content .recipe-body { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .recipe-modal-content .recipe-actions .btn { width: 100%; }
}

/* Overall rating scale (meal plan, recipes): neutral track instead of red-yellow gradient */
.rating-scale { background: var(--mm-line-strong); }
.rating-mark { color: var(--mm-muted); }
.rating-triangle { border-bottom-color: var(--mm-ink); filter: none; }
.favorite-star { color: var(--mm-saffron); }

/* Week picker (meal plan, shopping list): prev / current / next in one row */
.meal-plan-navigation, .shopping-list-navigation {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.5rem;
    padding: 0;
}
.meal-plan-navigation .btn, .shopping-list-navigation .btn {
    width: auto;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    border-radius: 999px;
}
.meal-plan-navigation .current-plan-date, .shopping-list-navigation .current-plan-date {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 0 1.1rem;
    border-radius: 999px;
    border: 0;
    background: var(--mm-ink);
    color: var(--mm-ground);
    font-weight: 600;
}
@media (max-width: 767.98px) {
    .meal-plan-navigation .current-plan-date, .shopping-list-navigation .current-plan-date {
        flex: 1 1 auto;
        order: 0;
        justify-content: center;
        margin: 0;
    }
    .meal-plan-navigation .btn, .shopping-list-navigation .btn {
        flex: 0 0 44px;
        width: 44px !important;
        padding: 0;
    }
    .meal-plan-navigation .btn span, .shopping-list-navigation .btn span { display: none !important; }
}

/* Mobile bottom tab bar: active item marked by accent color and a top rule, not a dark block */
.mobile-tab-bar {
    background: var(--mm-surface);
    border-top: 1px solid var(--mm-line);
    box-shadow: none;
}
.mobile-tab-bar a {
    min-height: 56px;
    color: var(--mm-muted);
    font-size: 0.75rem;
    font-weight: 600;
}
.mobile-tab-bar a.active {
    background: none;
    color: var(--mm-accent);
    box-shadow: inset 0 2px 0 var(--mm-accent);
}
/* Footer content aligned to the page container */
.footer-content {
    max-width: 1140px;
    margin: 0 auto 30px;
    padding: 0 16px;
}
.footer-logo { text-align: left; }
footer .logo { width: auto; height: auto; float: none; margin: 0; }
@media (max-width: 767.98px) {
    .footer-logo { text-align: center; }
    footer .logo { justify-content: center; }
}