/* ==========================================================================
   Area di lavoro grafica (grafica.aspx): mappa a tutta pagina con barre di
   strumenti sui quattro lati. Usa la stessa palette dei dialoghi TPC, definita
   in tpc-dialoghi.css.
   ========================================================================== */

html, body { height: 100%; margin: 0; overflow: hidden; }

#area-grafica {
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  grid-template-rows: 42px 1fr 30px;
  width: 100vw;
  height: 100vh;
  background: var(--tpc-bg-soft);
}

/* --- barre --- */
.gr-barra { display: flex; align-items: center; background: var(--tpc-bg-soft); border: 1px solid var(--tpc-bd); }
.gr-barra-alta    { grid-column: 1 / 4; grid-row: 1; gap: 6px; padding: 0 10px; }
.gr-barra-sinistra{ grid-column: 1; grid-row: 2; flex-direction: column; gap: 4px; padding: 8px 0; align-items: center; }
.gr-barra-destra  { grid-column: 3; grid-row: 2; flex-direction: column; gap: 4px; padding: 8px 0; align-items: center; }
.gr-barra-bassa   { grid-column: 1 / 4; grid-row: 3; gap: 12px; padding: 0 10px; font-size: .72rem; color: var(--tpc-txm); }

/* --- elementi della barra superiore --- */
.gr-logo { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; color: var(--tpc-ac); text-decoration: none; }
.gr-logo:hover { background: var(--tpc-ac-soft); }
.gr-titolo { font-weight: 700; color: var(--tpc-ac); letter-spacing: .02em; }
.gr-lavoro { font-size: .78rem; color: var(--tpc-txm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
.gr-spazio { flex: 1; }
.gr-stato b { color: var(--tpc-tx); font-weight: 600; }

/* --- pulsanti --- */
.gr-bt {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 6px; background: transparent;
  color: var(--tpc-txm); cursor: pointer; font-size: .95rem;
  transition: background .12s, color .12s;
}
.gr-bt:hover { background: var(--tpc-ac-soft); color: var(--tpc-ac); }
.gr-bt-attivo { background: var(--tpc-ac-soft); color: var(--tpc-ac); box-shadow: inset 0 0 0 1px var(--tpc-ac); }
.gr-sep { width: 22px; height: 1px; background: var(--tpc-bd); margin: 4px 0; flex-shrink: 0; }
.gr-barra-alta .gr-sep { width: 1px; height: 22px; margin: 0 4px; }

/* --- mappa --- */
#gr-mappa-box { grid-column: 2; grid-row: 2; position: relative; overflow: hidden; background: #fff; border-top: 1px solid var(--tpc-bd); border-bottom: 1px solid var(--tpc-bd); }
.gr-mappa { width: 100%; height: 100%; }
.gr-coord { font-family: Consolas, monospace; }

/* --- pannello laterale a scomparsa --- */
.gr-pannello {
  position: absolute; top: 0; right: 0; width: 260px; height: 100%;
  background: var(--tpc-bg); border-left: 1px solid var(--tpc-bd);
  box-shadow: var(--tpc-shadow);
  transform: translateX(100%); transition: transform .25s ease;
  display: flex; flex-direction: column; z-index: 20;
}
.gr-pannello-aperto { transform: translateX(0); }
.gr-pannello-testa {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--tpc-bg-soft); border-bottom: 1px solid var(--tpc-bd);
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tpc-txm);
}
.gr-pannello-testa span { flex: 1; }
.gr-pannello-chiudi { border: none; background: transparent; color: var(--tpc-txm); cursor: pointer; border-radius: 4px; }
.gr-pannello-chiudi:hover { background: var(--tpc-ac-soft); color: var(--tpc-ac); }
.gr-pannello-corpo { flex: 1; overflow-y: auto; padding: 10px 12px; }

.gr-livello { display: flex; align-items: center; gap: 8px; font-size: .78rem; margin-bottom: 6px; cursor: pointer; }
.gr-livello input { cursor: pointer; }

/* --- disegno sulla mappa --- */
.gr-mappa-disegno, .gr-mappa-disegno canvas { cursor: crosshair; }
.gr-suggerimento { color: var(--tpc-ac); font-weight: 600; }

/* --- elenco delle tracce nel pannello laterale --- */
.gr-traccia { display: flex; align-items: center; gap: 4px; font-size: .78rem; margin-bottom: 6px; }
.gr-traccia-nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-traccia-len { color: var(--tpc-txm); font-size: .7rem; }
.gr-bt-mini {
  width: 24px; height: 24px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 5px; background: transparent;
  color: var(--tpc-txm); cursor: pointer; font-size: .72rem;
  transition: background .12s, color .12s;
}
.gr-bt-mini:hover { background: var(--tpc-ac-soft); color: var(--tpc-ac); }
.gr-bt-elimina:hover { background: rgba(200,35,51,.10); color: #c82333; }
.gr-vuoto { color: var(--tpc-txm); font-size: .74rem; font-style: italic; line-height: 1.4; }

/* pallino col numero di tracce sul pulsante dell'elenco */
.gr-conta {
  position: absolute; top: 2px; right: 2px;
  min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 7px; background: var(--tpc-ac); color: #fff;
  font-size: .58rem; font-weight: 700; line-height: 14px; text-align: center;
}
.gr-bt { position: relative; }

/* --- sfondi cartografici --- */
.gr-sfondo { margin-bottom: 10px; }
.gr-sfondo .gr-livello { margin-bottom: 2px; }
.gr-opacita { width: 100%; height: 3px; margin: 0; cursor: pointer; }
.gr-opacita::-webkit-slider-thumb { width: 10px; height: 10px; }

/* elenco del controllo del rilievo: compatto, si legge tutto senza scorrere troppo */
.gr-controllo { margin: 0 0 .5rem 0; padding-left: 1.1rem; font-size: .78rem; line-height: 1.35; }
.gr-controllo li { margin-bottom: .15rem; }

/* --- visore del disegno esportato ---
   Il riquadro ha altezza fissa e ritaglia: il disegno di un profilo e' largo e
   basso, e lasciato libero occuperebbe la finestra intera per mostrare una
   striscia. Dentro ci si muove con la rotella e il trascinamento. */
.gr-visore {
  position: relative; height: 340px; margin-bottom: .5rem;
  border: 1px solid var(--tpc-bd); border-radius: 4px;
  background: #fff; overflow: hidden;
  touch-action: none;                 /* il trascinamento e' nostro, non della pagina */
}
.gr-visore svg { width: 100%; height: 100%; display: block; }
.gr-visore-reset {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--tpc-bd); border-radius: 4px;
  background: rgba(255,255,255,.92); color: var(--tpc-txm);
  font-size: .72rem; line-height: 1; cursor: pointer;
}
.gr-visore-reset:hover { color: var(--tpc-ac); border-color: var(--tpc-ac); }

/* --- finestra dell'anteprima ---
   Un profilo e' largo e basso: gli si da' quasi tutto lo schermo, perche' in un
   riquadro stretto la fincatura non si legge nemmeno ingrandendo. */
.gr-ant-dialog { max-width: 96vw; width: 96vw; margin: 1rem auto; }
.gr-ant-body { padding: 8px !important; }
.gr-ant-body .gr-visore { height: calc(100vh - 190px); min-height: 300px; margin-bottom: 0; }
.gr-ant-dialog .tpc-modal-footer { align-items: center; gap: 12px; }

/* --- pannello della visibilita' dei temi ---
   Un tema spento resta leggibile ma smorto: chi guarda il pannello deve capire
   in un colpo d'occhio che cosa manca sulla mappa, non solo che cosa c'e'. */
#elenco-livelli .gr-livello { margin-bottom: 7px; }
#elenco-livelli .gr-livello:has(input:not(:checked)) { color: var(--tpc-txm); opacity: .55; }
.gr-tema-icona { width: 16px; text-align: center; color: var(--tpc-txm); font-size: .8rem; flex-shrink: 0; }
#elenco-livelli .gr-livello input:checked ~ .gr-tema-icona { color: var(--tpc-ac); }
.gr-tema-tutti { display: flex; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--tpc-bd); }
.gr-tema-tutti .btn { flex: 1; font-size: .7rem; padding: 2px 4px; }
/* il pallino sul pulsante conta i temi SPENTI: e' l'anomalia da segnalare, non la norma */
.gr-conta-spenti { background: var(--tpc-txm); }