/* === Colore menù e dettagli === */
:root{
  --accent: #f4a300;
}

/* HEADER */
.header-spacer { height: 100px; }
#main-header.shrink + .header-spacer { height: 50px; }

/* === CONTROLLI === */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

.switch { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.switch input { display: none; }
.switch .slider {
  width: 46px; height: 24px; background: #ccc; border-radius: 20px;
  position: relative; transition: background .18s;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.switch .slider::before {
  content:""; width: 20px; height: 20px; background: #fff; border-radius: 50%;
  position: absolute; top: 2px; left: 2px; transition: transform .18s;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(22px); }
.switch .label { font-size: .92rem; color: var(--muted); text-transform: none; }

/* === FILTRI === */
.filters { display: flex; gap: 1rem; flex-wrap: wrap; transition: opacity .18s; }
.filters.disabled { opacity: .52; }
.filters select {
  appearance: none;
  background: #fff url("data:image/svg+xml;utf8,<svg fill='%23777' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 12px center;
  background-size: 12px;
  padding: .6rem 2.1rem .6rem .9rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-size: .95rem;
  text-transform: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.03);
  min-width: 180px;
}

/* === TABELLA === */
table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--border); border-radius: .9rem; text-align: center;
}
thead th {
  padding: 1rem; border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: .9rem; position: relative;
}
tbody td {
  padding: .95rem 1rem; border-bottom: 1px solid var(--border);
  vertical-align: middle; font-size: .95rem;
  transition: background .18s, transform .12s;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover:not(.month-separator) td { background: #fbfbfb; transform: translateZ(0); }

/* Colonne */
.col-availability { width: 60px; text-align: center; vertical-align: middle; position: relative; }
.col-data { width: 220px; }
.col-time { width: 120px; }
.col-city { width: 160px; }

/* === SEPARATORE MESE === */
.month-separator td {
  border-top: none; border-bottom: 1px solid var(--border);
  padding: 0; background: #f2f2f2;
}
.month-separator .month-label {
  display: block; padding: .9rem 1rem; text-align: left;
  font-weight: 700; font-size: .88rem; color: var(--accent); letter-spacing: .8px;
}

/* === LEGENDA === */
.legend-trigger {
  background: none; border: none; font-size: 1rem; font-weight: 700; color: var(--muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
}
.legend-trigger:hover { background: rgba(0,0,0,.05); }

.legend-popup {
  display: none; position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%);
  margin-bottom: .4rem; background: #fff; border: 1px solid var(--border);
  padding: .65rem .9rem; border-radius: .6rem; box-shadow: var(--shadow);
  font-size: .78rem; text-transform: uppercase; white-space: nowrap;
  z-index: 50; min-width: 170px; color: var(--text);
}
.legend-popup::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border-width: 6px; border-style: solid; border-color: #fff transparent transparent transparent;
}
.legend-popup div { display: flex; align-items: center; gap: .5rem; margin: .25rem 0; }
.col-availability:hover .legend-popup,
.col-availability .legend-trigger:focus + .legend-popup,
.legend-popup[aria-hidden="false"] { display: block; }

/* === DOT TOOLTIP STYLE === */
.tooltip {
  position: absolute; z-index: 9999; background: var(--tooltip-bg, #222); color: var(--tooltip-fg, #fff);
  padding: 7px 10px; border-radius: 7px; font-size: .78rem; white-space: nowrap;
  box-shadow: var(--shadow); pointer-events: none; text-transform: uppercase;
  transition: opacity .12s ease, transform .12s ease; opacity: 1;
}

/* === DOTS === */
.dot { display: inline-block; width: 18px; height: 18px; border-radius: 50%; cursor: help; transition: transform .12s ease; }
.dot:hover { transform: scale(1.18); }
.disponibile { background: #1e8e3e; }
.limitata { background: #f29900; }
.esaurita { background: #d93025; }
.conferma { background: #9db9c3; }

/* === ALTRI STILI === */
tbody td:nth-child(4) { font-weight: 700; }
.city {
  display: inline-block; padding: .28rem .7rem; border-radius: .5rem; background: #f6f6f6;
  font-size: .78rem; font-weight: 700; color: var(--accent); text-transform: uppercase;
}
.empty { text-align: center; color: var(--muted); margin-top: 1.25rem; }

/* Animazioni */
.tbody-fade { opacity: 1; transform: none; transition: opacity .28s ease, transform .28s ease; }
.tbody-fade.fade-out { opacity: 0; transform: translateY(6px); }
.tbody-fade.fade-in { opacity: 1; transform: none; }

/* === RESPONSIVE === */
@media (max-width:720px){
  table, thead, tbody, th, td, tr { display:block; }
  thead { display:none; }
  tbody tr {
    margin: 0 0 1rem;
    border: 1px solid var(--border);
    border-radius: .8rem;
    background: var(--bg); /* fix: non bianco hard-coded */
  }
  tbody td {
    border: none; display: flex; justify-content: space-between; padding: .7rem 1rem;
  }
  tbody td:nth-child(1) { justify-content:flex-start; }
  tbody td:nth-child(2){ font-weight:700; text-align:left; }
  tbody td:nth-child(3),
  tbody td:nth-child(4),
  tbody td:nth-child(5){
    display:block; text-align:left; padding-left:1rem;
  }
  .month-separator .month-label{ text-align:left; padding:.6rem 1rem; }
}

/* === DARK MODE (solo calendario) === */
@media (prefers-color-scheme: dark){
  table { background:#1e1e1e; border:1px solid var(--border); }
  thead th { border-bottom:1px solid var(--border); color: var(--text); } /* fix */
  tbody td { border-bottom:1px solid var(--border); color: var(--text); } /* fix */
  tbody tr:hover:not(.month-separator) td { background:#2a2a2a; }
  .filters select {
    background:#1e1e1e url("data:image/svg+xml;utf8,<svg fill='%23aaa' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 12px center;
    color: var(--text); border: 1px solid var(--border);
  }
  .city { background:#2a2a2a; color:var(--accent); }
  .month-separator td { background: #1a1a1a; border-bottom: 1px solid var(--border); }
  .legend-popup {
    background: #1e1e1e; border: 1px solid #555; color: var(--text);
    box-shadow: 0 6px 18px rgba(0,0,0,.7);
  }
  .legend-popup::after { border-color: #1e1e1e transparent transparent transparent; }
  .legend-trigger:hover { background: rgba(255,255,255,.1); }

  .tooltip {
    background: #1e1e1e; color: var(--tooltip-fg, #fff);
    box-shadow: 0 6px 18px rgba(0,0,0,.7);
  }
}