/* ==========================================================================
   1. Variables & Styles Globaux
   ========================================================================== */

:root {
  /* Palette de couleurs */
  --blue-primary: rgba(0, 140, 255, 1);
  /*#2563eb; /* #1E90FF;
  /* Dodger Blue */
  --blue-dark: rgba(30, 105, 190, 1);
  /*#1c6ab6;
  /* Bleu plus sombre pour le header */
  --blue-light: #10b9a59c;
  /*#e8f4ff;
  /**/
  --simple-header_bg: rgba(0, 140, 255, 0.25);
  /* Bleu très clair pour les fonds de section */
  --accent-orange: rgb(222, 222, 222);
  /* #f0ee00; /* #f97316; /*#F39C12;
  /* Orange pour les commentaires et actions spéciales */
  --accent-green: rgba(74, 74, 74, 1);
  /* #10b981; /* #2ECC71;
  /* Vert pour les boutons "Ajouter" */
  --accent-red: #E74C3C;
  /* Rouge pour la suppression */
  --text-dark: #343A40;
  /* Couleur de texte principale */
  --text-light: #FFFFFF;
  /**/
  --text-header: #686868;
  /* Couleur de texte sur fonds sombres */
  --text-muted: #6c757d;
  /* Couleur de texte secondaire */
  --bg-light: #F8F9FA;
  /* Couleur de fond générale */
  --border-color: #DEE2E6;
  /* Couleur des bordures */
  --white: #FFFFFF;
  --light-gray: #e8e8e8;
  --accent-find: rgb(32, 240, 59);
  /* Styles */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --border-radius: 8px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

body {
  font-family: var(--font-family);
  margin: 0;
  padding: 0;
  background-color: var(--bg-light);
  color: var(--text-dark);
  overflow-x: hidden;
}

/* ==========================================================================
   2. Header
   ========================================================================== */

header {
  background-color: var(--blue-dark);
  color: var(--text-light);
  padding: 1em 1.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow);
}

header h1 {
  font-size: 1.5em;
  margin: 0;
}

header select,
header input,
header button {
  margin-left: 0.5em;
  padding: 0.5em;
  font-size: 0.9em;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

/* ==========================================================================
   3. Contenu Principal & Blocs (Sprint / Commentaire)
   ========================================================================== */

main {
  padding: 1.5em;
}

.sprint {
  background: var(--white);
  border: 1px solid var(--border-color);
  margin-bottom: 1.5em;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.2s ease-in-out;
}

.sprint:hover {
  box-shadow: var(--shadow);
}

.sprint-header {
  background-color: var(--accent-green);
  /*--blue-primary);*/
  color: var(--text-light);
  padding: 0.8em 1.2em;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.sprint-content {
  padding: 1.5em;
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.sprint.open .sprint-content {
  display: block;
  opacity: 1;
}

.indicateurs {
  font-size: 0.85em;
  font-weight: normal;
  opacity: 0.9;
}

.commentaire {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  background-color: var(--light-gray);

  padding: 0.75em 1em;
  border-radius: var(--border-radius);
  color: var(--blue-dark);
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 0.8em;
  white-space: pre-wrap;
}

.commentaire-header {}

/* Style spécifique pour les commentaires */
.commentaire-general {
  border-color: var(--accent-orange);
  color: var(--text-header);
}

.commentaire-general .sprint-header {
  background-color: var(--accent-orange);
}

.commentaire-general .btn-event {
  /* On garde delete-event pour la compatibilité */
  flex-shrink: 0;
  /* Empêche le bouton de se déformer */
  background: transparent;
  color: var(--text-muted);
  font-size: 1.2em;
  padding: 0.2em 0.5em;
  border-radius: var(--border-radius);
  line-height: 1;
  /* Assure un bon alignement vertical */
  opacity: 0.5;
}

/* ==========================================================================
   4. Sections internes (Objectifs, Événements)
   ========================================================================== */

.objectif-general {
  font-size: 1.5em;
  text-align: center;
  font-weight: bold;
  color: var(--blue-dark);
  margin: 0.5em 0 1.5em 0;
  padding-bottom: 1em;
  border-bottom: 1px solid var(--border-color);
}

.simple-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--simple-header_bg);
  margin-top: 1em;
  padding: 0.75em 1em;
  border-radius: var(--border-radius);
  font-weight: bold;
  color: var(--blue-dark);
}

.objectifs,
.events {
  margin-left: 1em;
  margin-top: 1em;
}

/* style.css */

.event-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  background-color: var(--bg-light);
  padding: 0.75em 1em;
  border-radius: var(--border-radius);
  color: var(--blue-dark);
  font-weight: bold;
  margin-top: 1em;
  white-space: pre-wrap;
}

.event-header .btn-event {
  /* On garde delete-event pour la compatibilité */
  flex-shrink: 0;
  /* Empêche le bouton de se déformer */
  background: transparent;
  color: var(--text-muted);
  font-size: 1.2em;
  padding: 0.2em 0.5em;
  border-radius: var(--border-radius);
  line-height: 1;
  /* Assure un bon alignement vertical */
  opacity: 0.5;
}

.objectif {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  /* Ligne de séparation discrète */
}

.objectifs>.objectif:last-child {
  border-bottom: none;
  /* Pas de ligne pour le dernier élément */
}

.objectif input[type="checkbox"] {
  flex-shrink: 0;
  /* Empêche la case de se déformer */
  width: 18px;
  height: 18px;
}

.objectif input[type="text"] {
  flex-grow: 1;
  /* Force l'input à prendre toute la largeur disponible */
  width: 100%;
  /* S'assure qu'il remplit l'espace */
  border: none;
  /* Pas de bordure */

  padding: 0.6em 0.3em;
  font-size: 1em;
  font-family: inherit;
  background-color: transparent;
  /* Pas de fond */
  transition: border-color 0.2s ease-in-out;
}

.objectif input[type="text"]:focus {
  outline: none;
  /* Pas de contour bleu au focus */
  border-bottom-color: var(--blue-primary);
  /* La ligne du dessous devient bleue */
}

/* Style pour le bouton de suppression */
.objectif .delete-objectif {
  /* On garde delete-event pour la compatibilité */
  flex-shrink: 0;
  /* Empêche le bouton de se déformer */
  background: transparent;
  color: var(--text-muted);
  font-size: 1.2em;
  padding: 0.2em 0.5em;
  border-radius: var(--border-radius);
  line-height: 1;
  /* Assure un bon alignement vertical */
  opacity: 0.5;
}

.objectif .delete-objectif:hover,
.objectif .delete-event:hover {
  background-color: var(--bg-light);
  color: var(--accent-red);
  opacity: 1;
}



.event {
  margin-top: 0.5em;
}

.event.open .event-content {
  display: block;
  /* Visible quand le parent a la classe .open */
}

.event-content {
  margin-top: 0.5em;
  padding: 1em;
  background: var(--white);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  height: fit-content;
  word-break: break-word;
  line-height: 1.6;
}


/* ==========================================================================
   5. Boutons
   ========================================================================== */

button {
  cursor: pointer;
  border: none;
  padding: 0.5em 1em;
  border-radius: 6px;
  font-weight: bold;
  transition: opacity 0.2s ease;
}

button:hover {
  opacity: 0.85;
}

/* Boutons d'ajout principaux */
.add-sprint-btn,
.add-comment-btn {
  font-size: 1em;
  padding: 0.6em 1.2em;
  color: var(--text-light);
  margin: 0 1em 1.5em 0;
}

.add-sprint-btn {
  background-color: var(--accent-green);
}

.add-comment-btn {
  background-color: var(--accent-orange);
}

/* Boutons dans les headers */
.sprint-header button {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-light);
  padding: 0.3em 0.6em;
}

.simple-header button {
  background-color: var(--white);
  color: var(--blue-dark);
  font-size: 1em;
}

/* Boutons de suppression */
.delete-event,
.delete-sprint {
  background-color: var(--accent-red);
  color: var(--text-light);
}

/* ==========================================================================
   6. Pop-ins & Formulaires
   ========================================================================== */

.popin {
  left: 35%;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 90%;
  max-width: 600px;
  transform: translate(-50%, -50%);
  background: var(--white);
  padding: 2em;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.popin.cache {
  display: none !important;
}

.popin label {
  font-weight: bold;
  font-size: 0.9em;
  margin-bottom: -0.5em;
}

.popin input,
.popin select,
.popin textarea {
  width: 100%;
  padding: 0.75em;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 1em;
  box-sizing: border-box;
}

.popin textarea {
  min-height: 120px;
}

.sprint-popin-actions,
.event-popin-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1em;
  margin-top: 1em;
}

/* Boutons dans les popins */
.save-sprint,
.save-event {
  background-color: var(--blue-primary);
  color: var(--text-light);
}

.cancel-sprint,
.cancel-event {
  background-color: var(--text-muted);
  color: var(--text-light);
}

/* ==========================================================================
   7. Classes Utilitaires
   ========================================================================== */

.cache {
  display: none !important;
}

/* ==========================================================================
   8. Nouvelle Disposition (70/30), Panneau Latéral et Pop-ins
   ========================================================================== */


/* --- Panneau Latéral --- */
/* css/style.css */

/* --- Panneau Latéral (glisse par-dessus) --- */
#side-panel {
  position: fixed;
  /* Changements pour le centrage vertical */
  top: 50%;
  height: 80%;
  /* <- NOUVELLE HAUTEUR */

  /* Changements pour la largeur */
  right: 0;
  width: 60%;
  /* <- NOUVELLE LARGEUR */
  max-width: 95vw;
  /* S'adapte aux petits écrans */

  /* Transform combine le centrage (Y) et le masquage (X) */
  transform: translate(100%, -50%);
  transition: transform 0.35s ease-in-out;

  /* Style général */
  background-color: var(--white);
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.15);
  border-left: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  /* <- Bordures arrondies sur tous les coins */
  z-index: 2000;
  display: flex;
  flex-direction: column;
      overflow: hidden;
}

#side-panel.visible {
  /* La translation sur l'axe X est à 0 pour l'afficher, 
     et celle sur Y le maintient centré verticalement */
  transform: translate(0, -50%);
}

.side-panel-header {
  display: flex;
  /* Ajout pour aligner les boutons */
  justify-content: flex-end;
  /* Aligne les boutons à droite */
  align-items: center;
  /* Centre verticalement */
  padding: 0.5em;
  border-bottom: 1px solid var(--border-color);
}

/* Style pour les nouveaux boutons d'action */
#side-panel-edit-btn,
#side-panel-save-btn,
#side-panel-delete-btn,
#event-popin-aide-btn {
  background: transparent;
  border: none;
  font-size: 1.5em;
  cursor: pointer;
  margin: 0 0.3em;
  padding: 0.2em;
  color: var(--text-muted);
}

#side-panel-edit-btn:hover,
#side-panel-save-btn:hover,
#side-panel-delete-btn:hover {
  color: var(--text-dark);
}

#side-panel-delete-btn:hover {
  color: var(--accent-red);
}

/* css/style.css */

/* --- Style unifié pour les formulaires du panneau latéral --- */

#side-panel label {
  display: block;
  margin-top: 0.8em;
  margin-bottom: 0.3em;
  font-weight: bold;
  font-size: 0.9em;
}

#side-panel input[type="date"],
#side-panel select,
#side-panel textarea {
  width: 100%;
  padding: 0.75em;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 1em;
  font-family: inherit;
  /* Assure la même police que le reste de l'app */
  box-sizing: border-box;
  background-color: #fff;
  color: var(--text-dark);
}

#side-panel textarea {
  min-height: 300px;
  resize: vertical;
  height:100%;
}

#side-panel .side-panel-content {
  white-space: pre-wrap;
}

/*
  Lorsque le formulaire est affiché, on revient à un comportement normal.
*/
#side-panel .side-panel-content.edit-mode {
  white-space: normal;
}

.close-btn {
  font-size: 2em;
  font-weight: bold;
  line-height: 1;
  background: transparent;
  border: none;
  padding: 0 0.4em;
  color: var(--text-muted);
  cursor: pointer;
}

.close-btn:hover {
  color: var(--text-dark);
}

.side-panel-content {
  overflow-y: auto;
  height: 100%;
  word-break: break-word;
  /*
  padding: 1.5em;
  white-space: pre-wrap;
  line-height: 1.6;
*/
}

/* --- Correction des Pop-ins --- */
#overlay {
  position: fixed;
  display:block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
}



/* Masque les contenus UNIQUEMENT lorsqu'ils sont dans la zone principale */
main .event>.event-content,
main .commentaire-general>.sprint-content {
  display: none !important;
}

#side-panel .sprint-content,
#side-panel .event-content {
/*
  display: block !important;
  opacity: 1 !important;
*/
    flex: 1; /* prend tout l’espace vertical restant */
  overflow-y: auto; /* scroll interne si le contenu est trop long */
  min-height: 97%;
  padding: 1.5em;
  box-sizing: border-box;
}





/*
/* --- Style pour l'en-tête actif --- /
.sprint-header.active-header,
.event-header.active-header {
    background-color: var(--accent-red) !important; /* Couleur plus foncée pour le distinguer /
    color: var(--bg-light);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3); /* Effet de profondeur/
}
*/

.sprint-header.active-header,
.event-header.active-header,
.commentaire.active-header {

  border-left: 10px solid var(--accent-red);
  padding: 0.8em;
  /*
  margin-top: 2em;
    margin-bottom: 0.8em;
*/
}

/* css/style.css */

#btnDeleteProjet {
  background-color: #c0392b;
  /* Rouge doux */
  color: white;
  border-color: #a93226;
}

#btnDeleteProjet:hover {
  background-color: #e74c3c;
  /* Rouge plus vif au survol */
  opacity: 1;
}


.search-match-highlight {
  /*
  background: linear-gradient(to right, #fff8c4, #fff2a1);
  transition: background 0.6s ease;
  animation: flashHighlight 2s ease;
  */
  border-left: 10px solid var(--accent-find);
  border-radius: var(--border-radius);
  padding: 0.8em;
}

#searchBox {
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
}
#btnRAZ {
  background: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
#btnRAZ:hover {
  background: #e0e0e0;
}


/* Conteneur barre de recherche */
.search-container {
  display: flex;
  gap: 0.5em;
  align-items: center;
  justify-content: flex-end;
  margin: 1em 0;
}

/* Champ de recherche */
.search-input {
  flex: 1;
  padding: 0.5em 1em;
  font-size: 0.95em;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Bouton RAZ */
.search-raz-button {
  padding: 0.5em 0.9em;
  font-size: 0.9em;
  border: none;
  background: #f0f0f0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.search-raz-button:hover {
  background: #e0e0e0;
}
.search-highlighted-word {
  background-color: #d8fdd8;
  padding: 0 2px;
  border-radius: 3px;
}
.popup-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

/* --- Contenu de la popup --- */
.popup-aide {
  background: #f8fafc;
  border-radius: 8px;
  padding: 20px;
  width: 50%;
  max-width: 90%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  position: relative;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #111827;
}
.popup-aide h3 {
  margin-top: 0;
  color: #2563eb;
  font-size: 16px;
}
.popup-aide ul {
  margin: 10px 0;
  padding-left: 18px;
}
.popup-aide li {
  margin-bottom: 6px;
}
.popup-aide .tip {
  margin-top: 10px;
  font-size: 13px;
  color: #374151;
  background: #eef2ff;
  border-left: 3px solid #6366f1;
  padding: 6px 8px;
  border-radius: 4px;
}

/* --- Bouton de fermeture --- */
.popup-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #6b7280;
  transition: color 0.2s;
}
.popup-close:hover {
  color: #111827;
}