/**
 * Applicazione tema a tutto il frontend webapp.
 * Caricare DOPO webapp.css e webapp-luxury-tokens.css.
 * Sovrascrive colori hardcoded di webapp.css con token semantici del preset attivo.
 */

html[data-wa-theme],
html[data-bms-theme],
html:has(body.webapp[data-wa-theme]),
html:has(body.webapp[data-bms-theme]),
html:has(body.webapp:not([data-wa-theme])) {
  background: var(--color-page-bg, var(--wa-lx-bg, #151311));
  color-scheme: dark;
}

body.webapp[data-wa-theme],
body.webapp[data-bms-theme],
body.webapp:not([data-wa-theme]):not([data-bms-theme]) {
  background: var(--color-page-bg, var(--wa-bg)) !important;
  color: var(--color-text-primary, var(--wa-charcoal)) !important;
}

/* ── Header / navbar ── */
.webapp[data-wa-theme] .navbar-webapp,
.webapp[data-bms-theme] .navbar-webapp,
.webapp:not([data-wa-theme]) .navbar-webapp {
  background: var(--color-header-bg, var(--wa-nav)) !important;
  box-shadow: 0 1px 0 var(--color-border, var(--wa-lx-border));
}

.webapp[data-wa-theme] .navbar-webapp .navbar-brand,
.webapp[data-bms-theme] .navbar-webapp .navbar-brand,
.webapp:not([data-wa-theme]) .navbar-webapp .navbar-brand {
  color: var(--color-header-text, var(--color-text-primary, var(--wa-lx-text, #fff))) !important;
  display: inline-flex !important;
  align-items: center;
  flex: 0 0 auto;
  min-width: max-content;
  opacity: 1 !important;
  visibility: visible !important;
  white-space: nowrap;
}

.webapp[data-wa-theme] .navbar-webapp .wa-bms-navbar-brand,
.webapp[data-bms-theme] .navbar-webapp .wa-bms-navbar-brand,
.webapp:not([data-wa-theme]) .navbar-webapp .wa-bms-navbar-brand {
  min-width: 0;
}

@media (min-width: 992px) {
  .webapp .navbar-webapp .container-fluid {
    flex-wrap: nowrap;
  }
  .webapp .navbar-webapp .navbar-collapse {
    flex: 1 1 auto;
    min-width: 0;
  }
}

.webapp[data-wa-theme] .navbar-webapp .nav-link-webapp,
.webapp[data-bms-theme] .navbar-webapp .nav-link-webapp,
.webapp:not([data-wa-theme]) .navbar-webapp .nav-link-webapp {
  color: var(--color-header-link, var(--wa-nav-text));
}

.webapp[data-wa-theme] .navbar-webapp .nav-link-webapp:hover,
.webapp[data-bms-theme] .navbar-webapp .nav-link-webapp:hover,
.webapp:not([data-wa-theme]) .navbar-webapp .nav-link-webapp:hover,
.webapp[data-wa-theme] .navbar-webapp .nav-link-webapp.active,
.webapp[data-bms-theme] .navbar-webapp .nav-link-webapp.active {
  color: var(--color-header-link-hover, var(--wa-nav-hover));
}

.webapp[data-wa-theme] .navbar-webapp .nav-link-webapp.active,
.webapp[data-bms-theme] .navbar-webapp .nav-link-webapp.active {
  color: var(--color-accent, var(--wa-gold));
}

.webapp[data-wa-theme] .navbar-webapp .dropdown-menu,
.webapp[data-bms-theme] .navbar-webapp .dropdown-menu {
  background: var(--color-surface-elevated, var(--wa-lx-surface-elev));
  border-color: var(--color-border, var(--wa-lx-border));
}

.webapp[data-wa-theme] .navbar-webapp .dropdown-item,
.webapp[data-bms-theme] .navbar-webapp .dropdown-item {
  color: var(--color-text-primary, var(--wa-lx-text));
}

.webapp[data-wa-theme] .navbar-webapp .dropdown-item:hover,
.webapp[data-bms-theme] .navbar-webapp .dropdown-item:hover {
  background: var(--color-surface-alt, var(--wa-lx-surface-2));
  color: var(--color-header-link-hover, var(--wa-lx-text));
}

.webapp[data-wa-theme] .navbar-webapp .btn-webapp-outline,
.webapp[data-bms-theme] .navbar-webapp .btn-webapp-outline {
  color: var(--color-header-link, var(--wa-nav-text));
  border-color: var(--color-border-strong, var(--wa-lx-border-strong));
}

.webapp[data-wa-theme] .navbar-webapp .btn-webapp-primary,
.webapp[data-bms-theme] .navbar-webapp .btn-webapp-primary {
  color: var(--color-button-primary-text, var(--wa-lx-cta-text));
  background: var(--wa-lx-cta-gradient, var(--color-button-primary-bg));
}

/* ── Footer ── */
.webapp[data-wa-theme] .webapp-footer,
.webapp[data-bms-theme] .webapp-footer,
.webapp:not([data-wa-theme]) .webapp-footer {
  background: var(--color-footer-bg, var(--wa-footer-bg)) !important;
  color: var(--color-footer-text, var(--wa-footer-text)) !important;
  border-top: 1px solid var(--color-border, var(--wa-lx-border));
}

.webapp[data-wa-theme] .webapp-footer a,
.webapp[data-bms-theme] .webapp-footer a {
  color: var(--color-footer-link, var(--wa-gold));
}

.webapp[data-wa-theme] .webapp-footer a:hover,
.webapp[data-bms-theme] .webapp-footer a:hover {
  color: var(--color-footer-link-hover, var(--color-accent-hover));
}

/* ── Main / tipografia ── */
.webapp[data-wa-theme] .webapp-main,
.webapp[data-bms-theme] .webapp-main {
  background: transparent;
  color: var(--color-text-primary);
}

.webapp[data-wa-theme] .text-muted,
.webapp[data-bms-theme] .text-muted,
.webapp[data-wa-theme] .text-secondary,
.webapp[data-bms-theme] .text-secondary {
  color: var(--color-text-muted, var(--wa-muted)) !important;
}

.webapp[data-wa-theme] h1,
.webapp[data-wa-theme] h2,
.webapp[data-wa-theme] h3,
.webapp[data-wa-theme] h4,
.webapp[data-wa-theme] h5,
.webapp[data-wa-theme] h6,
.webapp[data-bms-theme] h1,
.webapp[data-bms-theme] h2,
.webapp[data-bms-theme] h3,
.webapp[data-bms-theme] h4,
.webapp[data-bms-theme] h5,
.webapp[data-bms-theme] h6 {
  color: var(--color-text-primary);
}

.webapp[data-wa-theme] a:not(.btn):not(.nav-link-webapp):not(.dropdown-item),
.webapp[data-bms-theme] a:not(.btn):not(.nav-link-webapp):not(.dropdown-item) {
  color: var(--color-link, var(--wa-gold));
}

.webapp[data-wa-theme] a:not(.btn):hover,
.webapp[data-bms-theme] a:not(.btn):hover {
  color: var(--color-link-hover, var(--color-accent-hover));
}

/* ── Card / pannelli ── */
.webapp[data-wa-theme] .card-wa,
.webapp[data-bms-theme] .card-wa,
.webapp[data-wa-theme] .card,
.webapp[data-bms-theme] .card {
  background: var(--color-surface, var(--wa-card)) !important;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border, var(--wa-border)) !important;
  box-shadow: var(--wa-lx-shadow-soft, var(--wa-shadow));
}

.webapp[data-wa-theme] .card-wa .card-header,
.webapp[data-bms-theme] .card-wa .card-header,
.webapp[data-wa-theme] .card-header,
.webapp[data-bms-theme] .card-header {
  background: var(--color-surface-alt, var(--wa-lx-bg-soft));
  color: var(--color-text-primary);
  border-bottom-color: var(--color-border, var(--wa-lx-border));
}

.webapp[data-wa-theme] .card-wa .card-title,
.webapp[data-bms-theme] .card-wa .card-title,
.webapp[data-wa-theme] .card-title {
  color: var(--color-text-primary, var(--wa-charcoal));
}

.webapp[data-wa-theme] .card-wa .card-img-top,
.webapp[data-bms-theme] .card-wa .card-img-top {
  background: linear-gradient(145deg, var(--color-surface-alt) 0%, var(--color-surface) 100%);
}

/* ── Pulsanti ── */
.webapp[data-wa-theme] .btn-cosmesi,
.webapp[data-wa-theme] .btn-wa-primary,
.webapp[data-bms-theme] .btn-cosmesi,
.webapp[data-bms-theme] .btn-wa-primary {
  background: var(--wa-lx-cta-gradient, var(--color-button-primary-bg));
  color: var(--color-button-primary-text, var(--wa-lx-cta-text));
  border: 0;
}

.webapp[data-wa-theme] .btn-outline-light,
.webapp[data-bms-theme] .btn-outline-light {
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

.webapp[data-wa-theme] .btn-outline-secondary,
.webapp[data-bms-theme] .btn-outline-secondary {
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

/* ── Form ── */
.webapp[data-wa-theme] .form-control,
.webapp[data-wa-theme] .form-select,
.webapp[data-bms-theme] .form-control,
.webapp[data-bms-theme] .form-select {
  background: var(--color-input-bg, var(--wa-lx-control-bg));
  color: var(--color-input-text, var(--wa-lx-control-text));
  border-color: var(--color-border-strong, var(--wa-lx-control-border));
}

.webapp[data-wa-theme] .form-control::placeholder,
.webapp[data-bms-theme] .form-control::placeholder {
  color: var(--color-input-placeholder, var(--wa-lx-placeholder));
}

.webapp[data-wa-theme] .form-control:focus,
.webapp[data-bms-theme] .form-control:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-focus);
}

/* ── Alert / badge ── */
.webapp[data-wa-theme] .alert-success,
.webapp[data-bms-theme] .alert-success {
  background: color-mix(in srgb, var(--color-success) 18%, var(--color-surface));
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
}

.webapp[data-wa-theme] .alert-danger,
.webapp[data-bms-theme] .alert-danger {
  background: color-mix(in srgb, var(--color-danger) 18%, var(--color-surface));
  color: var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
}

.webapp[data-wa-theme] .alert-warning,
.webapp[data-bms-theme] .alert-warning {
  background: color-mix(in srgb, var(--color-warning) 18%, var(--color-surface));
  color: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
}

.webapp[data-wa-theme] .alert-info,
.webapp[data-bms-theme] .alert-info {
  background: color-mix(in srgb, var(--color-info) 12%, var(--color-surface));
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.webapp[data-wa-theme] .badge.bg-secondary,
.webapp[data-bms-theme] .badge.bg-secondary {
  background: var(--color-surface-elevated) !important;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

/* ── Accordion ── */
.webapp[data-wa-theme] .accordion-item,
.webapp[data-bms-theme] .accordion-item {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.webapp[data-wa-theme] .accordion-button,
.webapp[data-bms-theme] .accordion-button {
  background: var(--color-surface-alt);
  color: var(--color-text-primary);
}

.webapp[data-wa-theme] .accordion-button:not(.collapsed),
.webapp[data-bms-theme] .accordion-button:not(.collapsed) {
  background: var(--color-surface-elevated);
  color: var(--color-accent);
}

/* ── Mobile bottom nav ── */
.webapp[data-wa-theme] .wa-mobile-bottom-nav,
.webapp[data-bms-theme] .wa-mobile-bottom-nav {
  background: var(--wa-bottom-nav-bg, var(--color-header-bg)) !important;
  border-top-color: var(--color-border) !important;
}

/* ── Pagina personalizza: banner anteprima attiva ── */
.wa-theme-live-banner {
  position: sticky;
  top: 0;
  z-index: 1020;
  margin: -0.5rem 0 1rem;
  padding: 0.65rem 1rem;
  border-radius: var(--wa-lx-radius-sm, 12px);
  background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface));
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
  font-size: 0.9rem;
}

.wa-page-personalizza-bms.wa-theme-preview-active .webapp-main {
  transition: background 0.25s ease, color 0.25s ease;
}

/* ── Catalogo / prodotto / dashboard — allinea sfondi luxury ai token preset ── */
.webapp[data-wa-theme] .webapp-main,
.webapp[data-bms-theme] .webapp-main {
  background: transparent;
  color: var(--color-text-primary, var(--wa-charcoal));
}

.webapp[data-wa-theme].wa-page-catalogo,
.webapp[data-bms-theme].wa-page-catalogo,
.webapp[data-wa-theme].wa-page-catalogo .webapp-main,
.webapp[data-bms-theme].wa-page-catalogo .webapp-main,
.webapp[data-wa-theme].wa-page-catalogo .wa-catalog-page,
.webapp[data-bms-theme].wa-page-catalogo .wa-catalog-page {
  background: var(--color-page-bg, var(--wa-lx-bg)) !important;
}

.webapp[data-wa-theme].wa-page-prodotto,
.webapp[data-bms-theme].wa-page-prodotto,
.webapp[data-wa-theme].wa-page-prodotto .webapp-main,
.webapp[data-bms-theme].wa-page-prodotto .webapp-main {
  background: var(--color-page-bg, var(--wa-lx-bg)) !important;
  color: var(--color-text-primary);
}

.webapp[data-wa-theme].wa-page-dashboard .card-wa,
.webapp[data-bms-theme].wa-page-dashboard .card-wa,
.webapp[data-wa-theme].wa-page-personalizza-bms .card-wa,
.webapp[data-bms-theme].wa-page-personalizza-bms .card-wa {
  background: var(--color-surface, var(--wa-card)) !important;
  border-color: var(--color-border, var(--wa-border)) !important;
  color: var(--color-text-primary);
}

.webapp[data-wa-theme] .wa-catalog-m-hero,
.webapp[data-bms-theme] .wa-catalog-m-hero {
  background: linear-gradient(
    165deg,
    var(--wa-lx-hero-grad-from, var(--color-surface-alt)) 0%,
    var(--color-page-bg, var(--wa-lx-bg-soft)) 58%
  ) !important;
}

.webapp[data-wa-theme] .wa-catalog-m-strip__card,
.webapp[data-bms-theme] .wa-catalog-m-strip__card,
.webapp[data-wa-theme] .wa-catalog-desk-filters,
.webapp[data-bms-theme] .wa-catalog-desk-filters {
  background: var(--color-surface, var(--wa-lx-surface)) !important;
  border-color: var(--color-border, var(--wa-lx-border)) !important;
}

.webapp[data-wa-theme] .wa-catalog-m-strip__img,
.webapp[data-bms-theme] .wa-catalog-m-strip__img {
  background: var(--color-surface-alt, var(--wa-lx-surface-dark)) !important;
}

.webapp[data-wa-theme] .wa-mobile-bottom-nav__item.is-active,
.webapp[data-bms-theme] .wa-mobile-bottom-nav__item.is-active {
  color: var(--color-accent, var(--wa-gold)) !important;
}