.month-bar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;position:relative;width:100%}
.month-dd{position:relative;display:inline-block;margin:0}
.month-btn{
  white-space:nowrap;display:inline-block;width:auto;
  padding:5px 9px;font-size:11px;font-weight:400;letter-spacing:.3px;line-height:1.1;
  border:1px solid rgba(0,0,0,.25);
}
.month-btn.active{outline:2px solid #000;outline-offset:-2px}

.month-dropdown{
  display:none; position:absolute; top:100%;
  left:50%; transform:translateX(-50%);
  margin-top:2px; min-width:260px;
  max-width:min(520px, 96vw); width:auto;
  z-index:9999; background:#fff;
}
.month-dropdown.show{display:block}

@media (max-width: 600px){
  .month-btn{padding:5px 8px;font-size:11px}
  .month-dropdown{left:0;transform:translateX(0);min-width:unset;width:96vw;max-width:96vw}
}

/* colori pulsanti */
.month-btn.month-01{background:#00cfe6}
.month-btn.month-02{background:#69b7ff}
.month-btn.month-03{background:#3b86ff;color:#fff}
.month-btn.month-04{background:#4caf50;color:#fff}
.month-btn.month-05{background:#ff9800}
.month-btn.month-06{background:#fff2a8}
.month-btn.month-07{background:#ffe36a}
.month-btn.month-08{background:#ffc107}
.month-btn.month-09{background:#bdbdbd}
.month-btn.month-10{background:#9e9e9e;color:#fff}
.month-btn.month-11{background:#757575;color:#fff}
.month-btn.month-12{background:#616161;color:#fff}
.month-btn.month-00{background:#000;color:#fff}

/* colori blocchi range */
.month-range{padding:8px 10px;font-size:11px;font-weight:400;color:inherit}
.month-range.month-01{background:#00cfe6 !important;color:#000}
.month-range.month-02{background:#7ec1ff !important;color:#000}
.month-range.month-03{background:#3a7bf6 !important;color:#fff}
.month-range.month-04{background:#49a84a !important;color:#fff}
.month-range.month-05{background:#ffa000 !important;color:#000}
.month-range.month-06{background:#fff59d !important;color:#000}
.month-range.month-07{background:#ffe04c !important;color:#000}
.month-range.month-08{background:#ffbf00 !important;color:#000}
.month-range.month-09{background:#bdbdbd !important;color:#000}
.month-range.month-10{background:#757575 !important;color:#fff}
.month-range.month-11{background:#4d4d4d !important;color:#fff}
.month-range.month-12{background:#000 !important;color:#fff}
.month-range.month-00{background:#000 !important;color:#fff}

/* Dropdown: giorno sopra, artisti sotto, numero centrato */
/* Giorno: strisciolina compatta, tutta cliccabile */
.month-dropdown .day-row{
  display:block !important;
  width:100% !important;
  margin:0 0 4px 0;
}

.month-dropdown .day-num{
  padding:0 !important;
  margin:0 0 4px 0 !important;
  border:0 !important;
}

/* Rende tutta la riga del numero cliccabile e compatta */
.month-dropdown .day-num a,
.month-dropdown .day-num span{
  display:block !important;
  width:100% !important;
  padding:3px 8px !important;
  line-height:1.1 !important;
  border-radius:6px;
  text-align:center !important;
  background:transparent;
}

/* Hover grigio “soft” solo sui link */
.month-dropdown .day-num a:hover{
  background:#eee !important;
  text-decoration:none !important;
}

/* Giorni senza link: niente hover, aspetto neutro */
.month-dropdown .day-num span{
  opacity:.7;
  cursor:default !important;
}

/* Lista artisti: ancora più compatta sotto */
.month-dropdown .artist-col{
  padding:0 4px 4px 4px !important;
}
.month-dropdown .artist-col .w3-button{
  padding:2px 8px !important;
}

/* Dropdown leggermente più largo (senza esagerare) */
.month-dropdown{
  min-width: 320px !important;
  max-width: min(640px, 96vw) !important;
}

/* Giorno: contorno al numero (strisciolina) */
.month-dropdown .day-num a,
.month-dropdown .day-num span{
  border: 1px solid rgba(0,0,0,.25) !important;
  border-radius: 6px !important;
}

/* Hover più “pulito” */
.month-dropdown .day-num a:hover{
  background:#eee !important;
  border-color: rgba(0,0,0,.35) !important;
}

/* Iconcina "collections" (numero opere) colorata come il mese — SOLO nei dropdown barra */
.month-dropdown .month-blocks[data-month="01"] a.link-tight .material-icons{color:#00cfe6 !important;}
.month-dropdown .month-blocks[data-month="02"] a.link-tight .material-icons{color:#69b7ff !important;}
.month-dropdown .month-blocks[data-month="03"] a.link-tight .material-icons{color:#3b86ff !important;}
.month-dropdown .month-blocks[data-month="04"] a.link-tight .material-icons{color:#4caf50 !important;}
.month-dropdown .month-blocks[data-month="05"] a.link-tight .material-icons{color:#ff9800 !important;}
.month-dropdown .month-blocks[data-month="06"] a.link-tight .material-icons{color:#c9b800 !important;} /* giallo un po' più leggibile */
.month-dropdown .month-blocks[data-month="07"] a.link-tight .material-icons{color:#caa600 !important;}
.month-dropdown .month-blocks[data-month="08"] a.link-tight .material-icons{color:#ffc107 !important;}
.month-dropdown .month-blocks[data-month="09"] a.link-tight .material-icons{color:#7d7d7d !important;}
.month-dropdown .month-blocks[data-month="10"] a.link-tight .material-icons{color:#9e9e9e !important;}
.month-dropdown .month-blocks[data-month="11"] a.link-tight .material-icons{color:#757575 !important;}
.month-dropdown .month-blocks[data-month="12"] a.link-tight .material-icons{color:#616161 !important;}
.month-dropdown .month-blocks[data-month="00"] a.link-tight .material-icons{color:#000 !important;}


/* DIC: blocchi stesso colore del pulsante */
.month-range.month-12{
  background:#616161 !important;
  color:#fff !important;
}

/* ================================
   FIX grafica blocco "?" (month-00)
   ================================ */

/* compatta le righe degli artisti nel blocco ? */
.month-dropdown .month-blocks[data-month="00"] a.w3-button,
.month-dropdown .month-blocks[data-month="00"] span.w3-button{
  line-height: 1.05 !important;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  margin: 0 !important;
}

/* titoli (LETTERA) nel blocco ? più leggibili su nero */
.month-dropdown .month-blocks[data-month="00"] .month-range.month-00{
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}