/* Colonna unica a sinistra (schermi da 901 px): testata della sezione, poi l'elenco delle sezioni (Panoramica, o «Sezioni» premuto)
   oppure i comandi della sezione aperta (pannello, analisi, previsionali, registro). Riducibile a sole icone: la mappa prende il resto.
   Caricato per ultimo: sostituisce la barra + pannello di comunale.css e i pannelli a destra di analisi e registro. */
@media (min-width: 901px) {
  body.comunale, body.comunale.pannello-chiuso, body.comunale.mappa-ampliata, body.comunale.mappa-ampliata.pannello-chiuso {
    --col-w: 400px; --testa-col: 70px; --titolo-h: 0px; --fondo: 0px; --rail-w: var(--col-w); --sx: var(--col-w); --panel-w: var(--col-w);
  }
  body.comunale.colonna-ridotta, body.comunale.colonna-ridotta.mappa-ampliata { --col-w: 68px; }
  body.comunale:is(.sc-aperto, .pv-aperto, .ro-aperto) { --dx: 0px; }
  body.comunale.mappa-ampliata { --testa: 0px; }

  /* mappa: tutto lo spazio a destra della colonna */
  .comunale #vista-home, .comunale.mappa-ampliata #vista-home { top: calc(var(--testa) + 12px); left: calc(var(--sx) + 12px); right: calc(var(--dx) + 12px); bottom: 12px; border-radius: 10px; border: 1px solid var(--line); }
  .comunale.mappa-ampliata #vista-home { top: 0; left: var(--sx); right: var(--dx); bottom: 0; border: 0; border-radius: 0; }

  /* testata della colonna: Sezioni, titolo e data, riduci */
  .comunale #testa-vista, .comunale.mappa-ampliata #testa-vista {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; column-gap: 8px; row-gap: 1px;
    top: var(--testa); left: 0; right: auto; width: var(--col-w); height: var(--testa-col); box-sizing: border-box; padding: 8px 10px 8px 12px;
    z-index: 52; background: #f9fbfe; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .comunale #testa-vista h1 { grid-column: 2; grid-row: 1; font-size: 18px; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .comunale #data-riga { grid-column: 2; grid-row: 2; margin: 0; display: flex; align-items: center; min-width: 0; font-size: 12px; overflow: hidden; white-space: nowrap; }
  .comunale #data-oggi { margin-left: 8px; padding: 1px 8px; font-size: 11px; }
  .col-pulsante { grid-row: 1 / 3; align-self: center; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: none; color: #29446e; cursor: pointer; }
  .col-pulsante:hover { background: #edf3fc; border-color: #d6e1ef; }
  .col-pulsante[aria-expanded=true] { background: #e6f0ff; border-color: #b6d2f7; color: #0c5fc8; }
  .col-pulsante svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  #menu-colonna { grid-column: 1; }
  #riduci-colonna { grid-column: 3; }
  .comunale.pannello-chiuso:not(.sc-aperto, .pv-aperto, .ro-aperto) #menu-colonna { display: none; }
  .comunale.pannello-chiuso:not(.sc-aperto, .pv-aperto, .ro-aperto) #testa-vista h1 { grid-column: 1 / 3; }
  .comunale.pannello-chiuso:not(.sc-aperto, .pv-aperto, .ro-aperto) #data-riga { grid-column: 1 / 3; }

  /* elenco delle sezioni: in Panoramica, con «Sezioni» premuto, sempre nella colonna ridotta */
  .comunale #viste, .comunale.mappa-ampliata #viste {
    display: flex; top: calc(var(--testa) + var(--testa-col)); left: 0; bottom: 0; width: var(--col-w); right: auto; height: auto; padding: 10px 6px 12px; gap: 12px; z-index: 35; overflow-x: hidden;
  }
  body.comunale:not(.colonna-ridotta):not(.menu-aperto):is(:not(.pannello-chiuso), .sc-aperto, .pv-aperto, .ro-aperto) #viste { display: none; }
  .comunale.menu-aperto #viste { z-index: 51; box-shadow: 6px 0 18px rgba(23, 36, 69, .10); }
  .comunale #viste .viste-principali { flex: none; }
  .comunale #viste .viste-principali, .comunale #viste .viste-servizio { gap: 2px; }
  .comunale #viste .viste-principali button, .comunale #viste .viste-servizio :is(button, #vai-validazione) { min-height: 38px; padding-top: 8px; padding-bottom: 8px; }
  .comunale #viste #uffici-elenco button { min-height: 34px; padding-top: 6px; padding-bottom: 6px; }
  .comunale #viste .viste-servizio { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }

  /* Attività aperte e Prossimi giorni: nella colonna della Panoramica (colonna.js le sposta qui), non più sotto la mappa */
  .comunale #viste :is(#attivita-home, #prossimi-home) { position: static; inset: auto; width: auto; height: auto; max-height: none; margin: 0 6px; flex: none; overflow: visible; }
  .comunale #viste :is(#attivita-home, #prossimi-home) button { display: inline-flex; width: auto; min-height: 0; padding: 4px 6px; gap: 8px; border-radius: 5px; font-size: 12px; line-height: 1.35; box-shadow: none; }
  .comunale #viste #espandi-attivita { font-size: 15px; padding: 3px 4px; }
  .comunale #viste .pgh-voci button { display: block; padding: 0; }
  .comunale #viste #attivita-home td:first-child button { display: inline; padding: 0; }
  .comunale #viste #attivita-home th { padding: 5px 8px; }
  .comunale #viste #attivita-home td { padding: 6px 8px; }
  .comunale #viste #attivita-home td:nth-child(2) { display: none; }
  .comunale #viste #attivita-home th:nth-child(2) { display: none; }
  .comunale.menu-aperto #viste :is(#attivita-home, #prossimi-home) { display: none; }

  /* comandi della sezione: tutti nella stessa colonna, sotto la testata */
  .comunale #pannello, .comunale.mappa-ampliata #pannello {
    top: calc(var(--testa) + var(--testa-col)); left: 0; bottom: 0; width: var(--col-w); max-width: none; z-index: 30;
  }
  .comunale #pannello .testa-pannello, .comunale #pannello .vista > h2 { display: none; }
  .comunale #pannello .vista > .sotto { margin-top: 14px; }
  .comunale .sc-scheda, .comunale .pv-pannello, .comunale .ro-pannello, .comunale.mappa-ampliata .sc-scheda {
    top: calc(var(--testa) + var(--testa-col)); left: 0; right: auto; bottom: 0; width: var(--col-w); max-width: none; max-height: none; height: auto;
    border-radius: 0; box-shadow: none; border: 0; border-right: 1px solid var(--line); z-index: 30;
  }
  .comunale .ro-pannello { z-index: 31; }
  .comunale .sc-scheda .uf-sopra { display: none; }
  .comunale .sc-scheda .uf-analisi { margin-top: 0; }

  /* colonna ridotta: sole icone; i comandi della sezione restano aperti ma nascosti finché non si riallarga */
  .comunale.colonna-ridotta :is(#pannello, .sc-scheda, .pv-pannello, .ro-pannello) { display: none !important; }
  .comunale.colonna-ridotta #testa-vista { grid-template-columns: 1fr; padding: 8px 0; justify-items: center; }
  .comunale.colonna-ridotta #testa-vista > :not(#riduci-colonna) { display: none; }
  .comunale.colonna-ridotta #riduci-colonna { grid-column: 1; }
  .comunale.colonna-ridotta #riduci-colonna svg { transform: scaleX(-1); }
  .comunale.colonna-ridotta #viste { padding: 8px 4px; overflow-x: hidden; }
  .comunale.colonna-ridotta #viste :is(button, #vai-validazione) { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; border-radius: 6px; }
  .comunale.colonna-ridotta #viste :is(button, #vai-validazione) > span:not(.uf-sigla) { display: none; }
  .comunale.colonna-ridotta #viste button[aria-selected=true] { box-shadow: inset 3px 0 #2477e5; }
  .comunale.colonna-ridotta #viste .uf-navigazione > p, .comunale.colonna-ridotta #uffici-stato, .comunale.colonna-ridotta #viste :is(#attivita-home, #prossimi-home) { display: none; }
  .comunale.colonna-ridotta #viste .uf-sigla { width: 26px; height: 26px; font-size: 10px; }

  /* cose appoggiate alla mappa: si misurano dalla colonna, non più dai pannelli di destra */
  .comunale .sc-tempo { left: calc(var(--sx) + 34px); right: calc(var(--dx) + 34px); }
  .comunale.sc-aperto .barra-editor, .comunale.pv-aperto .barra-editor { right: calc(var(--dx) + 24px); }
  .comunale .procedura:not(.procedura-ridotta), .comunale.sc-aperto .procedura:not(.procedura-ridotta) { top: calc(var(--testa) + 76px); right: calc(var(--dx) + 76px); max-height: calc(100vh - var(--testa) - 110px); }
  .comunale .sc-legenda-mappa, .comunale.mc-aperto .sc-legenda-mappa { top: calc(var(--testa) + 76px); left: calc(var(--sx) + 26px); }
  .comunale #movimento-traffico, .comunale #legenda-mappa, .comunale.mappa-ampliata #movimento-traffico, .comunale.mappa-ampliata #legenda-mappa { left: calc(var(--sx) + 26px); }
}
@media (min-width: 1400px) {
  body.comunale, body.comunale.pannello-chiuso, body.comunale.mappa-ampliata, body.comunale.mappa-ampliata.pannello-chiuso { --col-w: 420px; }
  body.comunale.colonna-ridotta, body.comunale.colonna-ridotta.mappa-ampliata { --col-w: 68px; }
}
@media (min-width: 901px) and (max-width: 1280px) {
  body.comunale, body.comunale.pannello-chiuso, body.comunale.mappa-ampliata, body.comunale.mappa-ampliata.pannello-chiuso { --col-w: 360px; }
  body.comunale.colonna-ridotta, body.comunale.colonna-ridotta.mappa-ampliata { --col-w: 68px; }
}
/* Panoramica con la colonna allargata (15/10): solo icone e nomi delle sezioni, quindi più stretta che con i comandi di una sezione */
@media (min-width: 901px) {
  body.comunale.pannello-chiuso:not(.colonna-ridotta):not(.sc-aperto):not(.pv-aperto):not(.ro-aperto) { --col-w: 270px; }
}
/* sotto i 901 px resta la disposizione precedente: i pulsanti della colonna non servono */
@media (max-width: 900px) { .col-pulsante { display: none; } }

/* Filtri rapidi della vista (filtri_vista.js): sempre sopra la mappa, anche con una sezione o un'analisi aperta; il titolo della
   sezione è già nella testata della colonna */
@media (min-width: 901px) {
  .comunale #azioni-mappa h2 { display: none; }
  .comunale #azioni-mappa { justify-content: space-between; }
  /* una riga sola: se i filtri non ci stanno scorrono di lato, senza coprire la mappa */
  body.comunale .azioni-rapide, body.comunale:not(.pannello-chiuso) .azioni-rapide, body.comunale:is(.sc-aperto, .pv-aperto, .ro-aperto) .azioni-rapide { display: flex; flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
  .comunale #azioni-mappa .azioni-rapide button { flex: none; }
  .comunale #azioni-mappa .azioni-rapide button { padding: 6px 9px; }
}
#azioni-mappa .conta-lampioni { margin-left: 3px; }
/* a ogni larghezza: i filtri che la vista non prevede restano nascosti (la regola dei pulsanti batterebbe [hidden]) */
.comunale #azioni-mappa .azioni-rapide button[hidden] { display: none; }
/* mappa stretta (colonna larga su un portatile): i filtri vanno in una seconda riga, ora presente in ogni vista */
@media (min-width: 901px) {
  @container (max-width: 710px) {
    body.comunale #azioni-mappa, body.comunale:not(.pannello-chiuso) #azioni-mappa, body.comunale:is(.sc-aperto, .pv-aperto, .ro-aperto) #azioni-mappa { min-height: 88px; }
    body.comunale #map, body.comunale:not(.pannello-chiuso) #map, body.comunale:is(.sc-aperto, .pv-aperto, .ro-aperto) #map { top: 88px; }
  }
}

/* Scheda dell'elemento selezionato (scheda_vista.js): una finestra sopra la mappa, a destra sotto i filtri, accanto ai comandi della
   mappa; non restringe più la mappa e c'è anche dentro le analisi (le sezioni utili alla vista in cima) */
@media (min-width: 901px) {
  body.comunale.scheda-aperta:not(.sc-aperto, .pv-aperto, .ro-aperto) { --dx: 0px; }
  body.comunale #scheda, body.comunale.pv-aperto #scheda, body.comunale.sc-aperto #scheda {
    left: auto; right: 70px; top: calc(var(--testa) + 76px); bottom: auto; width: min(var(--scheda-w), calc(100vw - var(--sx) - 120px));
    max-height: calc(100vh - var(--testa) - 100px); z-index: 25; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgba(23, 36, 69, .18);
  }
  body.comunale.sc-aperto #scheda:not([hidden]) { display: flex; }
  /* dentro un'analisi la scheda si ferma sopra la linea del tempo */
  body.comunale.sc-aperto #scheda { max-height: calc(100vh - var(--testa) - 215px); }
  body.comunale.mappa-ampliata #scheda { top: 64px; }
  .comunale #scheda .scheda-vista { margin: 6px 0 2px; color: #155fb8; font-weight: 600; }
}

/* Livelli e filtri: menu a cascata sopra la mappa (filtri_vista.js). A sinistra il pulsante, accanto i filtri accesi; il menu
   mostra i gruppi e, sul gruppo scelto, la sua tendina a destra. Sui telefoni la tendina si apre sotto il gruppo. */
.comunale .filtri-mappa { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.comunale .fm { position: relative; flex: none; }
.comunale #azioni-mappa #apri-filtri { gap: 7px; font-weight: 600; }
.comunale #azioni-mappa #apri-filtri[aria-expanded=true] { background: #e6f0ff; border-color: #b6d2f7; color: #0c5fc8; }
.comunale #apri-filtri .fm-n:not(:empty) { min-width: 18px; padding: 0 5px; border-radius: 9px; background: #1767d3; color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.comunale #azioni-mappa #apri-filtri .fm-giu { width: 14px; height: 14px; }
.comunale .fm-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 250px; padding: 6px; background: #fff; border: 1px solid #d6e1ef; border-radius: 10px; box-shadow: 0 10px 30px rgba(23, 36, 69, .2); }
.comunale .fm-menu[hidden] { display: none; }
.comunale .fm-gruppo { position: relative; }
.comunale #azioni-mappa .fm-menu button { display: flex; width: 100%; justify-content: flex-start; gap: 8px; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: #22385c; font: 500 13px system-ui; text-align: left; white-space: normal; }
.comunale #azioni-mappa .fm-menu button:hover, .comunale #azioni-mappa .fm-menu button:focus-visible { background: #edf3fc; color: #0c5fc8; }
.comunale #azioni-mappa .fm-menu button:disabled { opacity: .5; cursor: not-allowed; }
.comunale #azioni-mappa .fm-menu [data-fm-gruppo] > span:first-child { flex: 1; }
.comunale #azioni-mappa .fm-menu [data-fm-gruppo][aria-expanded=true] { background: #e6f0ff; color: #0c5fc8; }
.comunale .fm-conta { padding: 0 6px; border-radius: 9px; background: #e6f0ff; color: #155fb8; font-size: 11px; line-height: 18px; }
.comunale .fm-sotto { position: absolute; top: -6px; left: calc(100% + 8px); width: 290px; max-height: min(70vh, 520px); overflow-y: auto; padding: 6px; background: #fff; border: 1px solid #d6e1ef; border-radius: 10px; box-shadow: 0 10px 30px rgba(23, 36, 69, .2); }
.comunale #azioni-mappa .fm-sotto button .fm-segno { width: 16px; height: 16px; flex: none; visibility: hidden; stroke: #1767d3; }
.comunale #azioni-mappa .fm-sotto button[aria-checked=true] { color: #0c5fc8; font-weight: 600; }
.comunale #azioni-mappa .fm-sotto button[aria-checked=true] .fm-segno { visibility: visible; }
.comunale .fm-vuoto { margin: 6px 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.comunale .fm-accesi { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.comunale .fm-acceso { display: inline-flex; flex: none; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; border: 1px solid #b6d2f7; border-radius: 14px; background: #e6f0ff; color: #155fb8; font: 500 12px system-ui; white-space: nowrap; }
.comunale #azioni-mappa .fm-acceso button { padding: 0 6px; border: 0; border-radius: 50%; background: none; color: #155fb8; font-size: 15px; line-height: 1.2; }
.comunale #azioni-mappa .fm-acceso button:hover { background: #cfe2fd; }
@media (max-width: 700px) {
  .comunale .fm-menu { width: min(300px, calc(100vw - 40px)); max-height: 70vh; overflow-y: auto; }
  .comunale .fm-sotto { position: static; width: auto; max-height: none; margin: 2px 0 6px 12px; padding: 0; border: 0; box-shadow: none; }
}

/* Panoramica (14/10): vista solo visiva dello stato attuale. La colonna resta una striscia di icone per andare nelle sezioni
   (colonna.js), niente Attività aperte né Prossimi giorni (stanno in Attività e in Tutti i previsionali); i livelli e i temi di
   Beni e aggiornamenti si scelgono dal menu, nel pannello restano catalogo, asset e aggiornamento */
.comunale #attivita-home, .comunale #prossimi-home { display: none !important; }
body.comunale.vista-panoramica, body.comunale.vista-panoramica.attivita-compatte { --fondo: 0px; }
.comunale #vista-livelli details.gruppo-livelli { display: none; }
/* il menu esce dalla barra: niente scorrimento sulla barra (scorre solo l'elenco dei filtri accesi); visibile a ogni larghezza */
body.comunale .azioni-rapide.filtri-mappa, body.comunale:not(.pannello-chiuso) .azioni-rapide.filtri-mappa,
body.comunale:is(.sc-aperto, .pv-aperto, .ro-aperto) .azioni-rapide.filtri-mappa { display: flex; overflow: visible; }
/* menu aperto: il riquadro della mappa (che ha un suo contesto di sovrapposizione) passa sopra le legende appoggiate alla mappa */
body.comunale.fm-aperto #vista-home { z-index: 30; }

/* «Aggiorna edifici e strade» nella testata del settore Urbanistica (aggiornamento.js, uffici.js); nascosto dove nasce */
.uf-aggiorna { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.uf-aggiorna > summary { cursor: pointer; font-size: 12px; font-weight: 650; color: #29446e; }
.uf-aggiorna .uf-aggiorna-corpo { margin-top: 8px; font-size: 12px; }
.uf-aggiorna .uf-aggiorna-corpo .pulsanti { display: flex; gap: 6px; flex-wrap: wrap; }