/*
 * Area-specific styling, built on the tokens and base components defined in
 * app.css. Loaded after app.css, before the server-generated /theme.css and
 * polish.css. Organised by page/area rather than by component type.
 */

/* ======================================================================
   CUSTOMER — menu / storefront
   ====================================================================== */

.page-hero {
    padding: 48px max(24px, calc((100vw - 1400px) / 2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    color: white;
}
.page-hero-menu {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 8%, rgba(var(--theme-rgb), .28), transparent 22rem),
        linear-gradient(125deg, var(--forest-3), var(--forest-2));
}
.menu-hero-copy { position: relative; z-index: 1; max-width: 680px; }
.menu-hero-copy h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1.04; letter-spacing: -.02em; }
.menu-hero-copy > p { max-width: 520px; margin: 16px 0 0; color: rgba(255, 255, 255, .74); font-size: 1rem; line-height: 1.65; }
.menu-hero-promises { margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; }
.menu-hero-promises li { position: relative; padding-left: 18px; color: rgba(255, 255, 255, .88); font-size: .82rem; font-weight: 600; }
.menu-hero-promises li::before { content: ""; width: 7px; height: 7px; position: absolute; left: 0; top: 7px; border-radius: 50%; background: var(--yellow); }
.menu-stamp {
    width: 128px; height: 128px;
    flex: 0 0 128px;
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    transform: rotate(6deg);
}
.menu-stamp span { color: rgba(255, 255, 255, .7); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; }
.menu-stamp strong { font-family: var(--serif); font-size: 1.8rem; }

.menu-toolbar {
    margin: -26px 0 28px;
    position: relative;
    z-index: 2;
    padding: 15px 16px 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    color: var(--muted);
    background: rgba(255, 255, 255, .95);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}
.menu-toolbar-copy { display: grid; gap: 4px; }
.menu-service-status { display: inline-flex; align-items: center; gap: 6px; color: var(--theme-ink, var(--green)); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.menu-service-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.menu-service-status.is-closed { color: var(--red-ink); }
.menu-toolbar-copy strong { color: var(--ink); font-size: .9rem; }
.menu-toolbar-actions { display: flex; align-items: center; gap: 10px; }
.menu-tool-link {
    min-height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    background: var(--gray-50);
    font-size: .76rem;
    font-weight: 700;
    transition: color var(--duration-base) ease, border-color var(--duration-base) ease, transform var(--duration-base) ease;
}
.menu-tool-link:hover { color: var(--theme-ink, var(--red)); border-color: rgba(var(--theme-rgb), .3); transform: translateY(-1px); }
.menu-tool-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.builder-link { color: white; border-color: var(--theme-primary, var(--green)); background: var(--theme-primary, var(--green)); }
.builder-link:hover { color: white; border-color: var(--theme-dark, var(--forest-2)); background: var(--theme-dark, var(--forest-2)); }
.cart-summary strong { min-width: 19px; height: 19px; display: inline-grid; place-items: center; border-radius: var(--radius-full); color: white; background: var(--red); font-size: .62rem; }

.menu-empty-state, .featured-empty {
    display: grid; place-items: center; text-align: center;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-xl);
    background: var(--gray-0);
}
.menu-empty-state { min-height: 280px; margin-bottom: 80px; padding: 46px 24px; }
.menu-empty-state > div { max-width: 500px; }
.menu-empty-mark { width: 54px; height: 54px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: var(--radius-md); color: var(--theme-ink, var(--red)); background: var(--theme-soft, var(--red-soft)); font-size: 1.3rem; }
.menu-empty-state h2 { margin: 0 0 8px; font-family: var(--serif); font-weight: 600; font-size: 1.9rem; }
.menu-empty-state p { margin: 0; color: var(--muted); line-height: 1.6; }

.pizza-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-bottom: 90px; }
.pizza-card {
    min-height: 400px;
    padding: 22px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--gray-0);
    box-shadow: var(--shadow-soft);
    transition: transform var(--duration-slow) var(--ease-standard), border-color var(--duration-base) ease, box-shadow var(--duration-base) ease;
}
.pizza-card:hover { z-index: 1; border-color: rgba(var(--theme-rgb), .25); box-shadow: var(--shadow-lift); transform: translateY(-5px); }
.pizza-card-top, .pizza-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.pizza-number { min-width: 32px; height: 26px; padding: 0 9px; display: inline-grid; place-items: center; border-radius: var(--radius-full); color: var(--theme-ink, var(--red)); background: var(--theme-soft, var(--red-soft)); font-size: .64rem; font-weight: 800; letter-spacing: .05em; }
.pizza-card-media { height: 150px; margin: 18px 0 2px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--gray-50); }
.pizza-card-media-photo { background: var(--gray-100); }
.pizza-card-photo { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform var(--duration-slow) ease; }
.pizza-card:hover .pizza-card-photo { transform: scale(1.045); }
/* Segnaposto dei prodotti senza foto: un piatto, non una pizza. Lo stesso
   gestionale serve pizzerie, kebabberie e paninoteche, e un disegno che parla
   di una sola di queste sbaglia il messaggio in tutte le altre. Prende il
   colore del tema, così si adatta anche alla tinta scelta dal gestore. */
.pizza-card-illustration {
    width: 74px; height: 74px;
    margin: 22px 0 4px;
    position: relative;
    display: grid; place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%,
            transparent 0 19px,
            rgba(var(--theme-rgb), .30) 19px 20.5px,
            transparent 20.5px),
        var(--theme-soft, var(--green-soft));
    box-shadow: inset 0 0 0 1px rgba(var(--theme-rgb), .22);
    transition: transform var(--duration-slow) ease;
}
.pizza-card-media .pizza-card-illustration { margin: 0; }
.pizza-card:hover .pizza-card-illustration { transform: scale(1.04); }
.pizza-card-illustration .pizza-slice, .pizza-card-illustration > i { display: none; }
.pizza-card-body { margin: 0 0 auto; padding: 18px 0 26px; }
.pizza-card h2, .pizza-card h3 { margin: 0 0 11px; font-family: var(--serif); font-weight: 600; font-size: 1.7rem; line-height: 1.12; }
.pizza-card p { margin: 0; color: var(--muted); line-height: 1.6; font-size: .88rem; }
.allergen-note { width: fit-content; margin-top: 13px; padding: 6px 9px; display: block; border-radius: var(--radius-xs); color: var(--red-dark-ink); background: var(--red-soft); font-size: .64rem; line-height: 1.5; }
.allergen-free { color: var(--theme-ink, var(--green)) !important; background: var(--theme-soft, var(--green-soft)); }
.pizza-card-footer { padding-top: 16px; border-top: 1px solid var(--line); }
.pizza-price { display: grid; gap: 1px; }
.pizza-price small { color: var(--muted); font-size: .58rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.pizza-price strong { font-size: 1.18rem; font-weight: 800; }
.add-button {
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid var(--theme-primary, var(--green));
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: white;
    background: var(--theme-primary, var(--green));
    cursor: pointer;
    font-weight: 700;
    font-size: .78rem;
    transition: background var(--duration-base) ease, border-color var(--duration-base) ease, transform var(--duration-base) ease;
}
.add-button:hover { border-color: var(--red); background: var(--red); transform: translateY(-1px); }
.add-button span { font-size: 1.05rem; }

/* ======================================================================
   CUSTOMER — custom pizza builder
   ====================================================================== */

.customer-builder-body .custom-pizza-builder { border-radius: var(--radius-2xl); }
.customer-builder-body .builder-total strong {
    color: color-mix(in srgb, var(--customer-forest-dark) 88%, white);
}
.customer-heading-link { color: var(--muted); font-size: .84rem; font-weight: 700; transition: color var(--duration-base) ease; }
.customer-heading-link:hover { color: var(--theme-ink, var(--green)); }
.customer-heading-link-accent { color: var(--theme-ink, var(--green)); }

/* ======================================================================
   CUSTOMER — cart / checkout
   ====================================================================== */

.checkout-grid { display: grid; grid-template-columns: 1fr 350px; gap: 26px; align-items: start; }
.cart-list { display: grid; gap: 14px; }
.cart-line {
    padding: 18px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--gray-0);
    transition: opacity var(--duration-base) ease;
}
.cart-line.is-updating { opacity: .55; }
.cart-line-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cart-line-media { width: 60px; height: 60px; flex: 0 0 60px; overflow: hidden; border-radius: var(--radius-md); background: var(--gray-100); position: relative; }
.cart-line-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-line-image-fallback { width: 100%; height: 100%; display: grid; place-items: center; }
.cart-pizza-mark { width: 40px; height: 40px; border: 4px solid #d89b4d; border-radius: 50%; background: var(--red); box-shadow: inset 0 0 0 3px #f6dfb3; }
.cart-line-media.is-custom .cart-pizza-mark { background: var(--theme-primary, var(--green)); border-color: var(--theme-light, #4c9370); }
.cart-custom-badge { position: absolute; left: 0; bottom: 0; right: 0; padding: 2px 4px; text-align: center; color: white; background: rgba(23, 33, 26, .68); font-size: .5rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.cart-line-copy { min-width: 0; }
.cart-line h2 { margin: 0 0 4px; font-family: var(--serif); font-weight: 600; font-size: 1.25rem; }
.cart-line-details { max-width: 340px; margin: 0 0 5px; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.cart-line-main span { color: var(--muted); font-size: .78rem; }
.cart-line-actions { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.quantity-form { display: grid; grid-template-columns: auto; align-items: center; gap: 4px; }
.quantity-form label { font-size: .6rem; color: var(--muted); text-align: center; }
.quantity-stepper { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.quantity-stepper-button { width: 30px; height: 34px; border: 0; background: var(--gray-50); color: var(--ink); font-size: .95rem; cursor: pointer; }
.quantity-stepper-button:hover { background: var(--theme-soft, var(--green-soft)); color: var(--theme-ink, var(--green)); }
.quantity-form input { width: 42px; height: 34px; padding: 0; border: 0; border-left: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); text-align: center; -moz-appearance: textfield; }
.quantity-form input::-webkit-outer-spin-button, .quantity-form input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantity-submit { margin-top: 2px; padding: 0; border: 0; background: none; color: var(--theme-ink, var(--green)); font-size: .66rem; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.quantity-form.is-enhanced .quantity-submit { display: none; }
.remove-button { padding: 0; border: 0; background: none; color: var(--muted); font-size: .7rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.remove-button:hover { color: var(--red-ink); }
.cart-update-status { min-height: 20px; margin: -6px 0 12px; color: var(--theme-ink, var(--green)); font-size: .75rem; font-weight: 600; }
.cart-update-status.is-error { color: var(--red-ink); }

.order-summary { position: sticky; top: 88px; height: fit-content; padding: 24px; border-radius: var(--radius-xl); background: var(--forest-3); color: white; box-shadow: var(--shadow-lift); }
.order-summary .eyebrow { color: rgba(255, 255, 255, .58); }
.summary-row { margin-bottom: 22px; padding-bottom: 20px; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.summary-row span { color: rgba(255, 255, 255, .72); }
.summary-row strong { font-size: 1.3rem; font-weight: 800; }
.order-summary .stack-form label > span { color: rgba(255, 255, 255, .78); }
.order-summary .stack-form input, .order-summary .stack-form textarea { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); color: white; }
.order-summary .stack-form input::placeholder, .order-summary .stack-form textarea::placeholder { color: rgba(255, 255, 255, .38); }
.order-summary .stack-form small { color: rgba(255, 255, 255, .5); }
.order-summary .field-error { color: #f7b8a4 !important; }
.summary-note { margin: 16px 0 0; color: rgba(255, 255, 255, .5); font-size: .7rem; line-height: 1.6; }

.fulfillment-choice { margin: 0; padding: 0; border: 0; }
.fulfillment-choice legend, .fulfillment-heading { margin-bottom: 9px; color: rgba(255, 255, 255, .85); font-size: .78rem; font-weight: 700; }
.fulfillment-heading { display: block; }
.fulfillment-options { display: grid; gap: 9px; }
.fulfillment-option, .fulfillment-single-card {
    position: relative; min-height: 72px; padding: 12px 13px;
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 22px;
    align-items: center; gap: 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .05);
    transition: border-color var(--duration-base) ease, background var(--duration-base) ease;
}
.fulfillment-option { cursor: pointer; }
.fulfillment-option input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fulfillment-option-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--yellow); background: rgba(255, 255, 255, .08); }
.fulfillment-option-icon svg { width: 21px; height: 21px; }
.fulfillment-option-icon path { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fulfillment-option-copy { min-width: 0; display: grid; gap: 3px; }
.fulfillment-option-copy strong { color: white; font-size: .82rem; }
.fulfillment-option-copy small { color: rgba(255, 255, 255, .58); font-size: .65rem; line-height: 1.4; }
.fulfillment-option-check { width: 19px; height: 19px; display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, .4); border-radius: 50%; }
.fulfillment-option input:checked ~ .fulfillment-option-check { border-color: var(--yellow); background: var(--yellow); box-shadow: inset 0 0 0 4px var(--forest-3); }
.fulfillment-option.is-selected, .fulfillment-option:has(input:checked) { border-color: rgba(244, 199, 102, .55); background: rgba(244, 199, 102, .06); }
.fulfillment-takeaway-only { margin: 0; }
.fulfillment-single-card { grid-template-columns: 40px minmax(0, 1fr) auto; }
.fulfillment-availability-badge { padding: 4px 8px; color: #e7f3eb; border: 1px solid rgba(167, 219, 184, .25); border-radius: var(--radius-full); background: rgba(77, 153, 104, .22); font-size: .56rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

/* Metodo di pagamento: compare solo con la consegna a domicilio e riusa le
   stesse card della modalità di ritiro. */
.payment-fields { display: grid; gap: 10px; }
.payment-fields[hidden] { display: none; }

.delivery-fields { padding: 13px; display: grid; gap: 10px; border: 1px solid rgba(255, 255, 255, .13); border-radius: var(--radius-md); background: rgba(255, 255, 255, .05); }
.delivery-address-heading { display: flex; align-items: center; gap: 9px; }
.delivery-address-icon { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--forest-3); background: var(--yellow); }
.delivery-address-icon svg { width: 18px; height: 18px; }
.delivery-address-icon path, .delivery-address-icon circle { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.delivery-address-heading > span:last-child { min-width: 0; display: grid; gap: 1px; }
.delivery-address-heading strong { color: white; font-size: .75rem; }
.delivery-address-heading small { color: rgba(255, 255, 255, .55); font-size: .6rem; line-height: 1.35; }
.delivery-address-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(90px, .75fr); gap: 9px; }
.delivery-address-field { min-width: 0; }
.delivery-address-city { grid-column: 1 / -1; }
.delivery-address-field > span { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .78); }
.delivery-address-field > span b { width: 17px; height: 17px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--forest-3); background: var(--yellow); font-size: .55rem; line-height: 1; }
.delivery-address-field input { width: 100%; }
.delivery-address-help { margin: -3px 0 0; padding: 10px 11px; color: rgba(255, 255, 255, .68); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .04); font-size: .66rem; line-height: 1.45; }
.delivery-address-help strong { color: white; }
.delivery-address-help a { color: var(--yellow); font-weight: 700; white-space: nowrap; }

/* ======================================================================
   CUSTOMER — orders dashboard
   ====================================================================== */

.order-stack { display: grid; gap: 14px; padding-top: 18px; }
.order-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--gray-0); box-shadow: var(--shadow-xs); transition: border-color var(--duration-base) ease, box-shadow var(--duration-base) ease; }
.order-card-active { border-color: rgba(var(--theme-rgb), .28); box-shadow: var(--shadow-sm); }
.order-card-head { padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.order-card-head > div { display: grid; gap: 4px; }
.order-number { font-weight: 800; }
.order-card time { color: var(--muted); font-size: .74rem; }
.order-card-body { padding: 18px 20px; display: grid; grid-template-columns: 1fr 180px 150px; gap: 26px; }
.order-items { margin: 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.order-items li { display: flex; justify-content: space-between; gap: 18px; font-size: .88rem; }
.order-items li strong { margin-right: 8px; color: var(--theme-ink, var(--red)); }
.order-item-copy { display: grid; gap: 3px; }
.order-item-copy small { max-width: 480px; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.order-fulfillment { padding-left: 26px; display: flex; flex-direction: column; justify-content: center; gap: 3px; border-left: 1px solid var(--line); font-size: .74rem; }
.order-fulfillment span { color: var(--muted); }
.order-total { padding-left: 26px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; border-left: 1px solid var(--line); }
.order-total span { color: var(--muted); font-size: .7rem; }
.order-total strong { margin-top: 4px; font-size: 1.2rem; font-weight: 800; }
.order-notes { margin: 0; padding: 12px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.order-ready-estimate, .order-completed-time, .order-delivery-failed {
    margin: 0 20px 18px;
    padding: 14px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: var(--radius-md);
}
.order-ready-estimate { border: 1px solid rgba(var(--theme-rgb), .22); background: var(--theme-soft, var(--green-soft)); }
.order-ready-clock, .order-completed-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 50%; color: white; background: var(--theme-primary, var(--green)); }
.order-ready-clock svg, .order-completed-icon svg { width: 19px; height: 19px; }
.order-ready-clock circle, .order-ready-clock path, .order-completed-icon circle, .order-completed-icon path { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.order-ready-copy, .order-completed-copy { display: grid; gap: 2px; }
.order-ready-estimate small { color: var(--muted); font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.order-ready-estimate strong { color: var(--theme-ink, var(--green)); font-size: .82rem; }
.order-completed-time { border: 1px solid var(--line); background: var(--gray-50); }
.order-completed-detail { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .74rem; }
.order-delivery-failed { border: 1px solid #e2b3a7; background: #fff1ed; }
.order-delivery-failed-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 50%; color: white; background: var(--red-dark); font-weight: 800; }
.order-delivery-failed-copy { display: grid; gap: 3px; color: var(--red-dark-ink); }
.order-delivery-failed-copy > span, .order-delivery-failed-copy time { color: var(--muted); font-size: .76rem; }
.order-rejection-reason { margin: 0; padding: 13px 20px; display: flex; gap: 6px; border-top: 1px solid #d8a599; color: var(--red-dark-ink); background: var(--red-soft); font-size: .8rem; }
.order-card-actions { padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; }
.cancel-order-button { padding: 6px 10px; border: 1px solid #d8a599; border-radius: var(--radius-xs); color: var(--red-ink); background: transparent; cursor: pointer; font-size: .72rem; font-weight: 700; }
.cancel-order-button:hover { background: var(--red-soft); }

/* ======================================================================
   CUSTOMER — notifications
   ====================================================================== */

.notifications-page .notification-list { gap: 10px; }
.notification-card-main { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.notification-card-content { min-width: 0; display: grid; gap: 6px; }
.notification-message { font-size: .9rem; line-height: 1.5; }
.notification-meta { display: flex; align-items: center; gap: 10px; }
.notification-status { padding: 2px 8px; border-radius: var(--radius-full); color: var(--muted); background: var(--gray-100); font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.notification-unread .notification-status { color: var(--theme-ink, var(--green)); background: var(--theme-soft, var(--green-soft)); }
.notification-open-button { padding: 0 14px; height: 36px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: white; color: var(--gray-700); font-size: .74rem; font-weight: 700; cursor: pointer; }
.notification-open-button:hover { color: var(--theme-ink, var(--green)); border-color: rgba(var(--theme-rgb), .3); }

/* ======================================================================
   CUSTOMER — delivery tracking
   ====================================================================== */

.tracking-page { min-height: calc(100vh - 72px); padding: 60px 24px; display: grid; place-items: start center; background: var(--gray-50); }
.customer-body .tracking-page { background: var(--cream); }
.tracking-card { width: min(700px, 100%); padding: clamp(24px, 5vw, 44px); border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--gray-0); box-shadow: var(--shadow); }
.tracking-card h1 { margin: 6px 0 24px; font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 5vw, 3rem); }
.tracking-live, .tracking-complete, .tracking-waiting { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--gray-50); }
.tracking-live { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; }
.tracking-live .button { grid-column: 1 / -1; }
.tracking-live h2, .tracking-complete h2, .tracking-waiting h2 { margin: 0 0 5px; font-family: var(--serif); font-weight: 600; }
.tracking-live p, .tracking-complete p, .tracking-waiting p { margin: 0; color: var(--muted); line-height: 1.55; }
.tracking-live small { color: var(--theme-ink, var(--green)); font-weight: 700; }
.tracking-map-mark, .tracking-complete > span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: var(--theme-soft, var(--green-soft)); font-size: 1.4rem; }
.tracking-complete { display: flex; align-items: center; gap: 14px; border-color: rgba(var(--theme-rgb), .25); background: var(--theme-soft, var(--green-soft)); }
.tracking-delivery-failed { padding: 18px; display: flex; align-items: center; gap: 14px; border: 1px solid #e2b3a7; border-radius: var(--radius-lg); color: #8d2e20; background: #fff1ed; }
.tracking-delivery-failed > span { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; border-radius: 50%; color: white; background: var(--red-dark); font-weight: 900; }
.tracking-delivery-failed h2, .tracking-delivery-failed p { margin: 0; }
.tracking-delivery-failed small { display: block; margin-top: 4px; color: var(--muted); }
.tracking-details { margin: 22px 0 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.tracking-details > div { padding: 16px 0; display: grid; gap: 4px; }
.tracking-details > div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.tracking-details dt { color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; }
.tracking-details dd { margin: 0; font-weight: 700; }
.tracking-refresh { margin: 16px 0 0; color: var(--muted); font-size: .68rem; }

/* ======================================================================
   AUTH — customer & manager login shells
   ====================================================================== */

.auth-shell { min-height: calc(100vh - 72px); display: grid; grid-template-columns: .88fr 1.12fr; }
.auth-aside {
    min-height: 620px;
    padding: 64px max(40px, calc((100vw - 1320px) / 2));
    padding-right: 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: white;
    background: linear-gradient(150deg, var(--forest-2), var(--forest-3));
}
.auth-aside-manager { background: linear-gradient(150deg, var(--theme-dark, var(--charcoal-light)), var(--theme-deep, var(--charcoal))); }
.auth-kicker { display: block; margin-bottom: 18px; color: var(--yellow); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.auth-aside h1 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(2.6rem, 4.4vw, 3.8rem); line-height: 1.06; }
.auth-aside-manager h1 { font-family: var(--sans); font-weight: 800; letter-spacing: -.02em; }
.auth-aside-bottom > p { max-width: 420px; margin: 0 0 20px; color: rgba(255, 255, 255, .68); line-height: 1.65; }
.auth-benefits { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.auth-benefits li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .88); font-size: .85rem; }
.auth-benefits li span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--forest-3); background: var(--yellow); font-size: .64rem; font-weight: 800; }
/* La scorciatoia al menu segue l'elenco dei vantaggi: senza stacco sembrava
   l'ultima voce della lista invece di un pulsante. */
.auth-aside-bottom .button { margin-top: 18px; align-self: start; }
.order-permanent-link { margin: 14px 0 0; padding: 12px 14px; border: 1px dashed var(--line, rgba(255, 255, 255, .18)); border-radius: var(--radius-md, 12px); display: grid; gap: 4px; font-size: .82rem; }
.order-permanent-link span { color: var(--muted, rgba(255, 255, 255, .7)); }
.order-permanent-link a { word-break: break-all; font-weight: 700; }
.order-live-badge { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--muted, rgba(255, 255, 255, .7)); }
.order-live-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green, #2f7d55); animation: order-live-pulse 2s ease-in-out infinite; }
@keyframes order-live-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .order-live-badge::before { animation: none; opacity: 1; } }
.manager-module-list { display: flex; flex-wrap: wrap; gap: 8px; }
.manager-module-list span { padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-full); color: rgba(255, 255, 255, .82); font-size: .72rem; font-weight: 700; }

.auth-panel { padding: 56px; display: grid; place-items: center; background: var(--gray-0); }
.customer-body .auth-panel { background: var(--paper); }
.auth-form-wrap { width: min(440px, 100%); }
.auth-form-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 6px 12px; border-radius: var(--radius-full); color: var(--theme-ink, var(--green)); background: var(--theme-soft, var(--green-soft)); font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.auth-form-badge svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-form-wrap h2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 2.5rem; }
.auth-body-manager .auth-form-wrap h2 { font-family: var(--sans); font-weight: 800; letter-spacing: -.02em; font-size: 2rem; }

.auth-method-switch { margin: 20px 0 22px; display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--gray-50); }
.auth-method-switch a { padding: 9px 18px; border-radius: calc(var(--radius-md) - 4px); color: var(--gray-600); font-size: .78rem; font-weight: 700; }
.auth-method-switch a.active { color: white; background: var(--theme-primary, var(--charcoal)); }

.otp-input { letter-spacing: .45em; text-align: center; font-size: 1.35rem; font-weight: 700; }
.otp-secondary-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 14px; text-align: center; }
.auth-switch, .form-switch { margin-top: 24px; color: var(--muted); font-size: .86rem; text-align: center; }
.auth-recovery-link { display: block; margin-top: 16px; color: var(--muted); font-size: .82rem; font-weight: 700; text-align: center; }
.auth-recovery-link:hover { color: var(--theme-ink, var(--green)); }

.customer-login-assurance, .manager-security-note {
    margin-top: 28px;
    padding-top: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-top: 1px solid var(--line);
    color: var(--muted);
}
.customer-login-assurance span, .manager-security-note svg { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--theme-ink, var(--green)); background: var(--theme-soft, var(--green-soft)); }
.manager-security-note { align-items: center; font-size: .74rem; }
.manager-security-note svg { padding: 8px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.customer-login-assurance p { margin: 0; }
.customer-login-assurance small { display: block; color: var(--muted); font-weight: 400; }
.manager-login-button { letter-spacing: -.005em; }

/* Contenitori delle zone aggiornate in tempo reale: raggruppano senza
   aggiungere un livello al layout. */
.live-region { display: contents; }

/* Form prodotto: categoria senza ingredienti assegnati. */
.recipe-empty-note { margin: 12px 0 0; padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--muted); font-size: .82rem; }
.recipe-empty-note a { font-weight: 700; text-decoration: underline; }

/* Account cliente: Google, nome utente e password. */
.google-login-button { width: 100%; min-height: 48px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius-full); color: var(--ink); background: var(--paper); font-size: .9rem; font-weight: 700; transition: border-color var(--duration-base) ease, box-shadow var(--duration-base) ease; }
.google-login-button:hover { border-color: rgba(var(--theme-rgb), .45); box-shadow: var(--shadow-xs); }
.google-login-button svg { width: 20px; height: 20px; flex: 0 0 20px; }
.auth-divider { margin: 22px 0; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-form-note { margin: 14px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.55; }

/* Pagina dell'ordine: invito a salvarla e a collegarla all'account. */
.order-save-card { margin: 0 0 24px; padding: 20px; display: grid; gap: 14px; border: 1px solid rgba(var(--theme-rgb), .28); border-radius: var(--radius-lg); color: var(--ink); background: var(--theme-soft, var(--green-soft)); }
.order-save-card h2 { margin: 4px 0 6px; font-family: var(--sans); font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.order-save-card p { margin: 0; line-height: 1.55; font-size: .86rem; }
.order-save-card a:not(.button) { font-weight: 700; text-decoration: underline; }
.order-save-link { display: flex; flex-wrap: wrap; gap: 8px; }
.order-save-link input { flex: 1 1 240px; min-width: 0; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--paper); font: inherit; font-size: .8rem; }
.order-save-status { color: var(--theme-ink, var(--green)); font-size: .78rem; font-weight: 700; }
.order-save-status:empty { display: none; }
.order-save-account { margin: 0; padding-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(var(--theme-rgb), .2); font-size: .84rem; }

/* Dashboard cliente: dati dell'account ed eliminazione. */
.account-card { margin-top: 28px; padding: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.account-card h2 { margin: 0 0 6px; font-family: var(--sans); font-size: 1.1rem; font-weight: 800; }
.account-card p { margin: 0; max-width: 62ch; color: var(--muted); font-size: .84rem; line-height: 1.55; }

/* ======================================================================
   MANAGER — page shell
   ====================================================================== */

.manager-page { background: var(--gray-50); }
.manager-page .dashboard-heading {
    position: relative;
    overflow: hidden;
    color: white;
    border: 0;
    background: radial-gradient(circle at 86% 0, rgba(var(--theme-rgb), .3), transparent 20rem), linear-gradient(120deg, var(--gray-900), var(--gray-800));
    box-shadow: 0 22px 50px rgba(10, 16, 12, .22);
}
.manager-page .dashboard-heading::before {
    content: "";
    width: 300px; height: 300px;
    position: absolute; right: -110px; top: -190px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    pointer-events: none;
}
.manager-page .dashboard-heading > * { position: relative; z-index: 1; }
.manager-page .dashboard-heading .eyebrow { color: var(--yellow); }
.manager-page .dashboard-heading p { color: rgba(255, 255, 255, .66); }
.manager-page .dashboard-heading .button-outline,
.manager-page .dashboard-heading .button-ghost { color: white; border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); box-shadow: none; }
.manager-page .dashboard-heading .button-outline:hover,
.manager-page .dashboard-heading .button-ghost:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .13); }
.manager-page .dashboard-heading .button-dark { color: #161d18; background: white; }
.manager-page .dashboard-heading .button-primary { background: var(--theme-primary, var(--red)); box-shadow: 0 10px 22px rgba(var(--theme-rgb), .3); }
.manager-page .dashboard-heading .button-primary:hover { background: var(--theme-dark, var(--red-dark)); }

/* ======================================================================
   MANAGER — dashboard: ordering control + metrics
   ====================================================================== */

.ordering-control {
    margin-bottom: 18px;
    padding: 22px 24px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--gray-0);
    box-shadow: var(--shadow-soft);
}
.ordering-control::before { content: ""; width: 4px; position: absolute; inset: 0 auto 0 0; background: var(--theme-primary, var(--green)); }
.ordering-control h2 { font-family: var(--sans); font-size: 1.2rem; font-weight: 800; }
.ordering-control p { font-size: .8rem; }
.ordering-control-closed { border-color: transparent; background: linear-gradient(110deg, var(--red-dark), var(--red)); color: white; box-shadow: 0 16px 34px rgba(209, 80, 46, .22); }
.ordering-control-closed::before { display: none; }
.ordering-control-closed p { color: rgba(255, 255, 255, .82); }
.ordering-control-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; }
.ordering-control-form label { display: grid; gap: 5px; font-size: .72rem; font-weight: 700; }
.ordering-control-form textarea { min-height: 64px; padding: 11px; border-radius: var(--radius-sm); resize: vertical; }
.availability-manage-link { white-space: nowrap; }
.ordering-cart-notice { margin-bottom: 18px; padding: 13px 15px; display: grid; gap: 4px; color: var(--red-dark-ink); border: 1px solid #d8a599; border-radius: var(--radius-sm); background: var(--red-soft); font-size: .8rem; }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.metric-card {
    min-height: 148px;
    padding: 18px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--gray-0);
    box-shadow: var(--shadow-xs);
    transition: transform var(--duration-base) ease, border-color var(--duration-base) ease, box-shadow var(--duration-base) ease;
}
.metric-card:hover { border-color: rgba(var(--theme-rgb), .18); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.metric-card > span { max-width: calc(100% - 20px); color: var(--gray-600); font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.metric-card strong { margin-top: auto; font-family: var(--sans); font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; }
.metric-card small { color: var(--gray-600); font-size: .68rem; }
.metric-card small a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.metric-accent { border-color: transparent; background: linear-gradient(145deg, var(--theme-primary, var(--green)), var(--theme-deep, var(--forest-3))); color: white; box-shadow: 0 12px 26px rgba(var(--theme-rgb), .28); }
.metric-accent > span, .metric-accent small { color: rgba(255, 255, 255, .78); }
.pickup-ready-metric { border-color: rgba(var(--theme-rgb), .2); background: linear-gradient(145deg, var(--gray-0), var(--theme-soft, var(--green-soft))); }
.delivery-queue-metric { border-color: rgba(var(--theme-rgb), .22); background: linear-gradient(145deg, var(--gray-0), var(--theme-soft, var(--green-soft))); }
.delivery-queue-metric a { color: inherit; }

/* Dashboard summary, grouped by where an order sits in the workflow:
   what needs a decision now → what is being worked on → what is closed. */
.dashboard-metrics { display: grid; gap: 20px; }

.metric-focus-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; }
.metric-focus { min-height: 172px; }
.metric-focus strong { font-size: 3.2rem; }
.metric-today { justify-content: flex-start; }

.metric-group { display: grid; gap: 10px; }
.metric-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.metric-group-head h3 {
    font-family: var(--sans);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--gray-600);
}
.metric-group-head span { color: var(--gray-600); font-size: .74rem; }

.metric-grid-pipeline { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.metric-grid-closed { grid-template-columns: repeat(2, minmax(200px, 1fr)); }

.metric-card-positive { border-color: rgba(var(--theme-rgb), .18); }
.metric-card-negative { border-color: rgba(209, 80, 46, .2); }
.metric-card-negative strong { color: var(--red-dark-ink); }
.metric-breakdown {
    margin-top: 10px;
    padding-top: 9px;
    display: grid;
    gap: 3px;
    border-top: 1px solid var(--line);
}
.metric-breakdown span { color: var(--gray-600); font-size: .7rem; }
.metric-breakdown b { color: var(--ink); font-weight: 800; }

/* ======================================================================
   MANAGER — order decisions
   ====================================================================== */

.manager-order.order-awaiting-decision {
    grid-template-columns: 70px minmax(180px, .95fr) minmax(260px, 1.55fr) 100px;
    padding: 19px;
    column-gap: 22px;
    row-gap: 16px;
    border-color: rgba(var(--theme-rgb), .22);
    box-shadow: var(--shadow-sm);
}
.order-awaiting-decision .manager-order-actions { grid-column: 1 / -1; padding-top: 15px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; border-top: 1px solid var(--line); }
.order-awaiting-decision .manager-order-statusbar { justify-content: flex-start; }
.manager-order-statusbar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.manager-column-label, .manager-order-items::before, .manager-order-total small { color: var(--gray-600); font-size: .52rem; font-weight: 800; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
.manager-order-items::before { content: "Dettaglio ordine"; margin-bottom: 2px; }
.manager-customer-contact { color: var(--gray-600) !important; }
.rider-progress { margin-top: 4px; padding: 8px 10px; display: grid; justify-items: start; gap: 3px; border: 1px solid rgba(var(--theme-rgb), .22); border-radius: var(--radius-xs); background: var(--theme-soft, var(--green-soft)); }
.rider-progress small { color: var(--muted); font-size: .7rem; }
.rider-progress .rider-progress-position { color: var(--theme-ink, var(--green)); font-weight: 700; }
.rider-progress .rider-progress-position.rider-progress-stale { color: var(--amber-ink); }
.rider-progress .button { margin-top: 4px; min-height: 38px; padding: 0 12px; }
.order-delivery-live { margin: 0 20px 18px; padding: 14px 15px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(var(--theme-rgb), .22); border-radius: var(--radius-md); background: var(--theme-soft, var(--green-soft)); }
.order-delivery-live-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 50%; background: var(--gray-0); font-size: 1.05rem; }
.order-delivery-live-copy { flex: 1; display: grid; gap: 2px; }
.order-delivery-live-copy strong { color: var(--theme-ink, var(--green)); font-size: .82rem; }
.order-delivery-live-copy span { color: var(--muted); font-size: .74rem; }
.push-optin { margin: 0 0 18px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--gray-0); box-shadow: var(--shadow-xs); }
.push-optin-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; border-radius: 50%; color: var(--theme-ink, var(--green)); background: var(--theme-soft, var(--green-soft)); }
.push-optin-icon svg { width: 20px; height: 20px; }
.push-optin-icon path { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.push-optin-copy { flex: 1; min-width: 0; }
.push-optin-copy > div { display: grid; gap: 2px; }
.push-optin-copy strong { color: var(--ink); font-size: .84rem; }
.push-optin-copy span { color: var(--muted); font-size: .76rem; }
.push-optin-error { display: block; margin-top: 4px; color: var(--red-dark-ink); font-size: .74rem; font-weight: 700; }
.push-optin-actions { flex: 0 0 auto; display: flex; gap: 8px; }
.push-optin[data-push-current="on"] .push-optin-icon { color: white; background: var(--theme-primary, var(--green)); }
.push-optin[data-push-current="blocked"] .push-optin-icon,
.push-optin[data-push-current="ios"] .push-optin-icon { color: var(--amber-ink); background: var(--amber-soft); }
@media (max-width: 760px) {
    .rider-progress .button { width: 100%; min-height: 44px; }
    .push-optin { flex-wrap: wrap; }
    .push-optin-actions { width: 100%; }
    .push-optin-actions .button { width: 100%; min-height: 44px; }
}
@media (max-width: 560px) {
    .order-delivery-live { margin-left: 18px; margin-right: 18px; flex-wrap: wrap; }
    .order-delivery-live .button { width: 100%; min-height: 44px; }
}
.manager-order-total { display: grid; justify-items: end; gap: 4px; }
.manager-order-total strong { color: var(--ink); font-size: .96rem; letter-spacing: -.02em; }
.manager-completed-at { color: var(--muted); font-size: .7rem; }
.manager-delivery-failed-at { color: var(--red-dark-ink); font-size: .7rem; font-weight: 700; }
.manager-delivery-failure-reason { padding: 10px 12px; display: grid; gap: 3px; border-radius: var(--radius-xs); color: var(--red-dark-ink); background: var(--red-soft); }
.manager-delivery-failure-reason strong { font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; }

.decision-row {
    width: 100%; padding: 14px;
    display: grid; grid-template-columns: minmax(220px, 1fr) auto;
    align-items: center; gap: 18px;
    border: 1px solid rgba(var(--theme-rgb), .16);
    border-radius: var(--radius-md);
    background: var(--gray-50);
}
.decision-intro { min-width: 0; display: flex; align-items: center; gap: 12px; }
.decision-clock { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: var(--radius-sm); color: white; background: linear-gradient(145deg, var(--theme-light, #4c9370), var(--theme-dark, var(--forest-2))); }
.decision-clock svg { width: 20px; height: 20px; }
.decision-intro > span:last-child { min-width: 0; display: grid; gap: 2px; }
.decision-intro small { color: var(--theme-ink, var(--green)); font-size: .52rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.decision-intro strong { font-size: .84rem; letter-spacing: -.01em; }
.decision-intro > span:last-child > span { color: var(--muted); font-size: .62rem; }
.decision-controls { display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px; }
.accept-order-form { align-items: flex-end; gap: 8px; }
.accept-order-form label { min-width: 172px; gap: 5px; color: var(--gray-600); font-size: .55rem; letter-spacing: .03em; text-transform: uppercase; }
.preparation-select-shell { position: relative; display: flex; align-items: center; }
.preparation-select-shell > svg { width: 16px; height: 16px; position: absolute; left: 12px; z-index: 1; color: var(--theme-ink, var(--green)); pointer-events: none; }
.preparation-select-shell::after { content: ""; width: 7px; height: 7px; position: absolute; right: 14px; border-right: 1.5px solid var(--gray-500); border-bottom: 1.5px solid var(--gray-500); transform: translateY(-2px) rotate(45deg); pointer-events: none; }
.accept-order-form select { width: 100%; min-width: 172px; height: 42px; padding: 0 34px 0 37px; appearance: none; border: 1px solid rgba(var(--theme-rgb), .25); border-radius: var(--radius-sm); color: var(--ink); background: white; font-size: .69rem; font-weight: 700; cursor: pointer; }
.accept-order-form select:focus { border-color: rgba(var(--theme-rgb), .6); box-shadow: 0 0 0 4px rgba(var(--theme-rgb), .1); }
.decision-controls .decision-button { height: 42px; padding-inline: 15px; border-radius: var(--radius-sm); white-space: nowrap; }
.decision-controls .accept-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.decision-controls .accept-button svg { width: 16px; height: 16px; }
.decision-controls .reject-button { color: var(--red-dark-ink); border-color: rgba(209, 80, 46, .2); background: white; }
.decision-controls .reject-button:hover { border-color: rgba(209, 80, 46, .35); background: var(--red-soft); }

/* ======================================================================
   MANAGER — pizza pricing card
   ====================================================================== */

.pizza-pricing-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--gray-50); }
.pizza-pricing-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pizza-pricing-heading strong { display: block; margin: 2px 0 3px; font-size: .95rem; }
.pizza-pricing-heading small { color: var(--muted); font-size: .72rem; }
.pizza-price-mode { padding: 5px 10px; border-radius: var(--radius-full); color: var(--theme-ink, var(--green)); background: var(--theme-soft, var(--green-soft)); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.pizza-price-mode.is-custom { color: var(--red-dark-ink); background: var(--red-soft); }
.pizza-pricing-grid { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.pizza-price-reference { padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: white; }
.pizza-price-reference span { display: block; color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.pizza-price-reference strong { display: block; margin: 4px 0; font-size: 1.2rem; }
.pizza-price-reference small { color: var(--muted); font-size: .68rem; line-height: 1.4; }
.pizza-price-override { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
[data-pizza-price][readonly] { color: var(--muted); background: var(--gray-100); }

/* ======================================================================
   MANAGER — riders
   ====================================================================== */

.rider-service-control { margin-bottom: 16px; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--gray-0); box-shadow: var(--shadow-soft); }
.rider-service-state { display: flex; align-items: flex-start; gap: 13px; }
.rider-service-dot { width: 12px; height: 12px; margin-top: 6px; flex: 0 0 12px; border-radius: 50%; background: var(--red-dark); box-shadow: 0 0 0 5px var(--red-soft); }
.rider-service-control-active .rider-service-dot { background: var(--theme-primary, var(--green)); box-shadow: 0 0 0 5px rgba(var(--theme-rgb), .18); }
.rider-service-control h2 { margin: 3px 0 4px; font-family: var(--sans); font-weight: 800; font-size: 1.15rem; }
.rider-service-control p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.rider-service-control-disabled { border-color: rgba(189, 70, 53, .18); background: linear-gradient(145deg, #fff9f7, white); }
.rider-service-control form { flex: 0 0 auto; }

.rider-management { margin-top: 30px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--gray-0); box-shadow: var(--shadow-soft); }
.rider-management-grid { padding-top: 16px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; }
.rider-list-card, .rider-create-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--gray-50); }
.rider-list-card h3, .rider-create-card h3 { margin: 0; font-family: var(--sans); font-weight: 800; font-size: 1.1rem; }
.rider-empty { color: var(--muted); font-size: .78rem; }
.rider-list { margin: 18px 0 0; padding: 0; display: grid; gap: 4px; list-style: none; }
.rider-list li { padding: 12px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border-top: 1px solid var(--line); }
.rider-avatar { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 36px; border-radius: var(--radius-sm); color: white; background: linear-gradient(145deg, var(--theme-light, #4c9370), var(--theme-dark, var(--forest-2))); font-family: var(--sans); font-weight: 700; }
.rider-list li > div { display: grid; gap: 2px; }
.rider-list small { color: var(--muted); font-size: .68rem; }
.rider-account-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.rider-delete-form { margin-left: 0; }
.rider-info-button { min-width: 66px; }
.rider-info-panel { width: 100%; margin-top: 8px; padding: 16px; border: 1px solid rgba(var(--theme-rgb), .15); border-radius: var(--radius-md); background: white; }
.rider-info-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.rider-info-heading h4 { margin: 3px 0 0; font-family: var(--sans); font-weight: 800; font-size: 1.05rem; }
.rider-info-status { padding: 5px 9px; border-radius: var(--radius-full); color: var(--theme-ink, var(--green)); background: var(--theme-soft, var(--green-soft)); font-size: .62rem; font-weight: 800; white-space: nowrap; }
.rider-info-status-error { color: var(--red-dark-ink); background: var(--red-soft); }
.rider-info-stats { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rider-info-stats article { min-width: 0; padding: 12px; display: grid; gap: 3px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--gray-50); }
.rider-info-stats strong { color: var(--theme-ink, var(--green)); font-family: var(--sans); font-size: 1.4rem; font-weight: 800; line-height: 1; }
.rider-info-stats span { color: var(--muted); font-size: .62rem; font-weight: 700; }
.rider-position { margin-top: 10px; padding: 11px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: white; }
.rider-position-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--theme-primary, var(--green)); box-shadow: 0 0 0 5px rgba(var(--theme-rgb), .18); }
.rider-position > div { min-width: 0; display: grid; gap: 2px; }
.rider-position small { overflow-wrap: anywhere; }
.rider-position-empty { margin: 10px 0 0; padding: 11px; border-radius: var(--radius-sm); color: var(--muted); background: var(--gray-100); font-size: .68rem; line-height: 1.5; }
.rider-phone-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.rider-phone-form label { flex: 1 1 190px; min-width: 0; display: grid; gap: 6px; color: var(--gray-700); font-size: .72rem; font-weight: 700; }
.rider-phone-form label small { color: var(--muted); font-weight: 400; }
/* The phone input had no styling of its own outside the mobile breakpoint and
   fell back to the raw browser control. Icon wrapper + field styling here. */
.rider-phone-input { position: relative; display: block; }
.rider-phone-input svg { width: 15px; height: 15px; position: absolute; top: 50%; left: 12px; transform: translateY(-50%); pointer-events: none; fill: none; stroke: var(--muted); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.rider-phone-form input {
    width: 100%;
    min-height: 42px;
    padding: 0 13px 0 34px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--gray-0);
    color: var(--ink);
    font-size: .82rem;
    font-weight: 600;
    outline: 0;
    transition: border-color var(--duration-base) ease, box-shadow var(--duration-base) ease;
}
.rider-phone-form input::placeholder { color: var(--muted); font-weight: 400; }
.rider-phone-form input:focus { border-color: rgba(var(--theme-rgb), .55); box-shadow: 0 0 0 4px rgba(var(--theme-rgb), .1); }
.rider-phone-input:focus-within svg { stroke: var(--theme-ink, var(--green)); }
.rider-phone-form .button { flex: 0 0 auto; }
.rider-field-hint { flex: 1 1 100%; display: block; margin-top: 2px; color: var(--muted); font-size: .68rem; font-weight: 400; line-height: 1.5; }

.rider-create-card { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; align-content: start; }
.rider-create-card > div, .rider-create-card > button { grid-column: 1 / -1; }
.rider-create-heading p { margin: 6px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.55; }
.rider-create-card label small { color: var(--muted); font-weight: 400; }
/* Natural width instead of a full-width bar spanning both columns. */
.rider-create-submit { justify-self: end; }

.rider-disabled-panel { padding: 28px; border: 1px solid #efc1b5; border-radius: var(--radius-xl); background: var(--red-soft); box-shadow: var(--shadow-soft); }
.rider-disabled-panel h2 { margin: 8px 0; font-family: var(--sans); font-weight: 800; }
.rider-disabled-panel p { margin: 0; color: var(--muted); }

.delivery-queue-card { margin-top: 14px; padding: 22px; display: grid; grid-template-columns: minmax(220px, .7fr) 1.3fr; gap: 22px; border: 1px solid rgba(var(--theme-rgb), .2); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--gray-0), var(--theme-soft, var(--green-soft))); }
.delivery-queue-card h3 { margin: 0; font-family: var(--sans); font-weight: 800; font-size: 1.1rem; }
.delivery-queue-card > div > p { margin: 5px 0 0; color: var(--muted); font-size: .72rem; }
.delivery-queue-list { margin: 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.delivery-queue-list li { padding: 11px; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 11px; border: 1px solid rgba(var(--theme-rgb), .16); border-radius: var(--radius-sm); background: white; }
.delivery-queue-list li > div { display: grid; gap: 2px; }
.delivery-queue-list small, .delivery-queue-list time { color: var(--muted); font-size: .66rem; }
.delivery-queue-position { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-sm); color: white; background: var(--theme-primary, var(--green)); font-weight: 800; }
.delivery-queue-next { padding: 4px 7px; border-radius: var(--radius-full); color: var(--theme-ink); background: var(--theme-soft, var(--green-soft)); font-size: .58rem; font-weight: 800; text-transform: uppercase; }

/* ======================================================================
   MANAGER — accounts
   ====================================================================== */

.manager-account-workspace { padding-top: 18px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: start; }
.manager-account-list-card, .manager-account-create-card, .manager-account-editor { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--gray-0); box-shadow: var(--shadow-soft); }
.manager-account-list { margin-top: 16px; display: grid; gap: 8px; }
.manager-account-row { padding: 15px; display: flex; align-items: flex-start; gap: 13px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--gray-50); }
.manager-account-avatar { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: var(--radius-sm); color: white; background: linear-gradient(145deg, var(--theme-light, #4c9370), var(--theme-dark, var(--forest-2))); font-family: var(--sans); font-weight: 700; }
.manager-account-person { min-width: 0; flex: 1; display: grid; gap: 4px; }
.manager-account-person > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.manager-account-person small { color: var(--muted); font-size: .72rem; }
.manager-current-chip, .manager-admin-chip, .manager-access-chip, .manager-profile-chip { padding: 3px 8px; border-radius: var(--radius-full); font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.manager-current-chip { color: var(--theme-ink, var(--green)); background: var(--theme-soft, var(--green-soft)); }
.manager-admin-chip { color: white; background: var(--theme-primary, var(--green)); }
.manager-admin-chip-admin { color: white; background: var(--theme-primary, var(--green)); }
.manager-access-chip { color: var(--theme-ink); background: var(--theme-soft, var(--green-soft)); }
.manager-profile-chip { color: var(--amber-ink); background: var(--amber-soft); }
.manager-account-actions { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.manager-account-form-heading { margin-bottom: 4px; }
.manager-account-form-alert { padding: 12px 14px; border: 1px solid #efc1b5; border-radius: var(--radius-sm); background: var(--red-soft); color: var(--red-dark-ink); font-size: .78rem; }
.manager-account-form-alert p { margin: 0; }
.manager-name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.manager-admin-toggle { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--gray-50); cursor: pointer; }
.manager-admin-toggle input[type="checkbox"] { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; accent-color: var(--theme-primary, var(--green)); cursor: pointer; }
.manager-admin-toggle > span { display: grid; gap: 1px; }
.manager-admin-toggle strong { display: block; font-size: .78rem; }
.manager-admin-toggle small { color: var(--muted); font-size: .68rem; line-height: 1.4; }

.manager-account-editor-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.manager-account-editor-heading .manager-account-avatar { width: 48px; height: 48px; flex-basis: 48px; font-size: 1.1rem; }
.manager-account-editor-heading h2 { margin: 2px 0 6px; font-family: var(--sans); font-weight: 800; }
.manager-account-editor-heading p { margin: 8px 0 0; color: var(--muted); font-size: .78rem; }

/* ======================================================================
   MANAGER — settings
   ====================================================================== */

/*
 * Workspace: a sticky index rail on the left keeps the nine settings sections
 * one click away, the right column stacks them in numbered groups. The group
 * bar is what tells the manager how far a single "Salva" reaches — group 01 is
 * one form with one button at the bottom, group 02 saves card by card.
 * Below 1080px the rail flattens into a horizontal chip strip.
 */
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-index { position: sticky; top: 89px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--gray-0); box-shadow: var(--shadow-soft); }
.settings-index-title { display: block; margin: 2px 0 10px 10px; color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.settings-index-list { margin: 0; padding: 0; display: grid; gap: 2px; list-style: none; }
.settings-index-list a { display: block; padding: 8px 10px; border-radius: var(--radius-xs); color: var(--gray-700); font-size: .76rem; font-weight: 600; line-height: 1.35; text-decoration: none; transition: color var(--duration-fast) ease, background var(--duration-fast) ease; }
.settings-index-list a:hover { color: var(--theme-ink, var(--green)); background: var(--gray-50); }
.settings-index-list a.is-current { color: var(--theme-ink, var(--green)); background: var(--theme-soft, var(--green-soft)); font-weight: 800; }

.settings-content { display: grid; gap: 32px; min-width: 0; }
.settings-group { display: grid; gap: 16px; min-width: 0; }
.settings-group-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 14px; padding-bottom: 12px; border-bottom: 2px solid var(--line); }
.settings-group-index { margin-top: 2px; padding: 5px 8px; border-radius: var(--radius-xs); color: var(--theme-ink, var(--green)); background: var(--theme-soft, var(--green-soft)); font-family: var(--sans); font-size: .74rem; font-weight: 800; line-height: 1; }
.settings-group-bar strong, .settings-group-bar h2 { display: block; font-family: var(--sans); font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.settings-group-bar .eyebrow { display: block; margin-bottom: 3px; }
.settings-group-bar p { margin: 5px 0 0; max-width: 74ch; color: var(--muted); font-size: .76rem; line-height: 1.5; }

.settings-form { display: grid; gap: 16px; }
/* Sticky header + a little air, so an anchor jump never lands under the chrome */
.settings-group, .settings-card { scroll-margin-top: 96px; }
.settings-card { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--gray-0); box-shadow: var(--shadow-soft); }
.settings-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.settings-card-heading h2 { font-family: var(--sans); font-weight: 800; font-size: 1.25rem; }
.settings-card-heading p { margin: 6px 0 0; max-width: 560px; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.settings-live-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid rgba(var(--theme-rgb), .2); border-radius: var(--radius-full); color: var(--theme-ink, var(--green)); background: var(--theme-soft, var(--green-soft)); font-size: .68rem; font-weight: 700; white-space: nowrap; }
.settings-live-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.settings-live-chip.is-muted { color: var(--muted); background: var(--gray-100); border-color: var(--line); }
.settings-live-chip.is-muted i { background: var(--gray-400); }

.settings-brand-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
.settings-logo-panel { display: grid; gap: 10px; justify-items: start; }
.settings-logo-preview { width: 100px; height: 100px; display: grid; place-items: center; overflow: hidden; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--gray-50); color: var(--gray-400); font-family: var(--sans); font-size: 1.6rem; font-weight: 800; }
.settings-logo-preview.has-image { border-style: solid; }
.settings-logo-preview img { width: 100%; height: 100%; object-fit: cover; }
.settings-logo-panel > div { display: grid; gap: 3px; }
.settings-logo-panel strong { font-size: .84rem; }
.settings-logo-panel p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.settings-file-button { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: var(--gray-0); font-size: .72rem; font-weight: 700; cursor: pointer; transition: color var(--duration-base) ease, border-color var(--duration-base) ease, background var(--duration-base) ease; }
.settings-file-button:hover { color: var(--theme-ink); border-color: rgba(var(--theme-rgb), .4); background: var(--theme-soft, var(--green-soft)); }
.settings-file-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.settings-logo-save-button, .settings-remove-logo-button { width: 100%; }

.settings-remove-logo { border: 0; background: none; padding: 0; color: var(--red-dark-ink); font-size: .7rem; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.settings-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.settings-field-wide { grid-column: 1 / -1; }
.settings-field { display: grid; gap: 6px; }
.settings-field span { font-size: .72rem; font-weight: 700; color: var(--gray-700); }
.settings-field small { color: var(--muted); font-weight: 400; }
.settings-field input, .settings-field textarea { min-height: 44px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: white; }
.settings-field textarea { min-height: 60px; padding: 11px 13px; resize: vertical; }

/* Single column at every width on purpose: a side gutter for the step number
   costs ~48px, which is nothing on a 982px card and a fifth of the field width
   on a phone. The number rides in the head row instead. */
.settings-copy-grid { display: grid; gap: 14px; }
.settings-copy-section { display: grid; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--gray-50); }
.settings-copy-head { display: flex; align-items: baseline; gap: 10px; }
.settings-section-number { color: var(--gray-500); font-family: var(--sans); font-size: 1.25rem; font-weight: 800; line-height: 1.1; }
.settings-copy-fields { display: grid; gap: 12px; }
.settings-copy-label { color: var(--gray-700); font-family: var(--sans); font-size: .84rem; font-weight: 800; }

/* Shared card tail pieces: a rule-separated action row and a footnote, so
   every self-saving card ends the same way instead of each inventing one. */
.settings-card-footer { margin-top: 18px; padding-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); }
.settings-card-footer .button { flex: 0 0 auto; }
.settings-card-footer > form { flex: 0 0 auto; }
.settings-footer-hint { flex: 1 1 320px; min-width: 0; margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.settings-card-note { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; line-height: 1.55; }
.settings-card-note a { color: var(--theme-ink, var(--green)); font-weight: 700; }

.settings-save-bar { position: sticky; bottom: 16px; z-index: 5; margin-top: 4px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid rgba(var(--theme-rgb), .3); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .96); box-shadow: var(--shadow-lift); backdrop-filter: blur(10px); }
.settings-save-bar strong { display: block; color: var(--ink); font-size: .9rem; }
.settings-save-bar > div > span { color: var(--muted); font-size: .74rem; }

/* Delivery area map widget */
.delivery-map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.capacity-switch { width: 40px; height: 23px; position: relative; flex: 0 0 40px; border-radius: var(--radius-full); background: var(--gray-300); transition: background var(--duration-base) ease; }
.capacity-switch::after { content: ""; width: 17px; height: 17px; position: absolute; top: 3px; left: 3px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform var(--duration-base) ease; }
input:checked ~ .capacity-switch { background: var(--theme-primary, var(--green)); }
input:checked ~ .capacity-switch::after { transform: translateX(17px); }
.capacity-enabled-control { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 11px; cursor: pointer; }
.capacity-enabled-control input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.capacity-enabled-control > span:last-child { display: grid; gap: 2px; }

/* Metodi di pagamento: interruttore a tutta larghezza, così resta comodo da
   toccare anche su un telefono stretto. */
.payment-methods-form { display: grid; gap: 0; }
.payment-methods-form .capacity-enabled-control { width: 100%; min-height: 56px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--gray-50); }
.payment-methods-form .capacity-enabled-control small { color: var(--muted); font-size: .7rem; line-height: 1.45; }
/* Replaces the old on/off switch: the zone is always enforced, so the toolbar
   states the rule instead of offering a toggle. */
.delivery-area-policy { flex: 1 1 260px; min-width: 0; margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.delivery-area-required-note { margin: 16px 0 0; padding: 12px 14px; border: 1px solid #efc1b5; border-radius: var(--radius-sm); background: var(--red-soft); color: var(--red-dark-ink); font-size: .74rem; line-height: 1.5; }
.delivery-area-required-note strong { display: block; margin-bottom: 2px; }

.delivery-map-card { margin-top: 16px; padding: 18px; display: grid; gap: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--gray-50); }
.delivery-map-location { display: flex; align-items: center; gap: 10px; }
.delivery-map-location-icon { color: var(--theme-ink, var(--red)); font-size: 1.1rem; }
.delivery-map-location small { display: block; color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; }
.delivery-map-location strong { font-size: .86rem; }
/* Portrait map: capped width, centred in the card, height driven by the
   viewport so it stays tall without overflowing a phone screen. */
.delivery-area-map { width: min(100%, 420px); aspect-ratio: 4 / 5; max-height: 62vh; min-height: 320px; margin-inline: auto; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--gray-100); }
/* From tablet up there is room for a wider frame: keep the height the portrait
   rule produced (min(525px, 62vh)) and only widen the box. */
@media (min-width: 761px) {
    .delivery-area-map { width: min(100%, 520px); aspect-ratio: auto; height: min(525px, 62vh); }
}
.delivery-map-loading { height: 100%; display: grid; place-items: center; color: var(--muted); font-size: .8rem; }
.delivery-map-controls { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 14px; align-items: end; }
.delivery-map-guidance strong { display: block; font-size: .8rem; }
.delivery-map-guidance small { color: var(--muted); font-size: .7rem; }
.delivery-radius-field { grid-column: 2; }
.delivery-radius-field span:first-child { display: block; margin-bottom: 6px; font-size: .72rem; font-weight: 700; }
.delivery-radius-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: white; overflow: hidden; }
.delivery-radius-control:focus-within { border-color: rgba(var(--theme-rgb), .5); box-shadow: 0 0 0 3px rgba(var(--theme-rgb), .1); }
.delivery-radius-control input { border: 0 !important; box-shadow: none !important; }
.delivery-radius-control > span { padding: 0 12px; color: var(--muted); font-size: .74rem; font-weight: 700; }
.delivery-radius-slider-field { grid-column: 1 / -1; }
.delivery-radius-slider-field input[type="range"] { width: 100%; accent-color: var(--theme-ink, var(--green)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.leaflet-container { font-family: var(--sans) !important; }

/* Theme color picker */
.theme-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.theme-option-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--gray-50); }
.theme-option-copy { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.theme-option-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: var(--radius-sm); color: white; background: var(--charcoal-light); font-family: var(--sans); font-weight: 800; }
.theme-option-manager .theme-option-icon { background: var(--theme-deep, var(--forest-2)); }
.theme-option-customer .theme-option-icon { background: var(--theme-deep, var(--forest-2)); }
.theme-option-copy h3 { font-family: var(--sans); font-weight: 800; font-size: 1rem; }
.theme-option-copy p { margin: 4px 0 0; color: var(--muted); font-size: .74rem; line-height: 1.45; }
.theme-mini-preview { height: 64px; margin-bottom: 14px; padding: 8px; display: grid; gap: 6px; border-radius: var(--radius-sm); background: var(--gray-100); overflow: hidden; }
.theme-preview-bar { height: 10px; border-radius: 3px; background: var(--theme-selected, var(--green)); }
.theme-preview-panel { flex: 1; border-radius: 4px; background: white; }
.theme-mini-preview { display: grid; grid-template-rows: 10px 1fr; }
.theme-preview-button { justify-self: end; width: 46px; height: 16px; border-radius: 4px; background: var(--theme-selected, var(--green)); }
.theme-color-field { display: grid; gap: 6px; }
.theme-color-field > span:first-child { font-size: .72rem; font-weight: 700; }
.theme-color-control { display: flex; align-items: center; gap: 10px; }
.theme-color-control input[type="color"] { width: 42px; height: 42px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: white; cursor: pointer; }
.theme-color-control output { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: white; font-family: var(--font-mono); font-size: .78rem; font-weight: 700; }
.theme-presets { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.theme-preset { height: 30px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: white; font-size: .68rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.theme-preset::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.theme-preset-forest::before { background: #2f7652; }
.theme-preset-blue::before { background: #32678a; }
.theme-preset-violet::before { background: #68529a; }
.theme-preset-burgundy::before { background: #8c3f55; }
.theme-preset-deep-forest::before { background: #123b29; }
.theme-preset-ocean::before { background: #165a72; }
.theme-preset-terracotta::before { background: #a64b32; }
.theme-preset-plum::before { background: #70445f; }
.theme-preset:hover { border-color: var(--line-strong); background: var(--gray-50); transform: translateY(-1px); }

/* Order capacity slots */
.capacity-settings-card { padding: 26px; }
.capacity-current-state { margin-bottom: 20px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--gray-50); }
.capacity-current-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--gray-500); background: var(--gray-100); font-weight: 800; }
.capacity-current-state > div:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.capacity-current-state > div > span:first-child { color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.capacity-current-state strong { font-size: 1rem; }
.capacity-current-state small { color: var(--muted); font-size: .72rem; }
.capacity-state-badge { padding: 5px 10px; border-radius: var(--radius-full); color: var(--muted); background: var(--gray-100); font-size: .64rem; font-weight: 800; text-transform: uppercase; }
.capacity-current-state.is-active .capacity-current-icon { color: var(--theme-ink, var(--green)); background: var(--theme-soft, var(--green-soft)); }
.capacity-current-state.is-active .capacity-state-badge { color: var(--theme-ink, var(--green)); background: var(--theme-soft, var(--green-soft)); }
.capacity-current-state.is-full .capacity-current-icon { color: var(--red-dark-ink); background: var(--red-soft); }
.capacity-current-state.is-full .capacity-state-badge { color: var(--red-dark-ink); background: var(--red-soft); }

.capacity-settings-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 18px; }
.capacity-create-panel { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--gray-50); }
.capacity-create-panel h3 { font-family: var(--sans); font-weight: 800; font-size: 1rem; margin: 4px 0 6px; }
.capacity-create-panel p { margin: 0 0 16px; color: var(--muted); font-size: .76rem; }
.capacity-slot-form { display: grid; gap: 12px; }
.capacity-time-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.capacity-slot-form label { display: grid; gap: 5px; font-size: .72rem; font-weight: 700; }
.capacity-slot-form input { min-height: 42px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.customer-limit-form { justify-items: start; gap: 0; }
.customer-limit-form input { width: 120px; max-width: 100%; }
.customer-limit-form .settings-card-footer { width: 100%; }

.capacity-enabled-control { padding: 10px 0; }
.capacity-enabled-control strong { font-size: .78rem; }
.capacity-enabled-control small { color: var(--muted); }
.capacity-enabled-compact { grid-template-columns: auto auto; gap: 8px; padding: 0; }

.capacity-slots-panel { display: grid; gap: 10px; align-content: start; }
.capacity-slots-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.capacity-slots-heading h3 { font-family: var(--sans); font-weight: 800; font-size: 1rem; }
.capacity-slots-heading span { color: var(--muted); font-size: .76rem; }
.capacity-empty { padding: 30px; display: grid; justify-items: center; gap: 6px; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--muted); }
.capacity-empty span { font-size: 1.4rem; }
.capacity-slot-card { padding: 16px; display: grid; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--gray-0); }
.capacity-slot-card.is-active { border-color: rgba(var(--theme-rgb), .3); background: var(--theme-soft, var(--green-soft)); }
.capacity-slot-card.is-full { border-color: rgba(209, 80, 46, .28); background: var(--red-soft); }
.capacity-slot-card.is-disabled { opacity: .6; }
.capacity-slot-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.capacity-slot-time strong { display: block; font-size: .92rem; }
.capacity-slot-time span { color: var(--muted); font-size: .68rem; }
.capacity-slot-usage { text-align: right; }
.capacity-slot-usage strong { display: block; font-size: .9rem; }
.capacity-slot-usage span { color: var(--muted); font-size: .66rem; }
.capacity-progress { width: 100%; height: 6px; appearance: none; border: 0; border-radius: var(--radius-full); overflow: hidden; }
.capacity-progress::-webkit-progress-bar { background: var(--gray-150); border-radius: var(--radius-full); }
.capacity-progress::-webkit-progress-value { background: var(--theme-primary, var(--green)); border-radius: var(--radius-full); }
.capacity-progress::-moz-progress-bar { background: var(--theme-primary, var(--green)); }
.capacity-edit-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.capacity-slot-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.capacity-delete-form { justify-self: end; }
.capacity-delete-button { color: var(--red-ink); }

/* ======================================================================
   MANAGER — WhatsApp
   ====================================================================== */

/* The WhatsApp section is the third settings group: its own heading doubles as
   the group bar, so it lines up with groups 01/02 above instead of restating a
   second, differently-styled page title. */
.manager-access-chip-admin { color: var(--theme-ink); background: var(--theme-soft, var(--green-soft)); padding: 5px 10px; border-radius: var(--radius-full); font-size: .64rem; font-weight: 800; text-transform: uppercase; white-space: nowrap; }

.whatsapp-status-card { border-top: 4px solid var(--gray-400); }
.whatsapp-status-connected { border-top-color: var(--theme-primary, var(--green)); }
.whatsapp-status-waiting { border-top-color: var(--amber); }
.whatsapp-status-heading { align-items: center; }
.whatsapp-status-heading h3, .whatsapp-steps h3 { margin: 4px 0 0; font-family: var(--sans); font-weight: 800; font-size: 1.25rem; }
.connection-dot { width: 15px; height: 15px; flex: 0 0 auto; border-radius: 50%; background: var(--gray-400); box-shadow: 0 0 0 6px var(--gray-100); }
.whatsapp-status-connected .connection-dot { background: var(--theme-primary, var(--green)); box-shadow: 0 0 0 6px var(--theme-soft, var(--green-soft)); }
.whatsapp-status-waiting .connection-dot { background: var(--amber); box-shadow: 0 0 0 6px var(--amber-soft); }

.whatsapp-details { margin: 0 0 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.whatsapp-details > div { padding: 16px 0; }
.whatsapp-details > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.whatsapp-details dt { margin-bottom: 6px; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.whatsapp-details dd { margin: 0; font-size: 1rem; font-weight: 800; }
.whatsapp-success-copy { margin: 0; color: var(--theme-ink, var(--green)); line-height: 1.6; }
.whatsapp-connected-help { margin-top: 18px; }
.whatsapp-disconnect-action { margin-top: 16px; padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.whatsapp-disconnect-action p { margin: 5px 0 0; color: var(--muted); font-size: .78rem; }
.whatsapp-disconnect-action form { flex: 0 0 auto; }

.link-code-action { margin-top: 24px; padding: 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 2px solid var(--charcoal); border-radius: var(--radius-lg); background: var(--gray-50); }
.link-code-action h3 { margin: 4px 0 6px; font-family: var(--sans); font-weight: 800; font-size: 1.35rem; }
.link-code-action p { max-width: 600px; margin: 0; color: var(--muted); line-height: 1.6; }
.link-code-action form { flex: 0 0 auto; }
.link-code-loading { border-color: var(--line); background: white; }
.connection-loader { width: 32px; height: 32px; flex: 0 0 auto; border: 4px solid var(--line); border-top-color: var(--theme-primary, var(--red)); border-radius: 50%; animation: connection-spin .8s linear infinite; }
@keyframes connection-spin { to { transform: rotate(360deg); } }
.link-code-panel { margin: 24px 0; padding: 24px; display: grid; justify-items: center; gap: 9px; color: white; background: var(--charcoal); border-radius: var(--radius-lg); text-align: center; }
.link-code-panel > span { color: rgba(255, 255, 255, .68); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.link-code-panel strong { font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: .14em; }
.link-code-panel p { max-width: 680px; margin: 4px auto; color: white; line-height: 1.6; }
.link-code-panel small { color: rgba(255, 255, 255, .68); }
.link-code-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px 0; }
.link-code-regenerate { margin-top: 4px; color: white; }
.whatsapp-steps ol { margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; counter-reset: link-step; }
.whatsapp-steps li { min-width: 0; padding: 20px 22px; border-left: 1px solid var(--line); counter-increment: link-step; }
.whatsapp-steps li:first-child { padding-left: 0; border-left: 0; }
.whatsapp-steps li:last-child { padding-right: 0; }
.whatsapp-steps li::before { content: "0" counter(link-step); display: block; margin-bottom: 16px; color: var(--theme-ink, var(--red)); font-family: var(--sans); font-size: 1.5rem; font-weight: 800; }
.whatsapp-steps strong { display: block; margin-bottom: 8px; }
.whatsapp-steps li span { color: var(--muted); font-size: .84rem; line-height: 1.55; }
.development-otp span { font-size: 1.25rem; font-weight: 800; letter-spacing: .22em; }

/* Nine message templates: paired into two columns of self-contained panels so
   the card reads as a catalogue instead of one very long scroll of textareas. */
.whatsapp-message-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.whatsapp-message-block { min-width: 0; margin: 0; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--gray-50); }
.whatsapp-message-block legend { padding: 0; color: var(--ink); font-family: var(--sans); font-size: .82rem; font-weight: 800; line-height: 1.35; }
.whatsapp-message-block label { display: grid; gap: 5px; margin-top: 12px; }
.whatsapp-message-block > small { display: block; margin-top: 10px; color: var(--muted); font-size: .68rem; line-height: 1.5; }

/* ======================================================================
   MANAGER — availability
   ====================================================================== */

.availability-overview { display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px; }
.availability-status-card, .availability-action-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--gray-0); box-shadow: var(--shadow-soft); }
.availability-status-open { border-color: rgba(var(--theme-rgb), .22); }
.availability-status-closed { border-color: transparent; background: linear-gradient(120deg, var(--red-dark), var(--red)); color: white; }
.availability-status-closed p, .availability-status-closed .availability-source span { color: rgba(255, 255, 255, .82); }
.availability-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.availability-card-heading h2, .availability-card-heading h3 { font-family: var(--sans); font-weight: 800; }
.availability-live-badge { padding: 5px 10px; border-radius: var(--radius-full); color: var(--theme-ink, var(--green)); background: var(--theme-soft, var(--green-soft)); font-size: .64rem; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.availability-status-closed .availability-live-badge { color: var(--red-dark); background: white; }
.availability-live-badge.badge-active { color: var(--red-dark-ink); background: var(--red-soft); }
.availability-source { margin-top: 14px; padding-top: 14px; display: grid; gap: 6px; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; }
.availability-status-closed .availability-source { border-top-color: rgba(255, 255, 255, .2); }
.manager-ordering-close { color: white; background: var(--red-dark); }
.manager-ordering-close:hover { background: #832c17; }
.availability-immediate-form { margin-top: 4px; }

.availability-schedule-section { margin-top: 28px; }
.availability-schedule-grid { padding-top: 16px; display: grid; grid-template-columns: .95fr 1.05fr; gap: 16px; align-items: start; }
.scheduled-closure-card, .availability-schedule-form-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--gray-0); box-shadow: var(--shadow-soft); }
.scheduled-closure-present { border-color: rgba(194, 129, 31, .25); background: linear-gradient(145deg, #fffdf8, var(--amber-soft)); }
.scheduled-range { margin-top: 14px; padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: white; }
.scheduled-range > div { display: grid; gap: 2px; }
.scheduled-range span { color: var(--muted); font-size: .66rem; text-transform: uppercase; }
.scheduled-range strong { font-size: .88rem; }
.scheduled-range-arrow { color: var(--muted); }
.scheduled-message { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--gray-50); }
.scheduled-message span { display: block; margin-bottom: 3px; color: var(--muted); font-size: .68rem; text-transform: uppercase; }
.scheduled-message p { margin: 0; font-size: .84rem; }
.scheduled-delete-button { margin-top: 14px; color: var(--red-ink); }
.scheduled-empty { padding: 30px 10px; display: grid; justify-items: center; gap: 8px; text-align: center; color: var(--muted); }
.scheduled-empty-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 1.2rem; }
.scheduled-empty h3 { font-family: var(--sans); font-weight: 800; color: var(--ink); }
.availability-schedule-form-card h3 { margin: 4px 0 16px; font-family: var(--sans); font-weight: 800; font-size: 1.1rem; }
.availability-date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ======================================================================
   RESPONSIVE
   ====================================================================== */

@media (max-width: 1220px) {
    .metric-grid-pipeline { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1120px) {
    .manager-session-identity { display: none; }
}

/* The index rail needs ~220px plus a comfortable content column; below that it
   flattens into a horizontal chip strip pinned under the header. */
@media (max-width: 1080px) {
    /* minmax(0, …) and the min-width resets matter: a `1fr` track keeps an
       auto minimum, so the chip strip would push the page wider instead of
       scrolling inside its own box.
       Deliberately NOT sticky here: the header wraps to ~133px on a phone, so
       a pinned second bar would both sit at the wrong offset and eat a quarter
       of the screen. The strip stays a jump list at the top of the section. */
    .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .settings-index { min-width: 0; position: static; padding: 10px 12px; border-radius: var(--radius-md); }
    .settings-index-title { display: none; }
    .settings-index-list { min-width: 0; grid-auto-flow: column; grid-auto-columns: max-content; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
    .settings-index-list a { white-space: nowrap; border: 1px solid var(--line); }
    .whatsapp-message-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1050px) {
    .pizza-grid { grid-template-columns: repeat(2, 1fr); }
    .auth-shell { grid-template-columns: 1fr; }
    .auth-aside { min-height: 320px; padding: 48px 24px; }
    .manager-account-workspace { grid-template-columns: 1fr; }
    .availability-overview, .availability-schedule-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .rider-management-grid, .capacity-settings-layout { grid-template-columns: 1fr; }
    .settings-brand-layout, .settings-fields-grid { grid-template-columns: 1fr; }
    .theme-settings-grid { grid-template-columns: 1fr; }
    .manager-order.order-awaiting-decision { grid-template-columns: 1fr; }
    .decision-row { grid-template-columns: 1fr; }
    .decision-controls { justify-content: flex-start; }
}

@media (max-width: 800px) {
    .page-hero { flex-direction: column; align-items: flex-start; padding: 40px 24px; }
    .menu-stamp { display: none; }
    .metric-grid-pipeline { grid-template-columns: repeat(2, 1fr); }
    .metric-focus-row { grid-template-columns: 1fr; }
    .auth-panel { padding: 40px 24px; }
    .manager-page .dashboard-heading { padding: 26px; }
}

@media (max-width: 760px) {
    .delivery-map-controls { grid-template-columns: 1fr; }
    .delivery-radius-field { grid-column: 1; }
    .notification-card-main, .notification-card { flex-direction: column; align-items: stretch; }
    .notification-card-action { align-self: flex-start; }
}

@media (max-width: 640px) {
    .order-completed-time, .pizza-pricing-grid { grid-template-columns: 1fr; }
    .capacity-edit-fields { grid-template-columns: 1fr; }
    .delivery-area-inputs { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .pizza-grid { grid-template-columns: 1fr; }
    .checkout-grid { grid-template-columns: 1fr; }
    .order-summary { position: static; }
    .metric-grid-pipeline, .metric-grid-closed { grid-template-columns: 1fr 1fr; }
    .metric-focus strong { font-size: 2.7rem; }
    .manager-account-form-alert, .manager-name-grid { grid-template-columns: 1fr; }
    .whatsapp-disconnect-action, .link-code-action { align-items: stretch; flex-direction: column; }
    .whatsapp-disconnect-action .button, .link-code-action .button, .link-code-actions .button { width: 100%; }
    .link-code-actions { flex-direction: column; }
    .whatsapp-details, .whatsapp-steps ol { grid-template-columns: 1fr; }
    .whatsapp-details > div + div { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
    .whatsapp-steps li { padding: 20px 0; border-top: 1px solid var(--line); border-left: 0; }
    .whatsapp-steps li:first-child { border-top: 0; }
    .availability-date-grid, .capacity-time-fields { grid-template-columns: 1fr; }
    .capacity-slot-summary { flex-direction: column; align-items: flex-start; gap: 10px; }
    .settings-save-bar { flex-direction: column; align-items: stretch; text-align: center; }
    .settings-group-bar { grid-template-columns: auto minmax(0, 1fr); }
    .settings-group-bar > span:last-child:not(.settings-group-index) { grid-column: 2; }
    .settings-card-footer { flex-direction: column; align-items: stretch; }
    .settings-card-footer .button, .settings-card-footer > form, .settings-card-footer > form .button { width: 100%; }
    /* Card padding + panel padding stack up; trim the inner panels so the
       fields keep a usable width on a narrow phone. */
    .settings-copy-section { padding: 14px; }
    .whatsapp-message-block { padding: 14px; }
}

@media (max-width: 380px) {
    .dashboard-heading, .menu-toolbar, .settings-card, .capacity-settings-card { padding: 18px; }
}


/* ======================================================================
   MOBILE — readability, touch targets and safe input behaviour
   ----------------------------------------------------------------------
   The desktop layout leans on very small micro-labels (.5rem–.74rem) that
   read fine at desktop density but land at 8–11px on a phone. This block
   raises every one of them to a readable floor, grows interactive controls
   to the ~44px recommended touch size, and pins form controls to 16px so
   iOS Safari stops auto-zooming the page when a field takes focus.
   Kept last in the file so it wins over both app.css and the rules above.
   ====================================================================== */
@media (max-width: 900px) {
    .brand-copy small,
    .cart-custom-badge,
    .custom-pizza-badge,
    .decision-intro small,
    .delivery-queue-next,
    .fulfillment-availability-badge,
    .manager-column-label, .manager-order-items::before, .manager-order-total small,
    .manager-current-chip, .manager-admin-chip, .manager-access-chip, .manager-profile-chip,
    .manager-item-info strong,
    .manager-order-id .queue-position,
    .pizza-price small {
        font-size: 0.72rem;
    }

    .accept-order-form label,
    .allergen-note,
    .auth-header-context small,
    .availability-live-badge,
    .capacity-slot-usage span,
    .capacity-state-badge,
    .cart-summary strong,
    .decision-intro > span:last-child > span,
    .delivery-address-heading small,
    .delivery-address-help,
    .delivery-map-location small,
    .delivery-queue-list small, .delivery-queue-list time,
    .fulfillment-option-copy small,
    .history-lock,
    .management-head,
    .manager-access-chip-admin,
    .manager-delivery-failure-reason strong,
    .manager-session-identity small,
    .notification-status,
    .order-ready-estimate small,
    .pizza-info-button,
    .pizza-number,
    .pizza-price-mode,
    .quantity-form label,
    .quantity-submit,
    .rider-info-stats span,
    .rider-info-status,
    .scheduled-range span,
    .status-pill,
    .tracking-details dt {
        font-size: 0.76rem;
    }

    .accept-order-form select,
    .auth-form-badge,
    .auth-kicker,
    .availability,
    .builder-total span,
    .cancel-order-button,
    .capacity-current-state > div > span:first-child,
    .capacity-current-state small,
    .capacity-policy-note,
    .capacity-slot-form label,
    .capacity-slot-time span,
    .decision-button,
    .delivery-area-policy-note,
    .delivery-map-guidance small,
    .delivery-queue-card > div > p,
    .delivery-radius-field span:first-child,
    .demo-box,
    .eyebrow,
    .ingredient-copy small,
    .link-code-panel > span,
    .manager-account-person small,
    .manager-admin-toggle small,
    .manager-completed-at,
    .manager-delivery-failed-at,
    .manager-item-info span,
    .manager-module-list span,
    .manager-order-id time, .manager-order-customer span,
    .manager-order-items small,
    .manager-ready-estimate,
    .menu-service-status,
    .metric-breakdown span,
    .metric-card > span,
    .metric-card small,
    .notification-card time,
    .order-item-copy small,
    .order-total span,
    .ordering-control-form label,
    .pizza-image-controls > small,
    .pizza-image-placeholder,
    .pizza-image-remove label,
    .pizza-price-reference small,
    .pizza-price-reference span,
    .pizza-pricing-heading small,
    .reject-reason-form label,
    .reject-reason-form textarea,
    .remove-button,
    .rider-list small,
    .rider-position-empty,
    .scheduled-message span,
    .settings-field span,
    .settings-file-button,
    .settings-live-chip,
    .settings-logo-panel p,
    .settings-remove-logo,
    .stack-form label > span, .quantity-form label, .rider-create-card label,
    .summary-note,
    .table-link,
    .theme-color-field > span:first-child,
    .theme-preset,
    .tracking-refresh,
    .whatsapp-details dt,
    .whatsapp-message-block > small {
        font-size: 0.8rem;
    }

    .cart-line-details,
    .delivery-radius-control > span,
    .field-error,
    .ingredient-option > strong:last-child,
    .management-row small,
    .manager-security-note,
    .metric-group-head h3,
    .metric-group-head span,
    .notification-open-button,
    .order-card time,
    .order-completed-detail,
    .order-fulfillment,
    .section-title-row > div > p,
    .settings-save-bar > div > span,
    .settings-group-bar p,
    .settings-index-list a,
    .settings-footer-hint,
    .settings-card-note,
    .theme-option-copy p {
        font-size: 0.82rem;
    }

    /* Text that lives inside a fixed-size badge: grow the shape with it */
    .cart-count, .notification-count { min-width: 20px; height: 20px; font-size: .72rem; }
    .brand-mark { font-size: .74rem; }
    .flash > span:first-child { width: 22px; height: 22px; flex-basis: 22px; font-size: .74rem; }
    .auth-benefits li span { width: 22px; height: 22px; font-size: .72rem; }
    .delivery-address-field > span b { width: 19px; height: 19px; font-size: .64rem; }
    .pizza-info-button > span { width: 17px; height: 17px; font-size: .66rem; }

    /* Touch targets: ~44px is the Apple/Google minimum for reliable tapping */
    .button { min-height: 46px; }
    .button-small { min-height: 42px; }
    .decision-button,
    .decision-controls .decision-button { height: auto; min-height: 44px; padding: 10px 14px; }
    .table-link { min-height: 42px; padding: 0 13px; }
    .pizza-info-button { min-height: 38px; padding: 0 11px; }
    .nav-icon-button { width: 44px; height: 44px; }
    .nav-item { min-height: 44px; }
    .theme-preset { height: 40px; padding: 0 14px; }
    .quantity-stepper-button { width: 44px; height: 44px; }
    .quantity-form input { height: 44px; width: 52px; }
    .quantity-submit, .remove-button, .text-button,
    .settings-remove-logo, .cancel-order-button { min-height: 40px; }
    .notification-open-button { min-height: 42px; }
    .settings-file-button { height: 42px; }
    .accept-order-form select { height: 46px; }
    .manager-admin-toggle input[type="checkbox"],
    .allergen-options input[type="checkbox"],
    .pizza-image-remove input { width: 20px; height: 20px; flex-basis: 20px; }
    .allergen-options > div { min-height: 44px; }

    /* iOS Safari zooms the viewport when a focused control is under 16px */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea { font-size: 16px; }

    /* Dense two-up grids get too narrow on the smallest phones */
}

@media (max-width: 400px) {
    /* Below ~400px two metric columns leave no room for the labels */
    .metric-grid-pipeline, .metric-focus-row { grid-template-columns: 1fr; }
    .metric-focus { min-height: 0; }
    .metric-card { min-height: 0; padding: 16px; }
    .metric-card strong { font-size: 2.1rem; }
    .metric-focus strong { font-size: 2.4rem; }
    .decision-controls { flex-direction: column; align-items: stretch; }
    .accept-order-form { flex-direction: column; align-items: stretch; }
    .accept-order-form label, .accept-order-form select { min-width: 0; width: 100%; }
    .table-actions { width: 100%; }
    .table-actions .table-link, .table-actions form { flex: 1 1 auto; }
    .table-actions .table-link { justify-content: center; }
}

@media (max-width: 720px) {
    /* Grid and flex items default to min-width:auto, so a track refuses to
       shrink below its content and pushes the card past the viewport edge.
       Releasing that minimum is what lets the dense manager rows reflow. */
    .manager-order > *,
    .management-row > *,
    .order-card-body > *,
    .rider-list li > *,
    .delivery-queue-list li > *,
    .capacity-slot-card > *,
    .manager-account-row > *,
    .cart-line > *,
    .settings-logo-panel > * { min-width: 0; }

    /* Long unbroken tokens (phone numbers, emails, addresses) must wrap
       rather than define the minimum width of their column. */
    .manager-customer-contact,
    .manager-order-customer span,
    .manager-account-person small,
    .rider-list small,
    .delivery-queue-list small,
    .cart-line-details,
    .order-fulfillment span { overflow-wrap: anywhere; }
}

/* ====================================================================== */
/* MANAGER MANUAL ORDER ENTRY                                              */
/* ====================================================================== */

.manual-order-form { display: grid; gap: 18px; }
.manual-order-alert { margin: 0; }
.manual-order-alert p + p { margin-top: 5px; }
.manual-order-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 360px);
    gap: 22px;
    align-items: start;
}
.manual-order-workspace { display: grid; gap: 22px; min-width: 0; }
.manual-order-panel,
.manual-order-summary {
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--gray-0);
    box-shadow: var(--shadow-soft);
}
.manual-order-panel { padding: 24px; }
.manual-panel-heading,
.manual-summary-heading {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 22px;
}
.manual-panel-heading h2,
.manual-summary-heading h2 {
    margin: 0;
    color: var(--ink);
    font: 800 1.1rem/1.2 var(--sans);
    letter-spacing: -.01em;
}
.manual-panel-heading p,
.manual-summary-heading p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.45;
}
.manual-step {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: white;
    background: var(--theme-primary, var(--green));
    font-size: .72rem;
    font-weight: 800;
}
.manual-customer-fields {
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr);
    margin-bottom: 22px;
}
.manual-choice-group {
    margin: 0;
    padding: 0;
    border: 0;
}
.manual-choice-group > legend {
    margin-bottom: 9px;
    color: var(--gray-700);
    font-size: .72rem;
    font-weight: 700;
}
.manual-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.manual-choice-card {
    min-height: 74px;
    padding: 13px 14px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--gray-50);
    cursor: pointer;
    transition: border-color var(--duration-base) ease, background var(--duration-base) ease, box-shadow var(--duration-base) ease;
}
.manual-choice-card:hover { border-color: rgba(var(--theme-rgb), .42); }
.manual-choice-card:has(input:checked) {
    border-color: var(--theme-primary, var(--green));
    background: var(--theme-soft, var(--green-soft));
    box-shadow: inset 0 0 0 1px rgba(var(--theme-rgb), .18);
}
.manual-choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.manual-choice-card > span:nth-of-type(2) { display: grid; gap: 3px; min-width: 0; }
.manual-choice-card strong { color: var(--ink); font-size: .78rem; }
.manual-choice-card small { color: var(--muted); font-size: .66rem; }
.manual-choice-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    color: var(--theme-ink, var(--green));
    background: var(--gray-0);
    font-size: .9rem;
    font-weight: 800;
}
.manual-choice-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.manual-choice-card > i {
    width: 17px;
    height: 17px;
    border: 1px solid var(--gray-300);
    border-radius: 50%;
    background: var(--gray-0);
}
.manual-choice-card:has(input:checked) > i {
    border: 5px solid var(--theme-primary, var(--green));
}
.manual-inline-notice,
.manual-single-payment {
    margin: 10px 0 0;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--muted);
    background: var(--gray-50);
    font-size: .72rem;
}
.manual-delivery-fields {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid rgba(var(--theme-rgb), .18);
    border-radius: var(--radius-lg);
    background: var(--surface-tint);
}
.manual-delivery-fields[hidden] { display: none; }
.manual-delivery-fields .delivery-address-heading { margin-bottom: 15px; }
.manual-delivery-fields .delivery-address-grid { margin-bottom: 17px; }
.manual-payment-group { padding-top: 17px; border-top: 1px solid var(--line); }
.manual-payment-card { min-height: 66px; }
.manual-single-payment { display: flex; justify-content: space-between; gap: 12px; }
.manual-single-payment strong { color: var(--ink); }
.manual-timing-notes {
    grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.manual-catalog-heading { align-items: center; }
.manual-catalog-heading > div { min-width: 0; }
.manual-product-search {
    position: relative;
    width: min(250px, 38%);
    margin-left: auto;
}
.manual-product-search svg {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 17px;
    height: 17px;
    translate: 0 -50%;
    fill: none;
    stroke: var(--muted);
    stroke-width: 1.7;
    stroke-linecap: round;
}
.manual-product-search input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px 0 38px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-full);
    outline: none;
    color: var(--ink);
    background: var(--gray-50);
}
.manual-product-search input:focus {
    border-color: rgba(var(--theme-rgb), .55);
    box-shadow: 0 0 0 4px rgba(var(--theme-rgb), .1);
}
.manual-items-error { margin: -9px 0 17px; }
.manual-catalog { display: grid; gap: 28px; }
.manual-category { min-width: 0; }
.manual-category-heading {
    margin-bottom: 12px;
    padding-bottom: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid var(--line);
}
.manual-category-heading h3 { margin: 0; color: var(--ink); font-size: .9rem; }
.manual-category-heading p { margin: 3px 0 0; color: var(--muted); font-size: .68rem; }
.manual-category-heading > span { color: var(--muted); font-size: .66rem; white-space: nowrap; }
.manual-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.manual-product-card {
    min-width: 0;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--gray-50);
    transition: border-color var(--duration-base) ease, box-shadow var(--duration-base) ease, translate var(--duration-base) ease;
}
.manual-product-card:hover { border-color: rgba(var(--theme-rgb), .3); box-shadow: var(--shadow-sm); translate: 0 -1px; }
.manual-custom-product {
    border-color: rgba(var(--theme-rgb), .27);
    background: linear-gradient(145deg, var(--theme-soft, var(--green-soft)), var(--gray-0));
}
.manual-product-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.manual-product-topline > span {
    color: var(--muted);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.manual-product-topline > .manual-custom-mark { color: var(--theme-ink, var(--green)); }
.manual-product-topline > strong { color: var(--ink); font-size: .78rem; white-space: nowrap; }
.manual-product-copy { min-height: 50px; }
.manual-product-copy h4 { margin: 0 0 5px; color: var(--ink); font-size: .86rem; }
.manual-product-copy p {
    margin: 0;
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.manual-base-selector {
    display: grid;
    gap: 6px;
}
.manual-base-selector > span {
    color: var(--muted);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.manual-base-selector select {
    width: 100%;
    min-height: 38px;
    padding: 8px 34px 8px 10px;
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xs);
    background-color: var(--gray-0);
    font: inherit;
    font-size: .68rem;
    font-weight: 700;
}
.manual-base-selector select:focus {
    border-color: rgba(var(--theme-rgb), .55);
    box-shadow: 0 0 0 3px rgba(var(--theme-rgb), .1);
    outline: none;
}
.manual-product-options { border-top: 1px solid var(--line); }
.manual-product-options summary {
    padding: 10px 0 0;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--theme-ink, var(--green));
    cursor: pointer;
    font-size: .68rem;
    font-weight: 800;
    list-style: none;
}
.manual-product-options summary::-webkit-details-marker { display: none; }
.manual-product-options summary span { color: var(--muted); font-size: .6rem; font-weight: 600; }
.manual-option-list { max-height: 190px; margin-top: 10px; display: grid; gap: 6px; overflow: auto; }
.manual-option-list label {
    padding: 8px 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    background: var(--gray-0);
    cursor: pointer;
}
.manual-option-list input { margin: 0; accent-color: var(--theme-primary, var(--green)); }
.manual-option-list label > span { min-width: 0; display: flex; justify-content: space-between; gap: 8px; flex: 1; }
.manual-option-list strong { color: var(--ink); font-size: .66rem; }
.manual-option-list small { color: var(--muted); font-size: .6rem; white-space: nowrap; }
.manual-product-error { margin: 0; }
.manual-add-product { width: 100%; min-height: 37px; margin-top: auto; font-size: .7rem; }
.manual-search-empty { padding: 35px; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); font-size: .78rem; }

.manual-order-summary {
    position: sticky;
    top: 88px;
    padding: 21px;
}
.manual-summary-heading { margin-bottom: 17px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.manual-cart-empty {
    padding: 35px 15px;
    display: grid;
    justify-items: center;
    text-align: center;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--gray-50);
}
.manual-cart-empty > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin-bottom: 11px;
    border-radius: 50%;
    color: var(--theme-ink, var(--green));
    background: var(--theme-soft, var(--green-soft));
    font-size: 1rem;
}
.manual-cart-empty strong { font-size: .78rem; }
.manual-cart-empty p { max-width: 220px; margin: 5px 0 0; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.manual-cart-lines { display: grid; gap: 8px; }
.manual-cart-line {
    padding: 11px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--gray-50);
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.manual-cart-line.is-limit { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.manual-cart-line-copy { display: grid; gap: 3px; min-width: 0; }
.manual-cart-line-copy strong { overflow: hidden; color: var(--ink); font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.manual-cart-line-copy small { color: var(--muted); font-size: .62rem; line-height: 1.4; }
.manual-cart-remove {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
}
.manual-cart-remove:hover { color: var(--red-ink); background: var(--red-soft); }
.manual-cart-quantity {
    width: fit-content;
    display: flex;
    align-items: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-full);
    background: var(--gray-0);
    overflow: hidden;
}
.manual-cart-quantity button {
    width: 29px;
    height: 29px;
    border: 0;
    color: var(--theme-ink, var(--green));
    background: transparent;
    cursor: pointer;
    font-weight: 800;
}
.manual-cart-quantity button:hover { background: var(--theme-soft, var(--green-soft)); }
.manual-cart-quantity output { min-width: 23px; text-align: center; color: var(--ink); font-size: .68rem; font-weight: 800; }
.manual-cart-line-total { align-self: center; color: var(--ink); font-size: .75rem; }
.manual-summary-total {
    margin-top: 16px;
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.manual-summary-total span { color: var(--muted); font-size: .7rem; }
.manual-summary-total strong { color: var(--ink); font-size: 1.25rem; }
.manual-summary-note { margin: 13px 0; color: var(--muted); font-size: .66rem; line-height: 1.5; }
.manual-submit-order { min-height: 46px; }
.manual-submit-order.is-loading { opacity: .72; cursor: wait; }

.order-origin-badge,
.order-requested-time {
    width: fit-content;
    padding: 3px 7px;
    border-radius: var(--radius-full);
    font-size: .57rem !important;
    font-weight: 800;
}
.order-origin-badge {
    color: var(--violet-ink) !important;
    border: 1px solid color-mix(in srgb, var(--violet) 28%, transparent);
    background: var(--violet-soft);
}
.order-requested-time {
    color: var(--theme-ink, var(--green)) !important;
    background: var(--theme-soft, var(--green-soft));
}

@media (max-width: 1080px) {
    .manual-order-layout { grid-template-columns: 1fr; }
    .manual-order-summary { position: static; }
    .manual-cart-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .manual-order-panel, .manual-order-summary { padding: 17px; border-radius: var(--radius-lg); }
    .manual-customer-fields, .manual-timing-notes, .manual-choice-grid, .manual-product-grid { grid-template-columns: 1fr; }
    .manual-catalog-heading { align-items: flex-start; flex-wrap: wrap; }
    .manual-product-search { width: 100%; margin-left: 43px; }
    .manual-customer-fields { margin-bottom: 18px; }
    .manual-delivery-fields { padding: 14px; }
    .manual-single-payment { flex-direction: column; }
    .manual-cart-lines { grid-template-columns: 1fr; }
    .manual-order-summary { order: 2; }
}

@media (max-width: 720px) {
    /* .history-lock carries !important in app.css, so the readability floor
       above cannot reach it without matching that weight. */
    .history-lock { font-size: .76rem !important; }
}

@media (max-width: 720px) {
    /* Card headings are a two-up row (title + status chip) that cannot fit
       side by side on a phone: stack them instead of forcing the card wide. */
    .settings-card-heading,
    .availability-card-heading,
    .whatsapp-status-heading,
    .pizza-pricing-heading,
    .capacity-slots-heading,
    .rider-info-heading,
    .manager-whatsapp-heading { flex-direction: column; align-items: flex-start; gap: 10px; }

    /* The Leaflet canvas and the settings cards must be allowed to shrink */
    .settings-layout > *,
    .settings-content > *,
    .settings-group > *,
    .settings-group-bar > *,
    .whatsapp-message-grid > *,
    .settings-form > *,
    .settings-card > *,
    .delivery-map-card,
    .delivery-map-card > *,
    .delivery-area-map,
    .theme-settings-grid,
    .theme-option-card,
    .theme-option-card > *,
    .settings-copy-section,
    .settings-copy-section > *,
    .capacity-settings-layout > * { min-width: 0; }

    /* Radius controls were only 26px/16px tall — unusable with a thumb */
    .delivery-radius-control { min-height: 46px; }
    .delivery-radius-slider-field input[type="range"] { min-height: 34px; }
}

@media (max-width: 720px) {
    /* The borderless number input inside the radius control keeps its 26px
       intrinsic height unless told to fill the taller wrapper. */
    .delivery-radius-control input { min-height: 44px; }
}

@media (max-width: 720px) {
    /* Rider info panel: the phone row is a label+button flex pair whose
       combined minimum width was forcing the whole card past the viewport. */
    .rider-management-grid > *,
    .rider-list-card > *,
    .rider-list li,
    .rider-info-panel,
    .rider-info-panel > * { min-width: 0; }

    .rider-phone-form { flex-direction: column; align-items: stretch; }
    .rider-phone-form label { width: 100%; }
    .rider-phone-form input { min-height: 44px; }
    .rider-phone-form .button { width: 100%; }

    /* app.css already collapses this card to one column on a phone, but the
       two-column rule here loads later and won the cascade, leaving 117px
       fields on a 375px screen. Restate the collapse on this side. */
    .rider-create-card { grid-template-columns: 1fr; }
    .rider-create-card > div, .rider-create-card > button { grid-column: auto; }
    .rider-create-submit { justify-self: stretch; }
    .rider-list li > .rider-account-actions { width: 100%; margin-left: 0; }
    .rider-account-actions .button,
    .rider-account-actions .rider-delete-form { flex: 1 1 auto; }
    .rider-account-actions .rider-delete-button { width: 100%; }
}

@media (max-width: 720px) {
    /* Two-up rows (copy on the left, action on the right) have no room for a
       side-by-side layout on a phone: stack and let the action span. */
    .rider-service-control,
    .delivery-map-toolbar,
    .capacity-slot-actions,
    .order-card-actions,
    .whatsapp-disconnect-action,
    .link-code-action { align-items: stretch; flex-direction: column; gap: 14px; }

    .rider-service-control form,
    .rider-service-control form .button,
    .delivery-map-toolbar .button,
    .capacity-slot-actions .button,
    .payment-methods-form .button,
    .order-card-actions form,
    .order-card-actions .cancel-order-button { width: 100%; }

    .payment-methods-form { justify-items: stretch; }
}

@media (max-width: 720px) {
    /* These grids are declared in this file, so the collapse rules living in
       app.css media queries never win. Re-stated here to actually apply. */
    .delivery-queue-card { grid-template-columns: 1fr; gap: 16px; }
    .order-card-body { grid-template-columns: 1fr; gap: 14px; }

    /* Column separators become horizontal rules once the row is stacked */
    .order-fulfillment,
    .order-total { padding-left: 0; border-left: 0; }
    .order-fulfillment { padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .order-total { align-items: flex-start; padding-top: 12px; }
    .tracking-details { grid-template-columns: 1fr; }
    .tracking-details > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 720px) {
    /* Account rows put the actions on the right via margin-left:auto; on a
       phone they have to wrap onto their own line instead. */
    .manager-account-row { flex-wrap: wrap; }
    .manager-account-actions { width: 100%; margin-left: 0; }
    .manager-account-actions .button,
    .manager-account-actions form { flex: 1 1 auto; }
    .manager-account-actions form .button { width: 100%; }

    /* <small> nested in a label shrinks again from the parent's own size */
    .stack-form label small,
    .settings-field small,
    .manager-admin-toggle small { font-size: .92em; }
}

@media (max-width: 720px) {
    /* Layout collapses that belong to phones only — tablets keep the
       two-up arrangement, they just inherit the readability floor. */
    .metric-grid-closed { grid-template-columns: 1fr; }
    .settings-fields-grid, .manager-name-grid, .capacity-edit-fields { grid-template-columns: 1fr; }
    .delivery-address-grid { grid-template-columns: 1fr; }
    .heading-actions, .dashboard-heading-actions { width: 100%; }
    .heading-actions .button, .dashboard-heading-actions .button { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 720px) {
    /* Order line: name + "Info" button is a nowrap flex pair. On very narrow
       phones (Fold, 280px) they cannot share one line, so let them wrap and
       allow the name to shrink instead of overflowing the card. */
    .manager-order-items li,
    .manager-order-item-row { min-width: 0; }
    .manager-order-item-row { flex-wrap: wrap; row-gap: 6px; }
    .manager-order-item-name { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 900px) {
    /* A bare <small> inherits its parent size and then shrinks again by the
       UA's 0.83em, dropping back under the readable floor. Clamp it: rules
       that set an explicit size on a specific .class small still win. */
    small { font-size: max(.78rem, .92em); }

    /* Carries !important in app.css, so it needs matching weight here too. */
    .history-lock { font-size: .76rem !important; }
}

/* ======================================================================
   MOBILE — order cards become a single full-width column
   ----------------------------------------------------------------------
   On a phone the desktop grid left an orphan 50px column holding only the
   order number, with every other block indented into a narrow second
   column. Everything is stacked edge to edge instead, and the id turns
   into a header row (number · time · queue chip).
   ====================================================================== */
@media (max-width: 720px) {
    .manager-order,
    .manager-order.order-awaiting-decision {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 12px;
        padding: 16px;
    }

    .manager-order > .manager-order-id,
    .manager-order > .manager-order-customer,
    .manager-order > .manager-order-items,
    .manager-order > .manager-order-total,
    .manager-order > .manager-order-actions,
    .manager-order > .status-pill {
        grid-column: 1 / -1;
        justify-self: stretch;
        text-align: left;
    }

    /* Order number, timestamp and queue chip read as one header line */
    .manager-order-id {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--line);
    }
    .manager-order-id .queue-position { margin-left: auto; }

    /* Total becomes a receipt-style line: label left, amount right */
    .manager-order-total {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding-top: 10px;
        border-top: 1px solid var(--line);
    }
    .manager-order-total strong { font-size: 1.05rem; }

    /* Actions span the full width and the buttons fill it */
    .manager-order-actions { align-items: stretch; }
    .order-awaiting-decision .manager-order-actions {
        grid-template-columns: 1fr;
        padding-top: 12px;
    }
    .manager-order-statusbar { justify-content: flex-start; }
    .manager-order-actions > form,
    .manager-order-actions > form .decision-button { width: 100%; }
    .decision-controls { flex-direction: column; align-items: stretch; }
    .decision-controls .accept-order-form,
    .decision-controls .decision-button { width: 100%; }
    .accept-order-form { flex-direction: column; align-items: stretch; }
    .accept-order-form label,
    .accept-order-form select { min-width: 0; width: 100%; }
    .reject-reason-form > div { flex-direction: column; }
    .reject-reason-form > div .decision-button { width: 100%; }
}

/* ======================================================================
   MOBILE — customer order list aligned to the page rhythm
   ----------------------------------------------------------------------
   The order card used 20px inner padding and 14px item text while the rest
   of the page (heading, sections, manager cards) sits on 18px padding and a
   ~13px scale, so the list read wider and its text started 3px further in.
   ====================================================================== */
@media (max-width: 720px) {
    .order-card-head,
    .order-card-body,
    .order-notes,
    .order-rejection-reason,
    .order-card-actions { padding-left: 18px; padding-right: 18px; }

    .order-ready-estimate,
    .order-completed-time,
    .order-delivery-failed { margin-left: 18px; margin-right: 18px; }

    /* Match the body scale used elsewhere instead of running a size larger */
    .order-items li { font-size: .84rem; }
    .order-card-head { padding-top: 16px; padding-bottom: 16px; }
    .order-card-body { padding-top: 16px; padding-bottom: 16px; }

    /* Stacked rows: the label/value pairs read as receipt lines */
    .order-total {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
    }
}

@media (max-width: 720px) {
    /* Menu toolbar: status text and the two action links cannot share a row
       on a phone once the customer is signed in (builder + cart buttons). */
    .menu-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px;
    }
    .menu-toolbar-actions { width: 100%; }
    .menu-toolbar-actions .menu-tool-link { flex: 1 1 0; justify-content: center; min-width: 0; }
}

/* Credenziali appena create o reimpostate: si mostrano una volta sola. */
.rider-credentials {
    margin: 0 0 20px;
    padding: 18px 20px;
    border: 1px solid rgba(var(--theme-rgb, 47, 118, 82), .35);
    border-radius: var(--radius-lg);
    background: var(--theme-soft, var(--green-soft));
}
.rider-credentials h2 { margin: 2px 0 6px; font-size: 1.15rem; }
.rider-credentials p { margin: 0 0 12px; color: var(--muted); font-size: .86rem; }
.rider-credentials dl { margin: 0; display: grid; gap: 8px; }
.rider-credentials dl div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.rider-credentials dt { min-width: 76px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.rider-credentials dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.rider-credentials code { padding: 3px 9px; border-radius: var(--radius-xs); background: var(--paper); font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: .04em; user-select: all; }

/* ---------------- Foto della pagina clienti (copertina e categorie) ---------------- */
.settings-hero-photo, .category-photo-card {
    margin-bottom: 18px; padding: 16px;
    display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 18px; align-items: center;
    border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-tint, var(--gray-50));
}
.settings-hero-preview, .category-photo-preview {
    aspect-ratio: 16 / 10; overflow: hidden;
    display: grid; place-items: center;
    border: 1px dashed var(--line-strong); border-radius: var(--radius-md);
    background: var(--gray-0); color: var(--muted); font-size: .78rem; font-weight: 700; text-align: center; padding: 10px;
}
.settings-hero-preview.has-image, .category-photo-preview.has-image { padding: 0; border-style: solid; }
.settings-hero-preview img, .category-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.category-photo-preview span { font-size: 2.4rem; font-weight: 800; color: var(--gray-400); }
.settings-hero-copy, .category-photo-copy { display: grid; gap: 8px; min-width: 0; }
.settings-hero-copy p, .category-photo-copy p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.settings-hero-copy small { color: var(--muted); font-size: .74rem; }
.settings-hero-copy small a { color: var(--theme-ink, var(--green)); font-weight: 700; text-decoration: underline; }
.settings-hero-actions, .category-photo-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.category-photo-copy form { margin: 0; }
.category-photo-card { margin-bottom: 16px; }
.category-photo-note { margin: 0 0 14px; color: var(--muted); font-size: .82rem; }
@media (max-width: 640px) {
    .settings-hero-photo, .category-photo-card { grid-template-columns: 1fr; }
}

/* ---------------- Orari di apertura (Configurazioni) ---------------- */
.oh-preview {
    margin: 0 0 18px; padding: 14px 16px;
    display: grid; gap: 3px;
    border: 1px solid var(--line); border-radius: var(--radius-md);
    background: var(--gray-50);
}
.oh-preview span { color: var(--muted); font-size: .78rem; font-weight: 600; }
.oh-preview strong { font-size: 1.02rem; }
.oh-preview small { color: var(--muted); font-size: .75rem; }
.oh-form { display: grid; gap: 0; }
.oh-row {
    min-height: 64px; padding: 10px 0;
    display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); align-items: center; gap: 8px 18px;
    border-bottom: 1px solid var(--line);
}
.oh-row:first-child { border-top: 1px solid var(--line); }
.oh-day strong { font-size: .95rem; }
.oh-day-state { display: none; color: var(--muted); font-size: .75rem; }
.oh-times { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.oh-shift { display: inline-flex; align-items: center; gap: 8px; }
.oh-shift[hidden], .oh-link[hidden] { display: none; }
.oh-shift > span { color: var(--muted); }
.oh-shift input[type="time"] {
    width: 116px; min-height: 42px; padding: 0 10px;
    border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius-md);
    background: var(--paper, #fff); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums;
}
.oh-link {
    min-height: 36px; padding: 0 6px;
    border: 0; background: none; cursor: pointer;
    color: var(--theme-ink, var(--green)); font: 700 .82rem var(--sans);
}
.oh-link:hover { text-decoration: underline; }
/* Giorno spento: al posto degli orari, il messaggio per i clienti */
.oh-message { display: none; min-width: 0; }
.oh-message input {
    width: 100%; min-height: 42px; padding: 0 12px;
    border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius-md);
    background: var(--paper, #fff); color: var(--ink); font: inherit; font-size: .88rem;
}
.oh-row:has(.oh-day input:not(:checked)) .oh-message { display: block; }
/* Giorno chiuso: niente orari, solo la scritta */
.oh-row:has(.oh-day input:not(:checked)) .oh-times { display: none; }
.oh-row:has(.oh-day input:not(:checked)) .oh-day-state { display: block; }
.oh-row:has(.oh-day input:not(:checked)) .oh-day strong { color: var(--muted); }
.oh-actions { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.oh-actions-end { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.oh-clear { color: var(--muted); }
.oh-computed { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.oh-computed a { font-size: .82rem; font-weight: 700; }
@media (max-width: 640px) {
    .oh-row { grid-template-columns: 1fr; }
    .oh-shift input[type="time"] { width: 104px; }
}

/* ---------------- Dashboard: rimando alla pagina Ordini ---------------- */
a.metric-card.metric-link { text-decoration: none; transition: border-color var(--duration-base) ease, transform var(--duration-fast) ease; }
a.metric-card.metric-link:hover { border-color: var(--theme-primary, var(--green)); }
a.metric-card.metric-link:active { transform: scale(.99); }
.orders-shortcut {
    margin-top: 22px; padding: 20px 22px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--paper);
}
.orders-shortcut h2 { margin: 0 0 4px; font-size: 1.15rem; }
.orders-shortcut p { margin: 0; color: var(--muted); font-size: .9rem; }

/* Piè di pagina del gestionale: il menu come lo vedono i clienti, in una nuova scheda */
.footer-menu-link {
    min-height: 40px; padding: 0 16px;
    display: inline-flex; align-items: center;
    border-radius: var(--radius-full);
    color: #fff; background: var(--theme-primary, var(--green));
    font-weight: 700; text-decoration: none;
}
.footer-menu-link:hover { color: #fff; background: var(--theme-dark, var(--green)); }

/* Orari di apertura: messaggio fuori orario, sopra ai giorni */
.oh-outside { margin-bottom: 16px; display: grid; gap: 4px; }
.oh-outside-title { font-size: .9rem; font-weight: 700; }
.oh-outside small { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.oh-outside input {
    width: 100%; min-height: 44px; margin-top: 4px; padding: 0 12px;
    border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius-md);
    background: var(--paper, #fff); color: var(--ink); font: inherit; font-size: .9rem;
}