/* ============================================================================
   tourapp.css — Stili del configuratore "App Turistiche" del CMS Comune.Digital
   ----------------------------------------------------------------------------
   Superfici coperte: Scheda Comune (modale grande), Editor Contenuti/POI
   (overlay impilato), Wizard "Nuova app", Anteprima live (pannello laterale).

   Principi di questo foglio:
   - usa SEMPRE i token del design system (--cd-space-*, --cd-radius-*,
     --cd-shadow-*, palette --cd-*), niente valori magici o grigi fuori palette;
   - layout a "schede" (ogni gruppo è una card su sfondo grigio chiaro) per dare
     gerarchia visiva sia su desktop sia su mobile;
   - modale a 3 fasce con corpo scorrevole: header e footer restano fissi,
     scorre solo il contenuto (pattern flex, min-height:0);
   - su mobile la modale grande va a tutto schermo, footer e toolbar si
     ricompongono in modo compatto e tappabile (target ≥ 40px).
   ============================================================================ */

/* ====================== OVERLAY + MODALE (shell) ======================= */

.ta-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20, 38, 58, 0.55);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--cd-space-lg) var(--cd-space-md);
  overflow-y: auto;
}

.ta-modal {
  background: var(--cd-white);
  border-radius: var(--cd-radius-xl);
  width: min(960px, 100%);
  box-shadow: var(--cd-shadow-lg), 0 24px 64px rgba(15, 23, 42, 0.28);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 2 * var(--cd-space-lg));
  max-height: calc(100dvh - 2 * var(--cd-space-lg));
  overflow: hidden;            /* il radius taglia header/footer */
}

/* --- Header (fascia fissa) --- */
.ta-head {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--cd-space-md);
  padding: var(--cd-space-md) var(--cd-space-lg);
  border-bottom: 1px solid var(--cd-gray-300);
  background: var(--cd-white);
}
.ta-head h2 { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.ta-head .cd-btn { flex: 0 0 auto; }

/* --- Body (fascia scorrevole) --- */
.ta-body {
  flex: 1 1 auto; min-height: 0;
  padding: var(--cd-space-lg);
  overflow-y: auto;
  background: var(--cd-gray-100);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* --- Footer (fascia fissa) --- */
.ta-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--cd-space-md); flex-wrap: wrap;
  padding: var(--cd-space-md) var(--cd-space-lg);
  border-top: 1px solid var(--cd-gray-300);
  background: var(--cd-white);
}
.ta-foot-dl { display: flex; align-items: center; gap: var(--cd-space-sm); flex-wrap: wrap; }
.ta-foot-dl > .cd-text-small { white-space: nowrap; }

/* ====================== GRUPPI = CARD ================================== */

.ta-group {
  background: var(--cd-white);
  border: 1px solid var(--cd-gray-300);
  border-radius: var(--cd-radius-lg);
  box-shadow: var(--cd-shadow-sm);
  padding: var(--cd-space-md) var(--cd-space-lg) var(--cd-space-lg);
  margin-bottom: var(--cd-space-md);
}
.ta-group:last-child { margin-bottom: 0; }
.ta-group > h3 {
  margin: 0 0 var(--cd-space-md);
  padding-bottom: var(--cd-space-sm);
  font-size: 1.05rem; color: var(--cd-blue-700);
  border-bottom: 2px solid var(--cd-blue-100);
  display: flex; align-items: center; gap: var(--cd-space-sm);
}
.ta-group > p { margin-top: 0; }

/* ====================== GRID + CAMPI =================================== */

.ta-grid {
  display: grid; gap: var(--cd-space-md);
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.ta-grid-3 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.ta-f { display: flex; flex-direction: column; gap: var(--cd-space-xs); font-size: 0.85rem; min-width: 0; }
.ta-f > span { color: var(--cd-gray-700); font-weight: 600; }
.ta-f .cd-input { width: 100%; }
.ta-f-wide { grid-column: 1 / -1; }
.ta-f-wide .cd-input + .cd-input,
.ta-f-wide .cd-input + textarea { margin-top: var(--cd-space-xs); }

/* Selettore colore + testo HEX */
.ta-color-row { display: flex; gap: var(--cd-space-sm); align-items: center; }
.ta-color-row input[type="color"] {
  width: 40px; height: 40px; padding: 0; border: 1px solid var(--cd-gray-300);
  border-radius: var(--cd-radius-md); background: none; cursor: pointer; flex: 0 0 auto;
}
.ta-color-row .cd-input { flex: 1 1 auto; min-width: 0; }

/* Chip / checkbox a pillola */
.ta-chips { display: flex; flex-wrap: wrap; gap: var(--cd-space-sm); margin-bottom: var(--cd-space-sm); }
.ta-chk {
  display: inline-flex; align-items: center; gap: var(--cd-space-xs);
  padding: var(--cd-space-sm) var(--cd-space-md);
  border: 1px solid var(--cd-gray-300); border-radius: var(--cd-radius-pill, 9999px);
  font-size: 0.9rem; cursor: pointer; user-select: none; background: var(--cd-white);
  transition: border-color .15s ease, background .15s ease;
}
.ta-chk:hover { border-color: var(--cd-blue-300); background: var(--cd-blue-100); }
.ta-chk input { accent-color: var(--cd-blue-700); }

/* ====================== GESTORE SEZIONI (lista istanze) ================ */

.ta-sec-row {
  border: 1px solid var(--cd-gray-300);
  border-radius: var(--cd-radius-md);
  padding: var(--cd-space-md);
  margin-bottom: var(--cd-space-sm);
  background: var(--cd-gray-100);
}
.ta-sec-row:last-child { margin-bottom: 0; }
.ta-sec-row.is-off { opacity: 0.6; }
.ta-sec-head {
  display: flex; align-items: center; gap: var(--cd-space-sm); flex-wrap: wrap;
  margin-bottom: var(--cd-space-md);
}
.ta-sec-id { font-weight: 700; font-family: ui-monospace, monospace; color: var(--cd-blue-700); }
.ta-sec-actions { margin-left: auto; display: flex; gap: var(--cd-space-xs); flex-wrap: wrap; }
/* toolbar compatta: icone quadrate, "Contenuti" con etichetta */
.ta-sec-actions .cd-btn { padding: 6px 10px; min-height: 34px; }

.ta-addsec {
  display: flex; gap: var(--cd-space-sm); flex-wrap: wrap; align-items: center;
  margin-top: var(--cd-space-md); padding-top: var(--cd-space-md);
  border-top: 1px dashed var(--cd-gray-300);
}
.ta-addsec select { min-width: 220px; }
.ta-addsec input { flex: 1 1 200px; min-width: 160px; }

/* ====================== EDITOR CONTENUTI (POI) ========================= */

.ta-overlay-2 { z-index: 1100; background: rgba(15, 23, 42, 0.6); }

.tc-poi {
  border: 1px solid var(--cd-gray-300);
  border-radius: var(--cd-radius-md);
  margin-bottom: var(--cd-space-sm); background: var(--cd-white);
}
.tc-poi > summary {
  display: flex; align-items: center; gap: var(--cd-space-sm); cursor: pointer;
  padding: var(--cd-space-sm) var(--cd-space-md); font-weight: 600; list-style: none;
}
.tc-poi > summary::-webkit-details-marker { display: none; }
.tc-poi > summary::before { content: '▸'; color: var(--cd-gray-500); }
.tc-poi[open] > summary::before { content: '▾'; }
.tc-poi[open] > summary { border-bottom: 1px solid var(--cd-gray-300); }
.tc-poi-title { flex: 1 1 auto; min-width: 0; }
.tc-poi-actions { display: flex; gap: var(--cd-space-xs); }
.tc-poi > .ta-grid, .tc-poi > .tc-badges { padding: var(--cd-space-md); }

.tc-badges { display: flex; flex-direction: column; gap: var(--cd-space-xs); padding-top: var(--cd-space-xs); }
.tc-badges-lbl { font-size: 0.8rem; font-weight: 600; color: var(--cd-gray-700); }
.tc-badge { display: flex; gap: var(--cd-space-xs); align-items: center; flex-wrap: wrap; }
.tc-badge .cd-input { flex: 1 1 120px; min-width: 90px; }

/* Campo media ibrido (URL + upload + miniatura) */
.ta-media-row { display: flex; gap: var(--cd-space-xs); align-items: center; flex-wrap: wrap; }
.ta-media-row .ta-media-url { flex: 1 1 200px; min-width: 0; }
.ta-media-upload { white-space: nowrap; flex: 0 0 auto; }
.ta-media-thumb { margin-top: var(--cd-space-xs); }
.ta-media-thumb[hidden] { display: none; }
.ta-media-thumb img {
  max-width: 100%; max-height: 120px; border-radius: var(--cd-radius-md);
  border: 1px solid var(--cd-gray-300); object-fit: cover; display: block;
}

/* Validazione inline ID GoodBarber */
.cd-input.ta-invalid { border-color: var(--cd-error) !important; background: #FDECEC; }

/* ====================== CHECKLIST "Pronto al deploy?" ================== */

.ta-dc-verdict {
  display: flex; align-items: center; gap: var(--cd-space-sm);
  padding: var(--cd-space-md); border-radius: var(--cd-radius-md);
  font-weight: 600; margin-bottom: var(--cd-space-md);
}
.ta-dc-verdict.is-ok   { background: var(--cd-green-100); color: #1F7A1A; }
.ta-dc-verdict.is-warn { background: #FFF8E0; color: #8C6A00; }
.ta-dc-verdict.is-err  { background: #FDECEC; color: var(--cd-error); }
.ta-dc-group { margin-bottom: var(--cd-space-md); }
.ta-dc-group h3 { font-size: 0.95rem; font-weight: 700; margin: 0 0 var(--cd-space-xs); color: var(--cd-gray-700); }
.ta-dc-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cd-space-xs); }
.ta-dc-group li { display: flex; align-items: flex-start; gap: var(--cd-space-sm); font-size: 0.9rem; }
.ta-dc-group li .fa-circle-check { color: var(--cd-green-700); }
.ta-dc-group li .fa-triangle-exclamation { color: #D97706; }
.ta-dc-group li .fa-circle-xmark { color: var(--cd-error); }

/* ====================== ANTEPRIMA LIVE (pannello laterale) ============= */

#ta-preview-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 92vw;
  background: #1E2A36; border-left: 1px solid rgba(0,0,0,.18);
  box-shadow: -12px 0 32px rgba(0,0,0,.20); z-index: 1300;
  display: flex; flex-direction: column; color: var(--cd-white);
}
.ta-pv-head {
  display: flex; align-items: center; gap: var(--cd-space-sm);
  padding: var(--cd-space-sm) var(--cd-space-md);
  background: #0F1923; border-bottom: 1px solid rgba(255,255,255,.08);
}
.ta-pv-sel { flex: 1 1 auto; min-width: 0; max-width: 200px; height: 36px; padding: 2px 8px; color: #0F1923; }
.ta-pv-status { font-size: 0.75rem; opacity: .75; margin-left: auto; white-space: nowrap; }
.ta-pv-head .cd-btn { color: var(--cd-white); border-color: rgba(255,255,255,.35); background: transparent; }
.ta-pv-head .cd-btn:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.ta-pv-stage {
  flex: 1; display: flex; align-items: flex-start; justify-content: center;
  overflow: auto; padding: var(--cd-space-md); background: #1E2A36;
}
#ta-pv-iframe {
  width: 390px; height: 800px; max-width: 100%; border: 0; border-radius: 18px;
  background: var(--cd-white); box-shadow: 0 18px 50px rgba(0,0,0,.4), 0 0 0 8px rgba(0,0,0,.3);
}

/* ====================== WIZARD "Nuova app" ============================ */

.ta-modal-sm { width: min(520px, 100%); }
.ta-wiz-fs {
  border: 1px solid var(--cd-gray-300); border-radius: var(--cd-radius-md);
  padding: var(--cd-space-md); margin-top: var(--cd-space-md);
  display: flex; flex-direction: column; gap: var(--cd-space-sm);
}
.ta-wiz-fs legend { font-size: 0.85rem; font-weight: 600; color: var(--cd-gray-700); padding: 0 var(--cd-space-xs); }
.ta-wiz-secs { display: flex; flex-direction: column; gap: var(--cd-space-sm); }
.ta-wiz-recap { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cd-space-xs); }
.ta-wiz-recap li { display: flex; justify-content: space-between; gap: var(--cd-space-md); padding: var(--cd-space-xs) 0; border-bottom: 1px dashed var(--cd-gray-300); }
.ta-wiz-recap li > span { color: var(--cd-gray-500); }

/* Modalità "solo italiano": nasconde gli input inglesi negli editor. */
.ta-mono [data-sub="en"],
.ta-mono [data-qk="opt_en"],
.ta-mono [data-k="nameEn"],
.ta-mono [data-k="subEn"] { display: none !important; }
.ta-copyrow { margin-bottom: var(--cd-space-sm); }

/* Sezioni interne (quiz mestieri + blocchi narrativa scopri) */
.tc-quiz-sec { margin-top: var(--cd-space-md); padding-top: var(--cd-space-md); border-top: 1px dashed var(--cd-gray-300); }
.tc-quiz-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.tc-sec-h { font-size: 0.95rem; font-weight: 700; color: var(--cd-blue-700); margin: 0 0 var(--cd-space-xs); }
.tc-quiz-opts { padding: 0 var(--cd-space-md) var(--cd-space-sm); display: flex; flex-direction: column; gap: var(--cd-space-xs); }
.tc-quiz-opt { display: flex; gap: var(--cd-space-xs); align-items: center; flex-wrap: wrap; }
.tc-quiz-opt .cd-input { flex: 1 1 140px; min-width: 100px; }
.tc-quiz-radio { display: inline-flex; align-items: center; }
.tc-quiz-radio input { accent-color: var(--cd-green-700); width: 18px; height: 18px; }

/* ============================================================================
   RESPONSIVE — tablet stretto / finestre affiancate (≤ 860px)
   ============================================================================ */
@media (max-width: 860px) {
  .ta-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* ============================================================================
   RESPONSIVE — mobile (≤ 640px): modale a tutto schermo + UI compatta
   ============================================================================ */
@media (max-width: 640px) {
  .ta-overlay { padding: 0; align-items: stretch; }

  /* Modale grande (Scheda Comune, Editor Contenuti) a tutto schermo */
  .ta-modal {
    width: 100%; border-radius: 0;
    max-height: 100vh; max-height: 100dvh; height: 100dvh;
  }

  /* Il Wizard resta una "sheet" centrata, non a tutto schermo */
  .ta-modal-sm {
    width: auto; height: auto;
    max-height: calc(100dvh - 2 * var(--cd-space-md));
    align-self: center; margin: var(--cd-space-md);
    border-radius: var(--cd-radius-lg);
  }

  .ta-head { padding: var(--cd-space-md); }
  .ta-head h2 { font-size: 1.1rem; }
  .ta-body { padding: var(--cd-space-md); }

  .ta-group { padding: var(--cd-space-md); }

  /* una colonna piena per i campi principali */
  .ta-grid { grid-template-columns: 1fr; gap: var(--cd-space-sm); }
  /* ID GoodBarber: due per riga restano comodi */
  .ta-grid-3 { grid-template-columns: repeat(2, 1fr); }

  /* Toolbar della sezione: titolo sopra, azioni a tutta larghezza sotto */
  .ta-sec-actions { margin-left: 0; width: 100%; }
  .ta-sec-actions .cd-btn { flex: 0 0 auto; }

  /* Footer compatto: azioni a tutta larghezza, Salva pieno e in evidenza */
  .ta-foot {
    flex-direction: column; align-items: stretch;
    padding: var(--cd-space-md);
    gap: var(--cd-space-sm);
  }
  .ta-foot-dl { width: 100%; }
  .ta-foot-dl .cd-btn { flex: 1 1 auto; padding: 6px 12px; min-height: 38px; font-size: 0.85rem; }
  .ta-foot > #ta-save,
  .ta-foot > .cd-btn-success { width: 100%; }

  /* Anteprima live a tutto schermo */
  #ta-preview-panel { width: 100vw; max-width: 100vw; }
  .ta-pv-sel { max-width: none; }
}

/* ============================================================================
   RESPONSIVE — mobile molto stretto (≤ 380px): ID GoodBarber a una colonna
   ============================================================================ */
@media (max-width: 380px) {
  .ta-grid-3 { grid-template-columns: 1fr; }
}