/*
████████████████████████████████████████████████████████████████████████████████
█                                                                              █
█                        STYLES CSS - MON JOURNAL D'ACTIVITÉ                   █
█                                                                              █
█                           Fichier de styles principal                        █
█                                                                              █
████████████████████████████████████████████████████████████████████████████████
*/

/* ═══════════════════════════════════════════════════════════════════════
   1. STYLES GÉNÉRAUX ET ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════ */

/* Affichage par section */
.section { 
  display: none; 
}
.active-section { 
  display: block;
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
body { background-color: #f8f9fa; }

/* Offcanvas pour mobile/tablette (<992px) */
@media (max-width: 992px) {
  .offcanvas-end {
    width: 70% !important;
    background-color: rgba(0,0,0,0.5) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   2. STYLES DES BOUTONS
   ═══════════════════════════════════════════════════════════════════════ */

/* Suppression de l'effet de focus gris sur les liens de navigation */
.nav-link:focus,
.nav-link:active {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* Boutons avec dégradé */
.btn-primary {
  background: linear-gradient(to right, rgb(192,10,84), rgb(209,9,56), rgb(222,8,38));
  border: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
  background: linear-gradient(to right, rgb(222,8,38), rgb(209,9,56), rgb(192,10,84));
  transform: scale(1.05);
  box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
}
.btn-primary:active {
  transform: scale(0.95);
}
.btn,
.btn-secondary,
.btn-success,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-danger:hover {
  transform: scale(1.05);
  box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
}
.btn:active,
.btn-secondary:active,
.btn-success:active,
.btn-outline-primary:active,
.btn-outline-secondary:active,
.btn-outline-danger:active {
  transform: scale(0.95);
}

/* ═══════════════════════════════════════════════════════════════════════
   3. STYLES DES BADGES ET ÉLÉMENTS DE LISTE
   ═══════════════════════════════════════════════════════════════════════ */

/* Autres styles */
.badge-difficulte { background-color: #dc3545; color: #fff; }
.badge-top { background-color: #ffc107; color: #212529; }
.badge-jour { background-color: #ffc107; color: #212529; }
.badge-nuit { background-color: #343a40; color: #fff; }
.list-group-item.mastered { background-color: #198754; color: #fff; }
.list-group-item.not-mastered { background-color: #6c757d; color: #fff; }
.mic-button {
  cursor: pointer;
  font-size: 1.5rem;
  background: none;
  border: none;
  margin-left: 5px;
  transition: transform 0.2s ease;
}
.mic-button:hover {
  transform: scale(1.1);
}
.btn-success.plus-button {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 1.5rem;
  line-height: 40px;
  text-align: center;
  transition: transform 0.2s ease;
}
.btn-success.plus-button:hover {
  transform: scale(1.05);
}
#homeSection {
  text-align: center;
  padding-top: 100px;
}
#displayEquipe {
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 10px;
}
.toggle-maitrise {
  background: linear-gradient(to right, rgb(192,10,84), rgb(209,9,56), rgb(222,8,38));
  border: none;
  color: #fff;
  transition: transform 0.2s ease;
}
.toggle-maitrise:hover {
  background: linear-gradient(to right, rgb(222,8,38), rgb(209,9,56), rgb(192,10,84));
  transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════════════════
   4. STYLES DES STATISTIQUES ET GRAPHIQUES
   ═══════════════════════════════════════════════════════════════════════ */

/* Statistiques */
#dateRangeForm { margin-bottom: 20px; }
.chart-container {
  max-width: 300px;
  height: 200px;
  margin: 0 auto;
}
.memo-display {
  background: linear-gradient(to right, rgba(192,10,84,0.7), rgba(209,9,56,0.7), rgba(222,8,38,0.7));
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   5. THÈME SOMBRE
   ═══════════════════════════════════════════════════════════════════════ */

/* Thème sombre */
body.dark-theme { background-color: #121212; color: #e0e0e0; }
body.dark-theme .navbar { background: linear-gradient(to right, #333, #444, #555) !important; }
body.dark-theme .btn-primary { background: linear-gradient(to right, #333, #444, #555); }
body.dark-theme .memo-display { background: linear-gradient(to right, rgba(50,50,50,0.7), rgba(70,70,70,0.7), rgba(90,90,90,0.7)); }

/* ═══════════════════════════════════════════════════════════════════════
   6. STYLES DU CALENDRIER MENSUEL
   ═══════════════════════════════════════════════════════════════════════ */

/* CALENDRIER MENSUEL - Style amélioré */
.calendar-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 10px;
}
.calendar-table thead {
  background-color: rgb(192,10,84);
  color: #fff;
}
.calendar-table th {
  text-align: center;
  padding: 10px 0;
  font-weight: 600;
}
.calendar-table td {
  vertical-align: top;
  padding: 8px;
  min-height: 80px;
  height: 100px;
  border: 1px solid #dee2e6;
  background-color: #fdfdfd;
  transition: background-color 0.2s ease;
  position: relative;
  cursor: pointer;
}
.calendar-table td:hover { background-color: #f1f1f1; }
.calendar-day-number {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  color: #343a40;
}
.calendar-badge {
  display: inline-block;
  margin: 2px;
  background-color: #007bff;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
}
.calendar-badge:hover { background-color: #0056b3; }

/* ═══════════════════════════════════════════════════════════════════════
   7. STYLES SPÉCIFIQUES (Section Accueil - Type de rame)
   ═══════════════════════════════════════════════════════════════════════ */

/* Règle pour masquer #numberResult quand il est vide */
#numberResult:empty {
  display: none;
}

/* Centre le champ de saisie dans le bloc */
#homeSection .input-group {
  margin: 0 auto;
  justify-content: center;
}

#numberResult {
    font-size: 1.5rem;
    padding: 10px;
    border-radius: 5px;
    background: linear-gradient(to right, rgb(222,8,38), rgb(209,9,56));
    color: #fff;
    margin-top: 10px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
    display: inline-block;
  }

/* Sur écran d'ordinateur, doubler la largeur du champ de saisie */
@media (min-width: 992px) {
  #numberInput {
    max-width: 300px;
    display: inline-block;
  }
  #numberResult {
    font-size: 1.5rem;
    padding: 10px;
    border-radius: 5px;
    background: linear-gradient(to right, rgb(222,8,38), rgb(209,9,56));
    color: #fff;
    margin-top: 10px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
    display: inline-block;
  }
}