*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Colore di marca del pannello, da EventCheck:Graphic:PrimaryColor (lo imposta
   alert.js su :root). Prima era scritto a mano in quattro punti di questo
   foglio, quindi il modulo eventi restava blu anche dove gli altri due chatbot
   erano già stati ricolorati da appsettings.
   I colori del semaforo NON stanno qui: verde/ambra/rosso hanno un significato
   e non devono seguire la marca del cliente. */
:root {
  --ec-primary:       #085686;
  --ec-primary-hover: #3185db;
}

/* ── Indicatore floating ─────────────────────────────────────────────────── */

#ec-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  z-index: 999;
  transition: transform .15s, background .3s, box-shadow .3s;
  font-size: 1.3rem;
  font-weight: 900;
  color: #fff;
}

#ec-toggle:hover { transform: scale(1.08); }

#ec-toggle.ec--loading {
  background: #6b7280;
  animation: ec-pulse-gray 1.6s ease-in-out infinite;
}

#ec-toggle.ec--green  { background: #16a34a; }
#ec-toggle.ec--yellow { background: #d97706; animation: ec-pulse-amber 2.4s ease-in-out infinite; }
#ec-toggle.ec--red    { background: #dc2626; animation: ec-pulse-red   1.2s ease-in-out infinite; }
#ec-toggle.ec--error  { background: #9ca3af; }

#ec-toggle.hidden { display: none; }

#ec-verify-btn {
  position: fixed;
  bottom: 26px;
  right: 88px;
  padding: 0 18px;
  height: 44px;
  background: var(--ec-primary);
  color: #fff;
  border: none;
  border-radius: 22px;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  z-index: 999;
  white-space: nowrap;
  transition: background .15s;
  /* Per il logo opzionale accanto all'etichetta (vedi .ec-btn-logo). Il layout
     sta qui e non nella pagina ospite di proposito: il mockup ridichiara padding,
     colori e raggio del bottone ma non display/gap, quindi queste tre reggono
     anche li'. Senza logo, inline-flex su un unico figlio non cambia niente. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#ec-verify-btn:hover { background: var(--ec-primary-hover); }

/* Logo nel bottone, da EventCheck:Graphic:LogoUrl. 20px su un bottone alto 44:
   si legge senza rubare la scena all'etichetta.
   max-width: un logo largo (marchio esteso, non il solo simbolo) altrimenti
   spinge "Verifica conflitti" fuori dal bottone, che e' a larghezza di contenuto.
   object-fit: se il tetto entra in gioco l'immagine si rimpicciolisce, non si
   deforma. Se non carica affatto, bridge.js la rimuove e resta la sola scritta. */
.ec-btn-logo {
  height: 20px;
  width: auto;
  max-width: 72px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

@keyframes ec-pulse-gray  { 0%,100%{box-shadow:0 0 0 0 rgba(107,114,128,.5)} 50%{box-shadow:0 0 0 10px rgba(107,114,128,0)} }
@keyframes ec-pulse-amber { 0%,100%{box-shadow:0 0 0 0 rgba(217,119,6,.5)}   50%{box-shadow:0 0 0 10px rgba(217,119,6,0)} }
@keyframes ec-pulse-red   { 0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.6)}   50%{box-shadow:0 0 0 14px rgba(220,38,38,0)} }

/* ── Spinner nel loading ─────────────────────────────────────────────────── */

.ec-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ec-spin .7s linear infinite;
}

@keyframes ec-spin { to { transform: rotate(360deg); } }

/* ── Pannello analisi ────────────────────────────────────────────────────── */

#ec-panel {
  position: fixed;
  bottom: 88px;
  right: 24px;
  width: 400px;
  max-height: 560px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,.2);
  overflow: hidden;
  z-index: 1000;
  transition: opacity .2s, transform .2s;
}

#ec-panel.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

/* ── Header del pannello ─────────────────────────────────────────────────── */

#ec-panel-header {
  padding: 12px 16px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  transition: background .3s;
}

#ec-panel-header.ec--green  { background: #16a34a; }
#ec-panel-header.ec--yellow { background: #d97706; }
#ec-panel-header.ec--red    { background: #dc2626; }
#ec-panel-header.ec--loading,
#ec-panel-header.ec--error  { background: #4b5563; }

.ec-header-title { font-weight: 700; font-size: .95rem; }
.ec-header-sub   { font-size: .75rem; opacity: .75; margin-top: 1px; }

#ec-close-btn {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  opacity: .75;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: opacity .15s, background .15s;
}
#ec-close-btn:hover { opacity: 1; background: rgba(255,255,255,.15); }
#ec-close-btn svg   { width: 16px; height: 16px; }

/* ── Corpo del pannello ──────────────────────────────────────────────────── */

#ec-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  font-size: .88rem;
  color: #1a1a1a;
  line-height: 1.6;
}

/* ── Markdown nel body ───────────────────────────────────────────────────── */

#ec-panel-body p             { margin: .4em 0; }
#ec-panel-body p:first-child { margin-top: 0; }
#ec-panel-body p:last-child  { margin-bottom: 0; }

#ec-panel-body h3,
#ec-panel-body h4 {
  margin: .7em 0 .25em;
  font-size: .92rem;
  font-weight: 700;
  color: var(--ec-primary);
}

#ec-panel-body strong { font-weight: 700; }
#ec-panel-body em     { font-style: italic; }

#ec-panel-body ul,
#ec-panel-body ol { margin: .4em 0 .4em 1.2em; }
#ec-panel-body li { margin: .2em 0; }

#ec-panel-body hr {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: .8em 0;
}

/* ── Sezione conflitti DB ────────────────────────────────────────────────── */

.ec-conflicts-section {
  margin-top: 14px;
  border-top: 1px solid #e5e7eb;
  padding-top: 10px;
}

.ec-conflicts-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b7280;
  margin-bottom: 6px;
}

.ec-conflict-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: .82rem;
}

.ec-conflict-card .ec-card-title { font-weight: 600; color: #111; }

.ec-conflict-card .ec-card-meta {
  color: #374151;
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: .78rem;
}

.ec-conflict-card .ec-card-meta span::before { content: '· '; }
.ec-conflict-card .ec-card-meta span:first-child::before { content: ''; }

.ec-conflict-card .ec-card-meta .ec-days {
  background: var(--ec-primary);
  color: #fff;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 600;
}
.ec-conflict-card .ec-card-meta .ec-days::before { content: ''; }

.ec-conflict-card a {
  color: #1d4ed8;
  text-decoration: none;
  font-size: .78rem;
}
.ec-conflict-card a:hover { text-decoration: underline; }

/* ── Eventi di altro settore (voce raggruppata) ──────────────────────────── */
/*
   Deliberatamente più sobria delle card dei conflitti: non è un conflitto, è
   un indicatore di affollamento. Il numero è la cosa da vedere; l'elenco resta
   chiuso e si apre solo se qualcuno lo cerca.
*/

/* appearance:none e font:inherit: senza, un <button> si porta dietro cornice,
   sfondo e font del sistema operativo — ed è esattamente il riquadro grigio che
   compariva al posto di questa riga quando il foglio di stile non arrivava. */
.ec-other-head {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 7px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: #9ca3af;
}

.ec-other-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Il numero è la cosa da leggere: resta l'unico elemento in tinta piena. */
.ec-other-count {
  flex-shrink: 0;
  font-size: .78rem;
  font-weight: 700;
  color: #4b5563;
}

/* Freccia sul lato opposto: dice che la riga si apre, senza scriverlo. */
.ec-other-chevron {
  margin-left: auto;
  flex-shrink: 0;
  font-size: .6rem;
  line-height: 1;
  transition: transform .15s;
}
.ec-other-head[aria-expanded="true"] .ec-other-chevron { transform: rotate(180deg); }
.ec-other-head:hover { color: #4b5563; }

/* Conteggio per giornata: è questo che risponde a "sono tanti in quei giorni?".
   Niente riquadri: una riga di testo minuta, che non compete con le card dei
   conflitti veri qui sopra. */
.ec-other-days {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
  margin-top: 5px;
  font-size: .76rem;
  color: #6b7280;
}
.ec-other-days b { font-weight: 600; color: #4b5563; }

.ec-other-list {
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
  font-size: .78rem;
  color: #6b7280;
  border-left: 2px solid #e5e7eb;
}
.ec-other-list.hidden { display: none; }
.ec-other-list li      { margin: .3em 0; padding-left: 9px; }
.ec-other-list .ec-o-meta { color: #9ca3af; }
.ec-other-list a       { color: #4b5563; text-decoration: none; }
.ec-other-list a:hover { color: var(--ec-primary); text-decoration: underline; }

/* ── Stato di caricamento nel pannello ───────────────────────────────────── */

.ec-loading-text {
  color: #6b7280;
  font-style: italic;
  padding: 8px 0;
}

/* Responsive: pannello occupa tutta la larghezza su schermi piccoli */
@media (max-width: 460px) {
  #ec-panel {
    left: 12px;
    right: 12px;
    width: auto;
    bottom: 80px;
  }
}