/* =====================================================================
   Portale Prenotazioni Gare - Coopernuoto
   Tema applicato sopra Bootstrap 5.

   Priorita' mobile-first e iOS Safari: il cliente segnalava difficolta'
   proprio dai dispositivi Apple.
   ===================================================================== */

:root {
  --cn-blu:        #0d5c8c;
  --cn-blu-scuro:  #094364;
  --cn-blu-chiaro: #e8f2f8;
  --cn-acqua:      #16a0c8;
  --cn-testo:      #1e2a32;
  --cn-bordo:      #dde5ea;
}

body {
  color: var(--cn-testo);
  background-color: #f5f8fa;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* min-height: 100dvh evita che la barra di Safari su iOS tagli il fondo
     pagina, dove stanno i pulsanti di invio dei moduli. */
  min-height: 100dvh;
}

/* ---------------------------------------------------------------------
   Barra di navigazione
   --------------------------------------------------------------------- */

.cn-navbar {
  background-color: var(--cn-blu);
  /* Su iPhone con notch la navbar sticky finirebbe sotto la status bar. */
  padding-top: calc(0.5rem + env(safe-area-inset-top));
}

.cn-navbar .navbar-brand {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.cn-navbar .nav-link.active {
  font-weight: 600;
  border-bottom: 2px solid rgba(255, 255, 255, 0.85);
}

@media (max-width: 991.98px) {
  .cn-navbar .nav-link.active {
    border-bottom: none;
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: 0.375rem;
  }
}

/* ---------------------------------------------------------------------
   Logo segnaposto: va sostituito con il marchio Coopernuoto in
   assets/img non appena il cliente lo fornisce.
   --------------------------------------------------------------------- */

.cn-logo {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cn-acqua), var(--cn-blu-scuro));
  flex-shrink: 0;
}

.cn-logo-grande {
  width: 64px;
  height: 64px;
}

/* ---------------------------------------------------------------------
   Pagine di accesso
   --------------------------------------------------------------------- */

.cn-pagina-accesso {
  justify-content: center;
  padding: 2rem 0 calc(2rem + env(safe-area-inset-bottom));
}

/* ---------------------------------------------------------------------
   Moduli
   --------------------------------------------------------------------- */

/* Sotto i 16px iOS Safari ingrandisce automaticamente la pagina al focus
   di un campo, e l'utente resta con il layout sfasato. */
.form-control,
.form-select {
  font-size: 16px;
}

.form-label {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.cn-campo-obbligatorio::after {
  content: " *";
  color: #b02a37;
}

/* Area tap comoda anche a dito su schermo piccolo. */
.btn,
.form-control,
.form-select {
  min-height: 44px;
}

.form-check-input {
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.15em;
}

.form-check-label {
  padding-left: 0.25rem;
}

/* ---------------------------------------------------------------------
   Sezione dei campi riservati agli atleti: viene mostrata e nascosta
   dal ruolo selezionato nel form utente.
   --------------------------------------------------------------------- */

.cn-campi-atleta {
  background-color: var(--cn-blu-chiaro);
  border: 1px solid var(--cn-bordo);
  border-radius: 0.5rem;
  padding: 1rem;
}

/* ---------------------------------------------------------------------
   Tabelle
   --------------------------------------------------------------------- */

.cn-tabella th {
  background-color: var(--cn-blu-chiaro);
  color: var(--cn-blu-scuro);
  font-weight: 600;
  white-space: nowrap;
}

/* Su schermo stretto la tabella scorre da sola invece di far scorrere
   l'intera pagina in orizzontale. */
.cn-tabella-scorrevole {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------
   Riquadri di riepilogo
   --------------------------------------------------------------------- */

.cn-riquadro {
  background: #fff;
  border: 1px solid var(--cn-bordo);
  border-radius: 0.5rem;
  padding: 1.25rem;
  height: 100%;
}

.cn-riquadro .cn-numero {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--cn-blu);
}

.cn-riquadro .cn-etichetta {
  color: #6c757d;
  font-size: 0.875rem;
}

/* ---------------------------------------------------------------------
   Pie' di pagina
   --------------------------------------------------------------------- */

.cn-footer {
  background: #fff;
  border-top: 1px solid var(--cn-bordo);
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}