/* ==========================
   RESET DI BASE
   ========================== */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

/* ==========================
   ICONA MENU VERTICALE
   ========================== */
.menu-icon {
    cursor: pointer;
    font-size: 0px;
    padding: 0px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #ddd;
}

/* ==========================
   SIDEBAR VERTICALE
   ========================== */
.hover-menu-vertical {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;              
    height: 100vh;
    background-color: #ffffff;
    border-right: 1px solid #ddd;
    overflow-x: hidden;
    overflow: hidden; /* toglie scrollbar verticale */
    z-index: 100;
    transition: width 0.2s ease 0.24s;  /* Il primo tempo è l'animazione di apertura. Il secondo è il delay nel chiuderla */
}

/* Contenuto interno della sidebar verticale */
.dropdown-vertical-content {
    width: 100%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
}

/* Caratteristiche della sidebar orizzontale quando faccio hover */
.hover-menu-vertical:hover {
    transition-delay: 0s;  /* delay di apertura della sidebar */
    width: 30vw;               /* la sidebar si apre */
}


.slider {
    background-color: "#0d6efd";
    color: "white";
}
/* #0d6efd colore bottoni */


/* ==========================
   ICONA MENU ORIZZONTALE
   ========================== */
.menu-icon-horizontal {
    cursor: pointer;
    font-size: 0px;
    padding: 0px;
    background-color: #f0f0f0;
    border-bottom: 100px solid #ddd;
}


/* ==========================
   SIDEBAR ORIZZONTALE (DESTRA)
   ========================== */
/* wrapper già fixed => usalo come riferimento per absolute children */
.hover-menu-horizontal {
  position: fixed;   /* Fissa il wrapper rispetto alla finestra del browser (viewport) */
  top: 0;               /* Forza il wrapper a partire dall’estremo superiore della finestra (0 px dall’alto) */
  right: 0;             /* Forza il wrapper a partire dall’estremo destro della finestra (0 px da destra) */
  height: 100vh;        /* Occupa tutta l’altezza del viewport */
  overflow: visible; /* importante: permette al child absolute di uscire dal box ristretto */
  z-index: 100;     /* Quanto deve stare in primo piano */
}

/* rendi il contenuto assoluto in modo che inizi esattamente in alto */
.hover-menu-horizontal .dropdown-horizontal-content {
  position: absolute !important;    /* È posizionato rispetto al wrapper .hover-menu-horizontal (che è fixed), quindi possiamo allinearlo esattamente dove vogliamo. */
  top: 0 !important;                /* Metto la stessa posizione del wrapper */
  right: 0 !important;
  height: 100vh !important;     /* riempie tutto l'altezza */
  width: 64vw !important;       /* larghezza desiderata quando aperto */
  visibility: hidden;
  opacity: 0;
  transform: translateX(10px);  /* piccola animazione iniziale */
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.25s ease;
  box-sizing: border-box;       /* Fa sì che padding e border siano conteggiati dentro la width/height, quindi dimensioni prevedibili. */
  padding: 1rem 1.5rem;              /* Padding per separare i bordi */
  overflow-y: auto;             /* mantiene lo scroll dentro il pannello */
  background: #ffffff;
  z-index: 101;                /* sopra wrapper */
}

/* stato hover: mostra il pannello */
.hover-menu-horizontal:hover .dropdown-horizontal-content {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* piccolo fix per lo span trigger (evita che prenda spazio inatteso) */
.menu-icon-horizontal {
  display: block;
  width: 1rem;      /* stessa width del trigger */
  height: 100vh;    /* così non crea un gap verticale; ma è invisibile */
  padding: 0;
  margin: 0;
  line-height: 0;
  background: transparent;
  border: none;
}

/* Etichette delle checkbox del menu a destra */
#serve-checklist label,
#reception-checklist label,
#set-checklist label,
#attack-checklist label,
#block-checklist label,
#defense-checklist label,
#freeball-checklist label {
    font-size: 0.95rem;      /* grandezza font */
    font-weight: 450;     /* grassetto medio */
    margin: 0px 0px 0px 0px;
    padding: 0px;
}

/* Checkbox del menu a destra */
#serve-checklist .form-check,
#reception-checklist .form-check,
#set-checklist .form-check,
#attack-checklist .form-check,
#block-checklist .form-check,
#defense-checklist .form-check,
#freeball-checklist .form-check {
    margin: 0 10px 0 25px;
    padding: 0px;
}




/* ==========================
   TESTO E NAV LINK VERTICALE
   ========================== */
.sidebar-text {
    display: inline-block;
    vertical-align: middle;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 5px 0;
    color: #333;
    text-decoration: none;
}

.nav-link:hover {
    background-color: #eee;
    border-radius: 4px;
}

/* ==========================
   SCROLLBAR PERSONALIZZATA
   ========================== */
.dropdown-vertical-content::-webkit-scrollbar,
.dropdown-horizontal-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dropdown-vertical-content::-webkit-scrollbar-thumb,
.dropdown-horizontal-content::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 4px;
}

.dropdown-vertical-content::-webkit-scrollbar-track,
.dropdown-horizontal-content::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,0.05);
}






/* ==========================
   RADIO BUTTONS (Suddivisione dati e Metodo di valutazione)
   ========================== */
.radio-group .btn-group {
  display: flex;
  width: 100%;
}

.radio-group .form-check {
  padding-left: 0;
}

.radio-group .btn-group > .form-check:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.radio-group .btn-group > .form-check:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}