/*
 * Refinement layer, loaded after app.css / professional.css / theme.css.
 * Purely additive: every rule here either (a) adds behaviour nothing else
 * defines (motion, focus, scrollbars), or (b) is scoped under
 * :root[data-theme="dark"], which only applies once a visitor opts into dark
 * mode via the toggle in the header. Nothing in app.css or professional.css
 * is overridden in light mode.
 *
 * Because app.css/professional.css consistently source colors from tokens
 * (--gray-0/--gray-50/--line/--muted/etc.) rather than hardcoded hex values,
 * most components adapt to dark mode automatically once those root tokens
 * are redefined below. Only literal-color exceptions need direct patches.
 */

.button:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Dark mode toggle button icon swap (uses .nav-icon-button styling) */
.theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-icon-dark { display: inline-block; }

/* ---------------------------------------------------------------------- */
/* Dark mode palette                                                      */
/* ---------------------------------------------------------------------- */

:root[data-theme="dark"] {
    color-scheme: dark;
    --gray-0: #1c2320;
    --gray-50: #202723;
    --gray-100: #262e2a;
    --gray-150: #2c3531;
    --gray-200: #333c37;
    --gray-300: #445049;
    --gray-400: #6b766e;
    --gray-500: #8b968e;
    --gray-600: #a9b3ac;
    --gray-700: #c4ccc6;
    --gray-800: #dfe4e0;
    --gray-900: #f2f4f2;
    --cream: #14181a;
    --cream-deep: #191f1c;
    --paper: #1c2320;
    --ink: #eef1ee;
    --muted: #9aa49c;
    --line: rgba(255, 255, 255, .1);
    --line-strong: rgba(255, 255, 255, .18);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, .35);
    --shadow-soft: 0 10px 26px rgba(0, 0, 0, .38);
    --shadow: 0 18px 44px rgba(0, 0, 0, .45);
    --shadow-lift: 0 24px 60px rgba(0, 0, 0, .55);
    --surface-tint: #1a201d;
    --red-soft: rgba(209, 80, 46, .16);
    --red-ink: #e8836b;
    --red-dark-ink: #e0a190;
    --amber-soft: rgba(194, 129, 31, .18);
    --amber-ink: #e0ac57;
    --blue-soft: rgba(47, 111, 144, .2);
    --blue-ink: #7bb8db;
    --violet-soft: rgba(106, 82, 150, .22);
    --violet-ink: #c2a8e6;
    --green-soft: rgba(47, 118, 82, .2);
}

:root[data-theme="dark"] body { background: var(--cream); color: var(--ink); }
:root[data-theme="dark"] .manager-body { background: #171c19; }

/* ---------------------------------------------------------------------- */
/* Scoped brand-color fix — THE key correction.                           */
/* /theme.css sets --green(-soft), --theme-*, --forest-2/3, --surface-tint, */
/* --line(-strong) and --shadow* DIRECTLY on .manager-body/.customer-body   */
/* (and their auth variants), always with light-mode-only values (theme.css */
/* has no concept of dark mode). A plain `:root[data-theme="dark"]` rule    */
/* can never win against that: for inherited/custom properties, a          */
/* declaration that applies directly to an element always beats one        */
/* inherited from an ancestor (<html> here), regardless of specificity.    */
/* So every one of those tokens must be re-declared on the SAME selectors  */
/* theme.css uses, combined with the dark-mode attribute, or the manager's */
/* chosen brand color silently keeps rendering its light-mode shades       */
/* (soft near-white chip fills, dark-on-dark accent text, invisible        */
/* borders) no matter what color was picked or what theme is active. */
/*
 * NOTE on the "soft" tints: theme.css emits `--theme-soft: var(--customer-sage)`
 * / `var(--manager-accent-soft)`, i.e. it aliases a *source* token rather than a
 * literal. Overriding only `--green-soft` therefore left `--theme-soft` pointing
 * at a near-white value (#E3E7E5) in dark mode, which is what made the selected
 * pizza base and unread notifications render near-white-on-near-white. Both the
 * source token AND the `--theme-*` alias are redefined below so the tint follows
 * the brand hue at low opacity whichever one a rule happens to consume.
 */
:root[data-theme="dark"] .manager-body,
:root[data-theme="dark"] .auth-body-manager {
    --green-soft: rgba(var(--manager-accent-rgb), .18);
    --manager-accent-soft: rgba(var(--manager-accent-rgb), .18);
    --theme-soft: rgba(var(--manager-accent-rgb), .18);
    --manager-mint: color-mix(in srgb, var(--manager-accent) 55%, white);
    --theme-muted: color-mix(in srgb, var(--manager-accent) 55%, white);
    --theme-ink: color-mix(in srgb, var(--manager-accent) 58%, white);
    --line: rgba(255, 255, 255, .1);
    --line-strong: rgba(255, 255, 255, .18);
    --shadow: 0 18px 44px rgba(0, 0, 0, .45);
    --shadow-soft: 0 10px 26px rgba(0, 0, 0, .38);
    --shadow-lift: 0 24px 60px rgba(0, 0, 0, .55);
    --surface-tint: #1a201d;
}
:root[data-theme="dark"] .customer-body,
:root[data-theme="dark"] .auth-body-customer,
:root[data-theme="dark"] .theme-option-customer {
    --green-soft: rgba(var(--customer-theme-rgb), .18);
    --customer-sage: rgba(var(--customer-theme-rgb), .18);
    --theme-soft: rgba(var(--customer-theme-rgb), .18);
    --customer-theme-muted: color-mix(in srgb, var(--customer-forest) 55%, white);
    --theme-muted: color-mix(in srgb, var(--customer-forest) 55%, white);
    --theme-ink: color-mix(in srgb, var(--customer-forest) 58%, white);
    --line: rgba(255, 255, 255, .1);
    --line-strong: rgba(255, 255, 255, .18);
    --shadow: 0 18px 44px rgba(0, 0, 0, .45);
    --shadow-soft: 0 10px 26px rgba(0, 0, 0, .38);
    --shadow-lift: 0 24px 60px rgba(0, 0, 0, .55);
    --surface-tint: #1a201d;
}
:root[data-theme="dark"] .manager-page {
    background:
        linear-gradient(rgba(255, 255, 255, .012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .012) 1px, transparent 1px),
        #171c19;
    background-size: 32px 32px, 32px 32px, auto;
}

:root[data-theme="dark"] .site-header { background: rgba(20, 24, 22, .9); border-bottom-color: var(--line); }
:root[data-theme="dark"] .main-nav { background: rgba(255, 255, 255, .045); border-color: var(--line); }
:root[data-theme="dark"] .nav-item:hover { background: rgba(255, 255, 255, .07); }
:root[data-theme="dark"] .nav-icon-button { background: rgba(255, 255, 255, .045); border-color: var(--line); color: var(--muted); }
:root[data-theme="dark"] .site-footer { background: #0d100e; }
:root[data-theme="dark"] .auth-header { background: rgba(20, 24, 22, .92); border-bottom-color: var(--line); }
:root[data-theme="dark"] .auth-home-link { background: var(--gray-0); border-color: var(--line); }
:root[data-theme="dark"] .menu-toolbar { background: rgba(28, 35, 32, .95); }
:root[data-theme="dark"] .settings-save-bar { background: rgba(28, 35, 32, .96); border-color: var(--line-strong); }
:root[data-theme="dark"] .leaflet-control-attribution { background: rgba(28, 35, 32, .82) !important; color: var(--muted) !important; }
:root[data-theme="dark"] .leaflet-control-attribution a { color: #7bb8db !important; }
:root[data-theme="dark"] .leaflet-bar a { background: var(--gray-0) !important; color: var(--ink) !important; border-color: var(--line-strong) !important; }

/* Manager dark hero keeps its own near-black gradient already; ensure text
   stays legible against it regardless of theme tokens above. */
:root[data-theme="dark"] .manager-page .dashboard-heading {
    background: radial-gradient(circle at 86% 0, rgba(var(--theme-rgb), .28), transparent 20rem), linear-gradient(120deg, #0e1210, #171c19);
}
/* .manager-page .dashboard-heading .button-dark keeps a fixed white pill
   with dark text in both themes (the hero behind it is always dark) — no
   dark-mode override needed, and using the flipping --gray-900 token here
   would invert into near-white-on-white. */

/* Literal white / hardcoded-hex spots that don't source from tokens */
:root[data-theme="dark"] .accept-order-form select,
:root[data-theme="dark"] .decision-controls .reject-button,
:root[data-theme="dark"] .settings-file-button,
:root[data-theme="dark"] .theme-color-control input[type="color"],
:root[data-theme="dark"] .theme-color-control output,
:root[data-theme="dark"] .theme-preset,
:root[data-theme="dark"] .delivery-radius-control,
:root[data-theme="dark"] .scheduled-range,
:root[data-theme="dark"] .capacity-slot-card,
:root[data-theme="dark"] .rider-info-panel,
:root[data-theme="dark"] .rider-info-stats article,
:root[data-theme="dark"] .rider-position,
:root[data-theme="dark"] .notification-open-button,
:root[data-theme="dark"] .link-code-loading,
:root[data-theme="dark"] .pizza-price-reference,
:root[data-theme="dark"] .settings-logo-preview,
:root[data-theme="dark"] .otp-input,
:root[data-theme="dark"] .button-plus,
:root[data-theme="dark"] .table-link:hover,
:root[data-theme="dark"] .pizza-image-controls > input[type="file"],
:root[data-theme="dark"] .delivery-queue-list li {
    background: var(--gray-0);
    border-color: var(--line-strong);
    color: var(--ink);
}
:root[data-theme="dark"] .button-plus,
:root[data-theme="dark"] .table-link:hover { color: var(--theme-ink, var(--red)); }
:root[data-theme="dark"] .rider-service-control-disabled { background: linear-gradient(145deg, var(--gray-50), var(--gray-0)); }
:root[data-theme="dark"] [data-pizza-price][readonly] { background: var(--gray-100); }
:root[data-theme="dark"] .management-item-photo,
:root[data-theme="dark"] .pizza-image-preview,
:root[data-theme="dark"] .cart-line-media,
:root[data-theme="dark"] .delivery-area-map,
:root[data-theme="dark"] .management-item-mark {
    background: var(--gray-100);
}
:root[data-theme="dark"] .capacity-current-icon { background: var(--gray-100); color: var(--muted); }
:root[data-theme="dark"] .capacity-progress::-webkit-progress-bar { background: var(--gray-150); }
:root[data-theme="dark"] .settings-live-chip.is-muted { background: var(--gray-100); }
/* Index rail and the tinted sub-panels inside the settings cards: --gray-50
   is already the dark surface tint, only the hairlines need strengthening. */
:root[data-theme="dark"] .settings-index { background: var(--gray-0); border-color: var(--line-strong); }
:root[data-theme="dark"] .settings-index-list a { color: var(--gray-700); }
:root[data-theme="dark"] .settings-group-bar { border-bottom-color: var(--line-strong); }
:root[data-theme="dark"] .settings-copy-section,
:root[data-theme="dark"] .whatsapp-message-block { border-color: var(--line-strong); }
:root[data-theme="dark"] .capacity-state-badge { background: var(--gray-100); color: var(--muted); }

/* Order summary / auth aside / decision clock / rider avatar keep their
   own dark gradients already (forest tokens); no changes needed. */

/* Empty/dashed states and inputs */
:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .menu-empty-state,
:root[data-theme="dark"] .featured-empty,
:root[data-theme="dark"] .capacity-empty,
:root[data-theme="dark"] .scheduled-empty-mark {
    border-color: var(--line-strong);
}
:root[data-theme="dark"] .stack-form input,
:root[data-theme="dark"] .stack-form textarea,
:root[data-theme="dark"] .price-input,
:root[data-theme="dark"] .rider-create-card input,
:root[data-theme="dark"] .settings-field input,
:root[data-theme="dark"] .settings-field textarea,
:root[data-theme="dark"] .capacity-slot-form input,
:root[data-theme="dark"] .ordering-control-form textarea,
:root[data-theme="dark"] .reject-reason-form textarea,
:root[data-theme="dark"] .demo-box {
    background: var(--gray-0);
    border-color: var(--line-strong);
}
:root[data-theme="dark"] .pretty-select-trigger,
:root[data-theme="dark"] .pretty-select-panel {
    background: var(--gray-0);
    border-color: var(--line-strong);
}
:root[data-theme="dark"] .pretty-select-option:hover,
:root[data-theme="dark"] .pretty-select-option:focus {
    background: rgba(255, 255, 255, .07);
}
:root[data-theme="dark"] .pretty-select-option[aria-selected="true"] {
    background: rgba(var(--theme-rgb), .22);
}
:root[data-theme="dark"] .stack-form input:focus,
:root[data-theme="dark"] .stack-form textarea:focus {
    background: var(--gray-50);
}

/* Warning / notice panels: keep the semantic accent hue, darken the fill */
:root[data-theme="dark"] .rider-disabled-panel,
:root[data-theme="dark"] .ordering-cart-notice,
:root[data-theme="dark"] .order-rejection-reason,
:root[data-theme="dark"] .order-delivery-failed,
:root[data-theme="dark"] .tracking-delivery-failed,
:root[data-theme="dark"] .manager-delivery-failure-reason {
    background: var(--red-soft);
    border-color: rgba(209, 80, 46, .35);
    color: #f0a794;
}
:root[data-theme="dark"] .scheduled-closure-present {
    background: var(--amber-soft);
    border-color: rgba(194, 129, 31, .35);
}
/* Delivery queue follows the brand accent (operational, not a warning) */
:root[data-theme="dark"] .delivery-queue-card,
:root[data-theme="dark"] .delivery-queue-metric {
    background: var(--theme-soft, var(--green-soft));
    border-color: rgba(var(--theme-rgb), .35);
}

/*
 * Filled brand surfaces in dark mode. --theme-primary is left untouched on
 * purpose: ThemePalette guarantees it clears 4.6:1 against white text, and
 * lightening it here would silently void that guarantee for light brand
 * colors. Instead a hairline inset ring lifts the fill off the dark card so
 * it still reads as a raised control.
 */
/* --theme-deep is nearly black on a dark page, so the strong secondary CTA
   steps up to the mid brand shade to stay visible while keeping white text. */
:root[data-theme="dark"] .button-dark { background: var(--theme-primary, var(--charcoal)); }
:root[data-theme="dark"] .button-dark:hover { background: var(--theme-light, var(--charcoal-light)); color: var(--charcoal); }

:root[data-theme="dark"] .button-dark,
:root[data-theme="dark"] .button-primary,
:root[data-theme="dark"] .nav-item-active,
:root[data-theme="dark"] .accept-button,
:root[data-theme="dark"] .pickup-button,
:root[data-theme="dark"] .working-button,
:root[data-theme="dark"] .delivery-button,
:root[data-theme="dark"] .builder-link,
:root[data-theme="dark"] .add-button,
:root[data-theme="dark"] .metric-accent,
:root[data-theme="dark"] .manager-admin-chip,
:root[data-theme="dark"] .delivery-queue-position,
:root[data-theme="dark"] .brand-mark,
:root[data-theme="dark"] .decision-clock,
:root[data-theme="dark"] .rider-avatar,
:root[data-theme="dark"] .manager-account-avatar,
:root[data-theme="dark"] .order-ready-clock,
:root[data-theme="dark"] .order-completed-icon,
:root[data-theme="dark"] .ingredient-option input:checked + .ingredient-check {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
:root[data-theme="dark"] .pickup-ready-metric {
    background: var(--green-soft);
    border-color: rgba(var(--theme-rgb, 47, 118, 82), .35);
}

:root[data-theme="dark"] .theme-option-manager .theme-preview-panel,
:root[data-theme="dark"] .theme-option-customer .theme-preview-panel { background: var(--gray-0); }

/* Flash messages */
:root[data-theme="dark"] .flash-success { color: var(--theme-ink); background: var(--theme-soft, var(--green-soft)); border-color: rgba(var(--theme-rgb), .45); }
:root[data-theme="dark"] .flash-error { color: #f2a08f; background: var(--red-soft); border-color: rgba(209, 80, 46, .4); }
:root[data-theme="dark"] .flash-info { color: #8fc3e0; background: var(--blue-soft); border-color: rgba(47, 111, 144, .45); }
:root[data-theme="dark"] .flash-success > span:first-child { background: rgba(var(--theme-rgb), .35); }
:root[data-theme="dark"] .flash-error > span:first-child { background: rgba(209, 80, 46, .32); }
:root[data-theme="dark"] .flash-info > span:first-child { background: rgba(47, 111, 144, .32); }

/* Status pills: darken the tint, keep the hue for recognisability */
:root[data-theme="dark"] .status-received,
:root[data-theme="dark"] .status-ready_for_delivery { color: #f0c775; background: var(--amber-soft); }
:root[data-theme="dark"] .status-accepted,
:root[data-theme="dark"] .status-ready_for_pickup,
:root[data-theme="dark"] .status-delivered { color: var(--theme-ink); background: var(--theme-soft, var(--green-soft)); }
:root[data-theme="dark"] .status-in_preparation { color: #8fc3e0; background: var(--blue-soft); }
:root[data-theme="dark"] .status-out_for_delivery { color: #cbb8f0; background: var(--violet-soft); }
:root[data-theme="dark"] .status-rejected,
:root[data-theme="dark"] .status-delivery_failed { color: #f2a08f; background: var(--red-soft); }
:root[data-theme="dark"] .status-customer_cancelled { color: var(--muted); background: rgba(255, 255, 255, .08); }

/* Selection / scrollbars pick up the active accent colour */
::selection { background: rgba(var(--theme-rgb, 209, 80, 46), .3); color: inherit; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .26); }

/* ---------------------------------------------------------------------- */
/* Promozioni: etichetta "In offerta", prezzo barrato, scheda in evidenza  */
/* ---------------------------------------------------------------------- */

.price-was { color: var(--muted); font-weight: 600; }
.price-was s { text-decoration-thickness: 2px; text-decoration-color: var(--red); }
s.price-was { text-decoration-thickness: 2px; text-decoration-color: var(--red); }

.promo-chip {
    padding: 2px 9px;
    display: inline-block;
    border-radius: var(--radius-full);
    color: #fff;
    background: var(--red);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Scheda del menu */
.pizza-card-promo { border-color: rgba(196, 71, 38, .42); box-shadow: 0 0 0 1px rgba(196, 71, 38, .12), var(--shadow-soft); }
.pizza-card-promo .pizza-card-media { position: relative; }
.promo-ribbon {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    padding: 5px 11px 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: var(--radius-full);
    color: #fff;
    background: linear-gradient(135deg, #e0572f, #b83a1e);
    box-shadow: 0 6px 16px rgba(184, 58, 30, .35);
    font-size: .68rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.promo-ribbon::before { content: "★"; font-size: .72rem; }
.promo-ribbon strong { font-weight: 800; font-size: .68rem; }
.promo-ribbon small {
    padding: 1px 7px;
    border-radius: var(--radius-full);
    color: #b83a1e;
    background: #fff;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: 0;
}
.pizza-price-promo strong { color: var(--red-ink); }
.pizza-price-promo small { color: var(--red-ink); }
.pizza-price .price-was { font-size: .86rem; }

/* Carrello */
.cart-line-price { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

/* Elenco del gestore */
.management-price-promo { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 8px; }
.management-price-promo .price-was { font-size: .8rem; }

/* Modulo prodotto: sezione promozione */
.pizza-promo-card {
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper, #fff);
}
.pizza-promo-card .pizza-promo-fields { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.pizza-promo-card .pizza-promo-fields[hidden] { display: none; }
.pizza-promo-hint { margin: 0; color: var(--muted); font-size: .8rem; }