/* ============================================================
   1. STILI GLOBALI, VARIABILI & UTILITY (Compatibili Dark Mode)
   ============================================================ */
:root {
    --brand-gold: #efe710;
}

html, body {
    height: 100%;
    width: 100%;
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    /* Su mobile la pagina DEVE poter scrollare, blocchiamo solo l'orizzontale */
    overflow-x: hidden; 
    overflow-y: auto; 
}

body {
    padding-top: 0; 
    transition: background-color 0.3s ease, color 0.3s ease;
}

.nunito-font {
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

/* Isolamento Schermata di Login */
body.auth-mode {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important; 
    margin: 0 !important;
    text-align: center;
    overflow: hidden !important; 
}

/* Utility Colori e Testi Custom (Sincronizzati ed Evitati Duplicati) */
.text-gold { 
    color: var(--brand-gold) !important;
}

.bg-gold { 
    background-color: var(--brand-gold) !important; 
}

.border-gold { 
    border: 1px solid var(--brand-gold) !important; 
}

.text-gold-border-black,
.testo-gold-black { 
    color: var(--brand-gold) !important;
    -webkit-text-stroke: 1px #000000;
    paint-order: stroke fill; 
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.text-gold-loading {
    color: var(--brand-gold) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    font-weight: bold;
}

/* Sincronizzato con l'oro ufficiale del brand per coerenza mobile/desktop */
.text-gold-mobile {
    color: var(--brand-gold) !important;
}

.intestazioni-no-required {
    display: block;
    color: #6c757d;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.text-break {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.btn-cronologia:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ============================================================
   2. COMPONENTI (Bottoni, Form, Tabelle, Loader e Scrollbar)
   ============================================================ */

/* Pulsanti e Interazioni */
button {
    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.2s ease, border-color 0.2s ease;
}

button:active { 
    transform: scale(0.98); 
}

.btn-outline-gold {
    color: var(--brand-gold);
    border-color: var(--brand-gold);
}

.btn-outline-gold:hover {
    background-color: var(--brand-gold);
    color: #000;
}

/* Modificatori Pulsanti Custom Viola Bootstrap */
.btn-bd-primary {
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8;
}

/* Form e Login Specifici */
.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
}

.form-signin .form-floating:focus-within {
    z-index: 2;
}

.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.atleta-box {
    padding: 0.4rem 0.75rem;
    min-height: calc(1.5em + 0.8rem + 2px);
    font-size: 1rem;
    line-height: 1.5;
}

/* Struttura Tabelle e Contenuti Dinamici */
#tabella-allenamento {
    width: 100%;
}

#tabella-allenamento thead th {
    background-color: #212529 !important;
    color: var(--brand-gold) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.ta-testo-allenamento {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
}

/* Loader Overlay (Effetto semi-trasparente) */
#loading-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* Modificato da 0.98 a 0.75 (Trasparenza al 75%) */
    background-color: rgba(255, 255, 255, 0.75); 
    
    /* OPZIONALE: Aggiunge un effetto sfocatura sullo sfondo dietro l'overlay (Vetro Satinato) */
    backdrop-filter: blur(4px); 
    -webkit-backdrop-filter: blur(4px); /* Per compatibilità Safari */

    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* INTERCETTAZIONE DARK MODE DI BOOTSTRAP 5.3+ */
[data-bs-theme="dark"] #loading-overlay {
    /* Sostituito il colore solido con un RGBA scuro al 75% di opacità */
    background-color: rgba(18, 18, 18, 0.75) !important; 
}

#loading-overlay.hidden {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
}

/* Scrollbar Custom */
.gf-scroll-remove::-webkit-scrollbar {
    width: 6px;
}

.spinner-custom {
    border-radius: 6px; 
    width: 22px; 
    height: 4px;
    animation-duration: 1.6s;
}

/* Ritardo per il secondo rettangolo */
.spinner-custom.delay-1 {
    animation-delay: 0.3s;
}

/* Ritardo per il terzo rettangolo */
.spinner-custom.delay-2 {
    animation-delay: 0.6s;
}

#icona-fulmine.fulmine-acceso {
    color: var(--brand-gold) !important;
}

.custom-popover {
  /* Larghezza massima */
  --bs-popover-max-width: 200px;
  
  /* Bordo del popover e freccia color Gold */
  --bs-popover-border-color: var(--brand-gold) ;
  --bs-popover-arrow-color: var(--brand-gold) ;
  
  /* Sfondo del corpo del popover: eredita il colore di sfondo del tema (bg-body) */
  --bs-popover-bg: var(--bs-body-bg);
  
  /* Stile dell'Header (Titolo): Sfondo Gold e Testo Nero */
  --bs-popover-header-bg: var(--brand-gold) ;
  --bs-popover-header-color: #000000;
  
  /* Stile del Body (Contenuto): Eredita il colore del testo del tema (text-body) */
  --bs-popover-body-color: var(--bs-body-color);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

.custom-accordion {
  /* Colore del bordo dell'intero blocco accordion */
  --bs-accordion-border-color: var(--bs-border-color-translucent);
  --bs-accordion-bg: transparent;

  /* STATO CHIUSO: Intestazione Gold e testo Nero */
  --bs-accordion-btn-bg: var(--brand-gold) ;
  --bs-accordion-btn-color: #000000;
  
  /* STATO APERTO: Mantiene lo sfondo Gold e testo Nero (rimuove l'azzurro di Bootstrap) */
  --bs-accordion-active-bg: var(--brand-gold) ;
  --bs-accordion-active-color: #000000;
  
  /* Rimuove l'alone azzurro del focus box-shadow */
  --bs-accordion-btn-focus-box-shadow: none;
}

/* Customizzazione della freccia (chevron) dell'accordion quando è aperto/chiuso */
.custom-accordion .accordion-button::after {
  /* Trasforma l'icona nativa in nera */
  filter: brightness(0);
}

/* Opzionale: un leggero effetto hover per rendere l'interfaccia più dinamica */
.custom-accordion .accordion-button:hover {
  opacity: 0.9;
}

/* Forza l'Offcanvas a stare sopra il backdrop e sopra eventuali sidebar desktop */
.offcanvas {
    z-index: 1065 !important;
}
.offcanvas-backdrop {
    z-index: 1060 !important;
}

/* Colore dello switch quando è attivo (checked) */
.custom-switch-warning .form-check-input:checked {
    background-color: #ffc107; /* Il giallo warning di Bootstrap */
    border-color: #ffc107;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23212529'/%3e%3c/svg%3e"); 
    /* Il cerchietto interno diventa scuro (#212529) per garantire il contrasto */
}

/* Colore del bordo quando riceve il focus/click */
.custom-switch-warning .form-check-input:focus {
    border-color: #ffc107;
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
}

.badge-gold {
    background-color: var(--brand-gold) !important; /* Sostituisci #FFD700 con il tuo codice HEX esatto del gold */
    color: #000000 !important;            /* Colore del testo (es. nero o bianco per il contrasto) */
}
/* ============================================================
   3. STILE PRO PER ELEMENTO SELEZIONATO NELLA SIDEBAR
   ============================================================ */
.nav-link.voce-attiva-custom {
    position: relative;                   
    background-color: #1a1d20 !important; 
    color: var(--brand-gold) !important;  
    font-weight: 600 !important; 
    border-left: none !important;         
    border-radius: 8px !important;        
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5) !important;
    padding-left: 1.5rem !important;      
}

/* LA LINGUETTA GIALLA ARROTONDATA FLUTTUANTE */
.nav-link.voce-attiva-custom::before {
    content: "";
    position: absolute;
    left: 4px;                            
    top: 15%;                             
    height: 70%;
    width: 4px;
    background-color: var(--brand-gold) !important;
    border-radius: 10px !important;       
}

/* Sincronizzazione icone attive (SVG e Bootstrap Icons) */
.nav-link.voce-attiva-custom svg,
.nav-link.voce-attiva-custom .bi {
    fill: var(--brand-gold) !important;
    color: var(--brand-gold) !important;
}

/* ============================================================
   4. CLASSI STRUTTURALI PATTERN DI BOOTSTRAP
   ============================================================ */
.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    user-select: none;
}

.b-example-divider {
    width: 100%;
    height: 3rem;
    background-color: rgba(0, 0, 0, .15);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
}

.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
}

.nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.bd-mode-toggle {
    z-index: 1500;
}

.bd-mode-toggle .bi {
    width: 1em;
    height: 1em;
}

.bd-mode-toggle .dropdown-menu .active .bi {
    display: block !important;
}

/* ============================================================
   5. LAYOUT & RESPONSIVE (Mobile-First approach)
   ============================================================ */

/* BASE MOBILE COMPORTAMENTO STANDARD (Evita overflow) */
.area-viste-custom {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 !important;
    padding: 1.25rem 0.75rem !important;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border: 1px solid #dee2e6;
}

/* --- INTERVALLO STANDARD SMARTPHONE (Sotto i 768px) --- */
@media (max-width: 767.98px) {
    header .nav { gap: 5px; }
    header .nav-link {
        font-size: 0.85rem;
        padding: 0.5rem 0.3rem !important;
    }
    #div-new .col-sm-6, #div-new .col-6, #div-new .col-3 {
        flex: 0 0 100%;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    .footer-logo-container img {
        width: 175px !important; 
        height: auto !important;
    }
}

/* --- INTERVALLO TABLET & SMARTPHONE (Sotto i 992px) --- */
@media (max-width: 991.98px) {
    #sidebar-atleta {
        width: 280px !important; /* Gestione larghezza nativa per la visualizzazione mobile */
    }

    .mobile-link-container img {
        width: 100px !important;
        height: auto !important;
    }

    .row.align-items-end > .col-12 {
        margin-bottom: 15px;
    }
    
    .form-select {
        font-size: 1.1rem !important;
        padding: 0.75rem !important;
        background-color: var(--brand-gold) !important; 
        color: #212529 !important;                    
    }

    .form-select option {
        background-color: #ffffff !important; 
        color: #212529 !important;            
    }

    /* TRASFORMAZIONE TABELLA IN CARD */
    #tabella-allenamento {
        overflow-x: hidden !important;
        padding: 10px !important;
    }
    
    #tabella-allenamento table {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }

    #tbody-read {
        display: block;
        width: 100%;
    }

    #tbody-read td.d-none, 
    #tbody-read td.col-desktop {
        display: none !important;
    }

    #tbody-read tr {
        display: flex !important;
        flex-direction: column;
        border: 1px solid #dee2e6 !important;
        border-radius: 12px;
        margin-bottom: 0.75rem !important;
        padding: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    #tbody-read td {
        display: block !important;
        width: 100% !important;
        padding: 4px 0 !important;
        border: none !important;
        background: none !important;
    }

    #atleta-sottotitolo {
        display: none !important;
    }

    #div-atleta-form {
        margin: 15px 0 !important; 
        padding: 1.25rem 0.75rem !important; 
        border-radius: 12px !important;
        width: 100% !important; 
        max-width: 100% !important;
    }

    #atleta-titolo {
        font-size: 1.3rem !important; 
        letter-spacing: 0.1px !important;
    }

    #div-atleta-form .text-center.mb-5 {
        margin-bottom: 0.25rem !important; 
        padding-bottom: 0 !important;
    }

    #form-atleta .row.col-10,
    #form-atleta .row,
    #form-atleta .col-12 {
        width: 100% !important; 
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0.25rem !important;  
        padding-right: 0.25rem !important;
    }

    #form-atleta .g-4 {
        --bs-g-y: 0.6rem !important; 
    }
    
    #form-atleta .mt-5 {
        margin-top: 1rem !important;
        padding-top: 0.25rem !important;
    }
}

/* --- MEDIA QUERY BREAKPOINT LARGO (Sopra i 768px) --- */
@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

/* --- DESKTOP PRO (Sopra i 992px) --- */
@media (min-width: 992px) {
   /* Forza il contenitore delle schede atleta a prendersi tutto lo spazio e a centrarsi */
        #users {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            margin: 0 auto !important;
        }
    /* Impedisce lo scroll orizzontale fastidioso */
    body, #home {
        overflow-x: hidden !important;
        max-width: 100vw;
    }

    /* 1. REGOLAZIONE SIDEBAR DESKTOP */
    #sidebar-atleta.offcanvas-lg {
        /* Cambia questa percentuale o pixel fissi (es: 300px) per regolare la larghezza */
        width: 25% !important; 
        min-width: 260px !important; 
        max-width: 340px !important;
        height: 100vh !important;
        position: relative !important; /* Forza l'offcanvas a comportarsi come una colonna vera */
        transform: none !important;
        visibility: visible !important;
    }

    /* 2. REGOLAZIONE MAIN CONTENT (Impedisce il collasso a sinistra) */
    main.col-lg-9 {
        /* flex-grow fa sì che si allarghi prendendosi TUTTO lo spazio rimanente a destra */
        flex-grow: 1 !important; 
        height: 100vh !important;
        overflow-y: auto !important; /* Solo la parte destra scorre se i dati sono lunghi */
    }

    .offcanvas { display: none !important; }
    .fs-custom-header { font-size: 1.4rem; }
    .fs-custom-data { font-size: 1.25rem; }

    .atleta-box {
        padding: 0.75rem 1rem;
        min-height: calc(1.5em + 1.5rem + 2px);
        font-size: 1.25rem;
    }

    #tabella-allenamento table {
        display: table !important;
        table-layout: fixed;
    }

    #tabella-allenamento thead {
        display: table-header-group !important;
    }

    .text-gold-mobile {
        color: var(--bs-body-color) !important; 
    }

    .footer-logo-container img {
        width: 250px !important; 
        height: auto !important;
    }

    .flex-grow-1.p-3.p-lg-4 .container-fluid {
        margin: 0 !important;
        padding-left: 1.5rem !important; 
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Trasformazione della Card in modalità Desktop */
    .area-viste-custom {
        display: block !important;
        margin-top: 1rem !important;
        margin-bottom: 2rem !important;
        margin-left: 0 !important;      
        margin-right: auto !important;    
        max-width: 950px !important; 
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
        border-radius: 15px !important;    
        border: 1px solid #dee2e6 !important;
    }

    .area-viste-custom .text-center {
        text-align: center !important;
    }

    .bordo-desktop-3px {
        border: 3px solid var(--bs-border-color-translucent) !important;
    }
    
    .bg-lg-body-tertiary { 
        background-color: var(--bs-secondary-bg) !important; 
    }
    
    .bg-lg-card { 
        background-color: transparent !important; 
    }
    
    .border-lg-custom { 
        border: 1px solid var(--bs-border-color-translucent) !important;
        box-shadow: var(--bs-box-shadow-sm) !important;
    }

    .input-data-desktop {
        background-color: var(--bs-tertiary-bg) !important;
        color: var(--bs-body-color) !important;
        border-color: var(--bs-border-color) !important;
        cursor: default;
    }
    .input-group-text-desktop {
        background-color: var(--bs-secondary-bg) !important;
        color: var(--bs-secondary-color) !important;
        border-color: var(--bs-border-color) !important;
    }

    #area-lavoro:has(#div-atleta-scheda-corrente),
        #area-lavoro:has(#div-atleta-storico) {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            padding-top: 90px !important; /* Spazio di sicurezza per la navbar fissa */
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
        }
}

/* ============================================================
   6. UTILITY & NAVIGATION HOVER
   ============================================================ */
.nav-link:focus, .nav-link:active {
    outline: none !important;
    box-shadow: none !important;
}

.nav-link:hover {
    color: var(--brand-gold) !important;
    transition: 0.3s;
}

/* STILIZZAZIONE COMPATTA SELECT ATLETA (SIDEBAR) */
#select-atleti.form-select {
    min-height: auto !important;          
    padding-top: 0.25rem !important;      
    padding-bottom: 0.25rem !important;   
    font-size: 0.85rem !important;        
    border: 1px solid #495057 !important; 
    background-color: #212529 !important; 
    color: #fff !important;
}

#select-atleti.form-select:focus {
    border-color: var(--brand-gold) !important;     
    box-shadow: 0 0 0 0.25rem rgba(239, 231, 16, 0.25) !important; 
}

.sidebar.nav {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important; 
}

.mt-auto-custom {
    margin-top: auto !important;
}

/* Sicurezza globale anti-scroll per il corpo interno dell'offcanvas */
.offcanvas-body {
    overflow-x: hidden !important;
    height: 100% !important; 
}

@media print {
    #printDiv {
        background-color: #ffffff !important;
        color: #000000 !important;
        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important;
    }
}