/* ============================================================================
   ConvenzioniGlobus - stile applicativo
   Bootstrap 5.3 fa il grosso; qui solo cio' che Bootstrap non copre.
   Il colore del marchio arriva da --cg-brand, iniettato per convenzione.
   assets/css/app.css
   ========================================================================== */

body {
  background: #f5f7fa;
  color: #1f2933;
}

/* --- Navigazione ---------------------------------------------------------- */
.cg-nav {
  background: #fff;
  border-bottom: 1px solid #e3e8ee;
}
.cg-nav .navbar-brand { font-weight: 600; color: var(--cg-brand); }
.cg-badge { font-size: .6rem; top: 2px; }

.cg-footer {
  border-top: 1px solid #e3e8ee;
  background: #fff;
  color: #6b7684;
}
.cg-footer a { color: #6b7684; text-decoration: none; }
.cg-footer a:hover { color: var(--cg-brand); }

/* --- Titoletti di sezione ------------------------------------------------- */
.cg-titoletto {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8794a1;
  margin-bottom: 1rem;
}
.cg-eyebrow {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8794a1;
  margin-bottom: .35rem;
}

/* --- Schede prodotto ------------------------------------------------------ */
.cg-card-prodotto {
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cg-card-prodotto:hover {
  transform: translateY(-2px);
  box-shadow: 0 .6rem 1.4rem rgba(31, 41, 51, .12) !important;
}

.cg-thumb {
  aspect-ratio: 4 / 3;
  background: #eef1f5;
  border-radius: .5rem .5rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #b3bdc9;
  font-size: 2rem;
}
.cg-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.cg-thumb-sm { aspect-ratio: 3 / 2; font-size: 1.4rem; }
.cg-thumb-lato { border-radius: .5rem 0 0 .5rem; aspect-ratio: auto; }

/* --- Vuoti ---------------------------------------------------------------- */
.cg-vuoto {
  text-align: center;
  padding: 4rem 1rem;
  color: #8794a1;
  background: #fff;
  border: 1px dashed #d5dce4;
  border-radius: .75rem;
}

/* --- Tela dell'editor ----------------------------------------------------- */
.cg-tela-wrap {
  background:
    repeating-conic-gradient(#f0f2f5 0% 25%, #fff 0% 50%) 50% / 16px 16px;
  border: 1px solid #e3e8ee;
  border-radius: .5rem;
  padding: .75rem;
  overflow: auto;
  text-align: center;
}
.cg-tela-wrap .canvas-container { margin: 0 auto; }
.cg-tela-wrap canvas { max-width: 100%; }

.cg-sticky { position: sticky; top: 1rem; }

/* --- Campi dell'editor sede ----------------------------------------------- */
.cg-campo-errore  .form-control { border-color: var(--bs-danger); }
.cg-campo-avviso  .form-control { border-color: var(--bs-warning); }
.cg-rilievo:empty { display: none; }

.cg-listino td { border-color: #edf1f5; }

/* --- Amministrazione ------------------------------------------------------ */
.cg-admin { background: #f0f2f5; }

.cg-mini {
  width: 40px; height: 40px;
  object-fit: contain;
  background: #eef1f5;
  border-radius: .25rem;
  padding: 2px;
}
.cg-mini-vuota {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b3bdc9;
}

.cg-pastiglia {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: .3rem;
  vertical-align: middle;
}
.cg-pallino {
  width: 34px; height: 34px;
  border-radius: 50%;
  margin: 0 auto;
}

/* --- Editor dei campi (admin) --------------------------------------------- */
.cg-lista-campi { max-height: 60vh; overflow-y: auto; }

.cg-campo-riga {
  padding: .5rem .65rem;
  border: 1px solid #e3e8ee;
  border-radius: .375rem;
  margin-bottom: .35rem;
  cursor: pointer;
  background: #fff;
}
.cg-campo-riga:hover { border-color: #b3c6dd; }
.cg-campo-riga.attivo {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .15rem rgba(13, 110, 253, .12);
}

.cg-campo-dettaglio {
  padding: .75rem;
  margin: -.2rem 0 .6rem;
  background: #f7f9fb;
  border: 1px solid #e3e8ee;
  border-top: none;
  border-radius: 0 0 .375rem .375rem;
}
.cg-mini-label {
  font-size: .68rem;
  font-weight: 600;
  color: #8794a1;
  margin-bottom: .1rem;
  display: block;
}

/* --- Accessibilita' ------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--cg-brand, #0d4d8c);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .cg-card-prodotto { transition: none; }
  .cg-card-prodotto:hover { transform: none; }
}

/* Filtro di secondo livello: piu' leggero del primo, per non competere con lui */
.nav-pills-sm .nav-link {
  padding: .3rem .75rem;
  font-size: .8125rem;
  border-radius: 999px;
  color: var(--bs-secondary-color);
}
.nav-pills-sm .nav-link.active {
  background: var(--cg-primario);
  color: #fff;
}

/* Etichetta IVA accanto a ogni prezzo: piccola, ma mai assente.
   Un prezzo senza indicazione IVA e' un reclamo che aspetta di succedere. */
.cg-iva { font-size: .75rem; color: var(--bs-secondary-color); font-weight: 400; }

/* Griglia listino: quantita' x tempi di consegna */
.cg-griglia-prezzi th, .cg-griglia-prezzi td { text-align: center; vertical-align: middle; }
.cg-griglia-prezzi th:first-child, .cg-griglia-prezzi td:first-child { text-align: left; }
.cg-griglia-prezzi tbody tr:hover { background: var(--bs-tertiary-bg); }
.cg-griglia-prezzi .cg-scelto { outline: 2px solid var(--cg-primario); outline-offset: -2px; }

/* Celle della griglia prezzi: cliccabili, con lo stato scelto ben visibile.
   Il prezzo NON viaggia in un hidden: la cella comunica solo quantita' e consegna. */
.cg-cella { cursor: pointer; padding: .5rem .25rem; border-radius: .375rem; transition: background .12s; }
.cg-cella:hover { background: var(--bs-tertiary-bg); }
.cg-cella.cg-scelto { background: var(--cg-primario); color: #fff; }
.cg-mini { opacity: .55; transition: opacity .12s; }
.cg-mini:hover, .cg-mini-attiva { opacity: 1; border-color: var(--cg-primario) !important; }