/* Stili globali Turni Chiosco AVIS — mobile first */

:root {
  --tc-rosa-buco: #ffd7e0; /* sfondo celle "buco" nel tabellone */
  --tc-primario: #6ea8dc;        /* azzurro pastello: colore brand */
  --tc-primario-hover: #5b96cf;
  --tc-primario-attivo: #4f87c0;
}

/* ---- Brand: l'azzurro pastello sostituisce il rosso Bootstrap su pulsanti e barre ---- */
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--tc-primario);
  --bs-btn-border-color: var(--tc-primario);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--tc-primario-hover);
  --bs-btn-hover-border-color: var(--tc-primario-hover);
  --bs-btn-focus-shadow-rgb: 110, 168, 220;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--tc-primario-attivo);
  --bs-btn-active-border-color: var(--tc-primario-attivo);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--tc-primario);
  --bs-btn-disabled-border-color: var(--tc-primario);
}
.btn-outline-danger {
  --bs-btn-color: var(--tc-primario-attivo);
  --bs-btn-border-color: var(--tc-primario);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--tc-primario);
  --bs-btn-hover-border-color: var(--tc-primario);
  --bs-btn-focus-shadow-rgb: 110, 168, 220;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--tc-primario);
  --bs-btn-active-border-color: var(--tc-primario);
}
.navbar.bg-danger {
  background-color: var(--tc-primario) !important;
}
/* titoli e icone brand (non i messaggi di errore) */
h1.text-danger,
h2 .bi.text-danger,
.display-4.text-danger {
  color: var(--tc-primario) !important;
}

/* badge bianco per gli orari di arrivo/uscita nel tabellone */
.badge-orario {
  background-color: #fff;
  color: #333;
  border: 1px solid #bbb;
  font-weight: 600;
}

/* Su mobile i pulsanti nei form devono essere comodi da toccare */
@media (max-width: 576px) {
  .btn {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
}

/* ---- Tabellone ---- */
.tabellone {
  font-size: 0.85rem;
  white-space: nowrap;
}
.tabellone .colonna-mansione {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 2;
  min-width: 150px;
  font-weight: 500;
}
.tabellone .anno-cella,
.tabellone .intestazione-giorno,
.tabellone .intestazione-orario {
  color: #0070c0;
  font-weight: 700;
}
.tabellone .titolo-sezione {
  font-size: 1.05rem;
  text-transform: uppercase;
}
.tabellone .riga-zebra td {
  background-color: #d9d9d9;
}
.tabellone .riga-zebra .colonna-mansione {
  background-color: #d9d9d9;
}
.cella-buco {
  background-color: var(--tc-rosa-buco) !important;
  text-align: center;
  color: #a33;
}
.cella-fuori {
  background-color: #f3f3f3 !important;
}
.cella-cliccabile {
  cursor: pointer;
}
.cella-cliccabile:hover {
  outline: 2px solid var(--tc-primario);
  outline-offset: -2px;
}
.tabellone-scroll {
  max-height: calc(100vh - 210px);
  overflow: auto;
}
.riga-riserve td {
  background: #fffbe6;
}

/* Evidenziazioni ricerca volontario (legenda) */
.risultato-arancio {
  background-color: #ffe0b3 !important;
}
.risultato-azzurro {
  background-color: #cfe9ff !important;
}
.risultato-rosso {
  background-color: #ffc4c4 !important;
}

/* ---- Badge "magico" turno giovani (bordo animato, riempimento trasparente) ---- */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.magic-badge {
  position: relative;
  display: inline-block;
  border-radius: 50px;
}

.magic-badge::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50px;
  padding: 3px; /* spessore del bordo */
  background: conic-gradient(from var(--angle), #ff007f, #7f00ff, #00f0ff, #00ff88, #ff007f);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotate-gradient 3s linear infinite;
  pointer-events: none;
}

.magic-badge::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50px;
  background: conic-gradient(from var(--angle), #ff007f, #7f00ff, #00f0ff, #00ff88, #ff007f);
  z-index: -1;
  filter: blur(8px);
  opacity: 0.45;
  animation: rotate-gradient 3s linear infinite;
}

.magic-badge:hover {
  transform: scale(1.04);
}

.magic-badge:hover::after {
  opacity: 0.8;
  filter: blur(12px);
}

.magic-badge .btn {
  border-radius: 50px;
  background: transparent;
}

@keyframes rotate-gradient {
  to {
    --angle: 360deg;
  }
}

/* Tasto Salva che pulsa dall'azzurro al blu quando ci sono modifiche non salvate */
@keyframes pulsa-blu {
  0%, 100% {
    background-color: #4dabf7;
    border-color: #4dabf7;
  }
  50% {
    background-color: #0a58ca;
    border-color: #0a58ca;
  }
}

.pulsa-salva {
  animation: pulsa-blu 1.5s ease-in-out infinite;
}