/* ── Page layout ── */
.page-description { font-size: var(--body-large); color: var(--on-surface-variant); margin: 0 0 var(--spacing-16); }

/* ── Filter bar ── */
.filter-bar { display: flex; align-items: center; gap: var(--spacing-16); flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin-bottom: var(--spacing-16); padding-bottom: var(--spacing-8); }

/* ── Button row ── */
.btn-row { display: flex; gap: var(--spacing-8); flex-wrap: wrap; margin-bottom: var(--spacing-24); }

/* ── Buttons ── */
.btn-primary {
    display: inline-flex; align-items: center; gap: var(--spacing-8);
    background: var(--primary); color: var(--on-primary);
    border: none; border-radius: var(--radius-48);
    padding: var(--spacing-8) var(--spacing-24);
    font-family: "Manrope-SemiBold", Arial, Helvetica, sans-serif; font-size: var(--body-large);
    cursor: pointer; transition: var(--default-transition);
}
.btn-primary:hover  { opacity: 0.9; }
.btn-primary:active { opacity: 0.8; }

.btn-secondary,
.btn-ghost {
    display: inline-flex; align-items: center; gap: var(--spacing-8);
    background: transparent; color: var(--primary);
    border: 1px solid var(--outline-variant); border-radius: var(--radius-48);
    padding: var(--spacing-8) var(--spacing-24);
    font-family: "Manrope-SemiBold", Arial, Helvetica, sans-serif; font-size: var(--body-large);
    cursor: pointer; transition: var(--default-transition);
}
.btn-ghost { margin-bottom: var(--spacing-24); }
.btn-secondary:hover,  .btn-ghost:hover  { background: var(--primary-opacity-0-08); }
.btn-secondary:active, .btn-ghost:active { background: var(--primary-opacity-0-12); }

/* ── Section title ── */
.section-title { font-family: "Manrope-Bold", Arial, Helvetica, sans-serif; font-size: var(--title-large); color: var(--on-surface); margin: var(--spacing-16) 0 var(--spacing-4); }

/* ── Recipe card ── */
/* overflow: visible overrides styles.css — dropdowns inside rows must not be clipped. */
.recipe-card { background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-16); overflow: visible; margin-bottom: var(--spacing-8); }

/* ── Week plan rows ── */
.recipe-row  { display: flex; align-items: center; border-top: 1px solid var(--outline-variant); transition: var(--default-transition); cursor: pointer; }
.recipe-row:first-child { border-top: none; border-radius: var(--radius-16) var(--radius-16) 0 0; }
.recipe-row:last-child  { border-radius: 0 0 var(--radius-16) var(--radius-16); }
.recipe-row:hover  { background: var(--on-surface-opacity-0-08); }
.recipe-row:active { background: var(--on-surface-opacity-0-12); }
.recipe-body  { flex: 1; padding: var(--spacing-16) var(--spacing-24); }
.recipe-slot  { font-family: "Manrope-SemiBold", Arial, Helvetica, sans-serif; font-size: var(--label-medium); color: var(--primary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--spacing-2); }
.recipe-title { font-family: "Manrope-SemiBold", Arial, Helvetica, sans-serif; font-size: var(--body-large); color: var(--on-surface); }
.recipe-sub   { font-size: var(--body-medium); color: var(--on-surface-variant); margin-top: var(--spacing-4); }
.row-actions  { display: flex; flex-shrink: 0; padding-right: var(--spacing-24); }

/* ── Drag handle ── */
.drag-handle {
    flex-shrink: 0;
    width: 16px; height: 24px;
    margin-left: var(--spacing-16);
    cursor: grab;
    opacity: 0.5;
    display: block;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-select: none;
}
.recipe-row[draggable="true"]:active .drag-handle,
.drag-handle:hover { opacity: 0.9; }

/* ── Drop target ── */
.recipe-row.drop-target { background: var(--primary-opacity-0-12); outline: 2px dashed var(--primary); outline-offset: -2px; }

/* ── Empty slot affordance ── */
.recipe-row[data-empty="true"] { background: var(--primary-opacity-0-08); }
.recipe-row[data-empty="true"]:hover { background: var(--primary-opacity-0-12); }
.recipe-row[data-empty="true"] .recipe-sub { color: var(--primary); }

/* ── Inline buttons (ghost text, Muted and Primary colour) ── */
.btn-inline-muted,
.btn-inline-primary { flex-shrink: 0; padding: var(--spacing-16) var(--spacing-8); border: none; background: transparent; font-family: "Manrope-SemiBold", Arial, Helvetica, sans-serif; font-size: var(--body-medium); cursor: pointer; transition: var(--default-transition); }
.btn-inline-muted   { color: var(--on-surface-variant); }
.btn-inline-primary { color: var(--primary); }
.btn-inline-muted:hover,   .btn-inline-muted:active,
.btn-inline-primary:hover, .btn-inline-primary:active { text-decoration: underline; }
.btn-inline-muted:focus-visible,
.btn-inline-primary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Shopping list rows ── */
.ingredient-row        { display: flex; align-items: center; gap: var(--spacing-16); padding: var(--spacing-16) var(--spacing-16) var(--spacing-16) var(--spacing-24); border-top: 1px solid var(--outline-variant); cursor: pointer; transition: var(--default-transition); }
.ingredient-row.first  { border-top: none; }
.ingredient-row:hover  { background: var(--on-surface-opacity-0-08); }
.ingredient-row:active { background: var(--on-surface-opacity-0-12); }
.ingredient-name { flex: 1; font-family: "Manrope-SemiBold", Arial, Helvetica, sans-serif; font-size: var(--body-large); color: var(--on-surface); }
.ingredient-qty  { font-size: var(--body-medium); color: var(--on-surface-variant); flex-shrink: 0; }
.ingredient-qty.qty-overridden { color: var(--primary); font-family: "Manrope-SemiBold", Arial, Helvetica, sans-serif; }
.shopping-empty  { font-size: var(--body-large); color: var(--on-surface-variant); margin-top: var(--spacing-24); }

/* ── Custom checkbox ── */
.ing-check { flex-shrink: 0; width: 18px; height: 18px; border: 2px solid var(--on-surface-variant); border-radius: 3px; display: flex; align-items: center; justify-content: center; transition: var(--default-transition); position: relative; }
.ingredient-row.checked .ing-check { background: var(--primary); border-color: var(--primary); }
.ingredient-row.checked .ing-check::after { content: ''; position: absolute; width: 4px; height: 8px; border-right: 2px solid var(--on-primary); border-bottom: 2px solid var(--on-primary); transform: rotate(45deg) translate(-1px, -1px); }

/* ── Checked state ── */
.ingredient-row.checked { opacity: 0.4; }
.ingredient-row.checked .ingredient-name { text-decoration: line-through; }

/* ── Exclude button ── */
.ingredient-exclude { flex-shrink: 0; padding: 12px; border: none; background: transparent; cursor: pointer; line-height: 0; color: var(--on-surface-variant); opacity: 0.5; transition: var(--default-transition); border-radius: var(--radius-8); min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.ingredient-exclude:hover { background: var(--on-surface-opacity-0-08); opacity: 1; }
.ingredient-exclude img { width: 20px; height: 20px; }

/* ── Excluded (already-have) row ── */
.ingredient-row.excluded-row { cursor: default; }
.ingredient-row.excluded-row:hover  { background: transparent; }
.ingredient-row.excluded-row:active { background: transparent; }

/* ── Add custom item row ── */
.shopping-add-row { display: flex; align-items: center; padding: var(--spacing-4) var(--spacing-8) var(--spacing-4) var(--spacing-24); border-top: 1px solid var(--outline-variant); gap: var(--spacing-4); }
.shopping-add-row.first { border-top: none; }
.shopping-add-input { flex: 1; border: none; background: transparent; font-size: var(--body-large); color: var(--on-surface); outline: none; min-width: 0; padding: var(--spacing-8) 0; }
.shopping-add-input::placeholder { color: var(--on-surface-variant); opacity: 1; }

/* ── Tab bar ── */
.tab-bar {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-16);
    background: var(--surface-container-high);
    border-radius: var(--radius-48);
    padding: var(--spacing-4);
}
.tab-btn {
    flex: 1;
    border: none; background: transparent; color: var(--on-surface-variant);
    border-radius: var(--radius-48);
    padding: var(--spacing-8) var(--spacing-16);
    font-family: "Manrope-SemiBold", Arial, Helvetica, sans-serif; font-size: var(--body-medium);
    cursor: pointer; transition: var(--default-transition);
}
.tab-btn.tab-active {
    background: var(--surface-container-lowest);
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.tab-btn:not(.tab-active):hover { background: var(--on-surface-opacity-0-08); }
.tab-bar[hidden] { display: none; }

/* ── Already-have section header ── */
.shopping-section-header { display: flex; align-items: center; justify-content: space-between; margin: var(--spacing-24) 0 var(--spacing-8); }

/* ── Add-to-plan modal ── */
.add-modal-empty { background: var(--primary-opacity-0-08); }
.add-modal-empty:hover { background: var(--primary-opacity-0-12); }
.add-modal-empty .recipe-sub { color: var(--primary); }
#add-modal-list .section-title { padding-top: var(--spacing-8); }

/* ── Quantity modal ── */
.qty-sheet { max-height: unset; }
.qty-body { display: flex; flex-direction: column; gap: var(--spacing-24); padding-top: var(--spacing-8); }
.qty-stepper { display: flex; align-items: center; justify-content: center; gap: var(--spacing-16); }
.qty-step-btn {
    width: 48px; height: 48px; border-radius: 50%;
    border: 1.5px solid var(--outline-variant); background: transparent;
    font-size: 24px; line-height: 1; color: var(--primary);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: var(--default-transition); flex-shrink: 0;
}
.qty-step-btn:hover  { background: var(--primary-opacity-0-08); }
.qty-step-btn:active { background: var(--primary-opacity-0-12); }
.qty-step-btn:disabled { opacity: 0.3; cursor: default; background: transparent; }
.qty-input {
    width: 140px; text-align: center;
    border: 1.5px solid var(--outline-variant); border-radius: var(--radius-8);
    padding: var(--spacing-16);
    font-family: "Manrope-SemiBold", Arial, Helvetica, sans-serif;
    font-size: var(--title-medium); color: var(--on-surface); background: transparent;
    outline: none; transition: var(--default-transition);
}
.qty-input:focus { border-color: var(--primary); }
.qty-actions { display: flex; gap: var(--spacing-8); }
.qty-actions .btn-secondary,
.qty-actions .btn-primary { flex: 1; justify-content: center; }

/* ── Picker modal ── */
.picker-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: flex-end; justify-content: center; z-index: 100; }
.picker-backdrop[hidden] { display: none; }
@media (min-width: 600px) { .picker-backdrop { align-items: center; } }

/* Top-anchored variant — used for pickers that contain a search input */
@media (max-width: 599px) {
    .picker-backdrop.picker-top { align-items: flex-start; }
    .picker-backdrop.picker-top .picker-sheet {
        border-radius: 0 0 var(--radius-16) var(--radius-16);
        max-height: 80vh;
    }
    .picker-sheet { padding-bottom: 0; }
}

.picker-sheet { background: var(--surface-container-lowest); border-radius: var(--radius-16) var(--radius-16) 0 0; width: 100%; max-width: 560px; max-height: 80vh; display: flex; flex-direction: column; padding: var(--spacing-24); box-sizing: border-box; }
@media (min-width: 600px) { .picker-sheet { border-radius: var(--radius-16); max-height: 70vh; } }

.picker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-16); }
.picker-title  { font-family: "Manrope-Bold", Arial, Helvetica, sans-serif; font-size: var(--title-medium); color: var(--on-surface); }
.picker-close  { border: none; background: transparent; font-size: 24px; color: var(--on-surface-variant); cursor: pointer; padding: 10px; line-height: 1; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-8); transition: var(--default-transition); }
.picker-close:hover { background: var(--on-surface-opacity-0-08); }

.picker-search-wrap { margin-bottom: var(--spacing-16); }
.picker-search-wrap input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

.picker-list { overflow-y: auto; flex: 1; }
.picker-row-group { margin-bottom: var(--spacing-8); }
.picker-row-group .picker-meta { margin: 0 0 var(--spacing-4); padding: 0 var(--spacing-16); font-family: "Manrope-SemiBold", Arial, Helvetica, sans-serif; }
.picker-row  { padding: var(--spacing-8) var(--spacing-16); border-radius: var(--radius-8); cursor: pointer; transition: var(--default-transition); }
.picker-row:hover  { background: var(--primary-opacity-0-08); }
.picker-row:active { background: var(--primary-opacity-0-12); }
.picker-name { font-family: "Manrope-SemiBold", Arial, Helvetica, sans-serif; font-size: var(--body-large); color: var(--on-surface); }
.picker-meta { font-size: var(--body-medium); color: var(--on-surface-variant); margin-top: var(--spacing-2); }
.picker-empty { font-size: var(--body-medium); color: var(--on-surface-variant); padding: var(--spacing-16); text-align: center; }

/* ── Row action menu ── */
.row-menu-wrap { position: relative; display: flex; align-items: center; flex-shrink: 0; padding-right: var(--spacing-16); }
.btn-row-menu {
    border: none; background: transparent; cursor: pointer;
    color: var(--on-surface-variant);
    padding: var(--spacing-8);
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-8);
    transition: var(--default-transition);
    font-size: 20px; letter-spacing: 2px; line-height: 1;
}
.btn-row-menu:hover        { background: var(--on-surface-opacity-0-08); }
.btn-row-menu:active       { background: var(--on-surface-opacity-0-12); }
.btn-row-menu.menu-open    { background: var(--on-surface-opacity-0-08); color: var(--on-surface); }

.row-menu-dropdown {
    position: absolute;
    right: var(--spacing-8);
    top: calc(100% - 4px);
    background: var(--surface-container-lowest);
    border-radius: var(--radius-8);
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    min-width: 160px;
    z-index: 50;
    overflow: hidden;
}
.row-menu-dropdown[hidden] { display: none; }
.row-menu-item {
    display: block; width: 100%; text-align: left;
    padding: var(--spacing-16) var(--spacing-16);
    border: none; background: transparent; cursor: pointer;
    font-family: "Manrope-SemiBold", Arial, Helvetica, sans-serif;
    font-size: var(--body-medium); color: var(--on-surface);
    transition: var(--default-transition);
}
.row-menu-item:hover  { background: var(--on-surface-opacity-0-08); }
.row-menu-item:active { background: var(--on-surface-opacity-0-12); }
.row-menu-item.row-menu-danger { color: #B3261E; }
.row-menu-item.row-menu-danger:hover { background: rgba(179,38,30,0.08); }

/* ── Snackbar ── */
.snackbar {
    position: fixed;
    /* Desktop: centred, capped to content container width */
    left: 50%;
    bottom: var(--spacing-24);
    transform: translate(-50%, 16px);
    width: calc(100% - var(--spacing-32));
    max-width: 880px;
    background: var(--inverse-surface);
    color: var(--inverse-on-surface);
    font-family: "Manrope-SemiBold", Arial, Helvetica, sans-serif;
    font-size: var(--body-medium);
    padding: var(--spacing-16) var(--spacing-24);
    border-radius: var(--radius-8);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    opacity: 0;
    pointer-events: none;
    transition: var(--default-transition);
    z-index: 200;
}
.snackbar-visible { opacity: 1; transform: translate(-50%, 0); }

@media screen and (max-width: 800px) {
    /* Mobile: full-width with 16px gutter on each side, above fixed nav */
    .snackbar {
        left: var(--spacing-16);
        right: var(--spacing-16);
        width: auto;
        max-width: none;
        transform: translateY(16px);
        bottom: calc(var(--spacing-24) + 88px + env(safe-area-inset-bottom));
    }
    .snackbar-visible { transform: translateY(0); }
}