/* Aurora: token condivisi anche quando la SPA carica CSS dopo il tema. */
html:root, html body {
  --primary: #008936;
  --primary-foreground: #fff;
  --primary-deep: #076b43;
  --primary-darker: #07563c;
  --primary-soft: #dcfae8;
  --primary-glow: #8cf0cb;
  --foreground: #122641;
  --muted-foreground: #55667b;
  --card: #fff;
  --border: #d7e8e4;
  --surface-cream: #f6fbfa;
  --surface-warm: #edf6f4;
  --secondary: #eaf5f2;
  --background: #f6fbfa;
  --control-ring: #87cbdc;
  /* Versione meno satura del gradiente del logo usato in hover. */
  --wiiipay-aurora: linear-gradient(105deg, #13ab41 0%, #13a3ac 42%, #1884da 70%, #1851da 100%);
  --wiiipay-aurora-soft: linear-gradient(110deg, #d2ffdf, #ccefff);
  --gradient-hero: linear-gradient(115deg, #008443, #007c9b 55%, #0063df);
  --shadow-card: 0 5px 20px #1749590b;
  --shadow-lift: 0 10px 28px #1749591c;
  --aurora-art: url('../img/aurora/filigree.svg?v=2');
  --aurora-corners: var(--aurora-art), url('../img/aurora/filigree-left.svg');
}

html body {
  background: var(--surface-cream);
}

/* Cornice fissa nella viewport, dietro al contenuto e senza intercettare gesti.
   Un livello fixed evita i limiti di background-attachment sui browser mobile. */
body .wiiipay-site-shell {
  position: relative;
  isolation: isolate;
  background-color: var(--surface-cream) !important;
  background-image: none !important;
}
body .wiiipay-site-shell::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--aurora-corners);
  background-position: right top, left bottom;
  background-size: min(85vw, 1050px, 100vh) auto, min(75vw, 900px, 90vh) auto;
  background-repeat: no-repeat;
}
/* Il template /account/ ha un fondale proprio: lascia emergere la cornice. */
body .wiiipay-account-page,
body .wiiipay-dashboard-page,
body #wiiipay-dashboard .shell__main { background: transparent; }

body #wiiipay-dashboard { background: transparent; --radius: 1.25rem; }
body #wiiipay-dashboard .shell__sidebar {
  /* Solo le card devono avere una superficie: la colonna laterale deve
     lasciare vedere la cornice illustrata del sito. */
  background: transparent !important;
  border-color: transparent;
}
body #wiiipay-dashboard :is(.shell__topbar, .shell__mobile-header) {
  background: #ffffffed;
  border-color: var(--border);
}

/* Classi del tema pubblico: le CTA editoriali sono link con utility Tailwind. */
body :is(a, button, input[type="submit"]):is(.bg-primary, .bg-foreground),
body .wb-hero-slide a.bg-card,
body #wiiipay-dashboard :is(.db-action--primary, .db-btn--primary, .ev-btn--primary),
body #wiiipay-dashboard .mantine-Button-root[data-variant="filled"]:not([style*="mantine-color-red"]),
body :is(.db-guide-launcher, .db-guide-panel__start, .db-manual-section__live),
body .db-tour__actions button:last-child {
  background: var(--wiiipay-aurora) !important;
  color: #fff !important;
  border-color: transparent;
  border-radius: 999px;
  box-shadow: 0 6px 16px #087c8626;
}

body :is(a, button).bg-primary:hover,
body #wiiipay-dashboard :is(.db-action--primary, .db-btn--primary, .ev-btn--primary):hover,
body #wiiipay-dashboard .mantine-Button-root[data-variant="filled"]:not([style*="mantine-color-red"]):hover {
  filter: brightness(.94);
}

body #wiiipay-dashboard :is(.db-action--secondary, .db-btn--secondary, .ev-btn--secondary),
body #wiiipay-dashboard .mantine-Button-root:is([data-variant="default"], [data-variant="outline"], [data-variant="light"]) {
  background: #fff;
  color: var(--primary-darker);
  border: 1px solid #badbd5;
  box-shadow: var(--shadow-card);
}

/* Destructive, disabled e caricamento mantengono un significato riconoscibile. */
body #wiiipay-dashboard .mantine-Button-root[style*="mantine-color-red"] {
  background: #b91c1c !important; color: #fff !important;
}
body :is(button, input[type="submit"], a.button, .db-action, .db-btn, .ev-btn):is(:disabled, [data-disabled], [aria-disabled="true"]) {
  background: #e8eeed !important;
  color: #61716e !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  cursor: not-allowed;
}

/* Hero: stessi verdi e blu, più profondi per leggere bene il testo bianco. */
body #wiiipay-dashboard :is(.db-page-heading__hero, .db-hero) {
  background-image: var(--aurora-art), var(--gradient-hero);
  background-position: right bottom, center;
  background-size: auto 150%, cover;
  background-repeat: no-repeat;
  border: 1px solid #ffffff40;
  border-radius: 28px;
  box-shadow: var(--shadow-lift);
}
body #wiiipay-dashboard [style*="--gradient-hero"] {
  background-image: var(--aurora-art), var(--gradient-hero) !important;
  background-position: right bottom, center !important;
  background-size: auto 150%, cover !important;
  background-repeat: no-repeat !important;
}
body #wiiipay-dashboard .db-page-heading__hero::after { display: none; }
body #wiiipay-dashboard .db-page-heading__eyebrow { color: #c7f7e7; }
body #wiiipay-dashboard .db-page-heading__subtitle { color: #edf8ff; }
body .wb-hero-slide {
  background-image: var(--aurora-art), var(--wb-hero-background, var(--gradient-hero)) !important;
  background-position: right bottom, center !important;
  background-size: auto 130%, cover !important;
  background-repeat: no-repeat !important;
}
body #wiiipay-dashboard :is(.db-page-heading__actions, .db-hero) :is(.db-action--secondary, .db-btn--secondary, .mantine-Button-root[data-variant="outline"]) {
  background: #fff; color: var(--foreground);
}

body #wiiipay-dashboard :is(.db-card, .mantine-Card-root, .mantine-Paper-root, .db-management-panel, .sim-goal-card, .sim-breakdown, .ev-event-card) {
  border-radius: 24px;
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}
body #wiiipay-dashboard :is(.mantine-Input-input, .mantine-Select-input, .mantine-Textarea-input),
body .wiiipay-site-shell :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="hidden"]), select, textarea) {
  border-radius: 14px;
  border-color: var(--border);
  accent-color: var(--primary);
}
body #wiiipay-dashboard :is(.mantine-Input-input, .mantine-Select-input, .mantine-Textarea-input):focus {
  border-color: #2187a4;
  box-shadow: 0 0 0 3px #2187a422;
}
body #wiiipay-dashboard :is(.mantine-Checkbox-input, .mantine-Switch-track)[data-checked],
body #wiiipay-dashboard :is(.mantine-Progress-section, .mantine-Slider-bar) {
  background: var(--wiiipay-aurora); border-color: var(--primary);
}
body #wiiipay-dashboard :is(.mantine-Tabs-tab[data-active], .mantine-SegmentedControl-indicator) {
  background: var(--wiiipay-aurora-soft); border-color: #62bdad; color: var(--primary-darker);
}
body #wiiipay-dashboard .mantine-Table-th {
  background: var(--surface-warm); color: var(--foreground);
}
body #wiiipay-dashboard :is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid #2187a4; outline-offset: 3px;
}

/* Un solo linguaggio di focus per sito e dashboard. I controlli testuali
   ricevono il bordo e l'anello della ricerca; le azioni usano lo stesso
   anello in outline, senza alterarne colori o ombre di stato. */
html:root, html body {
  --wiiipay-focus-border: #24ba8a;
  --wiiipay-focus-ring: rgba(14, 191, 127, .16);
  --wiiipay-focus-outline: rgba(14, 191, 127, .72);
}

/* :where() azzera la specificità della catena di :not(): senza, la regola
   generica pesa (0,6,2) e il suo anello !important prevale sulle eccezioni
   dei controlli composti qui sotto, finendo sull'input interno. */
body :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
  select,
  textarea
):focus,
body #wiiipay-dashboard :is(.mantine-Input-input, .mantine-Select-input, .mantine-Textarea-input, .mantine-NumberInput-input):focus {
  border-color: var(--wiiipay-focus-border) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 4px var(--wiiipay-focus-ring) !important;
}

/* Il wrapper della ricerca è il controllo visivo: evita un secondo anello
   sull'input interno, ma usa gli stessi token di tutto il sistema. */
.wiiipay-site-search label:focus-within {
  border-color: var(--wiiipay-focus-border) !important;
  box-shadow: 0 0 0 4px var(--wiiipay-focus-ring), 0 8px 20px rgba(19, 74, 101, .1) !important;
}
.wiiipay-site-search input:focus {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Quantità e price stepper sono controlli composti: l'anello appartiene al
   loro chrome, non al campo numerico interno. */
body :is(.wiiipay-product-quantity, .wiiipay-quantity-control, .wiiipay-price-stepper):focus-within {
  border-color: var(--wiiipay-focus-border) !important;
  box-shadow: 0 0 0 4px var(--wiiipay-focus-ring) !important;
}
body :is(.wiiipay-product-quantity, .wiiipay-quantity-control, .wiiipay-price-stepper) input:focus {
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* I due controlli di quantità di prodotto e carrello hanno un markup
   indipendente: queste regole esplicite prevalgono anche sulle utility
   locali del campo numerico. */
body :is(.wiiipay-product-quantity, .wiiipay-quantity-control):focus-within {
  border-color: var(--wiiipay-focus-border) !important;
  box-shadow: 0 0 0 4px var(--wiiipay-focus-ring) !important;
}
body :is(.wiiipay-product-quantity, .wiiipay-quantity-control) .wiiipay-number-input:focus {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* I campi dentro questi controlli non sono controlli autonomi: anche a
   riposo restano privi di bordo e di anello; il focus vive sul loro chrome. */
body .wiiipay-site-search input,
body :is(.wiiipay-product-quantity, .wiiipay-quantity-control, .wiiipay-price-stepper) .wiiipay-number-input {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
body :is(.wiiipay-product-quantity, .wiiipay-quantity-control, .wiiipay-price-stepper) .wiiipay-number-input {
  -moz-appearance: textfield !important;
}

body :is(
  button,
  a,
  [role="button"],
  [role="combobox"],
  input[type="checkbox"],
  input[type="radio"],
  input[type="range"]
):focus-visible {
  outline: 3px solid var(--wiiipay-focus-outline) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}
@media (max-width: 767px) {
  body .wiiipay-site-shell::before {
    background-size: 115vw auto, 110vw auto;
  }
  body #wiiipay-dashboard :is(.db-page-heading__hero, .db-hero) { border-radius: 22px; }
}
@media print {
  body .wiiipay-site-shell::before { display: none; }
}