@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css';

/* /Pages/ShoppingList.razor.rz.scp.css */
/*
 * The shopping list.
 *
 * Every colour here is a token from theme.css. That is not tidiness: dark mode is nothing but five
 * token overrides in that file, so a literal colour in this one is a bug. If this stylesheet grows
 * a `#` or an `rgb(`, it is wrong.
 *
 * The layout is fluid rather than a pile of breakpoints. Shop groups reflow on their own with
 * auto-fit, and the rows answer to the width of the card they are in rather than the width of the
 * window — a container query, because once two cards sit side by side on a desktop each one is
 * narrow while the viewport is wide, and a media query would give a narrow card the wide layout.
 */

.shopping[b-2qyiqvt6lm] {
    max-width: 90rem;
    margin: 0 auto;
}

/* ------------------------------------------------------------------ the bar -- */

/*
 * The week and the progress are what you need mid-aisle, so they stay put. The app's purple header
 * scrolls away above them, which is correct — its name is not what you are shopping with.
 */
.shopping__bar[b-2qyiqvt6lm] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.625rem 0;
    margin-bottom: 0.5rem;
    background-color: var(--surface-sunken);
    border-bottom: 1px solid var(--border-subtle);
}

.shopping__week[b-2qyiqvt6lm] {
    flex: 1 1 auto;
    min-width: 0;
}

.shopping__picker[b-2qyiqvt6lm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.shopping__picker-label[b-2qyiqvt6lm] {
    font-weight: 600;
}

.shopping__picker select[b-2qyiqvt6lm] {
    min-height: 2.75rem;
    padding: 0 0.5rem;
    font: inherit;
    color: var(--text-primary);
    background-color: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 0.375rem;
}

.shopping__progress[b-2qyiqvt6lm] {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    white-space: nowrap;
}

.shopping__count[b-2qyiqvt6lm] {
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.shopping__count-label[b-2qyiqvt6lm] {
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

.shopping__hide[b-2qyiqvt6lm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    cursor: pointer;
    white-space: nowrap;
    touch-action: manipulation;
}

.shopping__hide input[b-2qyiqvt6lm] {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--mealplanner-accent);
}

/* ------------------------------------------------------------- notices etc. -- */

.shopping__notice[b-2qyiqvt6lm] {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-secondary);
    background-color: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 0.5rem;
}

.shopping__notice p[b-2qyiqvt6lm] {
    margin: 0 0 1rem;
}

.shopping__notice--error[b-2qyiqvt6lm] {
    text-align: start;
    color: var(--text-primary);
    border-inline-start: 3px solid var(--shop-monoprix);
}

.shopping__hint[b-2qyiqvt6lm] {
    margin: 0 0 0.75rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.shopping__skeleton[b-2qyiqvt6lm] {
    display: grid;
    gap: 0.5rem;
}

.shopping__skeleton-row[b-2qyiqvt6lm] {
    height: 3rem;
    background-color: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 0.5rem;
    opacity: 0.7;
}

/* ----------------------------------------------------------- the shop cards -- */

/*
 * One declaration covers a phone through a desktop: one column at 390px, two from about 672px,
 * three from about 1024px. No @media anywhere — a pile of breakpoints is a pile of numbers that
 * will be wrong on the next device.
 */
.shopping__groups[b-2qyiqvt6lm] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    align-items: start;
}

.shop[b-2qyiqvt6lm] {
    /* What the row's container query measures. */
    container-type: inline-size;

    background-color: var(--surface);
    border: 1px solid var(--border-subtle);
    border-top: 3px solid var(--shop-colour, var(--border-subtle));
    border-radius: 0.5rem;
    overflow: hidden;
}

/*
 * The shop colours are used for rules and stripes, never for text: on the dark surface they sit at
 * roughly 4:1, which passes for a 3px non-text border and fails for a label.
 */
.shop--monoprix[b-2qyiqvt6lm] { --shop-colour: var(--shop-monoprix); }
.shop--picard[b-2qyiqvt6lm]   { --shop-colour: var(--shop-picard); }

.shop__name[b-2qyiqvt6lm] {
    margin: 0;
    padding: 0.75rem 1rem 0.5rem;
    font-size: 1rem;
    font-weight: 700;
}

.aisle__name[b-2qyiqvt6lm] {
    margin: 0;
    padding: 0.5rem 1rem 0.25rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.aisle__items[b-2qyiqvt6lm] {
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------------------ the row -- */

[b-2qyiqvt6lm] .item {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    column-gap: 0.5rem;
    align-items: start;
    min-height: 3rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border-subtle);
    cursor: pointer;
    /* Removes the 300ms double-tap-to-zoom wait, which is what makes a tick feel instant. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 120ms ease;
}

[b-2qyiqvt6lm] .item:first-child {
    border-top: 0;
}

[b-2qyiqvt6lm] .item:hover {
    background-color: var(--surface-sunken);
}

[b-2qyiqvt6lm] .item:focus-within {
    outline: 2px solid var(--mealplanner-accent);
    outline-offset: -2px;
}

/* 2.75rem is 44px: WCAG 2.5.5's target size, and roughly a thumb. */
[b-2qyiqvt6lm] .item__box {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    justify-self: center;
    align-self: center;
    accent-color: var(--mealplanner-accent);
}

[b-2qyiqvt6lm] .item__body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

[b-2qyiqvt6lm] .item__name {
    overflow-wrap: anywhere;
}

[b-2qyiqvt6lm] .item__note,
[b-2qyiqvt6lm] .item__warning {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

[b-2qyiqvt6lm] .item__warning {
    border-inline-start: 2px solid var(--shop-monoprix);
    padding-inline-start: 0.5rem;
}

[b-2qyiqvt6lm] .item__quantity {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    /* Stacked under the name on a narrow card; given its own column on a wide one. */
    grid-column: 2;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

[b-2qyiqvt6lm] .item__amount {
    font-weight: 600;
    color: var(--text-primary);
}

/* De-emphasised, not hidden: the checkbox carries the state and the strike-through decorates it. */
[b-2qyiqvt6lm] .item--checked {
    opacity: 0.55;
}

[b-2qyiqvt6lm] .item--checked .item__name {
    text-decoration: line-through;
}

/*
 * Wide enough for the quantity to sit beside the name rather than under it. The query measures the
 * shop card, so a row inside a narrow card on a wide desktop still stacks.
 */
@container (min-width: 26rem) {
    [b-2qyiqvt6lm] .item {
        grid-template-columns: 2.75rem 1fr auto;
        align-items: center;
    }

    [b-2qyiqvt6lm] .item__quantity {
        grid-column: auto;
        text-align: end;
        padding-inline-start: 0.5rem;
    }
}