/**
 * marchiotto-additions.css
 * ========================
 * Stili aggiuntivi per il portale Marchiotto Progres Supporto.
 * Caricato dopo tutti i CSS Liquid Glass — override mirato, mai distruttivo.
 *
 * Organizzazione:
 *  1. Variabili CSS custom (token aggiuntivi)
 *  2. Fix WCAG AA — contrasti minimi 4.5:1 body, 3:1 testi grandi
 *  3. Tipografia — font size, weight, interlinea per utenti 30-70 anni
 *  4. Navbar — struttura loggato/non loggato
 *  5. Banner "Ticket in attesa di risposta" (RF-05)
 *  6. Guide rapide — accordion (RF-06)
 *  7. Notifiche in-app (RF-10)
 *  8. Responsive ≤375px (mobile first)
 *  9. Responsive 768px (tablet)
 * 10. Responsive 1280px+ (desktop)
 *
 * Autore: Informatica Marchiotto — generato da Antigravity AI
 * Data: 2026-04-01
 */

/* ==========================================================================
   1. VARIABILI CSS CUSTOM — Token aggiuntivi
   ========================================================================== */

body.client-side {
  /* Colori per banner/alert "in attesa" — ambra coerente con Liquid Glass */
  --mp-amber-bg: rgba(245, 158, 11, 0.10);
  --mp-amber-border: rgba(245, 158, 11, 0.55);
  --mp-amber-text: #fbbf24;
  --mp-amber-text-strong: #fde68a;
  --mp-amber-glow: 0 0 12px rgba(245, 158, 11, 0.18);

  /* Banner interventi pianificati — cyan/teal (visibile, distinto dall’ambra ticket in attesa) */
  --mp-plan-bg: rgba(6, 182, 212, 0.14);
  --mp-plan-border: rgba(34, 211, 238, 0.62);
  --mp-plan-text: #5eead4;
  --mp-plan-text-strong: #ecfeff;
  --mp-plan-glow: 0 0 18px rgba(6, 182, 212, 0.32);

  /* Banner centro assistenza chiuso (config staff) — rosso più acceso e leggibile */
  --mp-closed-bg: rgba(220, 38, 38, 0.26);
  --mp-closed-border: rgba(254, 202, 202, 0.92);
  --mp-closed-text: #fee2e2;
  --mp-closed-text-strong: #ffffff;
  --mp-closed-glow:
    0 0 0 1px rgba(254, 226, 226, 0.12) inset,
    0 0 22px rgba(248, 113, 113, 0.55),
    0 0 48px rgba(239, 68, 68, 0.38);

  /* Colori per badge notifiche */
  --mp-badge-bg: #ef4444;
  --mp-badge-text: #ffffff;
  --mp-badge-glow: 0 0 8px rgba(239, 68, 68, 0.4);

  /* Guide accordion: summary + corpo nella stessa palette vetro smeraldo/teal */
  --mp-guide-bg: rgba(4, 28, 26, 0.38);
  --mp-guide-border: rgba(45, 212, 191, 0.3);
  --mp-guide-text: #e2e8f0;
  --mp-guide-accent-inset: rgba(52, 211, 153, 0.16);
  --mp-guide-accent-inset-hover: rgba(110, 231, 183, 0.24);
  --mp-guide-summary-bg: linear-gradient(
    168deg,
    rgba(6, 52, 46, 0.78) 0%,
    rgba(4, 32, 30, 0.82) 100%
  );
  --mp-guide-summary-bg-hover: linear-gradient(
    168deg,
    rgba(10, 68, 60, 0.84) 0%,
    rgba(5, 42, 38, 0.86) 100%
  );
  /* Corpo accordion: vetro caldo sotto summary ambra (coerente con mp-pending-banner) */
  --mp-guide-body-bg: linear-gradient(
    168deg,
    rgba(48, 36, 18, 0.82) 0%,
    rgba(28, 20, 10, 0.92) 48%,
    rgba(14, 10, 6, 0.96) 100%
  );
  --mp-guide-body-border-top: rgba(245, 158, 11, 0.28);
  --mp-guide-body-inset: rgba(251, 191, 36, 0.12);
  /* Accordion guide: un solo corpo tipografico (summary + corpo) */
  --mp-guide-font-size: 0.875rem;

  /* Chat trigger — pulsante floating; colore rosso chiaro */
  --mp-chat-bg: linear-gradient(135deg, #f87171, #dc2626);
  --mp-chat-shadow: 0 4px 14px rgba(220, 38, 38, 0.38), 0 1px 3px rgba(0, 0, 0, 0.18);
  --mp-chat-hover-shadow: 0 6px 22px rgba(220, 38, 38, 0.52), 0 2px 6px rgba(0, 0, 0, 0.22);

  /* Transizioni standard */
  --mp-transition-fast: 0.15s ease;
  --mp-transition-normal: 0.25s ease;

  /* ── Spacing scale (8px-based) ── */
  --sp-0: 0;
  --sp-1: 0.25rem;   /* 4px  */
  --sp-2: 0.5rem;    /* 8px  */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1rem;      /* 16px */
  --sp-5: 1.25rem;   /* 20px */
  --sp-6: 1.5rem;    /* 24px */
  --sp-8: 2rem;      /* 32px */
  --sp-10: 2.5rem;   /* 40px */
  --sp-12: 3rem;     /* 48px */

  /* ── z-index scale ── */
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-fixed: 1200;
  --z-overlay: 1300;
  --z-modal: 1400;
  --z-toast: 1500;

  /* ── Tipografia fluida — scala proporzionale (base uniforme 0.875rem) ── */
  --fs-body: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  --fs-h3:   clamp(1.02rem, 0.75vw + 0.875rem, 1.15rem);
  --fs-h2:   clamp(1.25rem, 1vw + 0.875rem, 1.625rem);
  --fs-h1:   clamp(1.5rem, 1.5vw + 0.875rem, 2rem);
}


/* ── Stili base icone inline ── */
body.client-side .mp-icon {
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
  color: currentColor;
  stroke: currentColor;
  /*stroke-width: 1.8;*/
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

body.client-side #nav .mp-icon,
body.client-side #nav-mobile .mp-icon {
  margin-right: 0.35em;
  opacity: 0.98;
  color: #cbe5ff;
  width: 14px;
  height: 14px;
  /*stroke-width: 2;*/  
  vertical-align: -0.12em;
}

/* Icona nel footer — allineata al testo, colore muted */
body.client-side .footer-icon {
  opacity: 0.78;
  color: #b8c7dc;
  margin-right: 0.2em;
}

/* Icone nell'header user area */
body.client-side .pull-right.flush-right .mp-icon {
  opacity: 0.92;
  color: #f4f8ff;
  margin-right: 0.15em;
}


/* ==========================================================================
   2. FIX WCAG AA — Contrasti minimi
   ========================================================================== */

/*
 * Audit eseguito sui colori Liquid Glass principali:
 * ✓ #f1f5f9 su #131d31 → 12.1:1 (AAA)
 * ✓ #cbd5e1 su #131d31 → 8.5:1 (AAA)
 * ⚠ #94a3b8 su #131d31 → 5.2:1 (AA ok, ma borderline per testo piccolo)
 * ⚠ #64748b su #131d31 → 3.1:1 (FAIL per testo body — solo decorativo)
 *
 * Correzioni applicate dove il contrasto era sotto 4.5:1 per testo body:
 */

/* Testi muted su superfici scure: da #94a3b8 → #a8b8cc per 6.1:1 */
body.client-side .glass-news-snippet,
body.client-side .glass-news-footnote,
body.client-side .fiscal-disclaimer,
body.client-side .fiscal-field-hint,
body.client-side .fiscal-count {
  color: #a8b8cc !important;
}

/* Label secondarie e hint: assicura contrasto minimo 4.5:1 */
body.client-side .glass-news-meta-label,
body.client-side .portal-tickets-dashboard__stat-label {
  color: #b0bdd0 !important;
}

/* Colori status/priorità nella dashboard: assicura leggibilità su sfondo scuro */
body.client-side .portal-tickets-dashboard__stat-value {
  font-weight: 600 !important;
}

/* Link nel footer: contrasto minimo su sfondo scuro */
body.client-side .footer-contact-link {
  color: #93c5fd !important;
}

body.client-side .footer-contact-link:hover,
body.client-side .footer-contact-link:focus-visible {
  color: #bfdbfe !important;
}


/* ==========================================================================
   3. TIPOGRAFIA — Leggibilità per utenti 30-70 anni
   ========================================================================== */

/* Body text: scala fluida con minimo 16px, interlinea 1.6 */
body.client-side #content {
  font-size: var(--fs-body, max(16px, 1rem)) !important;
  line-height: 1.65 !important;
}

/* Label, note, testi secondari: mai sotto 14px */
body.client-side #content label,
body.client-side #content .faded,
body.client-side #content small,
body.client-side #content .info-text {
  font-size: max(14px, 0.875rem) !important;
}

/* Font weight su sfondi traslucenti: minimo 500 per leggibilità */
body.client-side .glass-panel,
body.client-side .glass-hero,
body.client-side .glass-actions,
body.client-side .fiscal-glass-panel,
body.client-side .fiscal-cal-hero {
  font-weight: 500;
}

/* Heading gerarchia chiara — scala proporzionale con base uniforme 0.875rem */
body.client-side #content h1 {
  font-size: var(--fs-h1, clamp(1.5rem, 1.5vw + 0.875rem, 2rem));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

body.client-side #content h2 {
  font-size: var(--fs-h2, clamp(1.25rem, 1vw + 0.875rem, 1.625rem));
  font-weight: 600;
  line-height: 1.35;
}

body.client-side #content h3 {
  font-size: var(--fs-h3, clamp(1rem, 0.75vw + 0.875rem, 0.95rem));
  font-weight: 600;
  line-height: 1.4;
}


/* ==========================================================================
   4. NAVBAR — Aiuti strutturali loggato/non loggato
   ========================================================================== */

/* Badge numerico su voce nav (ticket count / notifiche) */
.mp-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 10px;
  background: var(--mp-badge-bg);
  color: var(--mp-badge-text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--mp-badge-glow);
  vertical-align: middle;
  animation: mp-badge-pulse 2s ease-in-out infinite;
}

@keyframes mp-badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Badge "0" o vuoto: nascondi */
.mp-nav-badge:empty,
.mp-nav-badge[data-count="0"] {
  display: none;
}


/* ==========================================================================
   5. BANNER "Ticket in Attesa di Risposta" (RF-05)
   ========================================================================== */

.mp-pending-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  border: 1.5px solid var(--mp-amber-border);
  background: var(--mp-amber-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--mp-amber-glow);
  color: var(--mp-amber-text-strong);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  animation: mp-pending-fadein 0.35s ease;
}

.mp-pending-banner[hidden] {
  display: none !important;
}

@keyframes mp-pending-fadein {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.mp-pending-banner__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-pending-banner__icon svg {
  width: 28px;
  height: 28px;
  fill: var(--mp-amber-text);
}

.mp-pending-banner__body {
  flex: 1 1 auto;
  min-width: 0;
}

.mp-pending-banner__count {
  font-weight: 700;
  color: var(--mp-amber-text);
}

.mp-pending-banner__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--mp-amber-border);
  background: rgba(245, 158, 11, 0.15);
  color: var(--mp-amber-text-strong);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--mp-transition-fast), border-color var(--mp-transition-fast);
  min-height: 44px; /* Touch target WCAG */
  min-width: 44px;
}

.mp-pending-banner__cta:hover,
.mp-pending-banner__cta:focus-visible {
  background: rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.75);
  color: #ffffff;
  text-decoration: none;
}

.mp-pending-banner__cta:focus-visible {
  outline: 2px solid var(--mp-amber-text);
  outline-offset: 2px;
}

/* Nessun intervento (tickets.inc): stessa skin di .mp-interventi-banner, non ambra ticket */
.mp-pending-banner.mp-pending-banner--interventi-no-cta {
  border: 1.5px solid var(--mp-plan-border);
  background: var(--mp-plan-bg);
  box-shadow: var(--mp-plan-glow);
  color: var(--mp-plan-text-strong);
}

.mp-pending-banner.mp-pending-banner--interventi-no-cta .mp-pending-banner__icon svg {
  fill: var(--mp-plan-text);
}

.mp-pending-banner.mp-pending-banner--interventi-no-cta .mp-pending-banner__body,
.mp-pending-banner.mp-pending-banner--interventi-no-cta .mp-pending-banner__body strong {
  color: var(--mp-plan-text-strong);
}

/* Centro assistenza chiuso (config staff) — banner rosso, stessa struttura BEM di mp-pending-banner */
.mp-pending-banner.mp-support-closed-banner {
  border: 1.5px solid var(--mp-closed-border);
  background:
    linear-gradient(
      165deg,
      rgba(254, 226, 226, 0.14) 0%,
      var(--mp-closed-bg) 42%,
      rgba(127, 29, 29, 0.45) 100%
    );
  box-shadow: var(--mp-closed-glow);
  color: var(--mp-closed-text-strong);
}

.mp-pending-banner.mp-support-closed-banner .mp-pending-banner__icon svg {
  fill: var(--mp-closed-text);
}

.mp-pending-banner.mp-support-closed-banner .mp-pending-banner__body,
.mp-pending-banner.mp-support-closed-banner .mp-pending-banner__body strong {
  color: var(--mp-closed-text-strong);
}

/* Interventi esclusi dall'assistenza ordinaria (open.php) — giallo avvertimento */
.mp-pending-banner.mp-open-ticket__billable-banner {
  border: 1.5px solid rgba(234, 179, 8, 0.78);
  background: linear-gradient(
    165deg,
    rgba(254, 243, 199, 0.28) 0%,
    rgba(245, 158, 11, 0.22) 45%,
    rgba(161, 98, 7, 0.38) 100%
  );
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.2) inset,
    0 0 18px rgba(245, 158, 11, 0.32),
    0 4px 14px rgba(120, 53, 15, 0.22);
  color: #fef08a;
}

.mp-pending-banner.mp-open-ticket__billable-banner .mp-pending-banner__icon svg {
  fill: #fbbf24;
}

.mp-pending-banner.mp-open-ticket__billable-banner .mp-pending-banner__body,
.mp-pending-banner.mp-open-ticket__billable-banner .mp-pending-banner__body strong {
  color: #fef9c3;
}

.mp-pending-banner.mp-open-ticket__billable-banner .mp-pending-banner__body strong {
  color: #fde047;
}

/* Preavviso chiusure straordinarie — più periodi in cascata (verticale, pieno larghezza) */
.mp-support-advance-notices-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  margin: 1rem 0 1.5rem;
  box-sizing: border-box;
}

.mp-support-advance-notices-wrap--stack {
  gap: 1.15rem;
}

.mp-support-advance-notices__item {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.mp-support-advance-notices__item-head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  flex-wrap: nowrap;
}

.mp-support-advance-notices__step {
  flex: 0 0 auto;
  min-width: 2.5rem;
  padding: 0.22rem 0.5rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.25;
  border-radius: 8px;
  border: 1px solid var(--mp-closed-border);
  background: rgba(127, 29, 29, 0.38);
  color: var(--mp-closed-text-strong);
  box-sizing: border-box;
}

.mp-support-advance-notices__period {
  flex: 1 1 auto;
  margin: 0;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
  border-radius: 10px;
  border: 1px solid rgba(254, 226, 226, 0.38);
  background: rgba(127, 29, 29, 0.26);
  color: var(--mp-closed-text-strong);
  box-sizing: border-box;
}

.mp-support-advance-notices-wrap .mp-pending-banner.mp-support-advance-banner {
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media screen and (max-width: 520px) {
  .mp-support-advance-notices__item-head {
    flex-direction: column;
    align-items: stretch;
  }

  .mp-support-advance-notices__step {
    align-self: flex-start;
  }
}

/* Banner “Interventi pianificati” — stessa struttura BEM, palette cyan coerente col vetro */
.mp-interventi-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  border: 1.5px solid var(--mp-plan-border);
  background: var(--mp-plan-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--mp-plan-glow);
  color: var(--mp-plan-text-strong);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  animation: mp-pending-fadein 0.35s ease;
}

.mp-interventi-banner[hidden] {
  display: none !important;
}

.mp-interventi-banner__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-interventi-banner__icon svg {
  width: 28px;
  height: 28px;
  fill: var(--mp-plan-text);
}

.mp-interventi-banner__body {
  flex: 1 1 auto;
  min-width: 0;
}

.mp-interventi-banner__count {
  font-weight: 700;
  color: var(--mp-plan-text);
}

.mp-interventi-banner__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--mp-plan-border);
  background: rgba(6, 182, 212, 0.18);
  color: var(--mp-plan-text-strong);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--mp-transition-fast), border-color var(--mp-transition-fast);
  min-height: 44px;
  min-width: 44px;
}

.mp-interventi-banner__cta:hover,
.mp-interventi-banner__cta:focus-visible {
  background: rgba(6, 182, 212, 0.28);
  border-color: rgba(103, 232, 249, 0.85);
  color: #ffffff;
  text-decoration: none;
}

.mp-interventi-banner__cta:focus-visible {
  outline: 2px solid var(--mp-plan-text);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .mp-interventi-banner {
    animation: none;
  }
}


/* ==========================================================================
   6. GUIDE RAPIDE — Accordion (RF-06) — Fase 3
   ========================================================================== */

/* Accordion: stesso linguaggio del banner “ticket in attesa” (vetro ambra) */
.mp-guide {
  margin: 1rem 0 1.5rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 14px;
  border: 1.5px solid var(--mp-amber-border);
  background: var(--mp-amber-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  overflow: hidden;
  box-shadow: var(--mp-amber-glow);
  animation: mp-pending-fadein 0.35s ease;
}

.mp-guide summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 1rem 1.25rem;
  cursor: pointer;
  color: var(--mp-amber-text-strong);
  font-size: var(--mp-guide-font-size, 0.875rem);
  font-weight: 500;
  line-height: 1.5;
  list-style: none;
  user-select: none;
  min-height: 48px;
  background: var(--mp-amber-bg);
  border: none;
  border-bottom: 1px solid rgba(245, 158, 11, 0.32);
  box-shadow: 0 1px 0 rgba(245, 158, 11, 0.12) inset;
  transition: background var(--mp-transition-fast), box-shadow var(--mp-transition-fast), color var(--mp-transition-fast);
}

.mp-guide:not([open]) summary {
  border-bottom: none;
}

.mp-guide summary::-webkit-details-marker {
  display: none;
}

/* Icona come mp-pending-banner (info in ambra) */
.mp-guide summary::before {
  content: "";
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fbbf24' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.mp-guide summary::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fbbf24' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.92;
  transition: transform var(--mp-transition-normal), opacity var(--mp-transition-fast);
}

.mp-guide[open] summary::after {
  transform: rotate(180deg);
}

.mp-guide summary:hover {
  background: rgba(245, 158, 11, 0.16);
  box-shadow: 0 1px 0 rgba(245, 158, 11, 0.2) inset;
}

.mp-guide summary:hover::after {
  opacity: 1;
}

.mp-guide[open] summary {
  border-bottom-color: rgba(245, 158, 11, 0.38);
}

.mp-guide summary:focus-visible {
  outline: 2px solid var(--mp-amber-text);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .mp-guide {
    animation: none;
  }
}

/* Corpo accordion: vetro scuro caldo, continuità con summary ambra */
.mp-guide__body {
  margin: 0;
  padding: 1.05rem 1.25rem 1.35rem 1.65rem;
  border-top: 1px solid var(--mp-guide-body-border-top, rgba(245, 158, 11, 0.24));
  background: var(--mp-guide-body-bg);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  box-shadow:
    0 1px 0 var(--mp-guide-body-inset) inset,
    0 8px 24px rgba(12, 8, 4, 0.42),
    0 0 0 1px rgba(245, 158, 11, 0.07) inset;
  color: rgba(255, 251, 235, 0.94);
  font-size: var(--mp-guide-font-size, 0.875rem);
  line-height: 1.65;
  font-weight: 400;
  max-width: 100%;
  box-sizing: border-box;
}

.mp-guide__body p,
.mp-guide__body ul,
.mp-guide__body li,
.mp-guide__body strong {
  font-size: inherit;
}

.mp-guide__body p {
  margin: 0 0 0.85rem;
}

.mp-guide__body p:first-child {
  color: var(--mp-amber-text-strong, #fde68a);
}

.mp-guide__body p:last-child {
  margin-bottom: 0;
}

.mp-guide__body ul {
  margin: 0.65rem 0 0.9rem;
  padding-left: 1.15rem;
  list-style-position: outside;
}

.mp-guide__body li {
  margin-bottom: 0.5rem;
  padding-left: 0.2rem;
}

.mp-guide__body li strong {
  color: #fef3c7;
  font-weight: 600;
}

@media (prefers-reduced-transparency: reduce) {
  .mp-guide__body {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.client-side .mp-guide__body {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}


/* ==========================================================================
   8. RESPONSIVE — Mobile ≤ 600px (mobile first)
   ========================================================================== */

@media screen and (max-width: 600px) {
  /* Banner ticket in attesa: stack verticale */
  .mp-pending-banner,
  .mp-interventi-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    font-size: 14px;
  }

  .mp-pending-banner__cta,
  .mp-interventi-banner__cta {
    width: 100%;
    justify-content: center;
  }

  /* Guide rapide: come banner pending su mobile */
  .mp-guide {
    margin: 1rem 0 1.25rem;
  }

  .mp-guide summary {
    padding: 0.85rem 1rem;
    font-size: var(--mp-guide-font-size, 0.875rem);
    gap: 0.75rem;
  }

  .mp-guide__body {
    padding: 0.9rem 1rem 1.15rem 1.35rem;
    font-size: var(--mp-guide-font-size, 0.875rem);
    line-height: 1.65;
    max-width: none;
  }

  .mp-guide__body li {
    margin-bottom: 0.45rem;
  }

  body.client-side .mp-guide summary {
    padding: 0.85rem 1rem !important;
  }
}


/* ==========================================================================
  9. RESPONSIVE — Tablet 601–1024px
   ========================================================================== */

@media screen and (min-width: 601px) and (max-width: 1024px) {
  .mp-pending-banner,
  .mp-interventi-banner {
    font-size: 14px;
  }
}


/* ==========================================================================
  10. RESPONSIVE — Desktop 1280px+
   ========================================================================== */

@media screen and (min-width: 1280px) {
  /* Contenuti centrati con larghezza massima coerente con chrome-glass */
  .mp-pending-banner,
  .mp-interventi-banner {
    max-width: 1264px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ==========================================================================
  11. ACCESSIBILITÀ — Focus ring, aria, touch target
   ========================================================================== */

/* Focus ring visibile su tutti gli elementi interattivi */
body.client-side a:focus-visible,
body.client-side button:focus-visible,
body.client-side input:focus-visible,
body.client-side select:focus-visible,
body.client-side textarea:focus-visible,
body.client-side [tabindex]:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

/* Touch target minimo 44x44px su mobile */
@media screen and (max-width: 600px) {
  body.client-side #nav-mobile li a,
  body.client-side .portal-menu-list li a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
}


/* ==========================================================================
  13. FILTRO LIVE TICKET LIST (RF-03) — Fase 2
   ========================================================================== */

/* Contatore risultati live (iniettato da JS sopra la tabella) */
.portal-tickets-live-counter {
  margin: 0.5rem 0 0.25rem !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(148, 163, 184, 0.9) !important;
  line-height: 1.4 !important;
}

.portal-tickets-live-counter[hidden] {
  display: none !important;
}

/* Riga "nessun risultato" live: riutilizza .portal-tickets-empty */
tr.portal-tickets-live-nohits[hidden] {
  display: none !important;
}


/* ==========================================================================
  14. LAYOUT PASS (RU-07) — Sfondo glass coerente + form profilo/account
      profile.php → .profile-page
      account.php → .account-page
      pwreset.php → .pwreset-page
   ========================================================================== */

/*
 * client-desktop.css impone #content { background: #fff !important }.
 * client-open-view-glass.css copre solo open/view/login/tickets/fiscal.
 * Queste pagine restano bianche senza le regole qui sotto → contrasto
 * stridente con header/footer scuri di client-portal-chrome-glass.css.
 *
 * Strategia profilo: il <form action="profile.php"> è l'elemento glass container
 * (supporta overflow:hidden + border-radius, a differenza di display:table).
 * La tabella interna diventa trasparente: serve solo per il layout a due colonne.
 * I bottoni, l'<hr> separatore e il <p> con le azioni rientrano così nel pannello.
 */

/* Sfondo dark glass */
body.client-side.profile-page,
body.client-side.account-page,
body.client-side.pwreset-page {
  font-size: 15px;
  min-height: 100vh;
  color: #f8fafc;
  background-color: #070f1a;
  background-image:
    radial-gradient(ellipse 100% 80% at 8% 12%, rgba(38, 120, 220, 0.42), transparent 58%),
    radial-gradient(ellipse 80% 70% at 92% 8%, rgba(130, 90, 240, 0.22), transparent 52%),
    linear-gradient(168deg, #0a1628 0%, #0e1b2e 38%, #121f33 100%);
  background-attachment: scroll;
}

body.client-side.profile-page *,
body.client-side.profile-page *::before,
body.client-side.profile-page *::after {
  box-sizing: border-box;
}

/* Grana sottile */
body.client-side.profile-page::before,
body.client-side.account-page::before,
body.client-side.pwreset-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E");
}

/* #container sopra la grana */
body.client-side.profile-page #container,
body.client-side.account-page #container,
body.client-side.pwreset-page #container {
  position: relative;
  z-index: 1;
}

/* #content — profilo usa colonna stretta centrata */
body.client-side.profile-page #content {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 1.5rem clamp(1rem, 3vw, 2rem) 3rem !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
  color: #f8fafc;
}

body.client-side.account-page #content,
body.client-side.pwreset-page #content {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 1.5rem clamp(1rem, 3vw, 2rem) 3rem !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
  color: #f8fafc;
}

/* h1 */
body.client-side.profile-page h1,
body.client-side.account-page h1,
body.client-side.pwreset-page h1 {
  font-family: "Montserrat", "Open Sans", system-ui, sans-serif;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  font-size: clamp(1.28rem, 2.6vw, 1.72rem) !important;
  background: transparent !important;
  line-height: 1.2 !important;
  margin: 0 0 0.6rem !important;
  text-shadow: 0 2px 16px rgba(0, 10, 24, 0.35);
}

/* Lead (paragrafo sopra il form) — profilo: più spazio sotto per separare dal pannello */
body.client-side.profile-page > p {
  color: rgba(248, 250, 252, 0.82) !important;
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  margin: 0 0 2.35rem !important;
  padding-bottom: 0.35rem !important;
}

body.client-side.account-page p,
body.client-side.pwreset-page p {
  color: rgba(248, 250, 252, 0.82) !important;
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  margin: 0 0 1.5rem !important;
}

/* h2, h3 generici */
body.client-side.profile-page h2,
body.client-side.profile-page h3,
body.client-side.account-page h2,
body.client-side.account-page h3,
body.client-side.pwreset-page h2,
body.client-side.pwreset-page h3 {
  color: rgba(203, 213, 225, 0.95) !important;
  font-weight: 600 !important;
  background: transparent !important;
}

/* ——————————————————————————————————————————————————————————————————————
   FORM PROFILO: il <form> è il contenitore glass
   (block element → overflow:hidden + border-radius funzionano correttamente)
   —————————————————————————————————————————————————————————————————————— */

body.client-side.profile-page form[action="profile.php"] {
  display: block;
  width: 100%;
  background: rgba(18, 34, 56, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    0 20px 56px rgba(0, 6, 20, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  overflow: hidden;
  margin: 0;
}

/* Tabella: puro layout, sfondo trasparente */
body.client-side.profile-page table.padded {
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* account.php: glass direttamente sulla tabella (nessun <form> targetable) */
body.client-side.account-page table.padded {
  width: 100% !important;
  max-width: 720px !important;
  background: rgba(18, 34, 56, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 14px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  box-shadow: 0 20px 56px rgba(0, 6, 20, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
  overflow: hidden;
  margin: 0 auto !important;
}

/* Cella base */
body.client-side.profile-page table.padded td,
body.client-side.account-page table.padded td {
  padding: 0.8rem 1.5rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: rgba(248, 250, 252, 0.92) !important;
  vertical-align: middle !important;
}

/* Cella etichetta — SOLO celle senza colspan (righe a due colonne) */
body.client-side.profile-page table.padded td:first-child:not([colspan]),
body.client-side.account-page table.padded td:first-child:not([colspan]) {
  color: rgba(186, 201, 222, 0.92) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  white-space: nowrap;
  width: 12rem;
}

/* Cella intestazione sezione (colspan): padding ridotto, nessun separatore bottom */
body.client-side.profile-page table.padded td[colspan],
body.client-side.account-page table.padded td[colspan] {
  padding-top: 1.1rem !important;
  padding-bottom: 0.3rem !important;
  border-bottom: none !important;
}

/* hr dentro le celle colspan (divisore visivo sottosezione) */
body.client-side.profile-page table.padded td[colspan] .form-header hr,
body.client-side.profile-page table.padded td[colspan] > div > hr,
body.client-side.account-page table.padded td[colspan] .form-header hr,
body.client-side.account-page table.padded td[colspan] > div > hr {
  display: block !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin: 0 0 0.65rem !important;
}

/* h3 intestazione sezione — stile eyebrow */
body.client-side.profile-page table.padded td[colspan] h3,
body.client-side.account-page table.padded td[colspan] h3 {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(148, 163, 184, 0.85) !important;
  margin: 0 !important;
}

/* Label nei campi del dynamic-form.tmpl.php: flex colonna */
body.client-side.profile-page table.padded td[colspan] label,
body.client-side.account-page table.padded td[colspan] label {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
  width: 100% !important;
}

/* Span del label (nome campo) */
body.client-side.profile-page table.padded td[colspan] label > span,
body.client-side.account-page table.padded td[colspan] label > span {
  font-size: 0.875rem !important;
  color: rgba(186, 201, 222, 0.92) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* Hint */
body.client-side.profile-page table.padded td[colspan] em,
body.client-side.account-page table.padded td[colspan] em {
  font-style: italic;
  font-size: 0.8rem !important;
  color: rgba(148, 163, 184, 0.7) !important;
}

/* Label generica */
body.client-side.profile-page label,
body.client-side.account-page label,
body.client-side.pwreset-page label {
  color: rgba(248, 250, 252, 0.9) !important;
  font-weight: 500 !important;
}

/* Campi input (profilo + account + pwreset) — override client-desktop width/height */
body.client-side.profile-page input[type="text"],
body.client-side.profile-page input[type="email"],
body.client-side.profile-page input[type="password"],
body.client-side.profile-page input[type="tel"],
body.client-side.profile-page select,
body.client-side.profile-page textarea,
body.client-side.account-page input[type="text"],
body.client-side.account-page input[type="email"],
body.client-side.account-page input[type="password"],
body.client-side.account-page input[type="tel"],
body.client-side.account-page select,
body.client-side.account-page textarea,
body.client-side.pwreset-page input[type="text"],
body.client-side.pwreset-page input[type="email"],
body.client-side.pwreset-page input[type="password"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0.65rem 1rem !important;
  min-height: 44px !important;
  height: auto !important;
  border-radius: 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.22) !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 15px !important;
  color-scheme: light;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Fuso orario: Select2 + «Automatico» affiancati, stessa altezza visiva degli input */
body.client-side.profile-page .mp-profile-timezone-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
  width: 100%;
  max-width: 100%;
  min-height: 46px;
}

/*
 * Evita FOUC: fino a jQuery+Select2 il <select> con centinaia di option può “esplodere” in layout.
 * Segnaposto (::before) occupa lo spazio del campo; select nativo fuori flusso. Classe .mp-tz-ui-ready
 * aggiunta dopo init in timezone.tmpl.php.
 */
body.client-side.profile-page .mp-profile-timezone-row:not(.mp-tz-ui-ready) {
  position: relative;
}

body.client-side.profile-page .mp-profile-timezone-row:not(.mp-tz-ui-ready)::before {
  content: "";
  flex: 1 1 220px;
  min-width: min(100%, 200px);
  max-width: 100%;
  min-height: 46px;
  height: 46px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 2px 8px rgba(0, 0, 0, 0.08);
  pointer-events: none;
  animation: mp-tz-ph-pulse 0.9s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  body.client-side.profile-page .mp-profile-timezone-row:not(.mp-tz-ui-ready)::before {
    animation: none;
    opacity: 0.92;
  }
}

@keyframes mp-tz-ph-pulse {
  from {
    opacity: 0.78;
  }
  to {
    opacity: 0.96;
  }
}

body.client-side.profile-page .mp-profile-timezone-row:not(.mp-tz-ui-ready) select#timezone-dropdown {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  overflow: hidden !important;
}

/* Select2 assente o errore: dopo .mp-tz-ui-ready il nativo torna nel flusso (non .select2-hidden-accessible) */
body.client-side.profile-page .mp-profile-timezone-row.mp-tz-ui-ready select#timezone-dropdown:not(.select2-hidden-accessible) {
  position: static !important;
  width: auto !important;
  flex: 1 1 220px !important;
  min-width: min(100%, 200px) !important;
  max-width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  clip: auto !important;
  overflow: hidden !important;
}

body.client-side.profile-page table.padded tr.mp-profile-timezone-tr td {
  vertical-align: middle !important;
}

body.client-side.profile-page .mp-profile-timezone-row .select2-container {
  flex: 1 1 220px !important;
  min-width: min(100%, 200px) !important;
  max-width: 100% !important;
}

body.client-side.profile-page .mp-profile-timezone-row .action-button {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  margin: 0 !important;
  min-height: 46px !important;
  padding: 0.55rem 1.15rem !important;
  box-sizing: border-box !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(248, 250, 252, 0.92) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}

body.client-side.profile-page .mp-profile-timezone-row .action-button:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}

/* Select2 (chiuso): stesso linguaggio grafico degli altri campi bianchi */
body.client-side.profile-page .mp-profile-timezone-row .select2-container--default .select2-selection--single {
  min-height: 46px !important;
  height: auto !important;
  border-radius: 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.22) !important;
  background: #ffffff !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

body.client-side.profile-page .mp-profile-timezone-row .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #0f172a !important;
  line-height: 1.35 !important;
  padding: 0.55rem 2.25rem 0.55rem 1rem !important;
  font-size: 15px !important;
}

body.client-side.profile-page .mp-profile-timezone-row .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 44px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

body.client-side.profile-page .mp-profile-timezone-row .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #64748b transparent transparent transparent !important;
}

/* Righe password: td restano table-cell; allineamento con wrapper interni (no flex sulle td) */
body.client-side.profile-page table.padded tr.mp-profile-password-row td {
  padding-top: 0.9rem !important;
  padding-bottom: 0.9rem !important;
  vertical-align: middle !important;
}

body.client-side.profile-page .mp-profile-pw-label {
  display: flex;
  align-items: center;
  min-height: 44px;
  line-height: 1.35;
  color: inherit;
  font-weight: 600;
  font-size: 0.875rem;
}

body.client-side.profile-page .mp-profile-pw-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  min-height: 44px;
}

body.client-side.profile-page .mp-profile-pw-field .error:empty {
  display: none;
}

/* Submit */
body.client-side.profile-page input[type="submit"],
body.client-side.profile-page button[type="submit"],
body.client-side.account-page input[type="submit"],
body.client-side.account-page button[type="submit"],
body.client-side.pwreset-page input[type="submit"],
body.client-side.pwreset-page button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.72rem 1.75rem !important;
  min-height: 46px !important;
  min-width: 140px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(140, 200, 255, 0.45) !important;
  background: linear-gradient(135deg, #1a6fd4 0%, #2b4fd8 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(0, 40, 120, 0.35) !important;
  transition: filter 0.15s, box-shadow 0.15s;
  text-decoration: none !important;
}

body.client-side.profile-page input[type="submit"]:hover,
body.client-side.profile-page button[type="submit"]:hover,
body.client-side.account-page input[type="submit"]:hover,
body.client-side.account-page button[type="submit"]:hover,
body.client-side.pwreset-page input[type="submit"]:hover,
body.client-side.pwreset-page button[type="submit"]:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 6px 20px rgba(0, 50, 130, 0.45) !important;
}

/* Reset / Cancel: secondari glass */
body.client-side.profile-page input[type="reset"],
body.client-side.profile-page input[type="button"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.72rem 1.5rem !important;
  min-height: 46px !important;
  min-width: 110px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.09) !important;
  color: rgba(248, 250, 252, 0.85) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: background 0.15s;
}

body.client-side.profile-page input[type="reset"]:hover,
body.client-side.profile-page input[type="button"]:hover {
  background: rgba(255, 255, 255, 0.16) !important;
}

/* Riga azioni — <hr> + <p> figli diretti del form, fuori dalla tabella */
body.client-side.profile-page form[action="profile.php"] > hr {
  /* L'<hr> tra </table> e <p> è ridondante: il pannello lo gestisce col border-top del <p> */
  display: none !important;
}

body.client-side.profile-page form[action="profile.php"] > p {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  padding: 1.1rem 1.5rem !important;
  margin: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
  text-align: left !important; /* sovrascrive style="text-align:center" inline */
}

/* Edit ticket (tickets.php?a=edit): azioni allineate allo stile reply */
body.client-side.tickets-page #content > form[action="tickets.php"] > p {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  padding: 1rem 1.25rem 0 !important;
  margin: 0.7rem 0 0 !important;
  text-align: center !important;
}

body.client-side.tickets-page #content > form[action="tickets.php"] > p input[type="submit"],
body.client-side.profile-page form[action="profile.php"] > p input[type="submit"] {
  margin: 0 !important;
  padding: 0.7rem 1.35rem !important;
  min-height: 48px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(140, 200, 255, 0.55) !important;
  background: linear-gradient(155deg, #1a6fd4 0%, #2b4fd8 48%, #3d6ae0 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  box-shadow: 0 4px 0 rgba(5, 40, 90, 0.45), 0 8px 20px rgba(0, 40, 100, 0.28) !important;
}

body.client-side.tickets-page #content > form[action="tickets.php"] > p input[type="reset"],
body.client-side.tickets-page #content > form[action="tickets.php"] > p input[type="button"],
body.client-side.profile-page form[action="profile.php"] > p input[type="reset"],
body.client-side.profile-page form[action="profile.php"] > p input[type="button"] {
  margin: 0 !important;
  padding: 0.7rem 1.35rem !important;
  min-height: 48px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  box-shadow: none !important;
}

body.client-side.tickets-page #content > form[action="tickets.php"] > p input[type="submit"]:hover,
body.client-side.profile-page form[action="profile.php"] > p input[type="submit"]:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 6px 24px rgba(0, 50, 130, 0.45) !important;
}

body.client-side.tickets-page #content > form[action="tickets.php"] > p input[type="reset"]:hover,
body.client-side.tickets-page #content > form[action="tickets.php"] > p input[type="button"]:hover,
body.client-side.profile-page form[action="profile.php"] > p input[type="reset"]:hover,
body.client-side.profile-page form[action="profile.php"] > p input[type="button"]:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}

body.client-side.tickets-page #content > form[action="tickets.php"] > p input:focus-visible,
body.client-side.profile-page form[action="profile.php"] > p input:focus-visible {
  outline: 2px solid rgba(147, 197, 253, 0.9) !important;
  outline-offset: 2px !important;
}

/* Link */
body.client-side.profile-page a,
body.client-side.account-page a,
body.client-side.pwreset-page a {
  /* color: #93c5fd !important; */
}

body.client-side.profile-page a:hover,
body.client-side.account-page a:hover,
body.client-side.pwreset-page a:hover {
  color: #ffffff !important;
}

/* hr fuori form (standalone nella pagina) */
body.client-side.profile-page hr,
body.client-side.account-page hr {
  display: block !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  margin: 1rem 0 !important;
}

/* Messaggi errore */
body.client-side.profile-page .error,
body.client-side.account-page .error,
body.client-side.pwreset-page .error {
  color: #fca5a5 !important;
}

/* Mobile ≤600px */
@media screen and (max-width: 600px) {
  body.client-side.profile-page table.padded td,
  body.client-side.account-page table.padded td {
    display: block !important;
    width: 100% !important;
  }

  body.client-side.profile-page table.padded td:first-child:not([colspan]),
  body.client-side.account-page table.padded td:first-child:not([colspan]) {
    width: 100% !important;
    white-space: normal !important;
    padding-bottom: 0.25rem !important;
    border-bottom: none !important;
  }

  body.client-side.profile-page form[action="profile.php"] > p {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.client-side.profile-page input[type="submit"],
  body.client-side.profile-page input[type="reset"],
  body.client-side.profile-page input[type="button"] {
    width: 100% !important;
  }

  body.client-side.profile-page .mp-profile-timezone-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.client-side.profile-page .mp-profile-timezone-row .select2-container {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body.client-side.profile-page .mp-profile-timezone-row .action-button {
    width: 100% !important;
    justify-content: center !important;
  }
}


/* ==========================================================================
  17. FEED RSS — Miglioramenti grafici (Fase 2 PRD-CODE-FIXES)
   ========================================================================== */

/*
 * Migliorie al blocco .glass-news-radar senza toccare client-index-glass.css:
 * — Gerarchia tipografica più netta
 * — Spaziatura righe su mobile aumentata
 * — Hover più fluido e leggibile
 * — Layout colonne desktop bilanciato (fonte + data non tagliate)
 * — Bordo sinistro accent più largo per contrasto su schermi <600px
 */

/* Sezione: più respiro in alto */
body.client-side.index-page .glass-news-radar {
  margin-top: clamp(1.25rem, 3vw, 2rem) !important;
  margin-bottom: clamp(0.75rem, 2vw, 1.25rem) !important;
}

/* Titolo sezione: icona + testo su stessa riga */
body.client-side.index-page .glass-news-title {
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
}

/* Colonne desktop: fonte leggermente più larga, date meno compressa */
@media (min-width: 768px) {
  body.client-side.index-page .glass-news-inner {
    --gn-cols: minmax(0, 1fr) minmax(140px, 0.46fr) minmax(100px, 0.28fr) !important;
  }
}

/* Righe: hover più chiaro e scalatura lieve */
body.client-side.index-page .glass-news-row:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 18px rgba(0, 10, 30, 0.3) !important;
}

/* Mobile: card più spaziose e bordo accento visibile */
@media (max-width: 600px) {
  body.client-side.index-page .glass-news-list {
    gap: 0.85rem !important;
  }

  body.client-side.index-page .glass-news-row {
    padding: 1rem !important;
    border-left-width: 5px !important;
  }

  body.client-side.index-page .glass-news-row-title {
    font-size: 0.8125rem !important;
  }

  body.client-side.index-page .glass-news-snippet {
    -webkit-line-clamp: 3 !important;
    font-size: 0.875rem !important;
  }
}

/* Tablet 601–767px: layout a colonna singola centrato, padding adeguato */
@media (min-width: 601px) and (max-width: 767px) {
  body.client-side.index-page .glass-news-row {
    padding: 1rem 1.1rem !important;
  }

  body.client-side.index-page .glass-news-snippet {
    -webkit-line-clamp: 2 !important;
  }
}

/* Source pill: testo non troncato su desktop */
@media (min-width: 768px) {
  body.client-side.index-page .glass-news-source {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    font-size: clamp(0.68rem, 0.72vw, 0.76rem) !important;
  }
}

/* Footnote: maggiore contrasto */
body.client-side.index-page .glass-news-footnote {
  color: rgba(226, 232, 240, 0.75) !important;
}

/* Focus ring coerente (accessibility) */
body.client-side.index-page .glass-news-row:focus-visible {
  outline: 2px solid #60a5fa !important;
  outline-offset: 2px !important;
}


/* ==========================================================================
  16. FIX GAP NAVBAR-HEADER (Fase 2)
      client-desktop.css impone #header { height: 60px } al desktop (>1024px).
      Il contenuto flex è più alto → overflow visivo crea gap apparente con la
      nav strip sottostante. Soluzione CSS: forzare height:auto al desktop.
      Soluzione JS (marchiotto-additions.js → fixNavGap + ResizeObserver su #header-inner):
      imposta `top` su #nav-wrapper (≤1024px) dal bordo inferiore della barra.
   ========================================================================== */

/* Desktop ≥1025px: header a misura del contenuto (override client-desktop.css) */
@media screen and (min-width: 1025px) {
  body.client-side > #container > #header {
    height: auto !important;
    overflow: visible !important;
  }
}


/* ==========================================================================
   18. DASHBOARD — FILTRO PRIORITÀ RIDISEGNATO (Fase 3 PRD-CODE-FIXES)
       Trasformazione da lista checkbox scrollabile a chip pill orizzontali.
       Accessibile (focus-visible, aria intatto), touch-friendly (≥44px su mobile),
       coerente con tema Liquid Glass.
       Nessuna modifica HTML o PHP: solo override CSS su classi esistenti.
   ========================================================================== */

/* Contenitore: da lista verticale scrollabile a wrap di chip orizzontali */
body.client-side.tickets-page .portal-dashboard-priority-checkboxes {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
  max-height: none !important;
  overflow-y: visible !important;
  padding: 0.25rem 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Label wrapper: annulla padding/border del tema precedente */
body.client-side.tickets-page .portal-dashboard-priority-option {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  cursor: pointer;
}

/* Checkbox nativo: rimane nel DOM per accessibilità (tab/screen reader) ma invisibile */
body.client-side.tickets-page .portal-dashboard-priority-cb {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* Chip pill — Liquid Glass (default, senza colore grafico) */
body.client-side.tickets-page .portal-dashboard-priority-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  min-height: 2rem;
  padding: 0.28rem 0.85rem !important;
  border-radius: 999px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em;
  color: rgba(226, 232, 240, 0.92) !important;
  background: linear-gradient(
    155deg,
    rgba(51, 65, 85, 0.42) 0%,
    rgba(15, 23, 42, 0.58) 100%
  ) !important;
  border: 1px solid rgba(148, 163, 184, 0.32) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 4px 14px rgba(0, 0, 0, 0.28) !important;
  transition:
    background 0.13s ease,
    border-color 0.13s ease,
    color 0.13s ease,
    box-shadow 0.13s ease,
    filter 0.13s ease !important;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* Rimuove il pallino del design precedente */
body.client-side.tickets-page .portal-dashboard-priority-text::before {
  display: none !important;
}

/* Hover */
body.client-side.tickets-page .portal-dashboard-priority-option:hover .portal-dashboard-priority-text {
  background: linear-gradient(
    155deg,
    rgba(59, 130, 246, 0.28) 0%,
    rgba(15, 23, 42, 0.62) 100%
  ) !important;
  border-color: rgba(96, 165, 250, 0.45) !important;
  color: #f1f5f9 !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 6px 18px rgba(0, 0, 0, 0.32) !important;
}

/* Focus da tastiera: anello WCAG AA visibile */
body.client-side.tickets-page .portal-dashboard-priority-cb:focus-visible + .portal-dashboard-priority-text {
  outline: 2px solid #60a5fa !important;
  outline-offset: 3px !important;
}

/* Selezionato (fallback blu se manca --mp-prio-fill sul label) */
body.client-side.tickets-page .portal-dashboard-priority-cb:checked + .portal-dashboard-priority-text {
  background: linear-gradient(
    145deg,
    rgba(37, 99, 235, 0.52) 0%,
    rgba(67, 56, 202, 0.48) 100%
  ) !important;
  border-color: rgba(147, 197, 253, 0.5) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
  -webkit-backdrop-filter: blur(14px) saturate(175%);
  backdrop-filter: blur(14px) saturate(175%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 6px 20px rgba(37, 99, 235, 0.35),
    0 0 24px rgba(59, 130, 246, 0.22) !important;
}

/* Hover su chip selezionato (fallback blu) */
body.client-side.tickets-page .portal-dashboard-priority-option:hover .portal-dashboard-priority-cb:checked + .portal-dashboard-priority-text {
  background: linear-gradient(
    145deg,
    rgba(37, 99, 235, 0.62) 0%,
    rgba(67, 56, 202, 0.55) 100%
  ) !important;
  border-color: rgba(147, 197, 253, 0.62) !important;
  filter: brightness(1.04);
}

/* Durante fetch AJAX: attenuazione temporanea (non confondere con priorità senza dati) */
body.client-side.tickets-page .portal-dashboard--loading .portal-dashboard-priority-cb:disabled:not(.portal-dashboard-priority-cb--no-data) + .portal-dashboard-priority-text {
  opacity: 0.55 !important;
  cursor: wait !important;
  pointer-events: none !important;
}

/* Priorità senza ticket nell'anno: disattivata e non selezionabile */
body.client-side.tickets-page .portal-dashboard-priority-option--empty {
  pointer-events: none !important;
}

body.client-side.tickets-page .portal-dashboard-priority-option--empty .portal-dashboard-priority-text,
body.client-side.tickets-page .portal-dashboard-priority-cb--no-data:disabled + .portal-dashboard-priority-text {
  opacity: 0.38 !important;
  filter: grayscale(1) brightness(0.72) !important;
  border: 1px dotted rgba(148, 163, 184, 0.42) !important;
  background: rgba(15, 23, 42, 0.55) !important;
  color: rgba(148, 163, 184, 0.7) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
  transform: none !important;
  text-shadow: none !important;
}

/* Deselezionata ma con dati: stato spento evidente */
body.client-side.tickets-page .portal-dashboard-priority-option[style*='--mp-prio-fill']:not(.portal-dashboard-priority-option--empty) .portal-dashboard-priority-cb:not(:checked):not(:disabled) + .portal-dashboard-priority-text {
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--mp-prio-fill) 38%, rgba(15, 23, 42, 0.88)) 0%,
    color-mix(in srgb, var(--mp-prio-fill) 18%, rgba(15, 23, 42, 0.94)) 100%
  ) !important;
  border: 1px dashed color-mix(in srgb, var(--mp-prio-border) 42%, rgba(148, 163, 184, 0.35)) !important;
  color: rgba(203, 213, 225, 0.58) !important;
  filter: grayscale(0.62) brightness(0.78) saturate(0.65) !important;
  opacity: 0.78 !important;
  box-shadow: none !important;
  transform: none !important;
  text-shadow: none !important;
}

body.client-side.tickets-page .portal-dashboard-priority-option[style*='--mp-prio-fill']:not(.portal-dashboard-priority-option--empty):hover .portal-dashboard-priority-cb:not(:checked):not(:disabled) + .portal-dashboard-priority-text {
  filter: grayscale(0.5) brightness(0.86) saturate(0.75) !important;
  opacity: 0.88 !important;
  border-color: color-mix(in srgb, var(--mp-prio-border) 52%, rgba(148, 163, 184, 0.4)) !important;
}

/* Touch target ≥44px su mobile/tablet */
@media screen and (max-width: 1024px) {
  body.client-side.tickets-page .portal-dashboard-priority-text {
    min-height: 2.75rem !important;
    padding: 0.42rem 1rem !important;
    font-size: 0.9rem !important;
  }
}

/*
 * Chip priorità: stessi colori del grafico a barre / legenda (priority_color DB + fallback urgenza).
 * Variabili impostate in tickets.inc.php da portal_dashboard_priority_style_map().
 */
body.client-side.tickets-page .portal-dashboard-priority-option[style*='--mp-prio-fill'] .portal-dashboard-priority-text {
  background: var(--mp-prio-fill);
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--mp-prio-fill) 88%, rgba(255, 255, 255, 0.06)) 0%,
    color-mix(in srgb, var(--mp-prio-fill) 42%, rgba(15, 23, 42, 0.72)) 100%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--mp-prio-border) 58%, transparent) !important;
  color: #f8fafc !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42) !important;
  -webkit-backdrop-filter: blur(12px) saturate(165%);
  backdrop-filter: blur(12px) saturate(165%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 4px 16px rgba(0, 0, 0, 0.36) !important;
}

body.client-side.tickets-page .portal-dashboard-priority-option[style*='--mp-prio-fill']:hover .portal-dashboard-priority-text {
  background: var(--mp-prio-fill);
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--mp-prio-fill) 94%, rgba(255, 255, 255, 0.1)) 0%,
    color-mix(in srgb, var(--mp-prio-fill) 48%, rgba(15, 23, 42, 0.68)) 100%
  ) !important;
  border-color: color-mix(in srgb, var(--mp-prio-border) 72%, transparent) !important;
  filter: brightness(1.08) saturate(1.05);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

body.client-side.tickets-page .portal-dashboard-priority-option[style*='--mp-prio-fill'] .portal-dashboard-priority-cb:checked + .portal-dashboard-priority-text {
  background: var(--mp-prio-fill);
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--mp-prio-fill) 96%, rgba(255, 255, 255, 0.1)) 0%,
    color-mix(in srgb, var(--mp-prio-fill) 58%, rgba(15, 23, 42, 0.78)) 100%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--mp-prio-border) 78%, transparent) !important;
  color: #ffffff !important;
  filter: none;
  transform: translateY(-1px);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 8px 24px rgba(0, 0, 0, 0.48),
    0 0 28px color-mix(in srgb, var(--mp-prio-fill) 38%, transparent) !important;
}

body.client-side.tickets-page .portal-dashboard-priority-option[style*='--mp-prio-fill']:hover .portal-dashboard-priority-cb:checked + .portal-dashboard-priority-text {
  background: var(--mp-prio-fill);
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--mp-prio-fill) 100%, rgba(255, 255, 255, 0.08)) 0%,
    color-mix(in srgb, var(--mp-prio-fill) 62%, rgba(15, 23, 42, 0.75)) 100%
  ) !important;
  filter: brightness(1.06) saturate(1.04);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 10px 28px rgba(0, 0, 0, 0.52),
    0 0 32px color-mix(in srgb, var(--mp-prio-fill) 42%, transparent) !important;
}

body.client-side.tickets-page .portal-dashboard-priority-option[style*='--mp-prio-fill'] .portal-dashboard-priority-cb:focus-visible + .portal-dashboard-priority-text {
  outline: 2px solid var(--mp-prio-border) !important;
  outline-offset: 3px !important;
}

@media (prefers-reduced-transparency: reduce) {
  body.client-side.tickets-page .portal-dashboard-priority-text {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}


/* ==========================================================================
   19. DASHBOARD — LEGGIBILITÀ (Fase 3, Punto 3)
       Correzione font-size sub-minimi (0.68–0.72rem ≈ 10–11px illeggibili)
       e colori caption/hint troppo tenui.
       Override mirati: nessuna modifica HTML/PHP.
   ========================================================================== */

/* Stats caption: era 0.72rem/color:#94a3b8 — troppo piccolo e troppo tenue */
body.client-side.tickets-page .portal-tickets-dashboard__stats-caption {
  font-size: 0.8rem !important;
  color: #a8b8cc !important;
}

/* Etichetta statistica generica (es. "Creati (anno)"): era 0.68rem */
body.client-side.tickets-page .portal-tickets-dashboard__stat-label {
  font-size: 0.76rem !important;
}

/* Etichetta nelle voci priorità (riga stat–status): era 0.78rem — aumenta leggermente */
body.client-side.tickets-page .portal-tickets-dashboard__stat--status .portal-tickets-dashboard__stat-label {
  font-size: 0.84rem !important;
}

/* Hint sotto i chip priorità: era 0.68rem/color:#94a3b8 */
body.client-side.tickets-page .portal-tickets-dashboard__priority-hint {
  font-size: 0.76rem !important;
  color: #a8b8cc !important;
  line-height: 1.5 !important;
}

/* Messaggio "nessun ticket": era 0.8rem/color:#94a3b8 */
body.client-side.tickets-page .portal-tickets-dashboard__status-empty {
  font-size: 0.84rem !important;
  color: #a8b8cc !important;
}

/* Stats container: più respiro interno */
body.client-side.tickets-page .portal-tickets-dashboard__stats {
  padding: 0.8rem 0.85rem !important;
}

/* Lead description: 0.875rem → 0.9rem; allineato a header centrato e larghezza piena sezione */
body.client-side.tickets-page .portal-tickets-dashboard__lead {
  font-size: 0.9rem !important;
  max-width: none !important;
  width: 100% !important;
  text-align: center !important;
}


/* ==========================================================================
   20. DASHBOARD — RESPONSIVE FILTRI (Fase 3, Punto 4)
       Il grid originale cambia layout solo a ≤640px: su tablet (641–900px)
       la sidebar rimane 232px, le chip di priorità si accalcano e i filtri
       risultano scomodi. Soluzione: colonna + filtri in riga a ≤900px,
       poi filtri in colonna a ≤480px (phone stretto).
   ========================================================================== */

/* — Tablet landscape/portrait ≤1024px ----------------------------------- */
@media screen and (max-width: 1024px) {

  /* Grid: grafico sopra, sidebar sotto (full width) */
  body.client-side.tickets-page .portal-tickets-dashboard__grid {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  body.client-side.tickets-page .portal-tickets-dashboard__sidebar {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;
  }

  /* Filtri: riga orizzontale (anno a sinistra, priorità a destra) */
  body.client-side.tickets-page .portal-tickets-dashboard__filters {
    /*flex-direction: row !important;
    align-items: flex-start !important;*/
    flex-wrap: wrap !important;
    gap: 0.75rem 1.5rem !important;
    margin-bottom: 0.65rem !important;
  }

  /* Anno: dimensione fissa, non cresce */
  body.client-side.tickets-page .portal-tickets-dashboard__year-form {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 110px !important;
    max-width: 160px !important;
  }

  /* Select anno: rispetta la larghezza del contenitore */
  body.client-side.tickets-page .portal-tickets-dashboard__year-select {
    min-width: 110px !important;
  }

  /* Priorità: prende lo spazio rimanente */
  body.client-side.tickets-page .portal-tickets-dashboard__priority-wrap {
    flex: 1 1 220px !important;
    min-width: 0 !important;
  }

  /* Chips già wrap-orizzontali da §18: si aprono naturalmente su larghezza piena */

  /* Stats box: già flex-wrap, funziona a qualsiasi larghezza */
}

/* — Phone stretto ≤480px -------------------------------------------------- */
@media screen and (max-width: 480px) {

  /* Filtri: torna in colonna su phone stretto */
  body.client-side.tickets-page .portal-tickets-dashboard__filters {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.85rem !important;
  }

  /* Anno: torna full-width */
  body.client-side.tickets-page .portal-tickets-dashboard__year-form {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body.client-side.tickets-page .portal-tickets-dashboard__priority-wrap {
    flex: 1 1 auto !important;
  }

  /* Grafico: altezza ridotta per lasciare spazio ai filtri senza scrollare troppo */
  body.client-side.tickets-page .portal-tickets-dashboard__chart-wrap {
    min-height: 240px !important;
  }

  /* Dashboard: padding laterale ridotto per guadagnare spazio */
  body.client-side.tickets-page .portal-tickets-dashboard {
    padding-left: 0.8rem !important;
    padding-right: 0.8rem !important;
  }
}

/* ==========================================================================
   21. HAMBURGER VISIBILE A 601–768px (richiesta utente — Fase 4 extra)
       Colma il gap tra smartphone (≤600px, hamburger attivo) e tablet (769px+,
       nav orizzontale). In questo intervallo il tema non mostra né hamburger né
       barra nav: questa sezione ripristina il drawer sidr e nasconde la nav strip.
   ========================================================================== */

@media screen and (min-width: 601px) and (max-width: 768px) {

  /* Mostra hamburger: target ≥44×44 px (WCAG 2.5.5) */
  body.client-side .c-hamburger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
  }

  /* Nasconde la barra nav orizzontale (troppo stretta per questa larghezza) */
  body.client-side #nav-wrapper,
  body.client-side #nav {
    display: none !important;
  }

  /* Abilita il drawer sidr */
  body.client-side #sidr-right {
    display: block !important;
  }

  /* Contenuto: offset solo dell'header fisso (nessuna nav strip) */
  body.client-side:not(.index-page) #content {
    padding-top: calc(
      var(--portal-fixed-header-below-safe, 66px) + env(safe-area-inset-top, 0px) + 14px
    ) !important;
  }

  /* scroll-padding coerente con l'offset header */
  html body.client-side {
    scroll-padding-top: calc(
      var(--portal-fixed-header-below-safe, 66px) + env(safe-area-inset-top, 0px) + 14px
    ) !important;
  }
}

/* Nav orizzontale 769–1024px: garantisce overflow visibile per evitare clipping voci */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  body.client-side #nav-wrapper {
    overflow: visible !important;
  }
  body.client-side #nav-inner {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.client-side #nav-inner::-webkit-scrollbar {
    display: none;
  }
  body.client-side #nav-inner #nav {
    flex-wrap: nowrap !important;
  }
}

/* ==========================================================================
   22. DETTAGLIO TICKET — Titolo e gerarchia visiva (Fase 4 punto 4)
       Distanza hint → h1: margin-bottom su .glass-portal-hint in client-open-view-glass.css.
       Migliora il numero ticket (<small>) e la leggibilità del soggetto.
   ========================================================================== */

/* h1: dimensione e spaziatura rinforzata */
body.client-side.tickets-page:not(:has(#check-ticket)) h1 {
  font-size: clamp(1.35rem, 2.8vw, 1.9rem) !important;
  margin-bottom: 1.5rem !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

/* Numero ticket (#123): muted, più piccolo */
body.client-side.tickets-page:not(:has(#check-ticket)) h1 small {
  display: inline-block !important;
  font-size: 0.72em !important;
  font-weight: 400 !important;
  color: rgba(148, 163, 184, 0.9) !important;
  -webkit-text-fill-color: rgba(148, 163, 184, 0.9) !important;
  letter-spacing: 0.04em !important;
  margin-top: 0.2rem !important;
}

/* Mobile ≤600px: titolo leggermente più compatto */
@media screen and (max-width: 600px) {
  body.client-side.tickets-page:not(:has(#check-ticket)) h1 {
    font-size: clamp(1.15rem, 5vw, 1.45rem) !important;
    margin-bottom: 1.25rem !important;
  }
}

/* ==========================================================================
   23. DETTAGLIO TICKET — infoTable-pair responsive (Fase 4 punto 3)
       La tabella a 4 colonne (label-a/value-a/label-b/value-b) diventa
       2 colonne (label | value) su schermi ≤768px (allineato al breakpoint smartphone
       di client-open-view-glass, così non vince il layout a blocchi 601–768px).
       client-open-view-glass.css gestisce già: glass bg, headline dark, contrasto.
   ========================================================================== */

@media screen and (max-width: 768px) {

  /* Tabella esterna: blocco a tutta larghezza (tbody = griglia dati sotto) */
  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair,
  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair thead {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* client-mobile.css: float su .infoTable th — va annullato qui o rompe la grid */
  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair th,
  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair td {
    float: none !important;
  }

  /* thead: stessa griglia 4 colonne del tbody — titoli allineati; testo centrato in ogni metà */
  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair thead tr {
    display: grid !important;
    grid-template-columns:
      minmax(4.25rem, 28vw) minmax(0, 1fr) minmax(4.25rem, 28vw) minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 0.4rem 0.45rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background-image: linear-gradient(
      135deg,
      rgba(36, 62, 98, 0.82) 0%,
      rgba(18, 34, 56, 0.72) 55%,
      rgba(12, 26, 48, 0.68) 100%
    ) !important;
    background-color: transparent !important;
  }

  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair thead td.headline {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 0.72rem 0.5rem !important;
    font-size: clamp(0.74rem, 2.5vw, 0.9rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    color: #d8ecff !important;
  }

  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair thead td.headline:first-child {
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
    justify-content: center !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair thead td.headline.headline-pair-right {
    grid-column: 3 / span 2 !important;
    grid-row: 1 !important;
    justify-content: center !important;
    border-top: none !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair tbody {
    display: grid !important;
    width: 100% !important;
    box-sizing: border-box !important;
    grid-template-columns:
      minmax(4.25rem, 28vw) minmax(0, 1fr) minmax(4.25rem, 28vw) minmax(0, 1fr) !important;
    gap: 0.4rem 0.45rem !important;
    padding: 0.15rem 0 !important;
  }

  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair tbody tr {
    display: contents !important;
  }

  /* Riga 1: stato | nome */
  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair tbody tr:nth-child(1) > th:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 0.45rem 0.35rem 0.2rem 0.65rem !important;
    border-top: none !important;
    align-self: start !important;
  }

  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair tbody tr:nth-child(1) > td:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0.45rem 0.5rem 0.2rem 0.25rem !important;
    border-top: none !important;
    min-width: 0 !important;
  }

  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair tbody tr:nth-child(1) > th:nth-child(3) {
    grid-column: 3 !important;
    grid-row: 1 !important;
    padding: 0.45rem 0.35rem 0.2rem 0.65rem !important;
    border-top: none !important;
    align-self: start !important;
  }

  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair tbody tr:nth-child(1) > td:nth-child(4) {
    grid-column: 4 !important;
    grid-row: 1 !important;
    padding: 0.45rem 0.65rem 0.2rem 0.25rem !important;
    border-top: none !important;
    min-width: 0 !important;
  }

  /* Riga 2: reparto | email */
  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair tbody tr:nth-child(2) > th:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 0.2rem 0.35rem 0.2rem 0.65rem !important;
    border-top: none !important;
    align-self: start !important;
  }

  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair tbody tr:nth-child(2) > td:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding: 0.2rem 0.5rem 0.2rem 0.25rem !important;
    border-top: none !important;
    min-width: 0 !important;
  }

  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair tbody tr:nth-child(2) > th:nth-child(3) {
    grid-column: 3 !important;
    grid-row: 2 !important;
    padding: 0.2rem 0.35rem 0.2rem 0.65rem !important;
    border-top: none !important;
    align-self: start !important;
  }

  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair tbody tr:nth-child(2) > td:nth-child(4) {
    grid-column: 4 !important;
    grid-row: 2 !important;
    padding: 0.2rem 0.65rem 0.2rem 0.25rem !important;
    border-top: none !important;
    min-width: 0 !important;
  }

  /* Riga 3: data creazione | telefono */
  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair tbody tr:nth-child(3) > th:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 3 !important;
    padding: 0.2rem 0.35rem 0.45rem 0.65rem !important;
    border-top: none !important;
    align-self: start !important;
  }

  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair tbody tr:nth-child(3) > td:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 3 !important;
    padding: 0.2rem 0.5rem 0.45rem 0.25rem !important;
    border-top: none !important;
    min-width: 0 !important;
  }

  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair tbody tr:nth-child(3) > th:nth-child(3) {
    grid-column: 3 !important;
    grid-row: 3 !important;
    padding: 0.2rem 0.35rem 0.45rem 0.65rem !important;
    border-top: none !important;
    align-self: start !important;
  }

  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair tbody tr:nth-child(3) > td:nth-child(4) {
    grid-column: 4 !important;
    grid-row: 3 !important;
    padding: 0.2rem 0.65rem 0.45rem 0.25rem !important;
    border-top: none !important;
    min-width: 0 !important;
  }

  

  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair tbody tr:nth-child(2) > th:nth-child(1),
  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair tbody tr:nth-child(2) > td:nth-child(2),
  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair tbody tr:nth-child(2) > th:nth-child(3),
  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair tbody tr:nth-child(2) > td:nth-child(4) {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }

  /* Nasconde il colgroup (irrilevante nel contesto block/grid) */
  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair colgroup {
    display: none !important;
  }

  /* Label (th): font ridotto per la colonna etichetta stretta */
  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair th {
    font-size: 0.68rem !important;
    color: #d8ecff !important;
    white-space: normal !important;
    letter-spacing: 0.04em !important;
  }

  /* Valore (td): font leggibile + wrap sicuro */
  body.client-side.tickets-page:not(:has(#check-ticket))
    #ticketInfo table.infoTable-pair td:not(.headline) {
    font-size: 0.875rem !important;
    word-break: break-word !important;
  }
}

/* ==========================================================================
   25. CALENDARIO FISCALE — Rifiniture accessibilità (Fase 4 punto 1)
       client-fiscal-calendar-glass.css gestisce già hero, toolbar, ricerca in modo
       completo. Qui micro-aggiustamenti: panel-title e field-hint con font minimo
       leggermente aumentato; lead hero con contrasto migliorato.
   ========================================================================== */

/* panel-title: da max(11px, 0.72rem) a max(12px, 0.74rem) */
body.client-side.fiscal-calendar-page .fiscal-panel-title {
  font-size: max(12px, 0.74rem) !important;
}

/* field-hint (contatore eventi): più leggibile */
body.client-side.fiscal-calendar-page .fiscal-field-hint {
  font-size: max(13px, 0.8rem) !important;
  color: #a8b8cc !important;
}

/* Hero lead: contrasto #bfcde0 su #131d31 ≈ 7.1:1 (AAA) */
body.client-side.fiscal-calendar-page .fiscal-cal-lead {
  color: #bfcde0 !important;
  font-size: clamp(0.9rem, 1.4vw, 1rem) !important;
  line-height: 1.6 !important;
}

/* Mobile ≤600px: hero più compatta */
@media screen and (max-width: 600px) {
  body.client-side.fiscal-calendar-page .fiscal-cal-hero {
    padding-bottom: 0.85rem !important;
  }
}

/* ==========================================================================
   26. REGISTER PAGE — Stile Liquid Glass (aggiunto a §14 per coerenza)
       register.inc.php usa <table class="padded"> con la stessa struttura di
       profile.inc.php. §14 copre profile/account/pwreset ma non register.
       Regole minime per coerenza grafica: stessa card glass, stessi input.
   ========================================================================== */

/* Sfondo e layout: stessa identità visiva di §14 */
body.client-side.register-page {
  min-height: 100vh;
  color: #f8fafc;
  background-color: #070f1a;
  background-image:
    radial-gradient(ellipse 100% 80% at 8% 12%, rgba(38, 120, 220, 0.42), transparent 58%),
    radial-gradient(ellipse 80% 70% at 92% 8%, rgba(130, 90, 240, 0.22), transparent 52%),
    linear-gradient(168deg, #0a1628 0%, #0e1b2e 38%, #121f33 100%);
}

body.client-side.register-page #content {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 1.5rem clamp(1rem, 3vw, 2rem) 3rem !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

body.client-side.register-page h1 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  font-size: clamp(1.28rem, 2.6vw, 1.72rem) !important;
  background: transparent !important;
  margin: 0 0 1.25rem !important;
}

/* Card glass per la tabella form */
body.client-side.register-page table.padded {
  width: 100% !important;
  max-width: 720px !important;
  background: rgba(18, 34, 56, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 14px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  overflow: hidden;
}

body.client-side.register-page table.padded td {
  padding: 0.7rem 1.1rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: rgba(248, 250, 252, 0.92) !important;
  vertical-align: middle !important;
}

body.client-side.register-page table.padded td:first-child:not([colspan]) {
  color: rgba(186, 201, 222, 0.92) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  white-space: nowrap;
  width: 11rem;
}

/* Input: stessi di §14 */
body.client-side.register-page input[type="text"],
body.client-side.register-page input[type="email"],
body.client-side.register-page input[type="password"],
body.client-side.register-page select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0.7rem 1rem !important;
  min-height: 46px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.22) !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 15px !important;
}

body.client-side.register-page input[type="submit"] {
  padding: 0.72rem 1.75rem !important;
  min-height: 46px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(140, 200, 255, 0.45) !important;
  background: linear-gradient(135deg, #1a6fd4 0%, #2b4fd8 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

body.client-side.register-page a {
  color: #93c5fd !important;
}

body.client-side.register-page .error {
  color: #fca5a5 !important;
}

@media screen and (max-width: 600px) {
  body.client-side.register-page table.padded {
    max-width: 100% !important;
  }

  body.client-side.register-page table.padded td {
    display: block !important;
    width: 100% !important;
  }

  body.client-side.register-page table.padded td:first-child:not([colspan]) {
    padding-bottom: 0.25rem !important;
    border-bottom: none !important;
    white-space: normal !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   27. FASE 5 — FORM FIELDS: coerenza Liquid Glass (Punto 1)
       client-desktop.css fissa width:431px e height:30px su input/select/textarea
       globalmente, rompendo il layout responsive sulle pagine dark del portale.
       Override mirato per le pagine dark dove non esiste già una regola specifica.
   ========================================================================== */

/*
 * Pagine dark senza regola specifica di input: evita lo sforamento da width:431px.
 * Non tocca profile/account/pwreset (gestiti da §14) né i form open/reply/fiscal
 * (gestiti da client-open-view-glass.css e client-fiscal-calendar-glass.css).
 * Targets principali: custom-data form entries nel dettaglio ticket, eventuali
 * form inline su pagine non ancora coperte.
 */
body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread input[type="text"],
body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread input[type="email"],
body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread select,
body.client-side.tickets-page:not(:has(#check-ticket)) #ticketThread textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-height: 40px !important;
  border-radius: 8px !important;
}

/* Messaggi di errore su pagine dark (battere client-desktop #d62705 su dark bg) */
body.client-side.view-page .error,
body.client-side.tickets-page:not(:has(#check-ticket)) .error,
body.client-side.fiscal-calendar-page .error {
  color: #fca5a5 !important;
}

/* Errori inline nelle maschere (span.error nei form del thread) */
body.client-side.tickets-page:not(:has(#check-ticket)) span.error {
  color: #fca5a5 !important;
  font-size: 0.85rem !important;
}

/* ==========================================================================
   28. FASE 5 — ICONE: sezioni chiave (Punto 4)
       Icone decorative SVG via ::before per migliorare la scansione visiva.
       Tutte aria-nascosti dal DOM: il testo rimane comprensibile senza icona.
       Font: non si usa FontAwesome per garantire indipendenza; SVG inline.
   ========================================================================== */

/* — Risposta: h2 "Post a Reply" ------------------------------------------- */
body.client-side.tickets-page:not(:has(#check-ticket)) #reply h2::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.45em;
  vertical-align: -0.15em;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8dcff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* — infoTable headline: "Basic Ticket Information" (prima .headline) ------- */
body.client-side.tickets-page:not(:has(#check-ticket))
  #ticketInfo thead td.headline:not(.headline-pair-right)::before {
  content: '';
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.4em;
  vertical-align: -0.12em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393c5fd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* — infoTable headline: "User Information" (seconda .headline) ------------- */
body.client-side.tickets-page:not(:has(#check-ticket))
  #ticketInfo thead td.headline.headline-pair-right::before {
  content: '';
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.4em;
  vertical-align: -0.12em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393c5fd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* — Profile/Register: h3 sezioni ------------------------------------------ */
body.client-side.profile-page table.padded h3::before,
body.client-side.account-page table.padded h3::before,
body.client-side.register-page table.padded h3::before {
  content: '';
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.4em;
  vertical-align: -0.08em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393c5fd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* — Calendario fiscale: sezione "Cerca e filtra" (panel-title) ------------- */
body.client-side.fiscal-calendar-page .fiscal-panel-title::before {
  content: '';
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.35em;
  vertical-align: -0.06em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393c5fd' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* — Ticket menubar: stato attivo via §41 (palette brand + aria-current). ----- */
/* Qui solo: riduzione impatto visivo del transform su reduced-motion */
@media (prefers-reduced-motion: reduce) {
  body.client-side.tickets-page .portal-tickets-page-menubar__link:active,
  body.client-side.index-page .portal-tickets-page-menubar__link:active {
    transform: none !important;
  }
}

/* ==========================================================================
   29. FASE 5 — AUDIT COLORI E TESTI (Punti 2 e 3)
       Revisione copy e contrasto su elementi residui non coperti altrove.
   ========================================================================== */

/* — Link generici su pagine dark (view, tickets-detail) -------------------- */
/* Esclusi .mp-fiscal-notice__link; toolbar lista ticket (bianco in portal-chrome) */
body.client-side.tickets-page:not(:has(#check-ticket)) #content a:not(.action-button):not([class*="btn"]):not(.mp-fiscal-notice__link):not(.portal-tickets-refresh):not(.portal-tickets-newlink):not(.state) {
  /*color: #93c5fd !important;*/
}

body.client-side.tickets-page:not(:has(#check-ticket)) #content a:not(.action-button):not([class*="btn"]):not(.mp-fiscal-notice__link):not(.portal-tickets-refresh):not(.portal-tickets-newlink):not(.state):hover {
  color: #bfdbfe !important;
  text-decoration: underline !important;
}

/* — "Risposta" intro text: leggibilità aumentata -------------------------- */
body.client-side.tickets-page:not(:has(#check-ticket)) #reply .reply-intro em {
  font-style: normal !important;
  color: rgba(186, 201, 222, 0.88) !important;
  font-size: 0.875rem !important;
}

/* — glass-portal-hint: tipografia e vetro definiti in client-open-view-glass.css
     (#content > p.glass-portal-hint); niente override globale font-size qui. ---  */

/* — Accordion guide: corpo distinto dal summary, coerente col glass portale ---- */
body.client-side .mp-guide {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border: 1.5px solid var(--mp-amber-border) !important;
  border-radius: 14px !important;
  background: var(--mp-amber-bg) !important;
  box-shadow: var(--mp-amber-glow) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

body.client-side .mp-guide__body {
  font-family: var(--glass-font-body, 'Montserrat', 'Segoe UI', system-ui, sans-serif) !important;
  font-size: var(--mp-guide-font-size, 0.875rem) !important;
  line-height: 1.65 !important;
  padding: 1.1rem 1.35rem 1.4rem 1.75rem !important;
  border-top: 1px solid var(--mp-guide-body-border-top) !important;
  background: var(--mp-guide-body-bg) !important;
  -webkit-backdrop-filter: blur(10px) saturate(130%) !important;
  backdrop-filter: blur(10px) saturate(130%) !important;
  box-shadow:
    inset 0 1px 0 var(--mp-guide-body-inset) !important,
    0 8px 26px rgba(12, 8, 4, 0.42) !important,
    0 0 0 1px rgba(245, 158, 11, 0.08) inset !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  color: rgba(255, 251, 235, 0.94) !important;
}

body.client-side .mp-guide__body p:first-child {
  color: var(--mp-amber-text-strong) !important;
}

body.client-side .mp-guide__body li strong {
  color: #fef3c7 !important;
}

body.client-side .mp-guide__body ul {
  margin-top: 0.7rem !important;
  margin-bottom: 1rem !important;
}

body.client-side .mp-guide__body li {
  margin-bottom: 0.5rem !important;
}

body.client-side .mp-guide__body p,
body.client-side .mp-guide__body ul,
body.client-side .mp-guide__body li,
body.client-side .mp-guide__body strong {
  font-size: inherit !important;
}

body.client-side .mp-guide summary {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-size: var(--mp-guide-font-size, 0.875rem) !important;
  font-weight: 500 !important;
  padding: 1rem 1.25rem !important;
  min-height: 48px !important;
  background: var(--mp-amber-bg) !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.32) !important;
  box-shadow: 0 1px 0 rgba(245, 158, 11, 0.12) inset !important;
  color: var(--mp-amber-text-strong) !important;
}

body.client-side .mp-guide:not([open]) summary {
  border-bottom: none !important;
}

body.client-side .mp-guide summary:hover {
  background: rgba(245, 158, 11, 0.16) !important;
  box-shadow: 0 1px 0 rgba(245, 158, 11, 0.2) inset !important;
}

body.client-side .mp-guide[open] summary {
  border-bottom-color: rgba(245, 158, 11, 0.38) !important;
}

/* — Placeholder su campi date fiscal-calendar: colore coerente ------------ */
body.client-side.fiscal-calendar-page .fiscal-field input[type="date"]::placeholder,
body.client-side.fiscal-calendar-page .fiscal-field input[type="text"]::placeholder {
  color: rgba(186, 201, 222, 0.72) !important;
  opacity: 1 !important;
}

/* — Messaggi notice/info su pagine dark: override del verde/grigio chiaro
     di client-desktop (#dff0d8 su sfondo scuro = illeggibile).
     Nota: view-page non è mai impostato come classe body (body usa tickets-page);
     si usa tickets-page:not(:has(#check-ticket)) che coincide con la vista ticket.
     #msg_warning è già gestito (glass amber) in client-open-view-glass.css.    --- */
body.client-side.tickets-page:not(:has(#check-ticket)) #msg_notice,
body.client-side.tickets-page:not(:has(#check-ticket)) #msg_info,
body.client-side.profile-page #msg_notice,
body.client-side.profile-page #msg_info {
  background: rgba(18, 48, 88, 0.72) !important;
  border: 1px solid rgba(125, 211, 252, 0.32) !important;
  border-right: 1px solid rgba(125, 211, 252, 0.32) !important;
  color: rgba(224, 240, 255, 0.96) !important;
  border-radius: var(--glass-radius-sm, 14px) !important;
  padding: 0.85rem 1.1rem 0.85rem 1.1rem !important;
  box-shadow: none !important;
  font-size: 15px !important;
  width: auto !important;
}

body.client-side.tickets-page:not(:has(#check-ticket)) #msg_error,
body.client-side.profile-page #msg_error {
  background: rgba(80, 14, 14, 0.72) !important;
  border: 1px solid rgba(252, 165, 165, 0.35) !important;
  border-right: 1px solid rgba(252, 165, 165, 0.35) !important;
  color: #fecaca !important;
  border-radius: var(--glass-radius-sm, 14px) !important;
  padding: 0.85rem 1.1rem !important;
  box-shadow: none !important;
  font-size: 15px !important;
  width: auto !important;
}

/* ==========================================================================
   30. FASE 5 — Guide portale, client-deets, dynamic-form label (PRD lotto apr 2026)
   ========================================================================== */

/* client-deets: regole spostate in client-open-view-glass.css (caricato dopo, bypass legacy) */

/* dynamic-form: font label minimo garantito su mobile (batte ereditarietà errata) */
body.client-side.open-page #ticketForm label span {
  font-size: max(14px, 0.875rem) !important;
}

/* ==========================================================================
   31. FASE 6 — Home: glass-news-inner header centrato (PRD lotto apr 2026)
       Il widget mp-comms-widget è stato rimosso da index.php (§15 svuotato).
       Qui si centra titolo e sottotitolo del blocco notizie per coerenza col
       resto della homepage.
   ========================================================================== */

body.client-side.index-page .glass-news-head {
  text-align: center !important;
  padding-bottom: 1.25rem !important;
}

body.client-side.index-page .glass-news-title {
  justify-content: center !important;
  text-wrap: balance !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.client-side.index-page .glass-news-lead {
  max-width: 620px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: rgba(186, 201, 222, 0.9) !important;
  font-size: clamp(0.875rem, 1.2vw, 0.95rem) !important;
  line-height: 1.6 !important;
}

/* Footnote: larghezza come elenco news (stesso contenitore), testo a sinistra per leggibilità */
body.client-side.index-page .glass-news-footnote {
  text-align: left !important;
  /*color: rgba(148, 163, 184, 0.75) !important;*/
  font-size: max(12px, 0.78rem) !important;
  margin-top: 1rem !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

@media screen and (max-width: 600px) {
  body.client-side.index-page .glass-news-lead {
    font-size: max(13px, 0.875rem) !important;
  }
}

/* ==========================================================================
   33. FASE 7.4 — CAMPANELLA HEADER: badge ticket in attesa (PRD lotto apr 2026)
       Pulsante campanella nella pull-right dell'header con badge numerico rosso.
       Click apre <dialog> nativo Liquid Glass con elenco ticket pendenti.
       Solo utenti loggati non-guest con ticket in attesa (PHP condizionale).
   ========================================================================== */

/* Pulsante campanella */
body.client-side .mp-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin-left: 0.45rem;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--mp-transition-fast), border-color var(--mp-transition-fast),
              box-shadow var(--mp-transition-fast);
  flex-shrink: 0;
}

body.client-side .mp-bell:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.12);
}

body.client-side .mp-bell:focus-visible {
  outline: 2px solid rgba(125, 211, 252, 0.85);
  outline-offset: 2px;
}

body.client-side .mp-bell svg {
  width: 16px;
  height: 16px;
  fill: rgba(203, 213, 225, 0.88);
  pointer-events: none;
  transition: fill var(--mp-transition-fast);
}

body.client-side .mp-bell:hover svg {
  fill: rgba(224, 242, 254, 0.95);
}

/* Badge numerico */
body.client-side .mp-bell__badge {
  position: absolute;
  top: -3px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  background: var(--mp-badge-bg, #ef4444);
  color: var(--mp-badge-text, #ffffff);
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border-radius: 999px;
  box-shadow: var(--mp-badge-glow, 0 0 8px rgba(239, 68, 68, 0.38));
  pointer-events: none;
  white-space: nowrap;
}

/* Badge fiscale (ambra, in basso a destra — parità visiva col badge ticket) */
body.client-side .mp-bell__fiscal-badge {
  position: absolute;
  bottom: -3px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  background: linear-gradient(145deg, #fbbf24 0%, #d97706 100%);
  color: #1a0f02;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border-radius: 999px;
  box-shadow:
    0 0 0 1.5px rgba(10, 22, 44, 0.92),
    0 0 10px rgba(245, 158, 11, 0.45);
  pointer-events: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Badge interventi (teal, in alto a sinistra) */
body.client-side .mp-bell__interventi-badge {
  position: absolute;
  top: -3px;
  left: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  background: linear-gradient(145deg, #2dd4bf 0%, #0f766e 100%);
  color: #ecfeff;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border-radius: 999px;
  box-shadow:
    0 0 0 1.5px rgba(10, 22, 44, 0.92),
    0 0 10px rgba(45, 212, 191, 0.4);
  pointer-events: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Dialog campanella: stile Liquid Glass */
#mp-bell-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 1.5rem));
  max-height: min(560px, 88dvh);
  padding: 0;
  margin: 0;
  background: rgba(10, 22, 44, 0.92);
  /* perf 2026-05-13: era 22px, ora token --glass-blur-2xl (24px std, 16px low-graphics, 0 reduced-transparency) */
  -webkit-backdrop-filter: blur(var(--glass-blur-2xl, 22px)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur-2xl, 22px)) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);
  color: #e2e8f0;
  overflow: hidden;
}

#mp-bell-dialog::backdrop {
  background: rgba(0, 0, 10, 0.52);
  /* perf 2026-05-13: aggiunto -webkit- per Safari (era solo standard) */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.mp-bell-dialog__inner {
  display: flex;
  flex-direction: column;
  height: min(560px, 88dvh);
  overflow: hidden;
}

.mp-bell-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  flex-shrink: 0;
}

.mp-bell-dialog__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mp-bell-dialog__title svg {
  width: 18px;
  height: 18px;
  fill: rgba(125, 211, 252, 0.92);
  flex-shrink: 0;
}

.mp-bell-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: rgba(203, 213, 225, 0.7);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--mp-transition-fast), color var(--mp-transition-fast);
}

.mp-bell-dialog__close:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #f1f5f9;
}

.mp-bell-dialog__close:focus-visible {
  outline: 2px solid rgba(125, 211, 252, 0.85);
  outline-offset: 2px;
}

/* Area scrollabile — contiene tutto il contenuto sotto l'header */
.mp-bell-dialog__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.75rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

/* Pannelli sezione (ticket / fiscale) */
.mp-bell-dialog__panel {
  position: relative;
  overflow: hidden;
  margin: 0 0.85rem;
  padding: 0.55rem 0 0.65rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.mp-bell-dialog__panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--mp-bell-section-accent, rgba(148, 163, 184, 0.55));
  opacity: 0.95;
  pointer-events: none;
}

.mp-bell-dialog__panel--tickets {
  --mp-bell-section-accent: linear-gradient(180deg, rgba(248, 113, 113, 0.95), rgba(153, 27, 27, 0.9));
  --mp-bell-section-row-hover: rgba(239, 68, 68, 0.13);
}

.mp-bell-dialog__panel--fiscal {
  --mp-bell-section-accent: linear-gradient(180deg, rgba(251, 191, 36, 0.98), rgba(180, 83, 9, 0.9));
  --mp-bell-section-row-hover: rgba(245, 158, 11, 0.14);
}

.mp-bell-dialog__panel--interventi {
  --mp-bell-section-accent: linear-gradient(180deg, rgba(45, 212, 191, 0.95), rgba(15, 118, 110, 0.9));
  --mp-bell-section-row-hover: rgba(20, 184, 166, 0.14);
}

.mp-bell-dialog__panel-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.85rem 0.45rem;
  margin-bottom: 0.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mp-bell-dialog__panel-accent {
  flex-shrink: 0;
  width: 4px;
  height: 1.15rem;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.5);
}

.mp-bell-dialog__panel-accent--ticket {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.95), rgba(14, 165, 233, 0.65));
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

.mp-bell-dialog__panel-accent--fiscal {
  background: linear-gradient(180deg, #fbbf24, #d97706);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.28);
}

.mp-bell-dialog__panel-accent--interventi {
  background: linear-gradient(180deg, #2dd4bf, #0f766e);
  box-shadow: 0 0 12px rgba(45, 212, 191, 0.28);
}

.mp-bell-dialog__panel .mp-bell-dialog__section-title {
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(203, 213, 225, 0.88);
}

.mp-bell-dialog__panel--fiscal .mp-bell-dialog__section-title {
  color: rgba(254, 243, 199, 0.88);
}

.mp-bell-dialog__panel--interventi .mp-bell-dialog__section-title {
  color: rgba(204, 251, 241, 0.92);
}

/* Lista ticket pendenti */
.mp-bell-dialog__list {
  list-style: none;
  margin: 0;
  padding: 0.15rem 0 0.05rem;
}

.mp-bell-dialog__item + .mp-bell-dialog__item {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mp-bell-dialog__link {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  padding: 0.75rem 1.35rem;
  color: #cbd5e1;
  text-decoration: none;
  transition: background var(--mp-transition-fast), color var(--mp-transition-fast);
}

.mp-bell-dialog__link:hover {
  background: rgba(56, 189, 248, 0.12);
  color: #e0f2fe;
  text-decoration: none;
}

.mp-bell-dialog__num {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(125, 211, 252, 0.9);
  min-width: 3.6rem;
}

.mp-bell-dialog__subject {
  font-size: 0.9rem;
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Mobile ≤480px */
@media screen and (max-width: 480px) {
  #mp-bell-dialog {
    width: calc(100vw - 1rem);
    max-height: min(520px, 90dvh);
    border-radius: 16px;
    top: auto;
    bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
    transform: translateX(-50%);
  }

  .mp-bell-dialog__inner {
    height: min(520px, 90dvh);
  }
}

/* ==========================================================================
   34. FASE 7.5 — HAMBURGER TABLET: fix drawer sidr 601–768px
       (PRD lotto apr 2026)
       §21 già abilita il drawer in questo intervallo. Il drawer si chiudeva
       "a metà" perché height era calcolata con 100vh (esclude la UI chrome
       dei browser mobile) e overflow-y non era garantito.
       Fix: 100dvh + overflow-y:auto + position:fixed forzato + overlay
       full-viewport.
   ========================================================================== */

@media screen and (min-width: 601px) and (max-width: 768px) {
  /* Drawer sidr: altezza intera del viewport reale, scroll interno */
  #sidr-right.sidr {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: fixed !important;
    top: 0 !important;
    /* Stato chiuso: fuori dallo schermo; Sidr imposta right:0 inline quando apre */
    right: -100vw;
    right: -100dvw;
    bottom: 0 !important;
  }

  /* Overlay sidr: deve coprire l'intero viewport */
  #sidr-overlay {
    height: 100dvh !important;
    min-height: 100dvh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    z-index: 999998 !important;
  }

  /* Contenuto interno: scroll corretto senza altezza fissa */
  #sidr-right .sidr-inner {
    min-height: 100%;
    overflow-y: visible;
    overflow-x: hidden;
  }
}

/* ==========================================================================
   35. LOGIN PAGE — Blocca comportamento osticket.js al submit del form
       (PRD lotto apr 2026)
       osticket.js (riga 46-61) su ogni submit:
         1. clona il pulsante submit (disabled) nella posizione originale
         2. sposta l'originale in cima al form con form.prepend() + .hide()
         3. mostra #overlay e #loading (rotella)
       Il nostro CSS ha display:block !important su input[type=submit] che
       sovrascrive il jQuery .hide() → il pulsante originale rimane visibile
       in cima al form (sopra le due card), creando il "raddoppio" visivo.
       Fix: tre override CSS mirati solo sulla login-page.
   ========================================================================== */

/* 1. Nasconde il pulsante submit dopo che JS lo ha spostato in cima al form.
      Il selettore figlio diretto (>) matcha solo nella nuova posizione
      (figlio diretto di #clientLogin); nella posizione originale il pulsante
      è annidato dentro #login-sign-in e questo selettore NON matcha. */
body.client-side.login-page #clientLogin > input[type="submit"] {
  display: none !important;
  visibility: hidden !important;
}

/* 2. Nasconde overlay e rotella di caricamento sulla login-page.
      Il redirect post-login è immediato (HTTP redirect server-side)
      quindi la rotella non aggiunge valore e causa confusione visiva. */
body.client-side.login-page #overlay,
body.client-side.login-page #loading {
  display: none !important;
}

/* ==========================================================================
   36. NAV — Badge scadenze fiscali imminenti (30 gg) + dot campanella fiscale
       PRD-FISCALE Fase 1 + Fase 3
   ========================================================================== */

/*
 * Conteggi nav — micro-chip liquid glass (stesso linguaggio di #nav li a.active in client-portal-chrome-glass):
 * gradiente, riflesso soft-light, bordo luminoso, blur leggero.
 */
.mp-nav-fiscal-badge,
.mp-nav-interventi-badge {
  /* inline-grid + place-items: centra la cifra nel pill meglio di inline-flex (metriche font / baseline) */
  display: inline-grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  margin-left: 0.38em;
  /* Padding solo orizzontale: altezza fissa + grid centrano la cifra */
  padding: 0 0.45em;
  min-width: 1.35rem;
  min-height: 1.35rem;
  height: 1.35rem;
  box-sizing: border-box;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
  pointer-events: none;
  isolation: isolate;
  -webkit-backdrop-filter: blur(10px) saturate(170%);
  backdrop-filter: blur(10px) saturate(170%);
}

.mp-nav-fiscal-badge::before,
.mp-nav-interventi-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.38) 0%,
    rgba(255, 255, 255, 0.1) 38%,
    transparent 58%
  );
  opacity: 0.82;
  mix-blend-mode: soft-light;
}

/* Pianificazione — teal / acqua (armonizza con CTA vetro portale) */
.mp-nav-interventi-badge {
  color: #ecfeff;
  text-shadow: 0 1px 2px rgba(0, 20, 28, 0.5);
  border: 1px solid rgba(165, 243, 252, 0.45);
  background: linear-gradient(
    158deg,
    rgba(110, 231, 216, 0.42) 0%,
    rgba(34, 150, 168, 0.34) 44%,
    rgba(12, 78, 92, 0.55) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.26) inset,
    0 0 0 1px rgba(45, 212, 191, 0.18) inset,
    0 4px 14px rgba(0, 32, 40, 0.42),
    0 1px 3px rgba(0, 12, 24, 0.35);
}

/* Calendario fiscale — ambra / champagne */
.mp-nav-fiscal-badge {
  color: #fffbeb;
  text-shadow: 0 1px 2px rgba(40, 22, 0, 0.48);
  border: 1px solid rgba(253, 230, 138, 0.48);
  background: linear-gradient(
    158deg,
    rgba(253, 224, 71, 0.44) 0%,
    rgba(202, 138, 40, 0.36) 42%,
    rgba(100, 55, 18, 0.58) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 0 0 1px rgba(251, 191, 36, 0.16) inset,
    0 4px 14px rgba(48, 28, 0, 0.4),
    0 1px 3px rgba(24, 12, 0, 0.38);
}

/* Voce attiva: il chip conteggio resta leggibile sul gradiente blu del link */
body.client-side #nav-inner #nav li a.active .mp-nav-interventi-badge {
  border-color: rgba(200, 250, 255, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.32) inset,
    0 0 0 1px rgba(120, 220, 255, 0.22) inset,
    0 5px 16px rgba(0, 40, 72, 0.5),
    0 0 12px rgba(56, 189, 200, 0.25);
}

body.client-side #nav-inner #nav li a.active .mp-nav-fiscal-badge {
  border-color: rgba(255, 248, 220, 0.58);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.34) inset,
    0 0 0 1px rgba(255, 215, 120, 0.22) inset,
    0 5px 16px rgba(40, 24, 0, 0.48),
    0 0 12px rgba(251, 191, 36, 0.22);
}

/* Tablet e mobile: assicura che il badge non vada a capo */
#nav a.fiscal {
  white-space: nowrap;
}

#nav a.interventi {
  white-space: nowrap;
}

body.client-side #nav-inner #nav li a .mp-nav-fiscal-badge,
body.client-side #nav-inner #nav li a .mp-nav-interventi-badge {
  align-self: center;
}

/* Due badge (ticket TR + fiscale BR): nessun offset extra — il fiscale è sempre bottom-right */
body.client-side .mp-bell.mp-bell--dual-badges .mp-bell__badge {
  z-index: 2;
}
body.client-side .mp-bell.mp-bell--dual-badges .mp-bell__fiscal-badge {
  z-index: 1;
}
body.client-side .mp-bell.mp-bell--triple-badges .mp-bell__badge {
  z-index: 3;
}
body.client-side .mp-bell.mp-bell--triple-badges .mp-bell__fiscal-badge {
  z-index: 2;
}
body.client-side .mp-bell.mp-bell--triple-badges .mp-bell__interventi-badge {
  z-index: 1;
}

/* ==========================================================================
   37. FISCAL CALENDAR — Banner avviso 7 giorni imminenti
       PRD-FISCALE Fase 2
   ========================================================================== */

/* Banner contenitore */
.mp-fiscal-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: var(--glass-radius-sm, 0.75rem);
  background: rgba(120, 53, 15, 0.28);     /* amber-900 glass */
  border: 1px solid rgba(251, 191, 36, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mp-fiscal-notice__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: #fbbf24;
  fill: #fbbf24;
  margin-top: 0.1rem;
}

.mp-fiscal-notice__body {
  flex: 1;
  min-width: 0;
}

.mp-fiscal-notice__title {
  margin: 0 0 0.35rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: rgba(254, 243, 199, 0.98);  /* amber-100 */
  line-height: 1.3;
}

.mp-fiscal-notice__subtitle {
  margin: 0 0 0.6rem;
  font-size: 0.8125rem;
  color: rgba(254, 243, 199, 0.75);
}

.mp-fiscal-notice__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.mp-fiscal-notice__item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: rgba(254, 243, 199, 0.92);
}

.mp-fiscal-notice__date {
  flex-shrink: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fbbf24;
  min-width: 5.5em;
}

.mp-fiscal-notice__link {
  color: rgba(254, 243, 199, 0.92);
  text-decoration: underline;
  text-decoration-color: rgba(251, 191, 36, 0.55);
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.mp-fiscal-notice__link:hover,
.mp-fiscal-notice__link:focus {
  color: #fbbf24;
  text-decoration-color: #fbbf24;
}

/* Responsive */
@media (max-width: 480px) {
  .mp-fiscal-notice {
    flex-direction: column;
    gap: 0.5rem;
  }
  .mp-fiscal-notice__item {
    flex-direction: column;
    gap: 0.1rem;
  }
}

/* Lista ticket: banner interventi pieno (`.mp-fiscal-notice`); stato vuoto → `mp-pending-banner` in tickets.inc.php */
.mp-interventi-tickets-banner {
  margin: 0 0 1.1rem;
}
.mp-interventi-tickets-banner__cta {
  margin: 0.55rem 0 0;
}

/* ==========================================================================
   38. CAMPANELLA — Sezione scadenze fiscali nel dialog
       PRD-FISCALE Fase 3
   ========================================================================== */

/* Separatore legacy (hr tra sezioni) — mantenuto se riusato altrove */
.mp-bell-dialog__section-sep {
  border: none;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  margin: 0.75rem 1.35rem;
}

/* Footer CTA nei pannelli (ticket / fiscale): respiro dai bordi del vetro */
.mp-bell-dialog__panel-cta {
  margin: 0.45rem 0 0;
  padding: 0.85rem 1rem 1rem;
  border-top: 1px dashed rgba(148, 163, 184, 0.22);
}

.mp-bell-dialog__panel-cta--ticket {
  border-top-color: rgba(56, 189, 248, 0.28);
}

.mp-bell-dialog__panel-cta--fiscal {
  border-top-color: rgba(251, 191, 36, 0.28);
}

.mp-bell-dialog__panel-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  margin: 0;
  transition: background 0.15s, color 0.15s;
}

.mp-bell-dialog__panel-cta-link--ticket {
  color: rgba(125, 211, 252, 0.95);
}
.mp-bell-dialog__panel-cta-link--ticket:hover,
.mp-bell-dialog__panel-cta-link--ticket:focus {
  background: rgba(56, 189, 248, 0.14);
  color: #e0f2fe;
  text-decoration: none;
}
.mp-bell-dialog__panel-cta-link--ticket:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.55);
  outline-offset: 2px;
}

.mp-bell-dialog__panel-cta-link--fiscal {
  color: #fbbf24;
}
.mp-bell-dialog__panel-cta-link--fiscal:hover,
.mp-bell-dialog__panel-cta-link--fiscal:focus {
  background: rgba(245, 158, 11, 0.12);
  color: #fde68a;
  text-decoration: none;
}
.mp-bell-dialog__panel-cta-link--fiscal:focus-visible {
  outline: 2px solid rgba(251, 191, 36, 0.65);
  outline-offset: 2px;
}

/* Titolo sezione standalone (fuori da .mp-bell-dialog__panel) */
.mp-bell-dialog__section-title {
  margin: 0 0 0.4rem;
  padding: 0 1.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.82);
}

/* Lista scadenze fiscali nel dialog */
.mp-bell-dialog__fiscal-list {
  list-style: none;
  margin: 0;
  padding: 0.15rem 0 0.05rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mp-bell-dialog__fiscal-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.875rem;
  padding: 0.65rem 0.85rem;
  margin: 0;
  border-radius: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.mp-bell-dialog__fiscal-item + .mp-bell-dialog__fiscal-item {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.mp-bell-dialog__fiscal-item:hover {
  background: var(--mp-bell-section-row-hover, rgba(34, 211, 238, 0.12));
}

.mp-bell-dialog__fiscal-date {
  flex-shrink: 0;
  font-weight: 600;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
  min-width: 4.5em;
}

.mp-bell-dialog__fiscal-link {
  color: rgba(203, 213, 225, 0.88);
  text-decoration: none;
  transition: color 0.15s;
  line-height: 1.35;
}
.mp-bell-dialog__fiscal-link:hover,
.mp-bell-dialog__fiscal-link:focus {
  color: #fbbf24;
  text-decoration: underline;
}

.mp-bell-dialog__fiscal-link--text {
  color: rgba(203, 213, 225, 0.88);
  text-decoration: none;
}

/* Allinea padding liste ai pannelli ticket */
.mp-bell-dialog__panel--tickets .mp-bell-dialog__link {
  padding: 0.65rem 0.85rem;
}
.mp-bell-dialog__panel--tickets .mp-bell-dialog__item + .mp-bell-dialog__item {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Aggiunge titolo alle due sezioni nel dialog esistente */
.mp-bell-dialog__inner > header .mp-bell-dialog__section-title {
  margin-top: 0;
}

/* ==========================================================================
   39. CHAT ASSISTENZA — Pannello floating UI (solo grafica)
       PRD-FISCALE Fase 4
   ========================================================================== */

/* ── Pulsante trigger chat ────────────────────────────────────────────────
   56×56px, angoli 16px; margine safe-area come gli altri controlli floating.
   Colore: rosso chiaro — distingue l'azione "chat".
   ──────────────────────────────────────────────────────────────────────── */
@keyframes mp-btn-enter {
  from { opacity: 0; transform: scale(0.45); }
  to   { opacity: 1; transform: scale(1); }
}

/* Portale: Kimi non attivo per questa org / chiave assente — niente trigger in DOM (rete su JS/CSS cache). */
body[data-mp-logged="1"]:not([data-mp-assist-chat="1"]) .mp-chat-trigger,
body[data-mp-logged="1"]:not([data-mp-assist-chat="1"]) .mp-chat-backdrop,
body[data-mp-logged="1"]:not([data-mp-assist-chat="1"]) .mp-chat-panel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.mp-chat-trigger {
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  right: max(24px, env(safe-area-inset-right, 0px));
  z-index: 9990;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: none;
  background: var(--mp-chat-bg);
  box-shadow: var(--mp-chat-shadow);
  color: #ffffff;
  cursor: pointer;
  /* nascosto di default — mostrato via JS con classe is-visible */
  display: none;
  align-items: center;
  justify-content: center;
  transition: box-shadow var(--mp-transition-fast), transform 0.12s ease;
}
.mp-chat-trigger.is-visible {
  display: flex;
  animation: mp-btn-enter 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s both;
}
.mp-chat-trigger:hover {
  box-shadow: var(--mp-chat-hover-shadow);
  transform: translateY(-2px);
}
.mp-chat-trigger:active {
  transform: translateY(0) scale(0.96);
}
.mp-chat-trigger:focus-visible {
  outline: 2px solid #fca5a5;   /* rosso chiaro WCAG AA su sfondo scuro */
  outline-offset: 3px;
}
.mp-chat-trigger svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

/* Backdrop: sotto trigger/panel; chiude al tap (vedi JS) */
.mp-chat-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9988;
  background: rgba(2, 6, 23, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
.mp-chat-backdrop.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.22s ease, visibility 0s linear 0s;
}

/* ── Pannello chat floating ───────────────────────────────────────────────
   Sopra il pulsante trigger (altezza trigger + gap).
   Corpo scrollabile (min-height:0) + composer fisso in basso.
   ──────────────────────────────────────────────────────────────────────── */
.mp-chat-panel {
  /* Tipografia leggibile (portale clienti PMI) */
  --mp-chat-font-size: 0.875rem;
  --mp-chat-line-height: 1.45;
  --mp-chat-bubble-weight: 500;
  position: fixed;
  bottom: calc(max(24px, env(safe-area-inset-bottom, 0px)) + 56px + 12px);
  right: max(24px, env(safe-area-inset-right, 0px));
  z-index: 9992;
  width: clamp(300px, 92vw, 560px);
  max-width: calc(100vw - max(40px, calc(env(safe-area-inset-right, 0px) * 2 + 40px)));
  height: min(76vh, 600px);
  max-height: min(76vh, 600px);
  border-radius: 1rem;
  background: rgba(10, 22, 44, 0.94);
  border: 1px solid rgba(99, 179, 237, 0.22);
  box-shadow: 0 20px 56px rgba(0,0,0,0.72), 0 0 0 1px rgba(148,163,184,0.1) inset;
  /* perf 2026-05-13: era 22px, ora token --glass-blur-2xl */
  -webkit-backdrop-filter: blur(var(--glass-blur-2xl, 22px)) saturate(1.45);
  backdrop-filter: blur(var(--glass-blur-2xl, 22px)) saturate(1.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 0.22s ease, transform 0.22s ease,
              visibility 0s linear 0.22s;
}
.mp-chat-panel.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition: opacity 0.22s ease, transform 0.22s ease,
              visibility 0s linear 0s;
}

@media (min-width: 768px) {
  .mp-chat-panel {
    --mp-chat-font-size: 0.9375rem;
    --mp-chat-line-height: 1.5;
  }
}

.mp-chat-panel__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  flex-shrink: 0;
}
.mp-chat-panel__head-text {
  flex: 1;
  min-width: 0;
}
.mp-chat-panel__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(56, 120, 200, 0.95), rgba(14, 42, 82, 0.92));
  border: 1px solid rgba(168, 220, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.mp-chat-panel__title {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(248, 250, 252, 0.98);
  line-height: 1.25;
}
.mp-chat-panel__subtitle {
  margin-top: 0.12rem;
  font-size: 0.62rem;
  color: rgba(148, 163, 184, 0.82);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-chat-panel__head-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  position: relative;
  /* Stessa altezza per «Nuova chat» e chiudi */
  --mp-chat-head-action-h: 2rem;
}
.mp-chat-panel__resolved {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: var(--mp-chat-head-action-h);
  min-height: var(--mp-chat-head-action-h);
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(52, 211, 153, 0.35);
  background: rgba(16, 185, 129, 0.15);
  color: rgba(167, 243, 208, 0.95);
  font-family: inherit;
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s, background 0.15s;
}
.mp-chat-panel__resolved:hover:not(:disabled) {
  background: rgba(16, 185, 129, 0.28);
  color: #ecfdf5;
}
.mp-chat-panel__resolved:not(.is-available) {
  display: none !important;
}
.mp-chat-panel__overflow-item[data-mp-chat-action="resolved"]:not(.is-available) {
  display: none !important;
}
.mp-chat-panel__resolved.is-done {
  opacity: 0.72;
  cursor: default;
}
.mp-chat-panel__ticket-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  height: var(--mp-chat-head-action-h, 2rem);
  min-height: var(--mp-chat-head-action-h, 2rem);
  padding: 0 0.55rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(96, 178, 255, 0.45);
  background: rgba(30, 64, 120, 0.55);
  color: #e8f4ff;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 650;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.mp-chat-panel__ticket-btn:hover {
  background: rgba(40, 84, 150, 0.72);
  border-color: rgba(147, 197, 253, 0.65);
  color: #fff;
}
.mp-chat-panel__ticket-btn--inline {
  display: flex;
  width: 100%;
  margin-top: 0.65rem;
  min-height: 2.1rem;
  font-size: 0.78rem;
}
.mp-chat-panel__head-secondary {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}
.mp-chat-panel__overflow {
  appearance: none;
  -webkit-appearance: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--mp-chat-head-action-h, 2rem);
  height: var(--mp-chat-head-action-h, 2rem);
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.45);
  color: rgba(226, 232, 240, 0.95);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.mp-chat-panel__overflow-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 2.6rem;
  z-index: 3;
  min-width: 9.5rem;
  padding: 0.35rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(10, 22, 44, 0.98);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.mp-chat-panel__overflow-item {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.55rem;
  border: none;
  border-radius: 0.4rem;
  background: transparent;
  color: rgba(241, 245, 249, 0.96);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.mp-chat-panel__overflow-item:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.22);
}
.mp-chat-panel__overflow-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.mp-chat-head--mobile {
  display: none;
}
.mp-chat-panel__support-slot {
  flex-shrink: 0;
}
.mp-chat-panel__support-banner {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(254, 226, 226, 0.96);
  background: linear-gradient(90deg, rgba(127, 29, 29, 0.55), rgba(69, 10, 10, 0.35));
  border-bottom: 1px solid rgba(248, 113, 113, 0.28);
}
.mp-chat-panel__support-banner strong {
  font-size: 0.74rem;
  font-weight: 700;
  color: #fecaca;
}
.mp-chat-panel__starter-bar {
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}
.mp-chat-panel__starter-label {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(186, 201, 222, 0.9);
}
.mp-chat-panel__starter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}
.mp-chat-panel__starter-chip {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  padding: 0.34rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.38);
  background: rgba(30, 58, 95, 0.45);
  color: rgba(224, 242, 254, 0.96);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mp-chat-panel__starter-chip:hover {
  background: rgba(59, 130, 246, 0.32);
  border-color: rgba(147, 197, 253, 0.55);
}
.mp-chat-panel__starter-chip:focus-visible {
  outline: 2px solid rgba(147, 197, 253, 0.85);
  outline-offset: 2px;
}
.mp-chat-panel__chip--other {
  border-style: dashed;
  background: rgba(51, 65, 85, 0.42);
}
.mp-chat-panel__hint-session {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.68rem;
  color: rgba(148, 163, 184, 0.88);
}
.mp-chat-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.mp-chat-panel__resolved:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mp-chat-panel__resolved:focus-visible {
  outline: 2px solid #6ee7b7;
  outline-offset: 2px;
}
.mp-chat-panel__new-chat {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 0.5rem;
  color: rgba(226, 232, 240, 0.92);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  height: var(--mp-chat-head-action-h);
  min-height: var(--mp-chat-head-action-h);
  max-height: var(--mp-chat-head-action-h);
  padding: 0 0.58rem;
  box-sizing: border-box;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, border-color 0.15s, opacity 0.15s;
}
.mp-chat-panel__new-chat-icon {
  display: block;
  flex-shrink: 0;
  opacity: 0.92;
}
.mp-chat-panel__new-chat-label {
  display: inline-block;
}
.mp-chat-panel__new-chat:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(148, 163, 184, 0.32);
}
.mp-chat-panel__new-chat:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}
.mp-chat-panel__new-chat:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.mp-chat-panel__close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.15);
  cursor: pointer;
  color: rgba(226, 232, 240, 0.88);
  width: var(--mp-chat-head-action-h);
  height: var(--mp-chat-head-action-h);
  min-width: var(--mp-chat-head-action-h);
  min-height: var(--mp-chat-head-action-h);
  padding: 0;
  border-radius: 0.5rem;
  box-sizing: border-box;
  line-height: 1;
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.mp-chat-panel__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(148, 163, 184, 0.28);
}
.mp-chat-panel__close:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

/* Corpo: colonna flex con area messaggi che scrolla */
.mp-chat-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mp-chat-panel__messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.62rem 0.78rem 0.72rem;
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
  scroll-behavior: smooth;
  font-size: var(--mp-chat-font-size);
  line-height: var(--mp-chat-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.mp-chat-panel__messages::-webkit-scrollbar { width: 5px; }
.mp-chat-panel__messages::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,0.28);
  border-radius: 3px;
}

.mp-chat-panel__composer {
  flex-shrink: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(2, 6, 23, 0.35);
}

/* Bolle messaggi */
.mp-chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 90%;
}
.mp-chat-msg--agent { align-self: flex-start; }
.mp-chat-msg--client { align-self: flex-end; }

.mp-chat-msg__label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.75);
  margin-bottom: 0.18rem;
}
.mp-chat-msg--agent .mp-chat-msg__label {
  color: rgba(168, 220, 255, 0.88);
}
.mp-chat-msg--client .mp-chat-msg__label { text-align: right; }

/* Chip follow-up sotto le risposte Kimi (dopo messaggio completo; mai sul benvenuto) */
@keyframes mp-chat-followups-appear {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.mp-chat-msg__followups {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.4rem 0 0.05rem;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  max-width: 100%;
  opacity: 0;
  transform: translateY(10px);
  will-change: opacity, transform;
}
.mp-chat-msg__followups.mp-chat-msg__followups--in {
  animation: mp-chat-followups-appear 0.42s cubic-bezier(0.25, 0.82, 0.35, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .mp-chat-msg__followups {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  .mp-chat-msg__followups.mp-chat-msg__followups--in {
    animation: none;
  }
}
/* CTA secondarie: pill vetro ambra — più leggibili e coerenti col pannello (.mp-chat-panel) */
.mp-chat-msg__followup-btn {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: max(0.75rem, calc(var(--mp-chat-font-size, 0.734375rem) * 1.02));
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
  padding: 0.45rem 0.95rem;
  min-height: 2.1rem;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.5);
  color: #fffbeb;
  text-shadow: 0 1px 2px rgba(0, 6, 20, 0.45);
  background: linear-gradient(
    165deg,
    rgba(251, 191, 36, 0.28) 0%,
    rgba(180, 83, 9, 0.22) 38%,
    rgba(15, 23, 42, 0.78) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 0 0 1px rgba(251, 191, 36, 0.1) inset,
    0 4px 16px rgba(0, 4, 18, 0.45),
    0 0 24px rgba(251, 191, 36, 0.14);
  -webkit-backdrop-filter: blur(12px) saturate(1.45);
  backdrop-filter: blur(12px) saturate(1.45);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.15s ease,
    color 0.15s ease;
}
.mp-chat-msg__followup-btn:hover:not(:disabled) {
  color: #fff;
  border-color: rgba(253, 224, 71, 0.75);
  background: linear-gradient(
    165deg,
    rgba(253, 224, 71, 0.38) 0%,
    rgba(217, 119, 6, 0.3) 40%,
    rgba(30, 41, 59, 0.85) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 0 0 1px rgba(253, 224, 71, 0.18) inset,
    0 6px 22px rgba(0, 8, 28, 0.5),
    0 0 32px rgba(251, 191, 36, 0.22);
  transform: translateY(-1px);
}
.mp-chat-msg__followup-btn:active:not(:disabled) {
  transform: translateY(0);
}
.mp-chat-msg__followup-btn:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.95);
  outline-offset: 2px;
}
.mp-chat-msg__followup-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: saturate(0.85);
}
@media (prefers-reduced-transparency: reduce) {
  .mp-chat-msg__followup-btn {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(165deg, #b45309 0%, #78350f 48%, #1e293b 100%);
  }
  .mp-chat-msg__followup-btn:hover:not(:disabled) {
    background: linear-gradient(165deg, #d97706 0%, #92400e 45%, #334155 100%);
  }
}
@media (max-width: 380px) {
  .mp-chat-msg__followup-btn {
    font-size: max(0.7rem, calc(var(--mp-chat-font-size, 0.734375rem) * 0.95));
    padding: 0.4rem 0.72rem;
    min-height: 1.95rem;
    letter-spacing: 0.03em;
  }
}

/* ───────────────────────────────────────────────────────────────────────
 *  CHIPS «DOMANDE CORRELATE» sotto le risposte di Kimi.
 *
 *  Design: stessa *stessa* pill dei chip di follow-up
 *  (`mp-chat-msg__followup-btn`) per non spezzare la coerenza visiva del
 *  thread (stessa altezza, stesso radius, stesso padding, stessa
 *  tipografia); l'UNICA differenza è la famiglia cromatica: cyan/slate
 *  invece di ambra, per distinguere «altre domande correlate» da
 *  «approfondisci questa risposta». Il testo va a capo quando necessario
 *  (niente ellipsis): la lunghezza non è limitata a priori perché la
 *  domanda deve essere sempre leggibile per intero.
 *
 *  Struttura HTML:
 *    button.mp-chat-msg__related-btn
 *      span.mp-chat-msg__related-btn__inner
 *        span.mp-chat-msg__related-btn__icon   (emoji)
 *        span.mp-chat-msg__related-btn__label  (testo completo)
 * ─────────────────────────────────────────────────────────────────────── */
@keyframes mp-chat-related-appear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);  }
}

.mp-chat-msg__related {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;            /* chips di righe diverse = stessa altezza visiva */
  gap: 0.5rem;                     /* identico al .mp-chat-msg__followups */
  margin-top: 0.5rem;
  padding: 0.4rem 0 0.05rem;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  max-width: 100%;
  opacity: 0;
  transform: translateY(8px);
  will-change: opacity, transform;
}
.mp-chat-msg__related.mp-chat-msg__related--in {
  animation: mp-chat-related-appear 0.4s cubic-bezier(0.22, 0.85, 0.35, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .mp-chat-msg__related {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  .mp-chat-msg__related.mp-chat-msg__related--in {
    animation: none;
  }
}

/*
 * Pill glass cyan/slate: replica 1:1 le dimensioni/ombreggiature di
 * `.mp-chat-msg__followup-btn` (ambra), solo i colori cambiano. Così
 * le due famiglie di chips sotto la bolla sono visivamente «gemelle»
 * e si distinguono solo per tonalità.
 */
.mp-chat-msg__related-btn {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: max(0.75rem, calc(var(--mp-chat-font-size, 0.734375rem) * 1.02));
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
  padding: 0.45rem 0.95rem;
  min-height: 2.1rem;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #e0f2fe;
  text-shadow: 0 1px 2px rgba(0, 6, 20, 0.45);
  background: linear-gradient(
    165deg,
    rgba(56, 189, 248, 0.28) 0%,
    rgba(14, 116, 144, 0.22) 38%,
    rgba(15, 23, 42, 0.78) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 0 0 1px rgba(56, 189, 248, 0.1) inset,
    0 4px 16px rgba(0, 4, 18, 0.45),
    0 0 24px rgba(56, 189, 248, 0.14);
  -webkit-backdrop-filter: blur(12px) saturate(1.45);
  backdrop-filter: blur(12px) saturate(1.45);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.15s ease,
    color 0.15s ease;
}
.mp-chat-msg__related-btn__inner {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  width: 100%;
  line-height: 1.25;
}
.mp-chat-msg__related-btn__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.12em;              /* leggermente più grande del testo */
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.mp-chat-msg__related-btn__label {
  /* MAI troncare: il cliente deve leggere la domanda per intero */
  flex: 1 1 auto;
  white-space: normal;
  word-break: break-word;
  text-align: left;
}
.mp-chat-msg__related-btn:hover:not(:disabled) {
  color: #f0f9ff;
  border-color: rgba(125, 211, 252, 0.8);
  background: linear-gradient(
    165deg,
    rgba(103, 232, 249, 0.38) 0%,
    rgba(14, 116, 144, 0.3) 40%,
    rgba(30, 41, 59, 0.85) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 0 0 1px rgba(125, 211, 252, 0.18) inset,
    0 6px 22px rgba(0, 8, 28, 0.5),
    0 0 32px rgba(56, 189, 248, 0.22);
  transform: translateY(-1px);
}
.mp-chat-msg__related-btn:active:not(:disabled) {
  transform: translateY(0);
}
.mp-chat-msg__related-btn:focus-visible {
  outline: 2px solid rgba(186, 230, 253, 0.95);
  outline-offset: 2px;
}
.mp-chat-msg__related-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: saturate(0.85);
}
@media (prefers-reduced-transparency: reduce) {
  .mp-chat-msg__related-btn {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(165deg, #0e7490 0%, #164e63 48%, #1e293b 100%);
  }
  .mp-chat-msg__related-btn:hover:not(:disabled) {
    background: linear-gradient(165deg, #0891b2 0%, #155e75 45%, #334155 100%);
  }
}
@media (max-width: 380px) {
  .mp-chat-msg__related-btn {
    font-size: max(0.7rem, calc(var(--mp-chat-font-size, 0.734375rem) * 0.95));
    padding: 0.4rem 0.72rem;
    min-height: 1.95rem;
    letter-spacing: 0.03em;
  }
}

.mp-chat-msg__bubble {
  padding: 0.4rem 0.62rem;
  border-radius: 0.8rem;
  font-size: var(--mp-chat-font-size);
  font-weight: var(--mp-chat-bubble-weight);
  line-height: var(--mp-chat-line-height);
  word-break: break-word;
  letter-spacing: 0.01em;
  font-feature-settings: "kern" 1, "liga" 1;
}
/* Stesso corpo per agente e cliente; solo colori/direzioni */
.mp-chat-msg--agent .mp-chat-msg__bubble,
.mp-chat-msg--client .mp-chat-msg__bubble {
  font-size: var(--mp-chat-font-size);
  line-height: var(--mp-chat-line-height);
  font-weight: var(--mp-chat-bubble-weight);
}
/* Agente: tono vetro corporate (risposte); saluto usa variante dedicata sotto */
.mp-chat-msg--agent .mp-chat-msg__bubble {
  background: linear-gradient(145deg, rgba(22, 42, 72, 0.92), rgba(16, 32, 58, 0.88));
  border: 1px solid rgba(96, 178, 255, 0.28);
  color: rgba(241, 245, 249, 0.98);
  border-bottom-left-radius: 0.2rem;
}
/* Benvenuto: stesso vetro del pannello, non arancione legacy */
.mp-chat-msg--greeting .mp-chat-msg__bubble {
  background: linear-gradient(155deg, rgba(18, 34, 58, 0.9) 0%, rgba(24, 48, 82, 0.78) 100%);
  border: 1px solid rgba(96, 178, 255, 0.32);
  color: rgba(241, 245, 249, 0.98);
}
.mp-chat-msg--greeting .mp-chat-msg__label {
  color: rgba(168, 220, 255, 0.92);
}
/* Cliente: blu — invariato ma reso più leggibile */
.mp-chat-msg--client .mp-chat-msg__bubble {
  background: rgba(37, 99, 235, 0.6);
  border: 1px solid rgba(147, 197, 253, 0.25);
  color: #ffffff;                               /* bianco puro per max leggibilità */
  border-bottom-right-radius: 0.2rem;
}

/* Indicatore "sta scrivendo" */
.mp-chat-msg__bubble--typing {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.5rem 0.75rem !important;
  min-width: 3.25rem;
  justify-content: center;
}
.mp-chat-typing-dot {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: rgba(147, 197, 253, 0.95);
  animation: mp-chat-typing-bounce 1.05s ease-in-out infinite;
}
.mp-chat-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.mp-chat-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes mp-chat-typing-bounce {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Composer: textarea + invio */
.mp-chat-panel__footer {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem 0.6rem;
}
.mp-chat-panel__textarea {
  flex: 1;
  min-width: 0;
  /* Fallback senza unità lh; sovrascritto dove supportato */
  min-height: 2.35rem;
  max-height: 5.85rem;
  min-height: calc(0.84rem + 1lh);
  max-height: calc(0.84rem + 3lh);
  resize: none;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.75rem;
  padding: 0.42rem 0.62rem;
  font-size: var(--mp-chat-font-size);
  line-height: var(--mp-chat-line-height);
  font-weight: var(--mp-chat-bubble-weight);
  color: rgba(148, 163, 184, 0.55);
  cursor: not-allowed;
  font-family: inherit;
  overflow-y: auto;
  overflow-x: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.35) rgba(15, 23, 42, 0.35);
}
.mp-chat-panel__textarea::-webkit-scrollbar {
  width: 5px;
}
.mp-chat-panel__textarea::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.32);
  border-radius: 3px;
}
.mp-chat-panel__textarea::placeholder {
  color: rgba(148, 163, 184, 0.45);
}
.mp-chat-panel__textarea:disabled {
  opacity: 0.85;
}
/* In attesa risposta Kimi: placeholder e cursore “wait” */
.mp-chat-panel__composer--awaiting-reply .mp-chat-panel__textarea:disabled {
  cursor: wait;
  opacity: 0.9;
}
.mp-chat-panel__send {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border-radius: 50%;
  border: none;
  background: rgba(37, 99, 235, 0.4);
  color: rgba(147, 197, 253, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: not-allowed;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 0.05rem;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.mp-chat-panel__send svg { width: 17px; height: 17px; fill: currentColor; }
.mp-chat-panel__send:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.mp-chat-panel__hint {
  margin: 0;
  padding: 0 0.85rem 0.58rem;
  font-size: 0.625rem;
  line-height: 1.45;
  color: rgba(203, 213, 225, 0.88);
  text-align: center;
  letter-spacing: 0.01em;
}
.mp-chat-panel__hint strong {
  font-weight: 600;
  color: rgba(248, 250, 252, 0.95);
}
.mp-chat-panel__hint-main {
  display: inline;
}
.mp-chat-panel__hint-safe {
  display: inline;
  color: rgba(148, 163, 184, 0.82);
}

/* Etichetta "Disponibile a breve" */
.mp-chat-panel__coming-soon {
  font-size: 0.65rem;
  color: rgba(148, 163, 184, 0.5);
  text-align: center;
  padding: 0 0.9rem 0.55rem;
  margin: 0;
}

/* Chat attiva (Moonshot Kimi — chiave solo server) */
.mp-chat-panel--live .mp-chat-panel__textarea {
  color: rgba(241, 245, 249, 0.96);
  cursor: text;
  border-color: rgba(96, 165, 250, 0.35);
}
.mp-chat-panel--live .mp-chat-panel__textarea:focus {
  outline: none;
  border-color: rgba(147, 197, 253, 0.55);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
}
.mp-chat-panel--live .mp-chat-panel__send {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(99, 102, 241, 0.92));
  color: #fff;
  cursor: pointer;
}
.mp-chat-panel--live .mp-chat-panel__send:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.mp-chat-panel--live .mp-chat-panel__send:active:not(:disabled) {
  transform: translateY(0) scale(0.96);
}
.mp-chat-panel--live .mp-chat-panel__send:disabled {
  opacity: 0.5;
  cursor: wait;
  transform: none;
  filter: none;
}
/* Durante l’invio: riduce lavoro hit-test su decine di chip follow-up / correlate */
.mp-chat-panel--awaiting-reply .mp-chat-msg__followup-btn,
.mp-chat-panel--awaiting-reply .mp-chat-msg__related-btn {
  pointer-events: none;
  opacity: 0.57;
}
/* Testo utente / bolle senza HTML: a capo come digitati */
.mp-chat-panel--live .mp-chat-msg__bubble:not(.mp-chat-msg__bubble--rich) {
  white-space: pre-wrap;
}
.mp-chat-msg__bubble--rich {
  white-space: normal;
}

/* Puntini nella bolla finché non arriva testo (step 1 server / buffering) */
.mp-chat-streaming-wait {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.22rem;
  min-height: 1.75rem;
  padding: 0.35rem 0.15rem 0.45rem;
  box-sizing: border-box;
}

/* Streaming Kimi: HTML incrementale (.mp-chat-md come a fine messaggio) */
.mp-chat-msg--streaming .mp-chat-streaming-body {
  min-height: 2rem;
  white-space: normal;
  word-break: break-word;
  opacity: 0.96;
}
/* Anteprima streaming su risposte chilometriche: no parser markdown finché non arriva `done` */
.mp-chat-md--streamlite .mp-chat-md__streamplain {
  font: inherit;
  font-size: 0.97em;
  line-height: 1.5;
  word-break: break-word;
  white-space: normal;
  color: inherit;
  margin: 0;
  padding: 0;
}
/* Suffisso non ancora “chiuso” (` o **): testo letterale in attesa del delimitatore finale */
.mp-chat-md__pending {
  font: inherit;
  color: inherit;
}
/* Fallback streaming: solo newline/spazi ancora senza paragrafo — mostra comunque il testo */
.mp-chat-md__pending--literal {
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
  color: inherit;
}

/* Formattazione risposte assistente (HTML da marchiotto-additions.js) */
.mp-chat-md {
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: 1em;
  line-height: inherit;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mp-chat-md__p {
  margin: 0 0 0.52rem;
  font-size: inherit;
  line-height: 1.52;
}
.mp-chat-md__p:first-child {
  margin-top: 0;
}
.mp-chat-md__p:last-child {
  margin-bottom: 0;
}
.mp-chat-md__h {
  margin: 0.55rem 0 0.38rem;
  padding: 0;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.02em;
  color: rgba(255, 252, 248, 0.99);
}
.mp-chat-md__h:first-child {
  margin-top: 0;
}
.mp-chat-md__h--l1 {
  font-size: 1.05em;
  border-bottom: 1px solid rgba(251, 191, 36, 0.28);
  padding-bottom: 0.28rem;
}
.mp-chat-md__h--l2 {
  font-size: 1em;
  border-bottom: 1px solid rgba(251, 191, 36, 0.22);
  padding-bottom: 0.22rem;
}
.mp-chat-md__h--l3 {
  font-size: 0.96em;
}
.mp-chat-md__h--l4 {
  font-size: 0.92em;
  font-weight: 600;
  color: rgba(254, 240, 220, 0.96);
}
.mp-chat-md__hr {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0.55rem 0;
  padding: 0;
  border: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(251, 191, 36, 0.55) 20%,
    rgba(251, 191, 36, 0.35) 80%,
    transparent 100%
  );
  opacity: 0.95;
}
.mp-chat-md__ul,
.mp-chat-md__ol {
  margin: 0.2rem 0 0.55rem;
  padding-left: 1.18rem;
  list-style-position: outside;
}
.mp-chat-md__ul:last-child,
.mp-chat-md__ol:last-child {
  margin-bottom: 0;
}
.mp-chat-md__ul {
  list-style-type: disc;
}
.mp-chat-md__ol {
  list-style-type: decimal;
}
.mp-chat-md__li {
  margin: 0.22rem 0;
  padding-left: 0.12rem;
  font-size: inherit;
  line-height: 1.48;
}
.mp-chat-md__li::marker {
  color: rgba(254, 215, 170, 0.9);
  font-weight: 600;
}
.mp-chat-md__li .mp-chat-md__p {
  margin: 0.2rem 0 0;
}
.mp-chat-md__strong {
  font-weight: 700;
  color: rgba(255, 253, 248, 0.99);
  letter-spacing: 0.03em;
  font-kerning: normal;
}
.mp-chat-md__a {
  color: rgba(147, 197, 253, 0.98);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  word-break: break-word;
}
.mp-chat-md__a:hover {
  color: rgba(191, 219, 254, 1);
}
.mp-chat-md__bq {
  margin: 0.4rem 0 0.55rem;
  padding: 0.45rem 0.65rem 0.5rem;
  border-left: 3px solid rgba(251, 191, 36, 0.65);
  background: rgba(0, 0, 0, 0.18);
  border-radius: 0 0.35rem 0.35rem 0;
}
.mp-chat-md__bq .mp-chat-md__p--bq {
  margin: 0.2rem 0;
}
.mp-chat-md__bq .mp-chat-md__p--bq:first-child {
  margin-top: 0;
}
.mp-chat-md__bq .mp-chat-md__p--bq:last-child {
  margin-bottom: 0;
}
.mp-chat-md__code {
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;
  font-size: 0.88em;
  font-weight: 500;
  padding: 0.08rem 0.28rem;
  border-radius: 0.28rem;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(251, 191, 36, 0.22);
  color: rgba(254, 240, 220, 0.98);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Tabelle pipe (GFM) in bolla Kimi — leggibilità su schermo stretto */
.mp-chat-md__tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0.32rem 0 0.52rem;
  max-width: 100%;
  border-radius: 0.4rem;
  border: 1px solid rgba(251, 191, 36, 0.5);
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.12);
}
.mp-chat-md__tablewrap:last-child {
  margin-bottom: 0;
}
.mp-chat-msg__bubble .mp-chat-md__table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.92em;
  line-height: 1.35;
  min-width: min(100%, 16rem);
  border-style: solid;
  border-width: 1px;
  border-color: rgba(251, 191, 36, 0.55);
  box-sizing: border-box;
}
.mp-chat-msg__bubble .mp-chat-md__table th,
.mp-chat-msg__bubble .mp-chat-md__table td {
  border-style: solid;
  border-width: 1px;
  border-color: rgba(251, 191, 36, 0.58);
  padding: 0.32rem 0.45rem;
  text-align: left;
  vertical-align: top;
  hyphens: auto;
  box-sizing: border-box;
}
.mp-chat-msg__bubble .mp-chat-md__table th {
  background: rgba(0, 0, 0, 0.22);
  font-weight: 600;
  color: rgba(255, 253, 248, 0.98);
}
.mp-chat-msg__bubble .mp-chat-md__table td {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(254, 243, 226, 0.97);
}
.mp-chat-msg__bubble .mp-chat-md__table .mp-chat-md__code {
  font-size: 0.86em;
}

/* ── Status indicator (consulting / thinking) ──────────────────────────── */
.mp-chat-panel__status {
  font-size: 0.6rem;
  color: rgba(147, 197, 253, 0.7);
  text-align: center;
  padding: 0.2rem 0.9rem;
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease, padding 0.2s ease, opacity 0.2s ease;
  opacity: 0;
}
.mp-chat-panel__status--active {
  max-height: 2rem;
  opacity: 1;
}

/* ── Fallback “apri ticket”: stessa bolla agente (arancio); solo layout + CTA ─ */
.mp-chat-msg--fallback .mp-chat-msg__bubble {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}
/* Testo fallback: stessi stili .mp-chat-md della bolla agente */
.mp-chat-msg--fallback .mp-chat-md {
  margin-bottom: 0;
}
.mp-chat-msg--fallback .mp-fallback-ticket-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.28rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
  /* Stacca il CTA dalla bolla scura senza cambiare il layout DOM */
  filter: drop-shadow(0 2px 10px rgba(15, 23, 42, 0.42));
}
/* CTA compatta: stessa famiglia cromatica della bolla agente (arancio/marrone) ma più scura = testo chiaro leggibile */
.mp-chat-msg--fallback .mp-fallback-ticket-btn__inner {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-height: 1.82rem;
  padding: 0.26rem 0.72rem 0.28rem 0.58rem;
  border-radius: 999px;
  font-size: calc(var(--mp-chat-font-size) * 0.9);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #fff7ed;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  background: linear-gradient(
    168deg,
    rgba(40, 14, 6, 0.94) 0%,
    rgba(124, 45, 18, 0.9) 38%,
    rgba(24, 10, 5, 0.96) 100%
  );
  border: 1px solid rgba(251, 146, 60, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 0 0 1px rgba(0, 0, 0, 0.28) inset,
    0 3px 12px rgba(0, 0, 0, 0.4),
    0 0 18px rgba(251, 146, 60, 0.18);
}
.mp-chat-msg--fallback .mp-fallback-ticket-btn--commercial .mp-fallback-ticket-btn__inner {
  color: #eef2ff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  background: linear-gradient(
    168deg,
    rgba(30, 27, 75, 0.96) 0%,
    rgba(67, 56, 202, 0.88) 42%,
    rgba(24, 22, 58, 0.97) 100%
  );
  border-color: rgba(165, 180, 252, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 0 0 1px rgba(0, 0, 0, 0.22) inset,
    0 3px 12px rgba(0, 0, 0, 0.4),
    0 0 18px rgba(129, 140, 248, 0.22);
}
.mp-chat-msg--fallback .mp-fallback-ticket-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.02em;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.mp-chat-msg--fallback .mp-fallback-ticket-btn__label {
  white-space: nowrap;
}
.mp-chat-msg--fallback .mp-fallback-ticket-btn:hover .mp-fallback-ticket-btn__inner {
  border-color: rgba(253, 186, 116, 0.78);
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 0 0 1px rgba(0, 0, 0, 0.22) inset,
    0 5px 16px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(251, 146, 60, 0.28);
}
.mp-chat-msg--fallback .mp-fallback-ticket-btn--commercial:hover .mp-fallback-ticket-btn__inner {
  border-color: rgba(199, 210, 254, 0.78);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 0 0 1px rgba(0, 0, 0, 0.2) inset,
    0 5px 16px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(165, 180, 252, 0.32);
}
.mp-chat-msg--fallback .mp-fallback-ticket-btn:active .mp-fallback-ticket-btn__inner {
  transform: translateY(0) scale(0.98);
  filter: brightness(0.97);
}
.mp-chat-msg--fallback .mp-fallback-ticket-btn:focus-visible {
  outline: none;
}
.mp-chat-msg--fallback .mp-fallback-ticket-btn:focus-visible .mp-fallback-ticket-btn__inner {
  outline: 2px solid rgba(147, 197, 253, 0.95);
  outline-offset: 2px;
}
.mp-chat-msg--fallback .mp-fallback-ticket-btn--commercial:focus-visible .mp-fallback-ticket-btn__inner {
  outline-color: rgba(196, 181, 253, 0.98);
}

@media (max-width: 480px) {
  .mp-chat-msg--fallback .mp-fallback-ticket-btn {
    align-self: stretch;
    max-width: 100%;
  }
  .mp-chat-msg--fallback .mp-fallback-ticket-btn__inner {
    width: 100%;
    justify-content: center;
    min-height: 2.1rem;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }
  .mp-chat-msg--fallback .mp-fallback-ticket-btn__label {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }
}

/* ── Scelta software in thread (bolle cliccabili) ───────────────────────── */
.mp-chat-sw-pick {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  max-width: 100%;
}
.mp-chat-sw-pick__title {
  margin: 0;
  font-size: 0.69rem;
  font-weight: 600;
  color: rgba(224, 242, 254, 0.95);
  line-height: 1.32;
}
.mp-chat-sw-pick__sub {
  margin: 0;
  font-size: 0.58rem;
  font-weight: 400;
  color: rgba(147, 197, 253, 0.75);
  line-height: 1.32;
}
.mp-chat-sw-pick__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.mp-chat-sw-bubble {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(30, 58, 138, 0.35);
  border: 1px solid rgba(96, 165, 250, 0.38);
  border-radius: 12px;
  color: rgba(224, 242, 254, 0.95);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.25;
  padding: 0.36rem 0.58rem;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
.mp-chat-sw-bubble:hover {
  background: rgba(59, 130, 246, 0.32);
  border-color: rgba(147, 197, 253, 0.55);
}
.mp-chat-sw-bubble:focus-visible {
  outline: 2px solid rgba(147, 197, 253, 0.85);
  outline-offset: 2px;
}
.mp-chat-sw-bubble.is-selected {
  background: rgba(37, 99, 235, 0.45);
  border-color: rgba(147, 197, 253, 0.65);
  box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.25);
}
.mp-chat-msg--software-pick--done .mp-chat-sw-pick__sub {
  opacity: 0.65;
}
.mp-chat-msg--software-pick--done .mp-chat-sw-bubble:not(.is-selected) {
  opacity: 0.45;
  pointer-events: none;
}

/* Chip software (barra legacy o nel messaggio di benvenuto) */
.mp-chat-panel__chip-bar {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.45rem 0.75rem 0.6rem;
  border-top: 1px solid rgba(99, 179, 237, 0.1);
}
/* Benvenuto compatto: tutta la bolla visibile al primo colpo */
.mp-chat-msg--greeting {
  max-width: 100%;
  width: 100%;
}
.mp-chat-msg--greeting .mp-chat-msg__label {
  margin-bottom: 0.12rem;
}
.mp-chat-msg--greeting .mp-chat-msg__bubble {
  padding: 0.38rem 0.52rem 0.42rem;
  font-size: var(--mp-chat-font-size);
  line-height: var(--mp-chat-line-height);
}
.mp-chat-msg--greeting .mp-chat-greeting-text {
  margin: 0 0 0.3rem;
  white-space: normal;
  word-break: break-word;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
}

/* Blocco scelta software nel saluto: griglia compatta */
.mp-chat-panel__chip-bar--in-greeting {
  margin-top: 0.2rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, 0.26);
  border-radius: 0.5rem;
  background: rgba(12, 26, 48, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-top: none;
}
.mp-chat-panel__chip-bar--in-greeting .mp-chat-panel__chip-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.18rem;
  padding: 0.28rem 0.32rem;
  max-height: 6.75rem;
}
.mp-chat-msg--greeting .mp-chat-panel__chip {
  min-height: 1.72rem;
  padding: 0.26rem 0.38rem;
  border-radius: 0.38rem;
}
.mp-chat-msg--greeting .mp-chat-panel__starter-bar {
  margin-top: 0.32rem;
  padding-top: 0.28rem;
}
.mp-chat-panel__starter-bar--deferred {
  display: none !important;
}
.mp-chat-panel__chip-bar--has-selection ~ .mp-chat-panel__starter-bar--deferred {
  display: block !important;
}
.mp-chat-panel__chip-intro {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.72rem 0.8rem 0.65rem;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, transparent 100%);
  border-bottom: 1px solid rgba(96, 165, 250, 0.18);
}
.mp-chat-panel__chip-intro-text {
  flex: 1;
  min-width: 0;
}
.mp-chat-panel__chip-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-top: 0.02rem;
  border-radius: 0.55rem;
  background: rgba(59, 130, 246, 0.28);
  color: rgba(186, 230, 253, 0.98);
  border: 1px solid rgba(147, 197, 253, 0.38);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.35);
}
.mp-chat-panel__chip-icon svg {
  display: block;
  opacity: 0.95;
}
.mp-chat-panel__chip-heading {
  margin: 0;
  padding: 0;
  font-size: 0.74rem;
  line-height: 1.38;
  font-weight: 600;
  letter-spacing: 0.015em;
  color: rgba(248, 250, 252, 0.98);
}
.mp-chat-panel__chip-heading-strong {
  font-weight: 700;
  color: #fff;
}
.mp-chat-panel__chip-heading-hint {
  margin: 0.38rem 0 0;
  padding: 0;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.38;
  color: rgba(186, 198, 214, 0.92);
  max-width: 42em;
}
.mp-chat-panel__chip-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.32rem;
  padding: 0.5rem 0.6rem 0.58rem;
  align-items: stretch;
  max-height: 10.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mp-chat-panel__composer-lock {
  margin: 0;
  padding: 0.45rem 0.85rem 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(186, 201, 222, 0.95);
}
.mp-chat-panel__composer-lock[hidden] {
  display: none !important;
}

.mp-chat-panel__chip-bar--has-selection .mp-chat-panel__chip:not(.is-selected) {
  opacity: 0.38;
  pointer-events: none;
  filter: grayscale(0.15);
}
.mp-chat-panel__chip.is-selected {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.55), rgba(37, 99, 235, 0.45));
  border-color: rgba(147, 197, 253, 0.75);
  color: #f8fafc;
  box-shadow:
    0 0 0 1px rgba(147, 197, 253, 0.4),
    0 2px 8px rgba(37, 99, 235, 0.25);
}
.mp-chat-panel__chip.is-selected::before {
  content: '\2713';
  display: inline-block;
  margin-right: 0.26rem;
  font-size: 0.68em;
  font-weight: 700;
  opacity: 0.95;
}
.mp-chat-panel__chip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  background: rgba(30, 58, 138, 0.35);
  border: 1px solid rgba(96, 165, 250, 0.38);
  border-radius: 0.5rem;
  color: rgba(224, 242, 254, 0.96);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.28;
  padding: 0.38rem 0.52rem;
  min-height: 2rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease,
    box-shadow 0.15s ease, transform 0.12s ease;
  white-space: normal;
  text-align: left;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.mp-chat-panel__chip:hover {
  background: rgba(59, 130, 246, 0.35);
  border-color: rgba(147, 197, 253, 0.55);
  color: #fff;
  transform: translateY(-1px);
}
.mp-chat-panel__chip:active {
  transform: translateY(0);
}
.mp-chat-panel__chip:focus-visible {
  outline: 2px solid rgba(147, 197, 253, 0.85);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .mp-chat-head--desktop {
    display: none !important;
  }
  .mp-chat-head--mobile {
    display: inline-flex !important;
  }
}
@media (min-width: 561px) {
  .mp-chat-head--mobile {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .mp-chat-panel.is-open {
    top: max(0px, env(safe-area-inset-top, 0px));
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    transform: translateY(0) scale(1);
  }
  .mp-chat-panel__chip-intro {
    padding: 0.62rem 0.65rem 0.58rem;
  }
  .mp-chat-panel__chip-heading {
    font-size: 0.78rem;
  }
  .mp-chat-panel__chip-heading-hint {
    font-size: 0.66rem;
  }
  .mp-chat-panel__chip-list {
    grid-template-columns: 1fr;
    padding: 0.48rem 0.55rem 0.55rem;
    gap: 0.35rem;
  }
  .mp-chat-msg--greeting .mp-chat-panel__chip-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.16rem;
    padding: 0.24rem 0.28rem;
    max-height: 5.75rem;
  }
  .mp-chat-panel__chip {
    min-height: 2.15rem;
    font-size: 0.74rem;
    padding: 0.4rem 0.55rem;
  }
  .mp-chat-msg--greeting .mp-chat-panel__chip {
    min-height: 1.65rem;
    padding: 0.24rem 0.34rem;
  }
  .mp-chat-panel__ticket-btn__label {
    display: none;
  }
  .mp-chat-panel__ticket-btn {
    padding: 0 0.45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp-chat-panel,
  .mp-chat-backdrop {
    transition-duration: 0.01ms !important;
  }
  .mp-chat-typing-dot {
    animation: none;
    opacity: 0.75;
  }
  .mp-chat-panel__chip:hover,
  .mp-chat-panel__chip:active {
    transform: none;
  }
  .mp-chat-msg--fallback .mp-fallback-ticket-btn:hover .mp-fallback-ticket-btn__inner,
  .mp-chat-msg--fallback .mp-fallback-ticket-btn:active .mp-fallback-ticket-btn__inner {
    transform: none;
  }
}

/* Responsive piccolo ≤480px: pannello full-width; safe-area override */
@media (max-width: 480px) {
  .mp-chat-panel {
    right: 12px;
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    height: min(76vh, 600px);
    max-height: min(76vh, 600px);
  }
  .mp-chat-trigger {
    right: 12px;
  }
  .mp-chat-backdrop {
    background: rgba(2, 6, 23, 0.52);
  }
}

/* ==========================================================================
   40. GUIDE E RISORSE — Pagina guide/video mock
       PRD-FISCALE Fase 6
       Layout elenco/dettaglio: canonical in client-guides-glass.css (caricato dopo).
       Qui restano override toolbar/select2 e campi che battono client-desktop.
   ========================================================================== */

body.client-side.guides-page .guides-wrap.guides-wrap--detail {
  max-width: min(1100px, 100%);
  margin-inline: auto;
}

/* Hero — override client-desktop h1: regole base in client-guides-glass.css (bypass finale) */
body.client-side.guides-page .guides-hero {
  margin: 0;
  padding: 0 1.35rem 1.1rem;
  background: none;
  border: none;
  box-shadow: none;
}
body.client-side.guides-page .guides-hero h1 {
  font-family: var(--glass-font-sans, system-ui, sans-serif);
  font-size: clamp(1.12rem, 1.9vw, 1.38rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  margin: 0 0 0.6rem;
  text-wrap: balance;
  /* client-desktop.css: h1 { background-color: white } — niente striscia bianca sul vetro */
  background: transparent;
  background-color: transparent;
}
body.client-side.guides-page .guides-detail-title {
  /* client-desktop.css: h1 { background-color: white } — dettaglio guida su vetro */
  background: transparent;
  background-color: transparent;
}
body.client-side.guides-page .guides-hero p {
  width: 100%;
  max-width: none;
  font-size: clamp(0.875rem, 1.2vw, 0.9375rem);
  font-weight: 500;
  color: #fff;
  -webkit-text-fill-color: #fff;
  line-height: 1.62;
  margin: 0;
  text-align: center;
  text-wrap: balance;
}

/* Blocco unico hero+tab+toolbar: toolbar annidata (no doppio pannello pesante) */
body.client-side.guides-page .guides-wrap--list .guides-list-stack .guides-hero {
  padding: 0 0 0.5rem;
}
body.client-side.guides-page .guides-wrap--list .guides-list-stack .guides-vendor-tabs {
  margin-top: 0.35rem;
  margin-bottom: 0.75rem;
}

body.client-side.guides-page .guides-toolbar-client--stack .guides-type-filter-wrap {
  min-width: 0;
  justify-self: stretch;
  display: flex;
  align-items: stretch;
}

body.client-side.guides-page .guides-toolbar-client--stack .guides-type-filter-wrap .select2-container {
  width: 100% !important;
}
/* Fascia filtri nello stack: stili in client-guides-glass.css (bypass finale) */
body.client-side.guides-page .guides-wrap--list .guides-list-stack .guides-toolbar-client.guides-toolbar-client--stack {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 228px) auto !important;
  gap: 0.85rem 1.1rem !important;
  align-items: stretch !important;
  margin: 0 -1.25rem 0 !important;
  width: calc(100% + 2.5rem) !important;
  max-width: none !important;
  padding: 1rem 1.35rem 1.25rem !important;
  box-sizing: border-box !important;
}

body.client-side.guides-page .guides-wrap--list .guides-list-stack .guides-toolbar-client.guides-toolbar-client--stack > * {
  min-width: 0;
}

body.client-side.guides-page .guides-wrap--list .guides-list-stack .guides-toolbar-client.guides-toolbar-client--stack .guides-result-count {
  align-self: center;
  min-width: auto;
  margin-left: 0 !important;
  padding: 0.42rem 0.95rem !important;
  min-height: 0 !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  font-variant-numeric: tabular-nums !important;
  color: rgba(248, 250, 252, 0.95) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Fascia stack: ricerca + filtro tipi — stesso profilo “pill” del chip .guides-result-count */
body.client-side.guides-page .guides-toolbar-client--stack .guides-search-wrap input[type="search"],
body.client-side.guides-page .guides-toolbar-client--stack select#guides-type-filter {
  border-radius: 999px !important;
}

/* Toolbar filtri — pannello glass solo fuori dalla fascia stack (lista principale usa .guides-toolbar-client--stack) */
body.client-side.guides-page .guides-toolbar-client:not(.guides-toolbar-client--stack) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.1rem;
  align-items: center;
  margin: 0 0 1.25rem;
  padding: 1.1rem 1.35rem;
  background: linear-gradient(168deg, var(--glass-bg, rgba(28,45,72,0.88)) 0%, rgba(22,40,64,0.90) 100%);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.42));
  border-radius: var(--glass-radius, 22px);
  box-shadow: var(--glass-shadow, 0 20px 56px rgba(0,6,20,0.55));
  -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) saturate(175%);
  backdrop-filter: blur(var(--glass-blur, 20px)) saturate(175%);
  box-sizing: border-box;
}

body.client-side.guides-page .guides-toolbar-client--stack label.guides-search-wrap {
  display: block;
  width: 100%;
  text-transform: none;
  letter-spacing: normal;
  font-size: 1rem;
  font-weight: 400;
  gap: 0;
}

body.client-side.guides-page .guides-toolbar-client label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: max(12px, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f8fafc;
}
/* Campi vetro — batte client-desktop input[type=search] background #fff !important */
body.client-side.guides-page .guides-toolbar-client select,
body.client-side.guides-page .guides-toolbar-client input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
  margin: 0 !important;
  box-sizing: border-box;
  background-color: rgba(12, 24, 48, 0.35) !important;
  background-image: linear-gradient(
    155deg,
    rgba(210, 235, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.06) 42%,
    rgba(8, 18, 42, 0.45) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.26) !important;
  border-radius: var(--glass-radius-sm, 14px);
  color: #fff !important;
  font-family: inherit;
  font-size: 15px !important;
  padding: 0.6rem 0.9rem !important;
  min-width: 140px;
  min-height: 46px !important;
  height: auto !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 10, 32, 0.35),
    0 4px 22px rgba(0, 12, 42, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.07) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  color-scheme: dark;
  -webkit-backdrop-filter: blur(16px) saturate(168%);
  backdrop-filter: blur(16px) saturate(168%);
}
body.client-side.guides-page .guides-toolbar-client select:focus,
body.client-side.guides-page .guides-toolbar-client input[type="search"]:focus {
  outline: none !important;
  border-color: rgba(186, 230, 255, 0.62) !important;
  background-color: rgba(18, 36, 62, 0.42) !important;
  background-image: linear-gradient(
    155deg,
    rgba(220, 240, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.1) 45%,
    rgba(20, 48, 92, 0.48) 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 12, 40, 0.28),
    0 0 0 2px rgba(56, 189, 248, 0.38),
    0 6px 28px rgba(0, 40, 90, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
body.client-side.guides-page .guides-toolbar-client select option {
  background: #0f172a;
  color: #f8fafc;
}
body.client-side.guides-page .guides-toolbar-client .guides-search-wrap input[type="search"] {
  width: 100% !important;
}

/* Ricerca in fascia stack: gradiente vetro + icona lente (stesso linguaggio del select tipi) */
body.client-side.guides-page .guides-toolbar-client--stack .guides-search-wrap input[type='search'] {
  padding-left: 2.55rem !important;
  background-color: rgba(12, 24, 48, 0.35) !important;
  background-image:
    linear-gradient(
      155deg,
      rgba(210, 235, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.06) 42%,
      rgba(8, 18, 42, 0.45) 100%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23a8dcff' stroke-opacity='0.9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M11 17a6 6 0 100-12 6 6 0 000 12zm8 3-4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: 0 0, 0.95rem 50% !important;
  background-size: auto, 1.1rem 1.1rem !important;
}

body.client-side.guides-page .guides-toolbar-client--stack .guides-search-wrap input[type='search']:focus {
  background-color: rgba(18, 36, 62, 0.42) !important;
  background-image:
    linear-gradient(
      155deg,
      rgba(220, 240, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.1) 45%,
      rgba(20, 48, 92, 0.48) 100%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%237dd3fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M11 17a6 6 0 100-12 6 6 0 000 12zm8 3-4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: 0 0, 0.95rem 50% !important;
  background-size: auto, 1.1rem 1.1rem !important;
}

body.client-side.guides-page .guides-toolbar-client--stack .guides-search-wrap input[type='search']::placeholder {
  color: rgba(248, 250, 252, 0.48) !important;
}

body.client-side.guides-page .guides-toolbar-client select {
  flex: 0 1 180px;
  width: auto !important;
  max-width: 100%;
}

body.client-side.guides-page .guides-toolbar-client--stack select {
  justify-self: stretch;
}

/* Filtro tipi: fallback nativo se Select2 non parte; con Select2 il select resta accessibile nascosto */
body.client-side.guides-page .guides-toolbar-client--stack select#guides-type-filter {
  cursor: pointer;
  font-weight: 500 !important;
  padding-left: 2.45rem !important;
  padding-right: 2.4rem !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: rgba(12, 24, 48, 0.35) !important;
  background-image:
    linear-gradient(
      155deg,
      rgba(210, 235, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.06) 42%,
      rgba(8, 18, 42, 0.45) 100%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23a8dcff' stroke-opacity='0.85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23e2e8f0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: 0 0, 0.88rem 50%, right 0.72rem center !important;
  background-size: auto, 1rem 1rem, 0.72rem 0.72rem !important;
}

body.client-side.guides-page .guides-toolbar-client--stack select#guides-type-filter:focus {
  background-color: rgba(18, 36, 62, 0.42) !important;
  background-image:
    linear-gradient(
      155deg,
      rgba(220, 240, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.1) 45%,
      rgba(20, 48, 92, 0.48) 100%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%237dd3fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%237dd3fc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: 0 0, 0.88rem 50%, right 0.72rem center !important;
  background-size: auto, 1rem 1rem, 0.72rem 0.72rem !important;
}

@media (prefers-reduced-transparency: reduce) {
  body.client-side.guides-page .guides-wrap--list .guides-list-stack .guides-toolbar-client.guides-toolbar-client--stack {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(18, 30, 52, 0.94) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  }

  body.client-side.guides-page .guides-toolbar-client select,
  body.client-side.guides-page .guides-toolbar-client input[type="search"],
  body.client-side.guides-page .guides-toolbar-client .select2-container--default .select2-selection--single {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

body.client-side.guides-page .guides-toolbar-client--stack .select2-container {
  min-width: 0 !important;
  max-width: 100% !important;
}

/*
 * Filtro tipi (Select2): il tema portale (client-portal-chrome-glass) applica Select2
 * chiaro con !important dopo client-guides-glass — qui si riallinea al vetro scuro della toolbar
 * così non c’è flash bianco→scuro al document.ready.
 */
body.client-side.guides-page .guides-toolbar-client .select2-container {
  flex: 0 1 180px;
  min-width: min(100%, 200px);
  max-width: 100%;
}

body.client-side.guides-page .guides-toolbar-client .select2-container--default .select2-selection--single {
  min-height: 46px !important;
  height: auto !important;
  border-radius: var(--glass-radius-sm, 14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.26) !important;
  background-color: rgba(12, 24, 48, 0.35) !important;
  background-image:
    linear-gradient(
      155deg,
      rgba(210, 235, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.06) 42%,
      rgba(8, 18, 42, 0.45) 100%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23a8dcff' stroke-opacity='0.85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: 0 0, 0.9rem 50% !important;
  background-size: auto, 1rem 1rem !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 10, 32, 0.35),
    0 4px 22px rgba(0, 12, 42, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.07) !important;
  -webkit-backdrop-filter: blur(16px) saturate(168%);
  backdrop-filter: blur(16px) saturate(168%);
  color-scheme: dark;
}

body.client-side.guides-page .guides-toolbar-client--stack .select2-container--default .select2-selection--single {
  border-radius: 999px !important;
}

body.client-side.guides-page .guides-toolbar-client .select2-container--default.select2-container--focus .select2-selection--single,
body.client-side.guides-page .guides-toolbar-client .select2-container--default.select2-container--open .select2-selection--single {
  outline: none !important;
  border-color: rgba(186, 230, 255, 0.62) !important;
  background-color: rgba(18, 36, 62, 0.42) !important;
  background-image:
    linear-gradient(
      155deg,
      rgba(220, 240, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.1) 45%,
      rgba(20, 48, 92, 0.48) 100%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%237dd3fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: 0 0, 0.9rem 50% !important;
  background-size: auto, 1rem 1rem !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 12, 40, 0.28),
    0 0 0 2px rgba(56, 189, 248, 0.38),
    0 6px 28px rgba(0, 40, 90, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body.client-side.guides-page .guides-toolbar-client .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #fff !important;
  line-height: 1.4 !important;
  padding: 0.62rem 2.35rem 0.62rem 2.35rem !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

body.client-side.guides-page .guides-toolbar-client .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: rgba(248, 250, 252, 0.55) !important;
}

body.client-side.guides-page .guides-toolbar-client .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 0.35rem !important;
}

body.client-side.guides-page .guides-toolbar-client .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: rgba(248, 250, 252, 0.75) transparent transparent transparent !important;
}

body.client-side.guides-page .guides-toolbar-client .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent rgba(248, 250, 252, 0.75) transparent !important;
}

/* Dropdown lista tipi (append a body): :has limita al menu del filtro guide */
body.client-side.guides-page .select2-dropdown:has(ul#select2-guides-type-filter-results) {
  background: linear-gradient(168deg, rgba(28, 44, 72, 0.98) 0%, rgba(14, 26, 48, 0.99) 100%) !important;
  background-color: rgba(16, 28, 52, 0.98) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(168, 220, 255, 0.42) !important;
  border-radius: 16px !important;
  padding: 8px !important;
  box-shadow:
    0 24px 56px rgba(0, 4, 24, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
  /* perf 2026-05-13: era 20px, ora token --glass-blur-xl */
  -webkit-backdrop-filter: blur(var(--glass-blur-xl, 20px)) saturate(170%);
  backdrop-filter: blur(var(--glass-blur-xl, 20px)) saturate(170%);
  z-index: 99990 !important;
}

body.client-side.guides-page .select2-dropdown:has(ul#select2-guides-type-filter-results) .select2-results__options {
  max-height: min(320px, 70vh) !important;
  padding: 2px 0 !important;
}

body.client-side.guides-page .select2-dropdown:has(ul#select2-guides-type-filter-results) .select2-results__option {
  color: rgba(248, 250, 252, 0.95) !important;
  padding: 0.68rem 1rem 0.68rem 0.95rem !important;
  margin: 0 !important;
  border-radius: 12px !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em !important;
  border: 1px solid transparent !important;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.client-side.guides-page .select2-dropdown:has(ul#select2-guides-type-filter-results) .select2-results__option + .select2-results__option {
  margin-top: 3px !important;
}

body.client-side.guides-page .select2-dropdown:has(ul#select2-guides-type-filter-results) .select2-results__option[aria-selected="true"] {
  background: rgba(56, 189, 248, 0.14) !important;
  border-color: rgba(125, 211, 252, 0.35) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body.client-side.guides-page .select2-dropdown:has(ul#select2-guides-type-filter-results) .select2-results__option--highlighted[aria-selected] {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.42) 0%, rgba(99, 102, 241, 0.36) 100%) !important;
  border-color: rgba(186, 230, 253, 0.45) !important;
  color: #fff !important;
  box-shadow:
    0 4px 18px rgba(0, 40, 90, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.client-side.guides-page .select2-dropdown:has(ul#select2-guides-type-filter-results) .select2-results__option {
    transition: none !important;
  }
}

/* Contatore risultati — centrato sull’asse verticale della toolbar */
body.client-side.guides-page .guides-toolbar-client .guides-result-count {
  display: inline-flex;
  align-items: center;
  align-self: center;
  min-height: 2.75rem;
  margin-left: auto;
  color: #fff;
}

/* Contatore risultati */
body.client-side.guides-page .guides-count {
  font-size: 0.8rem;
  color: rgba(248, 250, 252, 0.65);
  margin-left: auto;
  align-self: center;
}

/* Griglia card — min 220px così entrano 3 colonne nella colonna principale accanto alla sidebar (~800px utili) */
body.client-side.guides-page .guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
  padding: 0 1.15rem;
}

/* Singola card — pannello glass leggero (+ container query per layout 3 colonne) */
body.client-side.guides-page .guide-card {
  container-type: inline-size;
  container-name: guide-card;
  background: linear-gradient(160deg, var(--glass-bg, rgba(28,45,72,0.88)) 0%, rgba(22,40,64,0.82) 100%);
  border: 1px solid var(--glass-border-soft, rgba(255,255,255,0.22));
  border-radius: var(--glass-radius, 22px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
body.client-side.guides-page .guide-card:hover {
  border-color: var(--glass-border, rgba(255,255,255,0.42));
  box-shadow: 0 12px 32px rgba(0,6,20,0.55), 0 0 0 1px rgba(255,255,255,0.1) inset;
  transform: translateY(-2px);
}
body.client-side.guides-page .guide-card:focus-within {
  outline: 2px solid rgba(168, 220, 255, 0.7);
  outline-offset: 2px;
}
/* Filtri live (client-guides.js): .hidden + display:flex su .guide-card nascondeva il none — griglia non reagiva */
body.client-side.guides-page .guide-card[hidden] {
  display: none !important;
}

/* Thumb card guide: stile principale in client-guides-glass.css (mesh + thumb-icon) */

/* Corpo card */
body.client-side.guides-page .guide-card__body {
  padding: 1rem 1.15rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
body.client-side.guides-page .guide-card__meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
/* Tipo risorsa: solo .guide-card__type-badge in client-guides-glass.css (gradienti per tipologia) */
body.client-side.guides-page .guide-card__duration {
  font-size: 0.78rem;
  color: rgba(248, 250, 252, 0.65);
  margin-left: auto;
}
body.client-side.guides-page .guide-card h3.guide-card__title,
body.client-side.guides-page .guide-card__title {
  font-family: var(--glass-font-sans, system-ui, sans-serif);
  font-size: clamp(0.9rem, 1vw + 0.5rem, 1.05rem);
  font-weight: 600;
  color: var(--glass-text, #f8fafc);
  line-height: 1.4;
  margin: 0;
}
body.client-side.guides-page .guide-card__sub {
  font-size: 0.85rem;
  color: var(--glass-text-muted, rgba(248,250,252,0.78));
  line-height: 1.55;
  margin: 0;
}
body.client-side.guides-page .guide-card__tags {
  font-size: 0.78rem;
  color: rgba(248, 250, 252, 0.6);
  margin-top: auto;
  padding-top: 0.45rem;
}

/* CTA — chip vetro in client-guides-glass.css; varianti sezione video (wrapper opzionale) */
body.client-side.guides-page .guide-card__cta {
  margin-top: auto;
  margin-left: 1.15rem;
  margin-right: 1.15rem;
  margin-bottom: 1rem;
}
body.client-side.guides-page .guides-section--video .guide-card__cta {
  color: #fff;
  text-shadow: 0 1px 2px rgba(40, 22, 0, 0.55);
  border-color: rgba(251, 191, 36, 0.45);
  background: linear-gradient(
    165deg,
    rgba(251, 191, 36, 0.18) 0%,
    rgba(120, 53, 15, 0.35) 100%
  );
}
body.client-side.guides-page .guides-section--video .guide-card:hover .guide-card__cta {
  color: #fff;
  border-color: rgba(251, 191, 36, 0.65);
  background: linear-gradient(
    165deg,
    rgba(251, 146, 60, 0.28) 0%,
    rgba(120, 53, 15, 0.42) 100%
  );
}

/*
 * Tre card affiancate (~220–300px): audit grafico — meta a colonna, chip compatte,
 * thumb 2:1, titolo clamp 2 righe. @container = larghezza .guide-card.
 */
@container guide-card (max-width: 300px) {
  body.client-side.guides-page .guide-card__body {
    padding: 0.72rem 0.82rem !important;
    gap: 0.32rem !important;
  }
  body.client-side.guides-page .guide-card__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.32rem;
    width: 100%;
  }
  body.client-side.guides-page .guide-card__duration {
    margin-left: 0 !important;
    font-size: 0.66rem !important;
  }
  body.client-side.guides-page .guide-card__type-badge {
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    padding: 0.18rem 0.48rem !important;
    letter-spacing: 0.055em !important;
    max-width: 100%;
    box-sizing: border-box;
    line-height: 1.28 !important;
    animation: none !important;
  }
  body.client-side.guides-page .guide-card:hover .guide-card__type-badge {
    transform: none !important;
  }
  body.client-side.guides-page .guide-card__title {
    font-size: 0.86rem !important;
    line-height: 1.3 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  body.client-side.guides-page .guide-card__sub {
    font-size: 0.76rem !important;
    line-height: 1.42 !important;
  }
  body.client-side.guides-page .guide-card__tags {
    font-size: 0.7rem !important;
    padding-top: 0.35rem !important;
  }
  body.client-side.guides-page .guide-card__section-tag {
    padding: 0.26rem 0.52rem !important;
    font-size: 0.62rem !important;
    margin-top: 0.12rem !important;
  }
  body.client-side.guides-page .guides-grid .guide-card__thumb {
    min-height: 3rem !important;
    padding: 0.62rem 0.75rem !important;
    aspect-ratio: auto !important;
  }
  body.client-side.guides-page .guides-grid .guide-card__thumb-watermark {
    font-size: 1.65rem !important;
    right: 0.1rem !important;
  }
  body.client-side.guides-page .guides-grid .guide-card__thumb-icon {
    width: 1.65rem !important;
    height: 1.65rem !important;
    border-radius: 8px !important;
  }
  body.client-side.guides-page .guides-grid .guide-card__thumb-icon .guide-type-icon {
    width: 0.9rem !important;
    height: 0.9rem !important;
  }
  body.client-side.guides-page .guides-grid .guide-card__thumb-type {
    font-size: 0.56rem !important;
    letter-spacing: 0.1em !important;
  }
  body.client-side.guides-page .guides-grid .guide-card__thumb-type::after {
    width: 0.85rem !important;
    margin-left: 0.35rem !important;
  }
  body.client-side.guides-page .guide-card__cta {
    margin-left: 0.72rem !important;
    margin-right: 0.72rem !important;
    margin-bottom: 0.72rem !important;
    padding: 0.42rem 0.72rem !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.035em !important;
  }
}

/* Stato vuoto */
body.client-side.guides-page .guides-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2.5rem 1rem;
  color: rgba(148, 163, 184, 0.5);
  font-size: 0.9rem;
}

/* Responsive 375px */
@media (max-width: 480px) {
  body.client-side.guides-page .guides-toolbar-client:not(.guides-toolbar-client--stack) {
    flex-direction: column;
    align-items: stretch;
  }
  body.client-side.guides-page .guides-wrap--list .guides-list-stack .guides-toolbar-client.guides-toolbar-client--stack {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
  }
  body.client-side.guides-page .guides-count {
    margin-left: 0;
  }
  body.client-side.guides-page .guides-toolbar-client .guides-result-count {
    margin-left: 0;
    width: 100%;
    justify-content: center;
    min-height: 0;
  }
  body.client-side.guides-page .guides-toolbar-client select,
  body.client-side.guides-page .guides-toolbar-client input[type="search"] {
    min-width: 0;
    width: 100%;
  }
}

/* ==========================================================================
   41. MENUBAR TICKET — Chip evidenziate, palette portale (cyan / sky come --portal-chrome-accent)
       Sopra client-portal-chrome-glass.css (struttura, dimensioni, motion).
   ========================================================================== */

body.client-side.tickets-page .portal-tickets-page-menubar__link,
body.client-side.index-page .portal-tickets-page-menubar__link {
  font-size: clamp(0.75rem, 0.7rem + 0.18vw, 0.83rem) !important;
  color: var(--portal-chrome-accent-strong, #d4eeff) !important;
  text-shadow: 0 1px 2px rgba(0, 12, 28, 0.45);
  background: linear-gradient(
    168deg,
    rgba(56, 189, 248, 0.38) 0%,
    rgba(26, 111, 212, 0.22) 42%,
    rgba(15, 23, 42, 0.72) 100%
  ) !important;
  border-color: rgba(125, 211, 252, 0.48) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 2px 12px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(56, 189, 248, 0.12) !important;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease !important;
}

body.client-side.tickets-page .portal-tickets-page-menubar__link:hover,
body.client-side.index-page .portal-tickets-page-menubar__link:hover {
  color: #ffffff !important;
  background: linear-gradient(
    168deg,
    rgba(56, 189, 248, 0.62) 0%,
    rgba(14, 116, 180, 0.52) 100%
  ) !important;
  border-color: rgba(186, 230, 253, 0.65) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 6px 28px rgba(14, 116, 180, 0.35),
    0 0 28px rgba(125, 211, 252, 0.22) !important;
}

body.client-side.tickets-page .portal-tickets-page-menubar__link[aria-current="page"],
body.client-side.index-page .portal-tickets-page-menubar__link[aria-current="page"],
body.client-side.tickets-page .portal-tickets-page-menubar__link.is-active,
body.client-side.index-page .portal-tickets-page-menubar__link.is-active {
  color: #fafdff !important;
  background: linear-gradient(
    168deg,
    rgba(125, 211, 252, 0.52) 0%,
    rgba(37, 99, 235, 0.55) 100%
  ) !important;
  border-color: rgba(224, 242, 254, 0.82) !important;
  box-shadow:
    0 0 0 1px rgba(168, 220, 255, 0.45),
    0 5px 24px rgba(37, 99, 235, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.16) inset !important;
}

body.client-side.tickets-page .portal-tickets-page-menubar__link:focus-visible,
body.client-side.index-page .portal-tickets-page-menubar__link:focus-visible {
  outline: 2px solid var(--portal-chrome-accent, #a8dcff) !important;
  outline-offset: 3px !important;
}

/* ==========================================================================
   42. GUIDE — Sezioni PDF/Video + card distinction
       Estende §40; struttura split in due blocchi distinti.
   ========================================================================== */

/* Wrapper sezioni */
body.client-side.guides-page .guides-section {
  margin-bottom: 2rem;
}

body.client-side.guides-page .guides-section__header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

body.client-side.guides-page .guides-section__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(226, 232, 240, 0.95);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

body.client-side.guides-page .guides-section__icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

body.client-side.guides-page .guides-section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(99, 179, 237, 0.18);
  color: rgba(147, 197, 253, 0.9);
  line-height: 1;
}

/* Sezione PDF: accento oro (allineato alle card elenco) */
body.client-side.guides-page .guides-section--pdf .guides-section__count {
  background: rgba(217, 119, 6, 0.22);
  color: rgba(253, 230, 138, 0.92);
}
body.client-side.guides-page .guides-section--pdf .guide-card {
  border-color: rgba(245, 158, 11, 0.24) !important;
}
body.client-side.guides-page .guides-section--pdf .guide-card:hover {
  border-color: rgba(251, 191, 36, 0.48) !important;
}

/* Sezione Video: accento ambra/arancio */
body.client-side.guides-page .guides-section--video .guides-section__count {
  background: rgba(217, 119, 6, 0.22);
  color: rgba(251, 191, 36, 0.9);
}
body.client-side.guides-page .guides-section--video .guide-card {
  border-color: rgba(217, 119, 6, 0.22) !important;
}
body.client-side.guides-page .guides-section--video .guide-card:hover {
  border-color: rgba(251, 146, 60, 0.45) !important;
}

/* Thumb sezione Video: overlay play sopra il mesh */
body.client-side.guides-page .guides-section--video .guide-card__thumb::after {
  content: '▶';
  position: absolute;
  z-index: 2;
  bottom: 6px;
  right: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(251, 191, 36, 0.92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

/* ==========================================================================
   43. CALENDARIO INTERVENTI — Pagina client (PRD-NAV Fase 4)
   ========================================================================== */

body.client-side.interventi-client-page .interventi-wrap {
  font-family: var(--glass-font-sans, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0 3rem;
  box-sizing: border-box;
}

/* Hero — titolo centrato, niente sfondo box su h1 (override tema) */
body.client-side.interventi-client-page .interventi-hero {
  margin: 0;
  padding: 0 1.35rem 1.1rem;
  background: none;
  border: none;
  box-shadow: none;
  text-align: center;
}
body.client-side.interventi-client-page .interventi-hero h1 {
  font-family: var(--glass-font-sans, system-ui, sans-serif);
  font-size: clamp(1.12rem, 1.9vw, 1.38rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  margin: 0 auto 0.6rem;
  padding: 0;
  max-width: 100%;
  text-align: center;
  text-wrap: balance;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body.client-side.interventi-client-page .interventi-lead {
  font-size: clamp(0.875rem, 1.2vw, 0.9375rem);
  font-weight: 500;
  color: rgba(248, 250, 252, 0.85);
  max-width: 48rem;
  line-height: 1.62;
  margin: 0 auto;
  text-align: center;
  text-wrap: balance;
}

/* Pannello glass — identico a fiscal-glass-panel */
body.client-side.interventi-client-page .interventi-glass-panel {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(
    168deg,
    var(--glass-bg, rgba(28,45,72,0.88)) 0%,
    rgba(22, 40, 64, 0.9) 52%,
    rgba(18, 34, 54, 0.88) 100%
  );
  border: 1px solid var(--glass-border, rgba(255,255,255,0.42));
  border-radius: var(--glass-radius, 22px);
  box-shadow: var(--glass-shadow, 0 20px 56px rgba(0,6,20,0.55), 0 0 0 1px rgba(255,255,255,0.1) inset);
  -webkit-backdrop-filter: blur(var(--glass-blur, 10px)) saturate(165%);
  backdrop-filter: blur(var(--glass-blur, 10px)) saturate(165%);
  padding: 1.25rem 1.35rem 1.4rem;
  margin: 0 1.35rem;
  min-height: 380px;
}
/* Linea luce in cima */
body.client-side.interventi-client-page .interventi-glass-panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.38) 38%, rgba(255,255,255,0.2) 62%, transparent);
  opacity: 0.75;
}
body.client-side.interventi-client-page .interventi-glass-panel > * {
  position: relative;
  z-index: 1;
}

/*
 * Pannello calendario interventi: parità con client-fiscal-calendar-glass
 * (.fiscal-glass-panel.fiscal-cal-mount-wrap + .fiscal-cal-mount-wrap padding/scroll).
 */
body.client-side.interventi-client-page #interventi-calendar-root.interventi-glass-panel {
  margin-left: 0;
  margin-right: 0;
  background: linear-gradient(
    165deg,
    rgba(26, 42, 72, 0.55) 0%,
    rgba(18, 34, 56, 0.72) 42%,
    rgba(12, 26, 46, 0.78) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 28px 72px rgba(0, 6, 22, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.09) inset,
    0 1px 0 rgba(255, 255, 255, 0.35) inset;
  -webkit-backdrop-filter: blur(12px) saturate(165%);
  backdrop-filter: blur(12px) saturate(165%);
  padding: 1.15rem 1.2rem 1.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.client-side.interventi-client-page #interventi-calendar-root.interventi-glass-panel::-webkit-scrollbar {
  height: 8px;
}

body.client-side.interventi-client-page #interventi-calendar-root.interventi-glass-panel::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
}

body.client-side.interventi-client-page #interventi-calendar-root.interventi-glass-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}

@media screen and (max-width: 820px) {
  body.client-side.interventi-client-page #interventi-calendar-root.interventi-glass-panel {
    padding: 1rem 0.95rem 1.1rem;
    border-radius: min(var(--glass-radius, 22px), 18px);
  }
}

@media screen and (max-width: 640px) {
  body.client-side.interventi-client-page #interventi-calendar-root.interventi-glass-panel {
    padding: 0.85rem max(0.65rem, env(safe-area-inset-left, 0px)) 1rem max(0.65rem, env(safe-area-inset-right, 0px));
  }
}

body.client-side.interventi-client-page #interventi-list-section {
  scroll-margin-top: 1.25rem;
}

/* Audit anti-artefatti hover: niente blur composito sul pannello lista. */
body.client-side.interventi-client-page #interventi-list-section.interventi-glass-panel {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  isolation: isolate;
  contain: paint;
}
body.client-side.interventi-client-page #interventi-list-section.interventi-glass-panel::before {
  content: none;
  display: none;
}

/*
 * Lampeggio ~4s: solo ::after (no filter sulla card). Colori da token --mp-hl-* allineati alle chip FC
 * (.interventi-fc-event--past|today|upcoming|nearest).
 */
@keyframes mp-interventi-highlight-frame {
  0%,
  24% {
    border-color: var(--mp-hl-br-bright);
    box-shadow:
      0 0 20px var(--mp-hl-glow-a) inset,
      0 0 32px var(--mp-hl-glow-b) inset;
  }
  50%,
  78% {
    border-color: var(--mp-hl-br-soft);
    box-shadow:
      0 0 12px var(--mp-hl-glow-c) inset,
      0 0 40px var(--mp-hl-glow-d) inset;
  }
  100% {
    border-color: transparent;
    box-shadow: none;
  }
}

body.client-side.interventi-client-page .interventi-card.interventi-card--highlight {
  position: relative;
  z-index: 2;
  /* fallback se mancasse una variante di stato */
  --mp-hl-br-bright: rgba(255, 255, 255, 0.55);
  --mp-hl-br-soft: rgba(148, 163, 184, 0.45);
  --mp-hl-glow-a: rgba(255, 255, 255, 0.12);
  --mp-hl-glow-b: rgba(148, 163, 184, 0.22);
  --mp-hl-glow-c: rgba(100, 116, 139, 0.12);
  --mp-hl-glow-d: rgba(71, 85, 105, 0.16);
}

body.client-side.interventi-client-page .interventi-card.interventi-card--highlight.interventi-card--past {
  --mp-hl-br-bright: rgba(241, 245, 249, 0.58);
  --mp-hl-br-soft: rgba(148, 163, 184, 0.52);
  --mp-hl-glow-a: rgba(203, 213, 225, 0.18);
  --mp-hl-glow-b: rgba(148, 163, 184, 0.24);
  --mp-hl-glow-c: rgba(100, 116, 139, 0.14);
  --mp-hl-glow-d: rgba(71, 85, 105, 0.2);
}

body.client-side.interventi-client-page .interventi-card.interventi-card--highlight.interventi-card--today:not(.interventi-card--nearest) {
  --mp-hl-br-bright: rgba(224, 242, 254, 0.72);
  --mp-hl-br-soft: rgba(56, 189, 248, 0.52);
  --mp-hl-glow-a: rgba(125, 211, 252, 0.22);
  --mp-hl-glow-b: rgba(14, 165, 233, 0.3);
  --mp-hl-glow-c: rgba(56, 189, 248, 0.14);
  --mp-hl-glow-d: rgba(3, 105, 161, 0.22);
}

body.client-side.interventi-client-page .interventi-card.interventi-card--highlight.interventi-card--upcoming:not(.interventi-card--nearest) {
  --mp-hl-br-bright: rgba(224, 231, 255, 0.68);
  --mp-hl-br-soft: rgba(129, 140, 248, 0.48);
  --mp-hl-glow-a: rgba(165, 180, 252, 0.2);
  --mp-hl-glow-b: rgba(99, 102, 241, 0.28);
  --mp-hl-glow-c: rgba(129, 140, 248, 0.12);
  --mp-hl-glow-d: rgba(67, 56, 202, 0.2);
}

body.client-side.interventi-client-page .interventi-card.interventi-card--highlight.interventi-card--nearest {
  --mp-hl-br-bright: rgba(255, 251, 235, 0.78);
  --mp-hl-br-soft: rgba(251, 191, 36, 0.62);
  --mp-hl-glow-a: rgba(253, 224, 71, 0.26);
  --mp-hl-glow-b: rgba(251, 191, 36, 0.4);
  --mp-hl-glow-c: rgba(245, 158, 11, 0.16);
  --mp-hl-glow-d: rgba(180, 83, 9, 0.24);
}

body.client-side.interventi-client-page .interventi-card.interventi-card--highlight::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: calc(var(--glass-radius-sm, 14px) - 5px);
  box-sizing: border-box;
  pointer-events: none;
  z-index: 2;
  background: transparent;
  border: 2px solid transparent;
  animation: mp-interventi-highlight-frame 0.5s cubic-bezier(0.42, 0, 0.22, 1) 8;
}

/* Skeleton */
body.client-side.interventi-client-page .interventi-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* display:flex sopra vince su [hidden] in alcuni browser — forza nascosto dopo init JS */
body.client-side.interventi-client-page #interventi-skeleton[hidden] {
  display: none !important;
}
body.client-side.interventi-client-page #interventi-error-banner[hidden] {
  display: none !important;
}
body.client-side.interventi-client-page #interventi-empty-banner[hidden] {
  display: none !important;
}
/* Pannello glass calendario: nascosto del tutto se non ci sono interventi (JS imposta [hidden]) */
body.client-side.interventi-client-page #interventi-calendar-root[hidden] {
  display: none !important;
}
body.client-side.interventi-client-page #interventi-below-cal[hidden],
body.client-side.interventi-client-page #interventi-next-banner[hidden] {
  display: none !important;
}
body.client-side.interventi-client-page .interventi-skeleton__header {
  height: 36px;
  border-radius: 0.5rem;
  background: rgba(148, 163, 184, 0.10);
  animation: mp-skeleton-pulse 1.4s ease-in-out infinite;
}
body.client-side.interventi-client-page .interventi-skeleton__row {
  height: 22px;
  border-radius: 0.4rem;
  background: rgba(148, 163, 184, 0.07);
  animation: mp-skeleton-pulse 1.4s ease-in-out infinite;
}
body.client-side.interventi-client-page .interventi-skeleton__row:nth-child(2n) {
  width: 85%;
}
body.client-side.interventi-client-page .interventi-skeleton__row:nth-child(3n) {
  width: 70%;
}
body.client-side.interventi-client-page .interventi-skeleton__msg {
  font-size: 0.8rem;
  color: rgba(248, 250, 252, 0.5);
  text-align: center;
  margin-top: 0.5rem;
}
@keyframes mp-skeleton-pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1;   }
}

/* Banner errore — sopra il pannello calendario */
body.client-side.interventi-client-page .interventi-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1.2rem;
  margin-bottom: 1rem;
  border-radius: var(--glass-radius-sm, 14px);
  background: rgba(220, 38, 38, 0.18);
  border: 1px solid rgba(248, 113, 113, 0.45);
  color: #fca5a5;
  font-size: 0.9rem;
  line-height: 1.5;
  font-family: var(--glass-font-sans, system-ui, sans-serif);
}
body.client-side.interventi-client-page .interventi-error-banner svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  fill: #f87171;
  margin-top: 0.15rem;
}
body.client-side.interventi-client-page .interventi-error-banner p {
  margin: 0;
}

/* FullCalendar interventi: osta/css/client-interventi-calendar-glass.css (link in body da interventi-client.inc.php) */

/* Banner nessun intervento pianificato — ambra (contrasto su sfondo navy, come .interventi-next-banner) */
body.client-side.interventi-client-page .interventi-empty-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1.4rem;
  margin: 0 0 1rem;
  border-radius: var(--glass-radius, 22px);
  background: linear-gradient(160deg, rgba(120, 53, 15, 0.34) 0%, rgba(69, 26, 3, 0.48) 100%);
  border: 1px solid rgba(251, 191, 36, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(40, 18, 0, 0.22);
  color: rgba(254, 243, 199, 0.96);
  font-family: var(--glass-font-sans, system-ui, sans-serif);
}
body.client-side.interventi-client-page .interventi-empty-banner__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(251, 191, 36, 0.14);
  border: 1px solid rgba(251, 191, 36, 0.35);
}
body.client-side.interventi-client-page .interventi-empty-banner__icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #fbbf24;
}
body.client-side.interventi-client-page .interventi-empty-banner__body {
  flex: 1;
}
body.client-side.interventi-client-page .interventi-empty-banner__title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
  color: rgba(255, 251, 235, 0.98);
  line-height: 1.35;
}
body.client-side.interventi-client-page .interventi-empty-banner__sub {
  font-size: 0.88rem;
  margin: 0;
  color: rgba(254, 243, 199, 0.82);
  line-height: 1.5;
}
@media (max-width: 480px) {
  body.client-side.interventi-client-page .interventi-empty-banner {
    flex-direction: column;
    text-align: center;
    padding: 1.2rem 1rem;
  }
}

/* Stack sotto calendario: elenco a tutta larghezza .interventi-wrap (come calendario) */
body.client-side.interventi-client-page .interventi-below-cal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem 0 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Banner prossimo — sotto .interventi-hero; larghezza piena della sezione */
body.client-side.interventi-client-page .interventi-wrap > .interventi-next-banner {
  margin: 0 0 1rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Banner prossimo intervento — stessi token di .mp-fiscal-notice (contrasto / WCAG) */
body.client-side.interventi-client-page .interventi-next-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border-radius: var(--glass-radius-sm, 0.75rem);
  box-sizing: border-box;
  background: rgba(120, 53, 15, 0.28);
  border: 1px solid rgba(251, 191, 36, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(254, 243, 199, 0.98);
}
body.client-side.interventi-client-page .interventi-next-banner__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.client-side.interventi-client-page .interventi-next-banner__icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #fbbf24;
}
body.client-side.interventi-client-page .interventi-next-banner__body {
  min-width: 0;
  flex: 1;
}
body.client-side.interventi-client-page .interventi-next-banner__kicker {
  margin: 0 0 0.35rem;
  font-size: max(12px, 0.8125rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
  color: rgba(254, 243, 199, 0.98);
}
body.client-side.interventi-client-page .interventi-next-banner__title {
  margin: 0 0 0.35rem;
  font-size: clamp(0.9375rem, 2.2vw, 1.0625rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: rgba(254, 243, 199, 0.98);
  text-wrap: balance;
}
body.client-side.interventi-client-page .interventi-next-banner__meta {
  margin: 0;
  font-size: max(13px, 0.8125rem);
  line-height: 1.45;
  color: rgba(254, 243, 199, 0.92);
}

/* Pannello elenco — stesso vetro, altezza contenuto, larghezza piena dello stack */
body.client-side.interventi-client-page .interventi-list-panel.interventi-glass-panel {
  min-height: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
body.client-side.interventi-client-page .interventi-list-panel__title {
  margin: 0 0 0.35rem;
  font-family: var(--glass-font-sans, system-ui, sans-serif);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}
body.client-side.interventi-client-page .interventi-list-panel__lead {
  margin: 0 0 1rem;
  font-size: max(13px, 0.82rem);
  line-height: 1.55;
  color: rgba(226, 232, 240, 0.88);
  max-width: 42rem;
}

body.client-side.interventi-client-page .interventi-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;
}

/* -------------------------------------------------------------------------- */
/* Elenco interventi — card liquid glass (no tabella: mobile-first, una lastra) */
/* -------------------------------------------------------------------------- */

body.client-side.interventi-client-page .interventi-list-mount {
  margin-top: 0.35rem;
}

body.client-side.interventi-client-page .interventi-list-empty {
  margin: 0;
  padding: 2rem 1.35rem;
  text-align: center;
  font-size: max(14px, 0.9rem);
  line-height: 1.55;
  color: rgba(203, 213, 225, 0.82);
  border-radius: var(--glass-radius-sm, 14px);
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: rgba(15, 23, 42, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.client-side.interventi-client-page .interventi-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  isolation: isolate; /* evita bleed di glow/backdrop tra card adiacenti */
}

body.client-side.interventi-client-page .interventi-card {
  position: relative;
  margin: 0;
  padding: 1.15rem 1.2rem 1.2rem 1.35rem;
  border-radius: var(--glass-radius-sm, 14px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  contain: paint; /* isola il repaint della card: evita righe/bleed sui sibling */
  font-family: var(--glass-font-sans, system-ui, sans-serif);
  box-shadow:
    0 12px 38px rgba(0, 6, 22, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 1px 0 rgba(255, 255, 255, 0.14) inset;
  /* Niente backdrop-filter sulle card lista: su alcuni browser crea artefatti lineari in hover */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Striscia stato — un solo accento, non celle */
body.client-side.interventi-client-page .interventi-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  pointer-events: none;
  z-index: 0;
  border-radius: 2px 0 0 2px;
}

body.client-side.interventi-client-page .interventi-card__head,
body.client-side.interventi-client-page .interventi-card__title,
body.client-side.interventi-client-page .interventi-card__meta {
  position: relative;
  z-index: 1;
}

/* Passato */
body.client-side.interventi-client-page .interventi-card--past {
  background: linear-gradient(168deg, rgba(48, 58, 74, 0.75) 0%, rgba(26, 34, 46, 0.88) 100%);
  border-color: rgba(148, 163, 184, 0.22);
  color: rgba(226, 232, 240, 0.92);
}
body.client-side.interventi-client-page .interventi-card--past::before {
  background: linear-gradient(180deg, rgba(203, 213, 225, 0.55) 0%, rgba(100, 116, 139, 0.4) 100%);
}

/* Oggi */
body.client-side.interventi-client-page .interventi-card--today:not(.interventi-card--nearest) {
  background: linear-gradient(168deg, rgba(28, 82, 118, 0.62) 0%, rgba(18, 44, 68, 0.88) 100%);
  border-color: rgba(56, 189, 248, 0.32);
  color: rgba(240, 253, 255, 0.97);
}
body.client-side.interventi-client-page .interventi-card--today:not(.interventi-card--nearest)::before {
  background: linear-gradient(180deg, rgba(125, 211, 252, 0.9) 0%, rgba(14, 165, 233, 0.55) 100%);
}

/* Futuro */
body.client-side.interventi-client-page .interventi-card--upcoming:not(.interventi-card--nearest) {
  background: linear-gradient(168deg, rgba(40, 62, 98, 0.7) 0%, rgba(22, 36, 58, 0.88) 100%);
  border-color: rgba(129, 140, 248, 0.28);
  color: rgba(248, 250, 252, 0.96);
}
body.client-side.interventi-client-page .interventi-card--upcoming:not(.interventi-card--nearest)::before {
  background: linear-gradient(180deg, rgba(165, 180, 252, 0.85) 0%, rgba(99, 102, 241, 0.5) 100%);
}

/* Prossimo (anche se oggi) — palette come .mp-fiscal-notice */
body.client-side.interventi-client-page .interventi-card--nearest {
  background: rgba(120, 53, 15, 0.28);
  border-color: rgba(251, 191, 36, 0.45);
  color: rgba(254, 243, 199, 0.98);
  box-shadow:
    0 12px 38px rgba(0, 6, 22, 0.34),
    0 0 0 1px rgba(251, 191, 36, 0.12) inset;
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  backdrop-filter: blur(8px) saturate(160%);
}
body.client-side.interventi-client-page .interventi-card--nearest::before {
  background: #fbbf24;
}

body.client-side.interventi-client-page .interventi-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.85rem;
  margin-bottom: 0.45rem;
}

body.client-side.interventi-client-page .interventi-card__date {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(0.95rem, 2.1vw, 1.06rem);
  letter-spacing: -0.02em;
  color: inherit;
}

body.client-side.interventi-client-page .interventi-card__pill {
  flex-shrink: 0;
  font-size: max(10px, 0.64rem);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.3rem 0.62rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.88);
}

body.client-side.interventi-client-page .interventi-card--nearest .interventi-card__pill {
  background: rgba(251, 191, 36, 0.22);
  border-color: rgba(251, 191, 36, 0.5);
  color: rgba(254, 243, 199, 0.98);
}

body.client-side.interventi-client-page .interventi-card--nearest .interventi-card__date {
  color: #fbbf24;
}

body.client-side.interventi-client-page .interventi-card--nearest .interventi-card__meta {
  border-top-color: rgba(251, 191, 36, 0.35);
}

body.client-side.interventi-client-page .interventi-card--nearest .interventi-card__row dt {
  color: rgba(254, 243, 199, 0.72);
}

body.client-side.interventi-client-page .interventi-card--nearest .interventi-card__row dd {
  color: rgba(254, 243, 199, 0.92);
}

body.client-side.interventi-client-page .interventi-card__title {
  margin: 0 0 0.65rem;
  padding: 0;
  font-size: max(15px, 0.94rem);
  font-weight: 600;
  line-height: 1.48;
  text-wrap: balance;
  color: inherit;
}

body.client-side.interventi-client-page .interventi-card__meta {
  margin: 0;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

body.client-side.interventi-client-page .interventi-card__row {
  display: grid;
  grid-template-columns: minmax(6.75rem, 9rem) minmax(0, 1fr);
  gap: 0.15rem 1rem;
  align-items: baseline;
}

body.client-side.interventi-client-page .interventi-card__row dt {
  margin: 0;
  font-size: max(11px, 0.69rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

body.client-side.interventi-client-page .interventi-card__row dd {
  margin: 0;
  font-size: max(13px, 0.82rem);
  line-height: 1.45;
  color: rgba(248, 250, 252, 0.9);
  word-break: break-word;
}

body.client-side.interventi-client-page .interventi-card:hover {
  transform: none;
  box-shadow:
    0 12px 26px rgba(0, 6, 24, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.09) inset,
    0 1px 0 rgba(255, 255, 255, 0.18) inset;
  border-color: rgba(255, 255, 255, 0.26);
}

@media (prefers-reduced-motion: reduce) {
  body.client-side.interventi-client-page .interventi-card {
    transition: none;
  }
  body.client-side.interventi-client-page .interventi-card:hover {
    transform: none;
  }
  body.client-side.interventi-client-page .interventi-card.interventi-card--highlight::after {
    animation: none;
    border-color: var(--mp-hl-br-soft);
    box-shadow:
      0 0 18px var(--mp-hl-glow-a) inset,
      0 0 28px var(--mp-hl-glow-b) inset;
  }
}

@media (max-width: 520px) {
  body.client-side.interventi-client-page .interventi-card {
    padding: 1rem 1rem 1.1rem 1.2rem;
  }
  body.client-side.interventi-client-page .interventi-card__row {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
  body.client-side.interventi-client-page .interventi-card__row dt {
    margin-top: 0.4rem;
    color: rgba(255, 255, 255, 0.5);
  }
  body.client-side.interventi-client-page .interventi-card__meta > .interventi-card__row:first-child dt {
    margin-top: 0;
  }
}

/* Responsive — pannello (FC mobile in client-interventi-calendar-glass.css) */
@media (max-width: 480px) {
  body.client-side.interventi-client-page .interventi-glass-panel {
    padding: 0.9rem 0.75rem 1.25rem;
  }
}


/* ==========================================================================
   44. SELECT2 — z-index fix (dropdown sopra header fisso)
   ========================================================================== */

body.client-side .select2-container--open .select2-dropdown {
  z-index: var(--z-modal, 1400) !important;
}

/* Stile glass per dropdown Select2 */
body.client-side .select2-container--open .select2-dropdown {
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

body.client-side .select2-results__option {
  color: #e2e8f0 !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.9rem;
}

body.client-side .select2-results__option--highlighted {
  background: rgba(96, 165, 250, 0.2) !important;
  color: #ffffff !important;
}

body.client-side .select2-search--dropdown .select2-search__field {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px !important;
  color: #e2e8f0 !important;
  padding: 0.4rem 0.6rem !important;
}

/* Lista timezone (profilo): più aria, scroll leggibile, contrasto opzioni */
body.client-side ul#select2-timezone-dropdown-results {
  max-height: min(52vh, 340px) !important;
  padding: 0.4rem 0 !important;
  font-size: 0.9375rem !important;
  line-height: 1.45 !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.55) rgba(30, 41, 59, 0.65);
}

body.client-side ul#select2-timezone-dropdown-results .select2-results__option {
  padding: 0.55rem 1rem !important;
  margin: 1px 6px !important;
  border-radius: 8px !important;
  font-size: 0.9375rem !important;
  line-height: 1.4 !important;
}

body.client-side ul#select2-timezone-dropdown-results .select2-results__option--highlighted {
  background: rgba(59, 130, 246, 0.35) !important;
  color: #f8fafc !important;
}

body.client-side .select2-container--open .select2-dropdown:has(ul#select2-timezone-dropdown-results) {
  border-radius: 12px !important;
  padding: 0.25rem 0 0.35rem !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
}

body.client-side .select2-container--open .select2-dropdown:has(ul#select2-timezone-dropdown-results) .select2-search--dropdown {
  padding: 0.5rem 0.65rem 0.45rem !important;
}

body.client-side .select2-container--open .select2-dropdown:has(ul#select2-timezone-dropdown-results) .select2-search--dropdown .select2-search__field {
  padding: 0.55rem 0.75rem !important;
  font-size: 0.9375rem !important;
}


/* ==========================================================================
   45. FISCAL BADGE — Responsive tablet (769–1024px)
   ========================================================================== */

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .mp-nav-fiscal-badge,
  .mp-nav-interventi-badge {
    font-size: 0.62rem;
    padding: 0 0.42em;
    min-width: 1.28rem;
    min-height: 1.28rem;
    height: 1.28rem;
    margin-left: 0.24em;
  }
}


/* ==========================================================================
   46. BELL DIALOG — Posizionamento tablet (601–1024px)
   ========================================================================== */

@media screen and (min-width: 601px) and (max-width: 1024px) {
  #mp-bell-dialog {
    top: auto !important;
    bottom: 5vh;
    transform: translateX(-50%) !important;
    max-height: min(520px, 80dvh);
  }
}


/* ==========================================================================
   47. CONSISTENZA CROSS-PAGE — Spaziature e tipografia uniformi
       Audit apr. 2026: uniforma padding/gap/margin su tutte le pagine glass.
   ========================================================================== */

/* Hero / intro sections — padding uniforme */
body.client-side .glass-hero,
body.client-side .fiscal-cal-hero,
body.client-side .glass-portal-hint {
  padding: var(--sp-5, 1.25rem) var(--sp-6, 1.5rem);
  margin-bottom: var(--sp-6, 1.5rem);
}

/*
 * Auth / access stack: hint sopra #check-ticket — stessa larghezza delle card (960px),
 * dopo open-view (evita piena larghezza #content ~1000px+). Non tocca hint su dettaglio ticket.
 */
body.client-side.login-page #content p.glass-portal-hint,
body.client-side.view-page:has(#check-ticket) #content p.glass-portal-hint,
body.client-side.tickets-page:has(#check-ticket) #content p.glass-portal-hint,
body.client-side.open-page #content > p.glass-portal-hint,
body.client-side.open-page .portal-open-stack .glass-portal-hint {
  max-width: min(960px, 100%) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Glass panel uniformi — padding e border-radius */
body.client-side .glass-panel,
body.client-side .fiscal-glass-panel,
body.client-side .guide-card,
body.client-side .interventi-glass-panel {
  padding: var(--sp-5, 1.25rem) var(--sp-6, 1.5rem);
  border-radius: 12px;
}

/* Section gap tra blocchi di contenuto */
body.client-side #content > h1,
body.client-side #content > h2,
body.client-side #content > .glass-hero,
body.client-side #content > .glass-panel,
body.client-side #content > form {
  margin-bottom: var(--sp-6, 1.5rem);
}

/* Form fields — gap uniforme */
body.client-side #content form table.form td {
  padding: var(--sp-2, 0.5rem) var(--sp-1, 0.25rem);
}

/* Stat card uniformi nella dashboard */
body.client-side .portal-tickets-dashboard__stat {
  padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem);
}

/* Card hover sottile — effetto glass su tutti i card interattivi */
body.client-side .guide-card:hover,
body.client-side .glass-panel:hover {
  border-color: rgba(96, 165, 250, 0.25);
  transition: border-color var(--mp-transition-normal, 0.25s ease);
}

@media screen and (max-width: 600px) {
  body.client-side .glass-hero,
  body.client-side .fiscal-cal-hero,
  body.client-side .glass-portal-hint {
    padding: var(--sp-4, 1rem) var(--sp-3, 0.75rem);
    margin-bottom: var(--sp-4, 1rem);
  }

  body.client-side .glass-panel,
  body.client-side .fiscal-glass-panel,
  body.client-side .guide-card,
  body.client-side .interventi-glass-panel {
    padding: var(--sp-4, 1rem) var(--sp-3, 0.75rem);
  }
}


/* ==========================================================================
   48. TOAST NOTIFICATION SYSTEM
       Sostituisce i banner legacy (#msg_notice, .error_bar, etc.)
       con toast animati bottom-right, stile glass.
   ========================================================================== */

#mp-toast-container {
  position: fixed;
  bottom: var(--sp-6, 1.5rem);
  right: var(--sp-6, 1.5rem);
  z-index: var(--z-toast, 1500);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--sp-2, 0.5rem);
  pointer-events: none;
  max-width: min(420px, calc(100vw - 2rem));
}

.mp-toast {
  pointer-events: auto;
  padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem);
  border-radius: 10px;
  font-family: Montserrat, "Open Sans", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  color: #f1f5f9;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.mp-toast--visible {
  transform: translateX(0);
  opacity: 1;
}

.mp-toast--exit {
  transform: translateX(100%);
  opacity: 0;
}

/* Varianti colore */
.mp-toast--info {
  background: rgba(37, 99, 235, 0.85);
  border-left: 3px solid #60a5fa;
}

.mp-toast--success {
  background: rgba(22, 163, 74, 0.85);
  border-left: 3px solid #4ade80;
}

.mp-toast--warning {
  background: rgba(217, 119, 6, 0.85);
  border-left: 3px solid #fbbf24;
  color: #fffbeb;
}

.mp-toast--error {
  background: rgba(220, 38, 38, 0.85);
  border-left: 3px solid #f87171;
}

@media screen and (max-width: 480px) {
  #mp-toast-container {
    right: var(--sp-2, 0.5rem);
    left: var(--sp-2, 0.5rem);
    bottom: var(--sp-4, 1rem);
    max-width: none;
  }
}


/* ==========================================================================
   49. NAV TOOLTIP — CSS-only tooltip sulle voci della navbar
   ========================================================================== */

body.client-side #nav a[title] {
  position: relative;
}

body.client-side #nav a[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  z-index: var(--z-dropdown, 1000);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Freccia del tooltip */
body.client-side #nav a[title]:hover::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(15, 23, 42, 0.92);
  pointer-events: none;
  z-index: var(--z-dropdown, 1000);
}


/* ==========================================================================
   50. EMPTY STATE — Messaggio per lista ticket vuota
   ========================================================================== */

.mp-empty-state {
  text-align: center;
  padding: var(--sp-10, 2.5rem) var(--sp-6, 1.5rem);
  color: #94a3b8;
}

.mp-empty-state__icon {
  display: block;
  margin: 0 auto var(--sp-4, 1rem);
  opacity: 0.4;
  color: #64748b;
}

.mp-empty-state__title {
  font-size: var(--fs-h3, 1.25rem);
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: var(--sp-2, 0.5rem);
}

.mp-empty-state__text {
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 400px;
  margin: 0 auto;
}

/* ==========================================================================
   51. RF-02 NAVBAR CLIENT — soglia hamburger unica a 900px
   ========================================================================== */
@media screen and (max-width: 900px) {
  body.client-side #nav-wrapper,
  body.client-side #header #nav.pull-right,
  body.client-side #nav-inner #nav {
    display: none !important;
  }

  body.client-side #right-menu,
  body.client-side #right-menu .c-hamburger {
    display: flex !important;
  }

  body.client-side #right-menu .c-hamburger {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* ==========================================================================
   52. CLIENT BELL PARITY — bottone/popup client allineati allo stile staff
   ========================================================================== */
body.client-side {
  --mp-bell-dlg-bd: rgba(148, 163, 184, 0.28);
  --mp-bell-dlg-bg: linear-gradient(165deg, rgba(13, 24, 46, 0.99) 0%, rgba(8, 15, 32, 0.99) 100%);
  --mp-bell-dlg-shadow: 0 20px 52px rgba(4, 12, 28, 0.58);
  --mp-bell-dlg-backdrop: rgba(2, 12, 28, 0.78);
  --mp-bell-dlg-head-bd: rgba(100, 116, 139, 0.34);
  --mp-bell-dlg-close-br: rgba(56, 189, 248, 0.4);
  --mp-bell-dlg-close-bg: rgba(14, 116, 144, 0.22);
  --mp-bell-dlg-close-bg-h: rgba(34, 160, 200, 0.32);
  --mp-bell-dlg-close-br-h: rgba(125, 211, 252, 0.55);
  --mp-bell-dlg-card-bd: rgba(148, 163, 184, 0.18);
  --mp-bell-dlg-card-accent: rgba(45, 212, 191, 0.5);
  --mp-bell-dlg-card-fill: linear-gradient(95deg, rgba(56, 189, 248, 0.11) 0%, rgba(255, 255, 255, 0.045) 44%);
  --mp-bell-dlg-row-hover-bd: rgba(125, 211, 252, 0.35);
  --mp-bell-dlg-muted: rgba(186, 230, 253, 0.92);
  --mp-bell-dlg-muted2: rgba(147, 197, 253, 0.88);
  --mp-bell-dlg-muted3: rgba(125, 179, 255, 0.82);
}

body.client-side #header #header-inner .mp-bell {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  position: relative;
  overflow: visible;
  border: 1px solid var(--mp-bell-ring, rgba(255, 255, 255, 0.16));
  background: var(--mp-bell-face, linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 48%, rgba(15, 23, 42, 0.35) 100%));
  background-color: var(--mp-bell-tint, rgba(30, 41, 59, 0.42));
  color: var(--mp-bell-icon, #cbd5e1);
  -webkit-backdrop-filter: blur(14px) saturate(155%);
  backdrop-filter: blur(14px) saturate(155%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 6px 18px rgba(0, 6, 18, 0.35), var(--mp-bell-outer-glow, 0 0 12px rgba(148, 163, 184, 0.12));
}

body.client-side #header #header-inner .mp-bell:hover {
  border-color: var(--mp-bell-ring-hover, rgba(255, 255, 255, 0.26));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 10px 26px rgba(0, 4, 16, 0.45), var(--mp-bell-outer-glow-hover, var(--mp-bell-outer-glow, 0 0 16px rgba(148, 163, 184, 0.2)));
}

body.client-side #header #header-inner .mp-bell__badge,
body.client-side #header #header-inner .mp-bell__fiscal-badge,
body.client-side #header #header-inner .mp-bell__interventi-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  border: 1.25px solid rgba(255, 255, 255, 0.46);
  color: #fff5f5;
  background: linear-gradient(155deg, #ff6b6b 0%, #ef4444 48%, #991b1b 100%);
  box-shadow:
    0 0 0 1px rgba(2, 6, 23, 0.34) inset,
    0 0 10px rgba(239, 68, 68, 0.45),
    0 1px 3px rgba(2, 6, 23, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

body.client-side #header #header-inner .mp-bell__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  transform: none;
  z-index: 4;
}

/* Ticket in attesa — rosso brand alert */
body.client-side #header #header-inner .mp-bell__badge {
  color: #fff5f5;
  background: linear-gradient(155deg, #ff6b6b 0%, #ef4444 48%, #991b1b 100%);
  box-shadow:
    0 0 0 1px rgba(2, 6, 23, 0.34) inset,
    0 0 10px rgba(239, 68, 68, 0.45),
    0 1px 3px rgba(2, 6, 23, 0.45);
}

body.client-side #header #header-inner .mp-bell__fiscal-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  transform: none;
  z-index: 3;
}

/* Scadenze fiscali — ambra */
body.client-side #header #header-inner .mp-bell__fiscal-badge {
  color: #fff7ed;
  background: linear-gradient(155deg, #fde68a 0%, #f59e0b 48%, #b45309 100%);
  box-shadow:
    0 0 0 1px rgba(2, 6, 23, 0.34) inset,
    0 0 10px rgba(245, 158, 11, 0.38),
    0 1px 3px rgba(2, 6, 23, 0.45);
}

body.client-side #header #header-inner .mp-bell__interventi-badge {
  position: absolute;
  top: -4px;
  left: -4px;
  transform: none;
  z-index: 2;
}

body.client-side #header #header-inner .pull-right.flush-right,
body.client-side #header #header-inner .portal-header-actions {
  overflow: visible !important;
}

/* profile.php: evita che #nav-wrapper copra la campanella header */
body.client-side > #container > #header {
  position: relative;
  z-index: 12 !important;
}

body.client-side > #container > #nav-wrapper {
  position: relative;
  z-index: 5 !important;
}

/* Interventi in programma — teal/cyan */
body.client-side #header #header-inner .mp-bell__interventi-badge {
  color: #ecfeff;
  background: linear-gradient(155deg, #67e8f9 0%, #22d3ee 42%, #0f766e 100%);
  box-shadow:
    0 0 0 1px rgba(2, 6, 23, 0.34) inset,
    0 0 10px rgba(34, 211, 238, 0.34),
    0 1px 3px rgba(2, 6, 23, 0.45);
}

body.client-side #mp-bell-dialog {
  border: 1px solid var(--mp-bell-dlg-bd);
  border-radius: 14px;
  background: var(--mp-bell-dlg-bg);
  box-shadow: var(--mp-bell-dlg-shadow);
}

body.client-side #mp-bell-dialog::backdrop {
  background: var(--mp-bell-dlg-backdrop);
  /* perf 2026-05-13: aggiunto -webkit- per Safari */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

body.client-side .mp-bell-dialog__head {
  border-bottom: 1px solid var(--mp-bell-dlg-head-bd);
}

body.client-side .mp-bell-dialog__close {
  border-color: var(--mp-bell-dlg-close-br);
  background: var(--mp-bell-dlg-close-bg);
}

body.client-side .mp-bell-dialog__close:hover,
body.client-side .mp-bell-dialog__close:focus-visible {
  background: var(--mp-bell-dlg-close-bg-h);
  border-color: var(--mp-bell-dlg-close-br-h);
}

body.client-side .mp-bell-dialog__panel {
  border-color: var(--mp-bell-dlg-card-bd);
  background: var(--mp-bell-dlg-card-fill);
}

/* Variante client esplicita: campanella rossa (liquid glass) + popup parity staff */
body.client-side #header #header-inner #mp-bell-btn.mp-bell {
  --mp-bell-tint: rgba(90, 10, 24, 0.62);
  --mp-bell-icon: #fecaca;
  --mp-bell-ring: rgba(248, 113, 113, 0.58);
  --mp-bell-ring-hover: rgba(252, 165, 165, 0.72);
  --mp-bell-outer-glow: 0 0 24px rgba(220, 38, 38, 0.48);
  --mp-bell-outer-glow-hover: 0 0 30px rgba(220, 38, 38, 0.62);
  --mp-bell-badge-bg: linear-gradient(145deg, #ef4444, #991b1b);
  --mp-bell-badge-glow: 0 0 14px rgba(220, 38, 38, 0.72);
  border-color: var(--mp-bell-ring) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 48%, rgba(120, 18, 18, 0.44) 100%) !important;
  background-color: var(--mp-bell-tint) !important;
  color: var(--mp-bell-icon) !important;
}

body.client-side #header #header-inner #mp-bell-btn.mp-bell:hover {
  border-color: var(--mp-bell-ring-hover) !important;
}

body.client-side #header #header-inner #mp-bell-btn .mp-bell__badge {
  background: var(--mp-bell-badge-bg) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22) inset, var(--mp-bell-badge-glow) !important;
}

body.client-side #mp-bell-dialog[open] {
  border: 1px solid var(--mp-bell-dlg-bd) !important;
  border-radius: 14px !important;
  background: var(--mp-bell-dlg-bg) !important;
  box-shadow: var(--mp-bell-dlg-shadow) !important;
  color: var(--portal-chrome-text) !important;
}

body.client-side #mp-bell-dialog[open] .mp-bell-dialog__head {
  border-bottom: 1px solid var(--mp-bell-dlg-head-bd) !important;
}

body.client-side #mp-bell-dialog[open] .mp-bell-dialog__title {
  color: #f8fafc !important;
}

body.client-side #mp-bell-dialog[open] .mp-bell-dialog__body {
  scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
}

body.client-side #mp-bell-dialog[open] .mp-bell-dialog__panel {
  border: 1px solid var(--mp-bell-dlg-card-bd) !important;
  background: var(--mp-bell-dlg-card-fill) !important;
  box-shadow: 0 10px 24px rgba(4, 12, 28, 0.35) !important;
}

body.client-side #mp-bell-dialog[open] .mp-bell-dialog__item + .mp-bell-dialog__item {
  border-top: 1px solid rgba(148, 163, 184, 0.2) !important;
}

body.client-side #mp-bell-dialog[open] .mp-bell-dialog__link:hover,
body.client-side #mp-bell-dialog[open] .mp-bell-dialog__fiscal-item:hover {
  background: rgba(34, 211, 238, 0.12) !important;
}

/* Rimozione testo/placeholder nel selettore lingue header */
body.client-side #nav-wrapper #nav-inner #lang-wrapper .button-text-container.shrink {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}