/* ====== STYLES GLOBAUX ====== */
body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background-color: #f5f7fa; /* gris clair moderne */
  color: #2c3e50; /* gris foncé élégant */
  margin: 0;
  padding: 0;
}

/* ====== NAVBAR (menu du haut) ====== */

.navbar {
  background-color: #2c3e50 !important; 
  border-bottom: 2px solid #1abc9c;
}


.navbar-brand, 
.navbar-nav .nav-link {
  color: #ecf0f1 !important; 
  font-weight: 500;
}

.navbar-nav .nav-link:hover {
  color: #1abc9c !important;
}



/* ====== CONTENU CENTRAL ====== */
/*
.container
{
  
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  flex: 1;
}


 

.custom-main-container 
{
  width: 90%;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
*/

html, body {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }

        body {
            display: flex;
            flex-direction: column;
        }

        header {
            
            padding: 10px;
            
        }

        main {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .row.g-0 {
            flex: 1;
            overflow: hidden;
        }

        aside {
            
            overflow-y: auto;
            height: 100%;
        }

        section {
          overflow-y: auto; /* Active le scroll vertical */
          height: 100%;    /* Prend toute la hauteur disponible */
          display: flex;
          flex-direction: column;
        }

        section > div {
    flex: 1; /* Prend toute la hauteur disponible dans la section */
    min-height: 0; /* Permet à la div de rétrécir si nécessaire */
    overflow-y: auto; /* Optionnel : si tu veux que le scroll soit dans la div blanche */
}

        footer {
            
            padding: 10px;
            
        }

/* ====== BOUTONS ====== */
.btn-primary {
  background-color: #1abc9c;
  border: none;
  margin-top: 20px;
}
.btn-primary:hover {
  background-color: #16a085;
}

/* ====== CARDS ====== */
.card{
  
  margin-top: 20px;
}

.chevron {
    display: inline-block;
    transition: transform 0.25s ease;
    color: black;
}

/* fermé */
.btn.collapsed .chevron {
    transform: rotate(0deg);
}

/* ouvert */
.btn:not(.collapsed) .chevron {
    transform: rotate(90deg);
}

/* ====== bouton on/off toggle switches ====== */
.form-check-input-toggle {
        width: 2.5em;
        height: 1.5em;
        margin-top: 0.3em;
    }
    .form-check-input-toggle:checked {
        background-color: #0d6efd; /* Bleu Bootstrap */
        border-color: #0d6efd;
    }
    .form-check-input-toggle:focus {
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }
    .form-check-input-toggle:checked::before {
        content: "";
        position: absolute;
        left: 0.1em;
        top: 0.1em;
        width: 1.2em;
        height: 1.2em;
        background-color: white;
        border-radius: 50%;
        transition: transform 0.2s;
    }
    .form-check-input-toggle:checked::after {
        transform: translateX(1em);
    }
    /* Masquer la case à cocher par défaut */
    .form-check-input-toggle[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
    }

.modal-footer .btn {
        margin: 0; /* Supprime les marges par défaut */
        vertical-align: middle; /* Aligne verticalement */
    }

/* ====== cards compteur congés ====== */
.leave-card {
    min-height: 220px;
    border-radius: 24px;
    padding: 1.5rem;
    color: #fff;

    display: flex;
    flex-direction: column;

    box-shadow:
        0 15px 35px rgba(0,0,0,.15);

    transition: transform .2s ease;
}

.leave-card:hover {
    transform: translateY(-4px);
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
}

.card-days {
    font-size: 4rem;
    font-weight: 300;
    line-height: 1;
    margin-top: auto;
}

.card-unit {
    font-size: 1rem;
    opacity: .9;
}

.card-amount {
    margin-top: auto;
    font-size: .9rem;
    opacity: .85;
}

.formula-symbol {
    font-size: 3rem;
    color: #6c757d;
    font-weight: 300;
}

/* Couleurs */

.bg-acquisition {
    background: linear-gradient(
        135deg,
        #ffb300,
        #ff7b00
    );
}

.bg-acquired {
    background: linear-gradient(
        135deg,
        #18d8a3,
        #00b894
    );
}

.bg-taken {
    background: linear-gradient(
        135deg,
        #9b5cff,
        #6c2df1
    );
}

.bg-balance {
    background: linear-gradient(
        135deg,
        #4b7bec,
        #2563eb
    );
}

.bg-pose {
    background: linear-gradient(
        135deg,
        #09b9ef,
        #2599eb
    );
}

.card-value {

    display: flex;

    align-items: baseline;

    gap: .5rem;

}

.days-number {

    font-size: 4rem;

    font-weight: 300;

    line-height: 1;

}

.days-label {

    font-size: 1rem;

    opacity: .9;

}

/* ====== FOOTER (bandeau bas) ====== */
footer {
  background-color: #2c3e50;
  color: #bdc3c7;
  text-align: center;
  padding: 10px;
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 14px;
  border-top: 2px solid #1abc9c;
}

/* position menu bas*/
html, body {
      height: 100%;
    }

    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh; /* occupe toute la hauteur de la fenêtre */
    }

    main {
      flex: 1; /* prend tout l’espace disponible */
    }

/* calendrier absences*/
/* ===== Style général du calendrier ===== */
#calendar {
    max-width: 900px;
    margin: 20px auto;
    padding: 10px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Texte en noir */
.fc .fc-daygrid-day-number,
.fc .fc-daygrid-day,
.fc .fc-col-header-cell,
.fc .fc-col-header-cell-cushion,
.fc .fc-toolbar-title {
    color: black !important;
    font-weight: bold;
}

/* Fond blanc pour les jours */
.fc .fc-daygrid-day {
    background-color: white !important;
}

/* Aujourd'hui en gris clair */
.fc .fc-day-today {
    background: #f0f0f0 !important;
}

/* ===== Congés (événements normaux) ===== */
/* Préfixe .fc-event pour cibler les événements FullCalendar */
.fc .fc-event-conge-cp {
    background-color: #4CAF50 !important;
    border-color: #4CAF50 !important;
}

.fc .fc-event-conge-maladie {
    background-color: #f44336 !important;
    border-color: #f44336 !important;
}

.fc .fc-event-conge-formation {
    background-color: #2196F3 !important; /* Bleu */
    border-color: #2196F3 !important;
}

.fc .fc-event-conge-autre_remunere {
    background-color: #FF9800 !important; /* Orange */
    border-color: #FF9800 !important;
}

.fc .fc-event-conge-autre_non_remunere {
    background-color: #9E9E9E !important; /* Gris */
    border-color: #9E9E9E !important;
}

/* ===== Jours fériés (événements d'arrière-plan) ===== */
/* Cible les cellules des jours fériés */
.fc .fc-day.fc-day-frie {
    background-color: #cc3333 !important;
}

/* Cible le numéro du jour dans les cellules fériées */
.fc .fc-day.fc-day-frie .fc-daygrid-day-number {
    color: #666 !important;
}

/* Cible les événements d'arrière-plan (pour écraser le style par défaut de FullCalendar) */
.fc .fc-event.fc-event-background.fc-day-frie {
    background-color: #f0f0f0 !important;
    opacity: 0.5 !important;
}
/*
.fc .fc-event {
    background-color: red !important;
}
    */