html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ============================================================
   Colori per LIVELLO (orientamento visivo: dove ci si trova)
     Super = rosso · Ente = viola · Comitato = blu
     Società = cyan · Arbitro = arancione
   Ogni classe .lvl-* imposta la custom property --lvl; le classi
   d'uso (badge/testo/bordo) leggono var(--lvl). I Limitati usano
   la variante "soft" (tinta più chiara dello stesso colore).
   ============================================================ */
.lvl-super    { --lvl: var(--bs-red); }
.lvl-ente     { --lvl: var(--bs-purple); }
.lvl-comitato { --lvl: var(--bs-blue); }
.lvl-societa  { --lvl: var(--bs-cyan); }
.lvl-arbitro  { --lvl: var(--bs-orange); }

/* Badge ruolo: pieno per gli Admin */
.badge-lvl {
  color: #fff;
  background: var(--lvl, #6c757d);
}

/* Badge ruolo: variante chiara per i Limitati */
.badge-lvl-soft {
  color: var(--lvl, #6c757d);
  background: color-mix(in srgb, var(--lvl, #6c757d) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--lvl, #6c757d) 35%, transparent);
}

/* Accenti per la sidebar / header del livello */
.lvl-text    { color: var(--lvl) !important; }
.lvl-border  { border-color: var(--lvl) !important; }
.lvl-bg-soft { background: color-mix(in srgb, var(--lvl) 10%, transparent) !important; }


/* ============================================================
   Form change-tracking (vedi js/form-track-changes.js):
     - .is-dirty  = bordo GIALLO sui campi modificati rispetto al valore iniziale
     - .is-invalid = bordo ROSSO  (Bootstrap standard, qui rafforzato)
   La precedenza visuale e' invalid > dirty (rosso vince sul giallo).
   Applicabile a tutti i tipi di control: input, select, textarea, form-check.
   ============================================================ */
.is-dirty:not(.is-invalid),
.is-dirty:not(.is-invalid):focus {
    border-color: #ffc107 !important;
    box-shadow: 0 0 0 0.15rem rgba(255, 193, 7, 0.2) !important;
}

/* Bootstrap mette is-invalid in rosso ma con shadow leggera; rafforziamo
   l'evidenza qui per coerenza con l'is-dirty. */
.is-invalid,
.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.2) !important;
}

/* Classe legacy che ASP.NET aggiunge automaticamente agli <input> con errori
   in ModelState. Per <select>/<textarea> NON viene aggiunta automaticamente:
   per quelli ci pensa form-track-changes.js (applyServerSideInvalidFromSpans)
   che applica direttamente 'is-invalid' al load. Niente selettori CSS basati
   sullo span: lo span non viene aggiornato client-side mentre l'utente digita,
   quindi il bordo resterebbe "fissato" e il bottone Save bloccato. */
.input-validation-error,
.input-validation-error:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.2) !important;
}

/* Per i form-check (checkbox/radio) il bordo va sul wrapper visivo. */
.form-check-input.is-dirty:not(.is-invalid) {
    background-color: rgba(255, 193, 7, 0.18);
    border-color: #ffc107 !important;
}
.form-check-input.is-invalid {
    border-color: #dc3545 !important;
}

/* Pulsante Save disabilitato: tono piu' tenue + cursor not-allowed.
   Bootstrap mette opacity 0.65: lo lasciamo, aggiungiamo solo il cursore. */
button[type="submit"]:disabled,
input[type="submit"]:disabled {
    cursor: not-allowed;
}
/* ============================================================
   Card header collassabile (Bootstrap data-bs-toggle="collapse").
   La chevron .rotate-when-expanded gira di 180 deg quando il
   trigger e' aperto (aria-expanded="true").
   ============================================================ */
[aria-expanded="false"] .rotate-when-expanded {
    transition: transform 0.2s ease-in-out;
    transform: rotate(0deg);
}
[aria-expanded="true"] .rotate-when-expanded {
    transition: transform 0.2s ease-in-out;
    transform: rotate(180deg);
}
/* ============================================================
   Badge sesso (regole misto): rosa = Femminile, azzurro = Maschile.
   Metronic non ha questi toni tra i badge-light-* standard.
   ============================================================ */
.badge-light-rosa {
    color: #d63384;
    background-color: rgba(214, 51, 132, 0.1);
}
.badge-light-azzurro {
    color: #009ef7;
    background-color: rgba(0, 158, 247, 0.1);
}

/* ============================================================
   Composizione gironi — lavagna drag & drop.
   Le zone (girone + "da assegnare") sono drop target; le card
   squadra sono trascinabili. Colori via var Bootstrap Metronic
   per adattarsi a tema chiaro/scuro. L'accento colorato del
   girone resta inline (hsl data-driven per indice).
   ============================================================ */
.gironi-zona {
    min-height: 70px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
    border-radius: 0.475rem;
    background: var(--bs-gray-100);
    border: 1px dashed var(--bs-border-color);
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.gironi-zona.drag-over {
    background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
    border-color: var(--bs-primary);
}
.gironi-zona-vuota::after {
    content: "trascina qui le squadre";
    color: var(--bs-gray-500);
    font-size: 0.8rem;
    font-style: italic;
    align-self: center;
    margin: auto;
}

.squadra-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 9px;
    border-radius: 0.475rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--chip-accent, #a1a5b7);
    cursor: grab;
    user-select: none;
    font-size: 0.82rem;
    line-height: 1.15;
}
.squadra-chip:active { cursor: grabbing; }
.squadra-chip.dragging { opacity: 0.4; }
.squadra-chip.non-trascinabile { cursor: default; }
.squadra-chip .chip-nome {
    font-weight: 600;
    color: var(--bs-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.squadra-chip .chip-societa {
    color: var(--bs-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}
.squadra-chip .chip-km {
    color: var(--bs-gray-700);
    font-weight: 600;
    white-space: nowrap;
}
/* Squadra bloccata: non trascinabile, accento a sinistra rinforzato. */
.squadra-chip.chip-bloccata {
    cursor: default;
    background: color-mix(in srgb, var(--bs-danger) 7%, var(--bs-body-bg));
}
/* Icone azione (lucchetto / nota) nella chip. */
.squadra-chip .chip-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 2px;
}
.squadra-chip .chip-lock,
.squadra-chip .chip-nota,
.squadra-chip .chip-locate {
    color: var(--bs-gray-500);
    line-height: 1;
    cursor: pointer;
}
.squadra-chip .chip-lock:hover,
.squadra-chip .chip-nota:hover,
.squadra-chip .chip-locate:hover { color: var(--bs-gray-800); }
.squadra-chip .chip-locate:hover { color: var(--bs-primary); }
.squadra-chip .chip-lock.attivo { color: var(--bs-danger); }
.squadra-chip .chip-nota.attivo { color: var(--bs-primary); }
.squadra-chip .chip-noimp {
    color: var(--bs-warning);
    font-size: 0.72rem;
    white-space: nowrap;
}

/* Mappa impianti (Leaflet) nella composizione gironi. */
.gironi-mappa {
    height: 440px;
    width: 100%;
    border-radius: 0.475rem;
}
/* I popup Leaflet in tema scuro restano leggibili (sfondo bianco di default). */
.gironi-mappa .leaflet-popup-content { font-size: 0.85rem; }