/* ===== CSS Reset & Base ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* Prevent iOS landscape font zoom; smooth scroll janks on iOS so only enable on non-iOS */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html:not(.ios) {
    scroll-behavior: smooth;
}

html.ios {
    /* iOS-specific: remove smooth scroll to avoid overscroll jank */
    -webkit-tap-highlight-color: transparent;
}

html.ios button,
html.ios a,
html.ios label,
html.ios select,
html.ios input,
html.ios [role="button"] {
    touch-action: manipulation;
}

/* Dark theme (default) */
:root,
[data-theme="dark"] {
    /* Colors */
    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-primary: #4ade80;
    --color-primary-hover: #22c55e;
    --color-danger: #fb7185;
    --color-danger-hover: #f43f5e;
    --color-text: #e2e8f0;
    --color-text-secondary: #94a3b8;
    --color-border: #334155;
    --color-success-bg: #14532d;
    --color-success-text: #86efac;
    --color-error-bg: #7f1d1d;
    --color-error-text: #fca5a5;
    --placeholder-gradient-start: #1e293b;
    --placeholder-gradient-end: #334155;
    --placeholder-highlight: #1e293b;
    --focus-ring: 0 0 0 3px rgba(74, 222, 128, 0.25);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Typography */
    --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --control-height: 2.4rem; /* shared by the search input and buttons */
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;

    /* Misc */
    --radius: 0.75rem;
    --transition: 150ms ease;
}

/* Light theme */
[data-theme="light"] {
    --color-bg: #f8f9fa;
    --color-surface: #ffffff;
    --color-primary: #166534;
    --color-primary-hover: #14532d;
    --color-danger: #ef4444;
    --color-danger-hover: #dc2626;
    --color-text: #1f2937;
    --color-text-secondary: #6b7280;
    --color-border: #e5e7eb;
    --color-success-bg: #d1fae5;
    --color-success-text: #065f46;
    --color-error-bg: #fee2e2;
    --color-error-text: #991b1b;

    /* Image placeholder gradient */
    --placeholder-gradient-start: #e0e7ff;
    --placeholder-gradient-end: #c7d2fe;
    --placeholder-highlight: #e0e7ff;
    --focus-ring: 0 0 0 3px rgba(22, 101, 52, 0.2);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* Carnival theme — bright, garish, neon */
[data-theme="carnival"] {
    --color-bg: #cc33cc;
    --color-surface: #33cc33;
    --color-primary: #ffff00;
    --color-primary-hover: #ffcc00;
    --color-danger: #cc0000;
    --color-danger-hover: #cc5500;
    --color-text: #0000cc;
    --color-text-secondary: #ffff66;
    --color-border: #33cccc;
    --color-success-bg: #ffcc00;
    --color-success-text: #cc6600;
    --color-error-bg: #cc0000;
    --color-error-text: #66cc33;
    --placeholder-gradient-start: #ffff00;
    --placeholder-gradient-end: #33cc33;
    --placeholder-highlight: #ffcc00;
    --focus-ring: 0 0 0 3px rgba(255, 255, 0, 0.5);
    --shadow-sm: 0 0 8px rgba(255, 255, 0, 0.4);
    --shadow-md: 0 0 16px rgba(255, 255, 0, 0.4), 0 0 8px rgba(51, 204, 204, 0.3);
    --shadow-lg: 0 0 24px rgba(255, 255, 0, 0.5), 0 0 12px rgba(51, 204, 204, 0.4);
}

[data-theme="dark"] .btn-primary {
    color: #052e16;
}

/* Carnival logo — each letter a different color */
[data-theme="carnival"] .logo-letter:nth-child(1) { color: #ffff00; }
[data-theme="carnival"] .logo-letter:nth-child(2) { color: #00ffff; }
[data-theme="carnival"] .logo-letter:nth-child(3) { color: #ff3333; }
[data-theme="carnival"] .logo-letter:nth-child(4) { color: #cc33ff; }
[data-theme="carnival"] .logo-letter:nth-child(5) { color: #ffff00; }
[data-theme="carnival"] .logo-letter:nth-child(6) { color: #00ffff; }

[data-theme="dark"] .btn-primary:hover {
    color: #052e16;
}

[data-theme="dark"] .btn-add {
    color: #052e16;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--color-primary-hover);
}

/* ===== Layout ===== */
.container {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* ===== Navbar ===== */
.navbar {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

/* ===== Toast ===== */
/* Sits just under the navbar; overflow clips the toast so it slides out from behind the header */
.toast-host {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    overflow: hidden;
    pointer-events: none;
}

.toast {
    margin: 0 auto;
    width: fit-content;
    max-width: calc(100% - 2 * var(--space-md));
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-md);
    transform: translateY(-100%);
    transition: transform 250ms ease;
}

.toast-visible {
    transform: translateY(0);
}

.toast-success {
    background-color: var(--color-primary);
}

.toast-error {
    background-color: var(--color-danger);
}

.nav-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 64px;
    gap: var(--space-md);
}

.nav-top {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.logo {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.025em;
}

.nav-links {
    display: flex;
    gap: var(--space-lg);
    margin-left: auto;
}

.nav-links a {
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: var(--font-size-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius);
    transition: background-color var(--transition), color var(--transition);
}

.nav-links a:hover {
    color: var(--color-text);
    background-color: var(--color-bg);
}

.nav-links a.active,
.nav-links a.active:hover {
    color: var(--color-primary);
}

/* ===== Flash Messages ===== */
.flash-container {
    margin-top: var(--space-lg);
}

.flash {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: var(--space-sm);
}

.flash.success {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
}

.flash.error {
    background-color: var(--color-error-bg);
    color: var(--color-error-text);
}

/* ===== Page Title ===== */
.page-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: var(--space-xl) 0 var(--space-lg);
    letter-spacing: -0.025em;
}

/* ===== Items Grid ===== */
.items-grid {
    display: grid;
    gap: var(--space-lg);
}

/* ===== Card ===== */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.card-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
}

.card-time {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.card-description {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
    line-height: 1.7;
}

.card-footer {
    display: flex;
    justify-content: flex-end;
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-height);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition), transform var(--transition);
    touch-action: manipulation;
}

.btn[hidden] {
    display: none;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background-color: var(--color-primary);
    color: #ffffff;
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    color: #ffffff;
}

.btn-danger {
    background-color: transparent;
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
}

.btn-danger:hover {
    background-color: var(--color-danger);
    color: #ffffff;
}

/* ===== Empty State ===== */
.empty-state {
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
}

.empty-icon {
    width: 64px;
    height: 64px;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.empty-state h2 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-sm);
}

.empty-state p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
}

/* ===== Footer ===== */
.footer {
    margin-top: auto;
    padding: var(--space-xl) 0;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-border);
}

/* ===== Page Header ===== */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--space-xl) 0 var(--space-lg);
}

.page-header .page-title {
    margin: 0;
}

.btn-add {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    color: #ffffff;
    font-size: var(--font-size-xl);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: background-color var(--transition), transform var(--transition);
    line-height: 1;
    touch-action: manipulation;
}

.btn-add:hover {
    background: var(--color-primary-hover);
    transform: scale(1.08);
}

/* ===== Search Box ===== */
.search-box {
    position: sticky;
    top: 65px; /* below the navbar (64px content + 1px border) */
    z-index: 50;
    margin-bottom: var(--space-md);
    background: var(--color-bg);
    padding: var(--space-sm) 0;
}

.search-box input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color var(--transition);
}

.search-box input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

/* Search input with the add button right-justified beside it (recipes page) */
.search-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.search-row input {
    height: var(--control-height);
    flex: 1;
    min-width: 0;
}

/* Category filter chips under the ingredient search */
.category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.category-filter {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.category-filter:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.category-filter.active {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: var(--focus-ring);
}

/* Search box as the first element on a page: breathing room below the navbar */
.search-box-top {
    padding-top: var(--space-lg);
    margin-bottom: 0; /* table header pins directly beneath, no gap for rows to show through */
}

/* Inside a modal, search box should not be sticky */
.modal-panel .search-box {
    position: static;
}

/* Add to Groceries modal: search area blends with the modal background (input keeps its own) */
#generateModal .search-box,
#mealplanModal .search-box {
    background: var(--color-surface);
    margin-bottom: 0;
    padding-bottom: 0;
}

#generateModal #groceryRecipeList,
#mealplanModal #recipeSelectList {
    margin-top: var(--space-xs);
}

/* Search results and recipes to add each show 4 rows, then scroll */
#groceryRecipeList .recipe-select-item,
#grocerySelectedList .recipe-select-item,
#recipeSelectList .recipe-select-item,
#mealplanSelectedList .recipe-select-item {
    height: 2rem;
    box-sizing: border-box;
}

#groceryRecipeList .recipe-select-item span,
#grocerySelectedList .recipe-select-item span,
#recipeSelectList .recipe-select-item span,
#mealplanSelectedList .recipe-select-item span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Row height in the Add to Groceries lists: taller with the servings stepper, compact without; lists always show 4 rows */
html { --qty-row-h: 2.75rem; }
html[data-show-quantities="false"] { --qty-row-h: 2rem; }

/* Meal plan "Add to Groceries" rows: checkbox + title on the left, servings stepper right-justified */
.grocery-gen-columns {
    display: flex;
    justify-content: space-between;
    padding: 0 var(--space-md);
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
}

#groceryGenRecipeList {
    max-height: calc(4 * var(--qty-row-h) + 2 * var(--space-sm) + 2px);
    box-sizing: border-box;
}

.grocery-gen-item {
    height: var(--qty-row-h);
    box-sizing: border-box;
    flex-shrink: 0;
    cursor: default;
}

.grocery-gen-item label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.grocery-gen-item label span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grocery-gen-item .servings-control {
    margin: 0;
    margin-left: auto;
    flex-shrink: 0;
}

.grocery-gen-item .servings-label {
    min-width: 1.5rem;
    text-align: right;
}

/* "Recipes to Add" heading row in the groceries modal: gray label left, "Servings" right */
.grocery-selected-columns {
    margin: var(--space-lg) 0 0;
}

/* Taller rows (same as the meal plan modal) so the servings buttons fit; list still shows 4 rows */
#generateModal #grocerySelectedList {
    height: calc(4 * var(--qty-row-h) + 2 * var(--space-sm) + 2px);
}

#generateModal #grocerySelectedList .recipe-select-item {
    height: var(--qty-row-h);
    flex-shrink: 0;
}

#grocerySelectedList .servings-control {
    margin: 0 0 0 auto;
    flex-shrink: 0;
}

#grocerySelectedList .servings-label {
    min-width: 1.5rem;
    overflow: visible;
    text-align: right;
}

.recipe-select-heading {
    margin: var(--space-lg) 0 0;
    font-size: var(--font-size-base);
}

#groceryRecipeList,
#grocerySelectedList,
#recipeSelectList,
#mealplanSelectedList {
    height: calc(4 * 2rem + 2 * var(--space-sm) + 2px);
    box-sizing: border-box;
}

.recipe-select-list .recipe-select-empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted, var(--color-text));
}

/* ===== Add Dropdown ===== */
.add-dropdown {
    position: relative;
}

.add-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-sm));
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    min-width: 160px;
    z-index: 150;
    overflow: hidden;
}

.add-dropdown-menu.is-open {
    display: block;
}

.add-dropdown-title {
    padding: var(--space-sm) var(--space-lg);
    background: var(--color-bg);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}

.add-dropdown-item {
    display: block;
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    border: none;
    background: transparent;
    text-align: left;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    transition: background-color var(--transition);
    font-family: var(--font-family);
}

.add-dropdown-item:hover {
    background: var(--color-bg);
}

.add-dropdown-item:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
}

/* ===== Recipe Grid ===== */
.recipe-section-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0 0 var(--space-2xl);
}

.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-lg);
    padding-bottom: var(--space-2xl);
}

/* First grid under the sticky search box: gap scrolls with the content */
.search-box-top + .recipe-grid,
.search-box-top + #recipeFavorites > .recipe-grid,
.search-box-top + #recipeFavorites[style*="none"] + #recipeGrid {
    padding-top: var(--space-md);
}

/* ===== Recipe Card ===== */
.recipe-card {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
    color: var(--color-text);
    text-decoration: none;
}

.recipe-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    color: var(--color-text);
}

.recipe-card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(135deg, var(--placeholder-gradient-start) 0%, var(--placeholder-gradient-end) 100%);
}

.recipe-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recipe-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    opacity: 0.5;
}

.recipe-card-placeholder svg {
    width: 48px;
    height: 48px;
}

.recipe-card-body {
    padding: var(--space-md) var(--space-lg);
}

.recipe-card-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.4;
}

.recipe-card-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
}

/* ===== Favorite Star ===== */
.favorite-star {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    vertical-align: middle;
    transition: color var(--transition), transform var(--transition);
}

.favorite-star svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
}

.recipe-detail-title .favorite-star svg {
    width: 1.5rem;
    height: 1.5rem;
}

.favorite-star:hover {
    transform: scale(1.15);
}

.favorite-star.is-favorite {
    color: #facc15;
}

.favorite-star.is-favorite svg {
    fill: currentColor;
}

/* ===== Modal ===== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms ease;
}

.modal-open {
    opacity: 1;
    visibility: visible;
}

/* Lock page scroll behind any open modal; scrolling stays inside the modal */
html:has(.modal-open),
body:has(.modal-open) {
    overflow: hidden;
}

.modal-backdrop,
.modal-scroll,
.recipe-select-list {
    overscroll-behavior: contain;
}

.modal-panel {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 480px;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    transform: translateY(12px);
    transition: transform 200ms ease;
}

.modal-open .modal-panel {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xl);
    padding-bottom: var(--space-md);
    flex-shrink: 0;
}

.modal-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--space-xl) var(--space-xl);
    flex: 1;
    min-height: 0;
}

.modal-form {
    padding-bottom: var(--space-md);
}

.modal-header h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition), color var(--transition);
}

.modal-close:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.modal-form .form-group {
    margin-bottom: var(--space-lg);
}

.modal-form label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--color-text);
}

.modal-form input,
.modal-form textarea {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color var(--transition);
    resize: vertical;
}

.modal-form input:focus,
.modal-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-md);
    align-items: center;
    padding: calc(var(--space-lg) / 2) var(--space-xl);
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

.btn-secondary {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.btn-secondary:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.btn-outline:hover {
    background: var(--color-bg);
    color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

/* Deactivated modifier: grayed out, no hover feedback. Pair with .btn-primary or .btn-outline */
.btn-primary.btn-deactivated,
.btn-primary.btn-deactivated:hover {
    background-color: color-mix(in srgb, var(--color-text) 25%, var(--color-surface));
    color: color-mix(in srgb, var(--color-text) 55%, var(--color-surface));
}

.btn-outline.btn-deactivated,
.btn-outline.btn-deactivated:hover {
    background: transparent;
    color: color-mix(in srgb, var(--color-text) 40%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-text) 25%, var(--color-surface));
}

.btn.btn-deactivated,
.btn.btn-deactivated:hover {
    cursor: not-allowed;
    transform: none;
}

/* ===== Ingredient Selection ===== */
.ingredient-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-height: 180px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg);
}

.ingredient-row:not(tr) {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.ingredient-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: normal;
    cursor: pointer;
    padding: var(--space-xs) 0;
    transition: opacity var(--transition);
    flex: 1;
    min-width: 0;
}

.ingredient-checkbox:hover {
    opacity: 0.7;
}

.ingredient-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

.ingredient-label {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ingredient-amount {
    width: 70px;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--transition);
    flex-shrink: 0;
    -moz-appearance: textfield;
}

.ingredient-amount:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.ingredient-amount::-moz-responsive {
    appearance: none;
}

.ingredient-amount::-webkit-outer-spin-button,
.ingredient-amount::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ===== Image Upload ===== */
.image-upload-area {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--transition);
}

.image-upload-area:hover,
.image-upload-area.drag-over {
    border-color: var(--color-primary);
}

.image-upload-area.has-image {
    border-style: solid;
    border-color: var(--color-border);
}

.image-upload-area.has-image:hover {
    border-color: var(--color-primary);
}

.image-upload-area input[type="file"] {
    display: none;
}

.image-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.image-upload-content svg {
    color: var(--color-text-secondary);
    opacity: 0.5;
}

.image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-remove-btn {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition);
    z-index: 1;
}

.image-remove-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* ===== Recipe Detail ===== */
.recipe-detail {
    margin: var(--space-xl) 0 var(--space-2xl);
}

.back-link {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
    transition: color var(--transition);
}

.back-link:hover {
    color: var(--color-primary);
}

.recipe-detail-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 500px;
    overflow: hidden;
    border-radius: var(--radius);
    margin-bottom: var(--space-xl);
    background: linear-gradient(135deg, var(--placeholder-gradient-start) 0%, var(--placeholder-gradient-end) 100%);
}

.recipe-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recipe-detail-placeholder {
    width: 100%;
    height: 100%;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    opacity: 0.4;
}

.recipe-detail-placeholder svg {
    width: 80px;
    height: 80px;
}

.recipe-detail-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    letter-spacing: -0.025em;
    margin-bottom: var(--space-xl);
}

.recipe-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
}

.recipe-detail-actions {
    margin-left: auto;
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.recipe-detail-header .recipe-detail-title {
    margin-bottom: 0;
}

.recipe-source {
    margin-top: 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.recipe-source svg {
    flex-shrink: 0;
}

.recipe-source a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.recipe-source a:hover {
    color: var(--color-primary);
}

.recipe-detail-section {
    margin-bottom: var(--space-xl);
}

.recipe-detail-section h2 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.recipe-steps {
    padding-left: var(--space-xl);
}

.recipe-steps li {
    margin-bottom: var(--space-sm);
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.recipe-ingredients {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recipe-ingredients li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-border);
}

.recipe-ingredients li:last-child {
    border-bottom: none;
}

.recipe-ingredients li input[type="checkbox"] {
    margin-top: 4px;
    accent-color: var(--color-primary);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.recipe-ingredients li label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    line-height: 1.5;
}

.recipe-ingredients li .ingredient-amount {
    width: auto;
    border: none;
    padding: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    font-weight: 600;
    background: transparent;
    box-shadow: none;
    margin-left: var(--space-xs);
}

/* ===== Servings Control ===== */
.servings-control {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.servings-control .btn {
    padding: 4px 12px;
    font-size: 0.925rem;
    line-height: 1.3;
}

.servings-label {
    margin-right: var(--space-xs);
}

/* ===== Unmapped Ingredients List ===== */
.ingredient-tabs {
    display: flex;
    gap: var(--space-xs);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-sm);
}

.ingredient-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.ingredient-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.ingredient-tab-empty {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.unmapped-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.unmapped-list li {
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.unmapped-list li:last-child {
    border-bottom: none;
}

/* ===== Ingredient Table ===== */
.ingredient-table-wrapper {
    /* No overflow here: it would make the wrapper the scroll container and break the sticky header */
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-top: var(--space-md); /* gap below the search box; scrolls with the content */
    margin-bottom: var(--space-2xl);
}

.ingredient-table {
    width: 100%;
    border-collapse: collapse;
}

.ingredient-table thead {
    background: var(--color-bg);
}

/* Column headers stay pinned under the sticky search box; --thead-top is set from JS */
.ingredient-table th {
    position: sticky;
    top: var(--thead-top, 0);
    z-index: 40;
    background: var(--color-bg);
    box-shadow: inset 0 -2px 0 var(--color-border); /* border-bottom doesn't travel with sticky cells */
    padding: var(--space-md) var(--space-lg);
    text-align: right;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ingredient-table th:first-child {
    text-align: left;
}

/* Macro columns (protein, carbs, fat) shrink-wrap to content */
.ingredient-table th:nth-child(n+2) {
    white-space: nowrap;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

.ingredient-table td {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-base);
    text-align: right;
}

.ingredient-table td:first-child {
    text-align: left;
}

/* Macro data cells — tighter horizontal padding */
.ingredient-table td:nth-child(n+2) {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    white-space: nowrap;
}

/* Category column wraps instead of overflowing the table on narrow screens */
.ingredient-table td:nth-child(2) {
    white-space: normal;
    overflow-wrap: anywhere;
}

.ingredient-table tbody tr {
    transition: background-color var(--transition);
}

.ingredient-table tbody tr:hover {
    background: var(--color-bg);
}

.ingredient-name {
    font-weight: 600;
    color: var(--color-text);
}

/* ===== Form Row ===== */
.form-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

/* ===== Responsive ===== */
@media (max-width: 640px) {
    .nav-content {
        flex-direction: column;
        height: auto;
        padding: var(--space-md) 0;
        gap: var(--space-sm);
        align-items: stretch;
    }

    .nav-top {
        position: relative;
        height: 36px;
        justify-content: center;
    }

    .nav-top .hamburger {
        position: absolute;
        left: 0;
    }

    .nav-links {
        justify-content: center;
        margin-left: 0;
        gap: var(--space-sm);
    }

    .card-header {
        flex-direction: column;
    }

    .page-title {
        font-size: var(--font-size-xl);
    }

    .recipe-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: var(--space-md);
    }

    .page-header .page-title {
        font-size: var(--font-size-xl);
    }

    .modal-panel {
        margin: var(--space-md);
        max-height: calc(100dvh - 2 * var(--space-md));
    }

    /* Tighter modal chrome so the Add to Groceries modals fit an iPhone without the panel itself scrolling */
    .modal-header {
        padding: var(--space-lg) var(--space-lg) var(--space-sm);
    }

    .modal-scroll {
        padding: 0 var(--space-lg) var(--space-md);
    }

    .modal-actions {
        padding: var(--space-sm) var(--space-lg);
        gap: var(--space-sm);
    }

    .modal-actions .btn {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    /* Lists show 3 rows (not 4) on phones, then scroll internally */
    html { --list-rows: 3; }

    #groceryRecipeList,
    #grocerySelectedList,
    #recipeSelectList,
    #mealplanSelectedList {
        height: calc(var(--list-rows) * 2rem + 2 * var(--space-sm) + 2px);
    }

    #generateModal #grocerySelectedList {
        height: calc(var(--list-rows) * var(--qty-row-h) + 2 * var(--space-sm) + 2px);
    }

    #groceryGenRecipeList {
        max-height: calc(var(--list-rows) * var(--qty-row-h) + 2 * var(--space-sm) + 2px);
    }

    .grocery-selected-columns,
    .recipe-select-heading {
        margin-top: var(--space-md);
    }

    /* Search box anchor must follow the taller mobile navbar */
    .search-box,
    .mealplan-sticky {
        top: 105px;
    }

    /* Compact table header on narrow screens */
    .ingredient-table th {
        font-size: 0.75rem;
    }
}

/* Short phones (iPhone SE, landscape): 2 rows */
@media (max-width: 640px) and (max-height: 700px) {
    html { --list-rows: 2; }
}

/* ===== Meal Planner ===== */
.mealplan-container {
    margin: 0 auto var(--space-2xl);
}

/* Duration/button row and meal-type column headers stay pinned together under the navbar */
.mealplan-sticky {
    position: sticky;
    top: 65px; /* below the navbar (64px content + 1px border), like .search-box */
    z-index: 50;
    background: var(--color-bg);
}

.mealplan-controls {
    padding: var(--space-lg) 0 var(--space-sm); /* top padding matches .search-box-top on the ingredients page */
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mealplan-controls label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.mealplan-controls select {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}

/* Header row — meal type column labels */
.mealplan-header-row {
    display: grid;
    grid-template-columns: 80px repeat(4, 1fr);
    margin-bottom: 1px;
}

.mealplan-header-corner {
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.mealplan-clear-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}

.mealplan-clear-btn:hover {
    color: var(--color-danger, #e5484d);
    border-color: var(--color-danger, #e5484d);
}

.mealplan-header-cell {
    background: var(--color-bg);
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--color-border);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Day row — one per day */
.mealplan-day-row {
    display: grid;
    grid-template-columns: 80px repeat(4, 1fr);
    min-height: 60px;
    border: 2px solid var(--color-border);
}

.mealplan-day-row + .mealplan-day-row {
    border-top: none;
}

/* Day cell (row label) */
.mealplan-day-cell {
    background: var(--color-bg);
    border-right: 2px solid var(--color-border);
    padding: var(--space-md) var(--space-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.mealplan-day-cell .day-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mealplan-day-cell .day-num {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
}

/* Slot cell (meal type column) */
.mealplan-slot {
    background: var(--color-surface);
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    cursor: pointer;
    transition: background-color var(--transition);
    position: relative;
    border-right: 1px solid var(--color-border);
    min-height: 80px;
    overflow: hidden;
}

.mealplan-slot:last-child {
    border-right: none;
}

.mealplan-slot:hover {
    background: var(--color-bg);
}

/* Recipe card inside a slot */
.mealplan-recipe-card {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-xs) var(--space-sm);
    text-decoration: none;
    color: var(--color-text);
    transition: box-shadow var(--transition), border-color var(--transition);
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    min-width: 0;
}

.mealplan-recipe-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--color-primary);
    color: var(--color-text);
}

.mealplan-recipe-img {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--placeholder-gradient-start) 0%, var(--placeholder-gradient-end) 100%);
}

.mealplan-recipe-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mealplan-recipe-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    opacity: 0.4;
}

.mealplan-recipe-placeholder svg {
    width: 14px;
    height: 14px;
}

.mealplan-recipe-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 0;
    min-width: 0;
}

.mealplan-remove-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: var(--color-danger);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition);
    z-index: 2;
}

.mealplan-recipe-card:hover .mealplan-remove-btn {
    opacity: 1;
}

/* Meal planner modal */
.mealplan-modal {
    max-width: 520px;
}

.recipe-select-list {
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-sm);
    background: var(--color-bg);
    margin-top: var(--space-sm);
}

.recipe-select-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    border-radius: 4px;
    transition: background-color var(--transition);
}

.recipe-select-item:hover {
    background: var(--color-surface);
}

.recipe-select-item input[type="checkbox"] {
    accent-color: var(--color-primary);
    width: 16px;
    height: 16px;
}

.copy-days-section {
    margin-top: var(--space-lg);
}

.copy-days-section h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}

.copy-days-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.copy-day-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    cursor: pointer;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    transition: background-color var(--transition);
}

.copy-day-item:hover {
    background: var(--color-bg);
}

.copy-day-item input[type="checkbox"] {
    accent-color: var(--color-primary);
    width: 14px;
    height: 14px;
}

/* ===== Grocery Lists ===== */
.groceries-container {
    margin: var(--space-md) auto var(--space-2xl);
}

/* Page header — title and button side by side */
.groceries-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);
}

.groceries-page-header .page-title {
    margin: 0;
}

.btn-generate {
    margin-bottom: 0;
}

.groceries-container .empty-state {
    margin-top: var(--space-lg);
}

/* Section group (Current / History) */
.grocery-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    margin-top: var(--space-lg);
}

.grocery-section-heading {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.grocery-list-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.grocery-list-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-md) var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
    gap: var(--space-md);
}

.grocery-list-name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    display: block;
}

.btn-sm {
    min-height: 0;
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-sm);
}

/* Delete button — red rounded box with X icon */
.grocery-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: var(--color-danger);
    color: #ffffff;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color var(--transition), opacity var(--transition);
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
}

.grocery-delete-btn:hover {
    background: var(--color-danger-hover);
}

/* Show delete only on expanded/visible cards */
.grocery-list-card.expanded .grocery-delete-btn {
    opacity: 1;
    pointer-events: auto;
}

/* Always show delete on the current list (it's always visible) */
.grocery-list-card.current .grocery-delete-btn {
    opacity: 1;
    pointer-events: auto;
}

/* Duplicate button — same shape, neutral color */
.grocery-duplicate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: var(--color-bg);
    color: var(--color-text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
}

.grocery-list-card.expanded .grocery-duplicate-btn {
    opacity: 1;
    pointer-events: auto;
}

.grocery-duplicate-btn:hover {
    background: var(--color-border);
    color: var(--color-text);
}

/* Confirmation overlay */
.grocery-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms ease;
}

.confirm-open {
    opacity: 1;
    visibility: visible;
}

.grocery-confirm-panel {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: var(--space-xl);
    max-width: 360px;
    width: 90%;
    text-align: center;
}

.confirm-msg {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-xl);
    color: var(--color-text);
}

.confirm-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
}

/* History header — clickable to expand/collapse */
.grocery-history-header {
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition);
}

.grocery-history-header:hover {
    background: var(--color-bg);
}

.grocery-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* History items — hidden by default, shown when card has .expanded */
.grocery-history-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height 250ms ease;
}

.grocery-list-card.expanded .grocery-history-items {
    max-height: 2000px;
}

.grocery-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.grocery-items li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.grocery-items li:last-child {
    border-bottom: none;
}

.grocery-items li.checked {
    background: var(--color-bg);
}

.grocery-items li.checked label {
    text-decoration: line-through;
    opacity: 0.6;
}

.grocery-items li input[type="checkbox"] {
    margin-top: 3px;
    accent-color: var(--color-primary);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.grocery-items li label {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    line-height: 1.5;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.grocery-items .ingredient-name {
    font-weight: 500;
    font-size: var(--font-size-sm);
    margin-right: var(--space-sm);
}

.grocery-items .ingredient-amount {
    width: auto;
    border: none;
    padding: 0;
    background: transparent;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

/* ===== Pantry ===== */

/* Pantry toggle column in the ingredient table */
.pantry-toggle {
    background: none;
    border: none;
    padding: var(--space-xs, 4px);
    cursor: pointer;
    color: var(--color-text);
    opacity: 0.25;
    line-height: 0;
    transition: opacity var(--transition);
}

.pantry-toggle:hover {
    opacity: 0.5;
}

.ingredient-row.in-pantry .pantry-toggle,
.ingredient-row.in-pantry .pantry-toggle:hover {
    opacity: 1;
}

.pantry-icon {
    display: inline;
    vertical-align: middle;
}

/* Pantry bar — anchored to bottom of viewport */
.pantry-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 150;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    transition: box-shadow 200ms ease;
    /* iOS home indicator clearance */
    padding-bottom: env(safe-area-inset-bottom);
}

.pantry-bar.expanded {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.pantry-bar-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    cursor: pointer;
    user-select: none;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    transition: background-color var(--transition);
    justify-content: center;
}

.pantry-bar-header:hover {
    background: var(--color-border);
}

.pantry-bar-header svg {
    flex-shrink: 0;
}

.pantry-chevron {
    transition: transform 200ms ease;
    margin-left: var(--space-sm);
}

.pantry-bar-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms ease;
}

.pantry-bar.expanded .pantry-bar-body {
    max-height: 300px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.pantry-items-list {
    padding: var(--space-sm) var(--space-lg) var(--space-lg);
    text-align: center;
}

.pantry-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
    font-style: italic;
}

.pantry-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
}

.pantry-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.pantry-chip:hover {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #ffffff;
}

/* Drag-over highlight for pantry drop zone */
.pantry-items-list.drag-over {
    background: var(--placeholder-highlight);
    border-radius: var(--radius);
}

/* Grocery pantry section (collapsed by default) */
.grocery-pantry-section {
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}

/* Hide pantry section inside collapsed history lists */
.grocery-list-card .grocery-pantry-section {
    max-height: 0;
    overflow: hidden;
    border-top-width: 0;
    transition: max-height 250ms ease, border-top-width 250ms ease;
}

.grocery-list-card.expanded .grocery-pantry-section,
.grocery-list-card.current .grocery-pantry-section {
    max-height: 800px;
    border-top-width: 1px;
}

.grocery-pantry-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition);
}

.grocery-pantry-header:hover {
    background: var(--color-border);
}

.grocery-pantry-header svg {
    flex-shrink: 0;
}

.pantry-chevron-inline {
    font-size: 10px;
    margin-left: auto;
}

.grocery-pantry-items {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 250ms ease;
}

.pantry-expanded .grocery-pantry-items {
    max-height: 600px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.grocery-pantry-items li {
    padding: var(--space-xs) var(--space-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}

.grocery-pantry-items li:last-child {
    border-bottom: none;
}

/* Pantry bar bottom offset for footer clearance */
body {
    padding-bottom: 48px;
    /* iOS safe-area insets (notch + home indicator) — no-op on non-iOS */
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* ===== Hamburger ===== */
.hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius);
    transition: background-color var(--transition), color var(--transition);
    flex-shrink: 0;
}

.hamburger:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

/* ===== Settings Side Panel ===== */
.settings-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 250;
    opacity: 0;
    visibility: hidden;
    transition: opacity 250ms ease, visibility 250ms ease;
}

.settings-overlay.open {
    opacity: 1;
    visibility: visible;
}

.settings-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    max-width: 85vw;
    background: var(--color-surface);
    z-index: 260;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform 250ms ease;
    /* iOS home indicator clearance */
    padding-bottom: env(safe-area-inset-bottom);
}

.settings-panel.open {
    transform: translateX(0);
}

.settings-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg) var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.settings-panel-header h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.settings-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition), color var(--transition);
}

.settings-close:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.settings-panel-body {
    padding: var(--space-xl);
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== Settings Options ===== */
.settings-group {
    margin-bottom: var(--space-xl);
}

.settings-group-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-md);
}

.settings-option {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition);
    margin-bottom: var(--space-sm);
}

.settings-option:hover {
    background: var(--color-bg);
}

.settings-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.settings-option.selected {
    border-color: var(--color-primary);
}

.settings-option-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
}

.settings-option-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: 2px;
}

/* Theme preview wrapper — bordered box on the right */
.theme-preview-wrapper {
    display: block;
    margin-left: auto;
    padding: 2px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    flex-shrink: 0;
}

/* Horizontal color bands */
.theme-preview {
    display: flex;
    flex-direction: row;
    height: 32px;
    width: 48px;
    overflow: hidden;
    border-radius: 2px;
}

.theme-preview span {
    width: 12px;
    flex-shrink: 0;
}

/* ===== Settings Toggle Switch ===== */
.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
}

.settings-toggle-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background-color: var(--color-border);
    border-radius: 24px;
    transition: var(--transition);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--color-surface);
    border-radius: 50%;
    transition: var(--transition);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--color-primary);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

/* ===== Show Quantities (Groceries setting) ===== */
html[data-show-quantities="false"] .grocery-items .ingredient-amount,
html[data-show-quantities="false"] .grocery-gen-columns .qty-header,
html[data-show-quantities="false"] .grocery-gen-item .servings-control,
html[data-show-quantities="false"] #grocerySelectedList .servings-control,
html[data-show-quantities="false"] #groceryGenRecipeList .servings-control,
html[data-show-quantities="false"] #groceryServingsControl {
    display: none;
}