/* ============ Global ============ */
:root {
  --green: #4cc060;
  --yellow: #ffc107;
  --blue: #0ea5b7;
  --text: #1b1e25;
  --muted: #e6e7eb;
  --shadow: 0 2px 10px rgba(0, 0, 0, .10);
  --background: #ffffff;
  /*#0b0e14;*/
  --separator: rgba(160, 160, 160, 0.301);
  --objective-h: 72px;
  /* hauteur visuelle des cartes "Objectif" */
  --epic-h: 72px;
  /* hauteur visuelle des cartes "Epic" */
  --us-h: 72px;
  /* hauteur visuelle des cartes "User Story" */
  --release-h: 72px;
  /* hauteur visuelle des cartes "Release" */
}

* {
  box-sizing: border-box
}

body {
  font-family: 'Segoe UI', sans-serif;
  background: var(--background);
  color: var(--text);
  /* #fff;*/
  margin: 0;
  padding: 16px
}

h1,
h2 {
  margin: 0 0 12px;
  text-align: center
}

/* ============ Base Cards ============ */
.card,
.release,
.epic,
.us {
  position: relative;
  background: #fff;
  color: var(--text);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 18px 18px 28px;
  transition: box-shadow .2s, transform .2s;
  overflow: visible;
}

.card:hover,
.release:hover,
.epic:hover,
.us:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12)
}

.card input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.card input::placeholder {
  color: #b7bcc6
}

/* Bouton fermeture (X) */
.icon-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  color: #ff4d6d;
  font-size: 20px;
  line-height: 20px;
  cursor: pointer
}

/* Boutons + ronds qui débordent */
.fab {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--blue);
  background: #fff;
  color: #0a2630;
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25)
}

.fab-bottom {
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%)
}

.fab-right {
  right: -18px;
  top: 50%;
  transform: translateY(-50%)
}

/* ============ Release (bande jaune à droite) ============ */
.release {
  padding-top: 24px
}

.release::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 100%;
  background: var(--yellow);
  border-radius: 0 14px 14px 0;
}

/* ============ Epic (barre verte en haut) ============ */
.epic {
  padding-top: 36px;
  background: #fff;
  z-index: 9;
}

.epic::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 14px;
  width: 100%;
  background: var(--green);
  border-radius: 14px 14px 0 0;
}

/* cellule d'entête des epics */
.epic-header {
  position: sticky;
  top: 0;
  z-index: 8;
  /* au-dessus du reste */
  background: var(--background);
  max-height: 230px;
}


/* ============ US (bande gauche selon état) ============ */
.us {
  padding-top: 28px;
  padding-left: 16px;
  padding-bottom: 5px;
}

.us::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 100%;
  background: #4ea9ff;
  border-radius: 14px 0 0 14px;
}

.us[data-state="Annoncée"]::before {
  background: #9aa3ad
}

.us[data-state="Prête"]::before {
  background: #ffc107
}

.us[data-state="Encours"]::before {
  background: #0ea5b7
}

.us[data-state="Terminée"]::before {
  background: #37c05a
}
.us[data-state="Supprimée"]::before {
  background: #000000
}

/* Badges & footer US */
.pill {
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 12px;
  background: #e6e7eb;
  color: #333
}

/*

.link-icon {
  text-decoration: none;
  font-size: 16px
}

.jira-code {
  margin-left: auto;
  color: #111;
  font-weight: 700
}
  */
.us-footer {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 18px;
  flex-direction: column;
  justify-content: center;
  width: 100%;

}

.us-footer>div {
  display: flex;
  justify-content: space-between;
  /* ou center / flex-start selon ton besoin */
  align-items: center;
  gap: 8px;
  /* espace entre les éléments */
  width: 100%;
  /* pour que le flex prenne toute la largeur */
}

.link-icon {
  text-decoration: none;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}

.sprint-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  margin-left: 10px;
}

.jira-code {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 12px;
  background: #e6e7eb;
  color: #333;
  margin-left: 10px;
}


.sprint-badge {
  display: inline-block;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700
}

.sprint-start {
  background: #ffc107;
  color: #000
}

.sprint-end {
  background: #37c05a;
  color: #fff
}


/* ============ Grille croisée Release × Epic ============ */
.story-map-grid {
  display: grid;
  column-gap: 20px;
  row-gap: 4px;
  align-items: start;
  padding: 0px;
  background: var(--background);
  overflow: auto;
}

.grid-header {
  display: contents
}

.story-row {
  display: contents
}

/* Colonne Release opaque et figée */
.release-cell {
  position: sticky;
  left: 0;
  z-index: 6;
  background: linear-gradient(to right, white 90%, transparent);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100%;
  padding-right: 20px;
  border-bottom: 5px solid var(--separator);
  padding-top:15px;
}

.release-cell .release {
  background: #fff;
  flex: 1;
  /* <-- n'étire pas la carte */
  z-index: 7;
}


/* US-cell corrigé */
.us-cell {
  min-height: 120px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  background: transparent;
  border-right: 1px dashed var(--separator);

  border-bottom: 5px solid var(--separator);

  padding: 6px;
}

.us-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#us-filters {
  font-size: 14px;
  color: var(--text);
  /* #fff;*/
}

/* Bouton toggle des filtres US */
#us-filters button {
  background: #007bff;
  /* bleu principal */
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

#us-filters button:hover {
  background: #0056b3;
  /* bleu foncé au survol */
}

#us-filters button:active {
  transform: scale(0.95);
  /* petit effet "pressé" */
}

#us-filters button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.4);
}


#us-filters label {
  cursor: pointer;
  user-select: none;
}

/* Drag hover */
.highlight-drop {
  /*
  outline: 3px dashed var(--blue);
  background: #eefbfd
  */
  background: #f7b9e4;
  outline: 4px dashed #ff00b3;
}

/* ============ Freeze Epic (ligne 1) + Coin ============ */
.card.epic_v0 {
  position: sticky;
  z-index: 5;
  background: #fff;
  margin-right: 15px;
}

.card.epic {
  position: sticky;
  top: var(--objective-h);
  z-index: 8;
  background: #fff;
  margin-right: 15px;
  min-height: var(--epic-h);
  border-bottom: 5px solid var(--separator);
}

.story-map-grid>div:first-child {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 100;
  background: var(--background);
  height: 107%;
  background: linear-gradient(to right, white 90%, transparent);
  border: 0px;
}

.corner-cell_v0 {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
  background: var(--background);
  width: 100%;
  height: 100%;
}

.corner-cell {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
  background: var(--background);
  width: 100%;
  min-height: calc(var(--objective-h) + var(--epic-h));
  border-bottom: 5px solid var(--separator);
}

/* ============ Liste accueil ============ */
/*
#app ul {
  list-style: none;
  padding: 0;
  margin: 16px auto;
  max-width: 960px
}

#app li {
  padding: 10px 12px;
  margin: 8px 0;
  background: #1c2431;
  border-radius: 8px;
  cursor: pointer
}

#app li:hover {
  background: #233041
}
*/

#app>button {
  margin: 8px 0 12px;
  background: #17a2b8;
  color: #fff;
  border: 0;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer
}

#app>button:hover {
  filter: brightness(.95)
}

/* ============ Menu état ============ */
.state-menu {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  z-index: 1000;
  min-width: 120px;
}

.state-item {
  padding: 6px 10px;
  cursor: pointer;
  color: #000;
  background: #fff;
}

.state-item:hover {
  background: #007bff;
  color: #fff;
}

.pill-move-release {
  font-size: 1.1em;
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.2s;
}
.pill-move-release:hover {
  opacity: 1;
  transform: scale(1.2);
}

/* ============ Editable ============ */
.card .editable {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  white-space: pre-wrap;
  word-break: break-word;
}

.card .editable[data-placeholder]:empty:before {
  content: attr(data-placeholder);
  color: #b7bcc6;
}

.card .editable.truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}




.storymap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.storymap-card {
  cursor: pointer;
  padding: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  background: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
}

.storymap-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.storymap-card h1 {
  margin: 0 0 10px 0;
  font-size: 20px;
  color: #2183df;
}

.storymap-card p {
  font-size: 13px;
  color: #777;
  margin: 0;
}

/* Bouton Export JSON */
button.export-json {
  background: #28a745;
  /* vert */
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-left: 8px;
  transition: background 0.2s ease, transform 0.1s ease;
}

button.export-json:hover {
  background: #1e7e34;
}

button.export-json:active {
  transform: scale(0.95);
}

/* 1) Bande des Objectifs (ligne 1) */
.objective-header {
  position: sticky;
  top: 0;
  z-index: 9;
  background: var(--background);
  display: flex;
  align-items: flex-start;
  padding-right: 15px;
  /* pour caler avec les colonnes à droite */
  border-bottom: 5px solid var(--separator);
}

.card.objective {
  position: sticky;
  top: var(--objective-h);
  z-index: 8;
  background: #e0e0e0;
  margin-right: 15px;
  min-height: var(--objective-h);
  border-bottom: 5px solid var(--separator);
}

#search-bar {
  display: inline-block;
  position: relative;
  margin-right: 10px;
}

#search-input {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

#search-results {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  max-height: 240px;
  overflow-y: auto;
  width: 320px;
}

#search-results ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#search-results li {
  padding: 6px 10px;
  cursor: pointer;
}

#search-results li:hover {
  background: #007bff;
  color: #fff;
}

#search-results .no-result {
  padding: 6px 10px;
  color: #888;
}



/* Menu général */
.dropdown-menu {
  position: fixed;
  width:auto;
  background: #fff;            /* ✅ fond blanc */
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  z-index: 1000;
  min-width: 220px;
  max-height: 300px;           /* ✅ scroll si trop d’items */
  overflow-y: auto;
  font-size: 14px;
}

/* Items classiques (mode ancien) */
.dropdown-item {
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 4px;
}
.dropdown-item:hover {
  background: #f2f2f2;
}

/* ✅ Label + checkbox (mode personas) */
.dropdown-item input[type="checkbox"] {
  margin-right: 6px;
}
.dropdown-item label {
  cursor: pointer;
}

/* ✅ Champ pour ajouter un persona */
.dropdown-input {
  width: calc(100% - 16px);
  margin: 8px;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font-size: 14px;
}

/* ✅ Bouton valider */
.dropdown-btn {
  display: block;
  width: calc(100% - 16px);
  margin: 8px auto 4px auto;
  padding: 6px;
  border: none;
  border-radius: 4px;
  background: #3a86ff;
  color: white;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
}
.dropdown-btn:hover {
  background: #2666cc;
}
/* Liste de cases à cocher (mode personas) */
.dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.dropdown-list .dropdown-item {
  display: flex;
  align-items: center;
  padding: 4px 6px;
  border-radius: 4px;
}
.dropdown-list .dropdown-item:hover {
  background: #f2f2f2;
}


.miniStoria-footer-btn {
  display: block;
  width:100%;;
  margin: 8px auto 4px auto;
  padding: 6px;
  border: none;
  border-radius: 4px;
  background: #3a86ff;
  color: white;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
}
.miniStoria-footer-btn:hover {
  background: #2666cc;
}

/* Conteneur principal de la mini-storia */
.mini_storia {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  z-index: 2000;
  display: flex;
  flex-direction: column;
}

/* En-tête de la mini-storia */
.miniStoria-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  padding: 8px 12px;
  flex-shrink: 0;
}

/* Lien User Story */
.miniStoria-link {
  color: #007bff;
  text-decoration: none;
}

/* Bouton fermer */
.miniStoria-closeBtn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
}

/* Zone réponse IA (scrollable uniquement) */
.miniStoria-reponse_ia {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

/* Zone éditable (footer) */
.miniStoria-footer-editableContent {
  min-height: 80px;
  padding: 8px;
  background: #fafafa;
  width: 100%;
  flex-shrink: 0;
}

/* .epic-header--empty : header de colonne sans epic */
.epic-header--empty {
  opacity: .6;
  font-style: italic;
  text-align: center;
}

/* .us-cell--empty : cellules de la colonne vide (pas de DnD) */
.us-cell--empty .us-container.empty {
  min-height: 48px;
  border: 1px dashed var(--grid-border, #bbb);
  border-radius: 6px;
  opacity: .5;
}

.chip {
  display: inline-flex;
  align-items: center;
  background-color: #fff200;
  color: #333;
  padding: 4px 10px;
  margin: 2px 2px 0 0;
  border-radius: 16px;
  font-size: 0.8em;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.chip-close {
  background: #d9534f;
  color: white;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 12px;
  margin-left: 8px;
  cursor: pointer;
  line-height: 16px;
  padding: 0;
}

.chip-close:hover {
  background: #c9302c;
}

.objectives-row,
.epics-row {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
  overflow-x: auto;
}