/* Stili dedicati alla pagina di confronto e mappa pressione.
   Non tocca dashboard.css (linkato per variabili/header/nav condivisi). */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
}

.kpi-card__label {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 6px 0;
}

.kpi-card__value {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.kpi-card__value--sub {
  font-size: 1.05rem;
}

.kpi-card__hint {
  font-size: 0.78rem;
  color: var(--color-text-faint);
  margin: 4px 0 0 0;
}

/* Badge categoria */
.badge-categoria {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
  text-transform: capitalize;
}

.badge-categoria--mare { background: #e3f3fb; color: #0f6d9c; }
.badge-categoria--arte { background: #f1e8fb; color: #6b2fa3; }
.badge-categoria--laghi { background: #e2f5ef; color: #0f8a63; }
.badge-categoria--montagna { background: #eef1e0; color: #5c6b1f; }
.badge-categoria--metropoli { background: #fbe9e6; color: #a34321; }

:root[data-theme="dark"] .badge-categoria--mare { background: #123847; color: #7fd0f5; }
:root[data-theme="dark"] .badge-categoria--arte { background: #2e2140; color: #caa0f0; }
:root[data-theme="dark"] .badge-categoria--laghi { background: #113828; color: #6fe0b0; }
:root[data-theme="dark"] .badge-categoria--montagna { background: #2b2e17; color: #c3d17a; }
:root[data-theme="dark"] .badge-categoria--metropoli { background: #3a2015; color: #f0a583; }

.badge-pressione {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  color: #1c1f26;
  min-width: 2.4em;
  text-align: center;
}

.badge-crescita {
  font-weight: 700;
  font-size: 0.88rem;
}

.badge-crescita--pos { color: var(--color-ok); }
.badge-crescita--neg { color: var(--color-bad); }
.badge-crescita--nd { color: var(--color-text-faint); font-weight: 400; }

/* Filtri tabella */
.filtri-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.filtri-row__search {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  min-width: 220px;
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
}

.filtri-categoria {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.chip:hover {
  background: var(--color-bg);
}

.chip[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

:root[data-theme="dark"] .chip[aria-pressed="true"] {
  /* --color-primary e' volutamente chiaro in dark mode (leggibile come testo
     su sfondo scuro altrove), quindi qui serve testo scuro per restare leggibile
     quando lo stesso colore diventa sfondo pieno del chip. */
  color: #0d1117;
}

/* Tabella confronto */
.table-wrap {
  overflow-x: auto;
}

table.tabella-confronto {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

table.tabella-confronto th,
table.tabella-confronto td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

table.tabella-confronto th {
  cursor: pointer;
  user-select: none;
  font-weight: 700;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  position: sticky;
  top: 0;
  background: var(--color-surface);
}

table.tabella-confronto th:hover {
  color: var(--color-primary);
}

table.tabella-confronto th .sort-arrow {
  font-size: 0.7rem;
  margin-left: 4px;
  opacity: 0.6;
}

table.tabella-confronto td.col-numero,
table.tabella-confronto th.col-numero {
  text-align: right;
}

table.tabella-confronto tbody tr:hover {
  background: var(--color-surface-subtle);
}

/* Heatmap */
.heatmap-wrap {
  overflow-x: auto;
}

table.heatmap {
  border-collapse: collapse;
  font-size: 0.78rem;
  min-width: 100%;
}

table.heatmap th,
table.heatmap td {
  padding: 0;
  text-align: center;
  /* Il bordo usa lo sfondo pagina (non bianco fisso) cosi' il "traforo" tra le
     celle si confonde con lo sfondo sia in tema chiaro che scuro. */
  border: 1px solid var(--color-bg);
}

table.heatmap th {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-weight: 600;
  padding: 6px 8px;
  background: var(--color-surface);
}

table.heatmap th.heatmap__nome-col {
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 1;
}

table.heatmap td.heatmap__nome {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--color-surface);
  padding: 6px 10px;
  font-weight: 600;
  white-space: nowrap;
  z-index: 1;
  border-right: 2px solid var(--color-border);
}

table.heatmap td.heatmap__nome .badge-categoria {
  margin-left: 6px;
}

td.heatmap-cell {
  width: 56px;
  height: 34px;
  min-width: 56px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #1c1f26;
}

td.heatmap-cell--nd {
  background: repeating-linear-gradient(
    45deg,
    var(--color-heatmap-nd-a),
    var(--color-heatmap-nd-a) 4px,
    var(--color-heatmap-nd-b) 4px,
    var(--color-heatmap-nd-b) 8px
  );
  color: var(--color-text-faint);
  font-weight: 400;
}

.heatmap-legenda {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.heatmap-legenda__bar {
  width: 160px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--color-ok), var(--color-warn), var(--color-bad));
}

/* Multi-select confronto grafico */
.multiselect-destinazioni {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.multiselect-destinazioni label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.82rem;
  cursor: pointer;
  background: var(--color-surface);
}

.multiselect-destinazioni label:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
}

.multiselect-destinazioni input {
  accent-color: var(--color-primary);
}

.multiselect-hint {
  font-size: 0.8rem;
  color: var(--color-text-faint);
  margin: -8px 0 14px 0;
}

.chart-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 0.82rem;
}

.chart-legenda__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chart-legenda__swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

@media (max-width: 640px) {
  .filtri-row {
    flex-direction: column;
    align-items: stretch;
  }

  .filtri-row__search {
    min-width: 0;
  }
}

/* Mappa geografica a bolle */
.mappa-wrap {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
}

#mappa-svg {
  width: 100%;
  height: auto;
  display: block;
}

.mappa-sfondo {
  fill: var(--color-surface-subtle);
  stroke: var(--color-border);
  stroke-width: 1;
}

.mappa-etichetta-sfondo {
  fill: var(--color-text-faint);
  font-size: 9px;
}

.mappa-etichetta-citta {
  fill: var(--color-text);
  font-size: 10px;
  font-weight: 600;
  pointer-events: none;
}

.mappa-bolla {
  cursor: pointer;
  transition: r 0.15s ease;
}

.mappa-bolla:hover,
.mappa-bolla:focus {
  outline: none;
  stroke: var(--color-primary);
  stroke-width: 2.5;
}

.mappa-tooltip {
  position: absolute;
  transform: translate(-50%, -115%);
  /* --color-overlay-bg/text restano fissi tra i due temi (vedi dashboard.css):
     usare --color-text qui si romperebbe in dark mode (diventa quasi bianco). */
  background: var(--color-overlay-bg);
  color: var(--color-overlay-text);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.4;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  z-index: 5;
}

/* Pulsante export nella riga filtri */
.filtri-row {
  align-items: center;
}

#btn-esporta-csv {
  margin-left: auto;
}

/* Sparkline andamento presenze nella tabella comparativa */
th.col-sparkline {
  text-align: left;
}

.sparkline {
  display: block;
  vertical-align: middle;
}

.sparkline-nd {
  color: var(--color-text-faint);
  font-size: 0.8rem;
}

/* Sezione destinazioni a rischio overtourism */
.rischio-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rischio-riga {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-subtle);
}

.rischio-riga__nome {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rischio-riga__barra-wrap {
  width: 160px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-neutral-tint);
  overflow: hidden;
}

.rischio-riga__barra {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.rischio-riga__valore {
  font-size: 0.85rem;
  font-weight: 700;
  min-width: 3.5em;
  text-align: right;
}

@media (max-width: 560px) {
  .rischio-riga {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .rischio-riga__barra-wrap {
    width: 100%;
  }
}