/* ==================== SUIVI DES DÉVELOPPEMENTS (préfixe sd-) ==================== */
/* Kanban des projets Dolibarr internes : colonne gauche (développements) + colonnes d'avancement,
   panneau latéral de détail, menu contextuel. Charte DoliMIS (socle Achats Cogekom / impayés).
   Règle responsive : rien hors @media ne change le rendu PC. */
.page_suivi_dev {
  --sd-bg: #F5F6F8;
  --sd-line: #DDE1E7;
  --sd-txt: #22272E;
  --sd-muted: #6B7280;
  --sd-red: #C0392B;
  --sd-green: #2E7D52;
  --sd-orange: #E67E22;
  --sd-gauche: 290px;
  padding: 12px 16px 20px;
  background: var(--sd-bg);
  color: var(--sd-txt);
  min-height: calc(100vh - 60px);
  text-align: left;
  box-sizing: border-box;
}
.page_suivi_dev * { box-sizing: border-box; }
.page_suivi_dev h1 { font-size: 16pt; color: var(--main-bg-color); margin: 0; display: flex; align-items: center; gap: 8px; }
.page_suivi_dev button { font-family: inherit; }
.page_suivi_dev label { width: auto; margin: 0 0 4px; font-weight: 600; font-size: 9pt; color: #444; display: block; }
.page_suivi_dev input[type="text"], .page_suivi_dev input[type="date"], .page_suivi_dev textarea, .page_suivi_dev select.sd-select {
  font-family: inherit; font-size: 9.5pt; color: var(--sd-txt); background: #fff;
  border: 1px solid #ccc; border-radius: 6px; padding: 6px 8px; width: 100%; max-width: none; margin: 0;
}
.page_suivi_dev input:focus, .page_suivi_dev textarea:focus, .page_suivi_dev select:focus { outline: none; border-color: var(--main-bg-color); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06); }
.page_suivi_dev textarea { resize: vertical; line-height: 1.4; }

/* ---- Boutons ---- */
.page_suivi_dev .sd-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid #ccc; border-radius: 6px;
  background: #f5f5f5; color: var(--sd-txt); font-size: 9pt; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.page_suivi_dev .sd-btn:hover { background: #e9ecef; }
.page_suivi_dev .sd-btn:disabled { opacity: 0.5; cursor: default; }
.page_suivi_dev .sd-btn.sd-btn-actif { background: var(--main-bg-color); border-color: var(--main-bg-color); color: #fff; }
.page_suivi_dev .sd-btn.sd-btn-danger { color: var(--sd-red); border-color: #e3b4ae; background: #fdf2f1; }
.page_suivi_dev .sd-btn.sd-btn-mini { padding: 3px 8px; font-size: 8.5pt; }
.page_suivi_dev .sd-icon-btn {
  background: none; border: none; color: var(--sd-muted); cursor: pointer; padding: 4px 6px; border-radius: 6px; font-size: 11pt; line-height: 1;
}
.page_suivi_dev .sd-icon-btn:hover { background: #e9ecef; color: var(--sd-txt); }
.page_suivi_dev .sd-icon-btn.sd-icon-mini { font-size: 8.5pt; padding: 2px 5px; }
.page_suivi_dev .sd-lien { background: none; border: none; color: var(--sd-muted); cursor: pointer; font-size: 9pt; padding: 6px 4px; }
.page_suivi_dev .sd-lien:hover { color: var(--sd-txt); }
.sd-lien-ext { color: var(--sd-muted); font-size: 9pt; margin-left: 4px; }
.sd-lien-ext:hover { color: var(--main-bg-color); }
.sd-muted { color: var(--sd-muted); font-size: 9pt; }
.sd-muted-small { color: var(--sd-muted); font-size: 8.5pt; font-weight: normal; }
.sd-badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 7.5pt; font-weight: 600; }
.sd-badge-gris { background: #e9ecef; color: #555; }
.sd-badge-vert { background: #e3f3ea; color: var(--sd-green); }
.sd-alerte { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; font-size: 9pt; margin: 0 0 10px; }
.sd-alerte-rouge { background: #fdecea; color: var(--sd-red); border: 1px solid #f3c1bb; }
.sd-alerte-orange { background: #fff4e5; color: #9a5b00; border: 1px solid #f5d6a8; }

/* ---- Mise en page ---- */
.sd-layout { display: flex; gap: 14px; align-items: stretch; min-height: calc(100vh - 100px); }
.sd-gauche {
  flex: 0 0 var(--sd-gauche); width: var(--sd-gauche); background: #fff; border: 1px solid var(--sd-line); border-radius: 10px;
  display: flex; flex-direction: column; overflow: hidden; max-height: calc(100vh - 100px); position: sticky; top: 70px;
}
.sd-gauche-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 8px 14px; border-bottom: 1px solid var(--sd-line); }
.sd-gauche-corps { overflow-y: auto; padding: 8px; flex: 1; }
.sd-layout.sd-gauche-replie .sd-gauche { flex-basis: 44px; width: 44px; }
.sd-layout.sd-gauche-replie .sd-gauche-titre, .sd-layout.sd-gauche-replie .sd-gauche-corps { display: none; }
.sd-layout.sd-gauche-replie .sd-gauche-head { padding: 10px 4px; justify-content: center; }
.sd-layout.sd-gauche-replie .sd-gauche-head h1 .fa { display: none; }
.sd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---- Liste des développements ---- */
.sd-ajout { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px dashed #c9ced6; border-radius: 8px; padding: 4px 8px; }
.sd-ajout > .fa { color: var(--sd-muted); font-size: 9pt; flex: 0 0 auto; }
.sd-ajout input[type="text"] { border: none; padding: 4px 2px; background: transparent; }
.sd-ajout input[type="text"]:focus { box-shadow: none; }
.sd-ajout:focus-within { border-color: var(--main-bg-color); border-style: solid; }
.sd-ajout-dev { margin-bottom: 8px; }
.sd-projet {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 8px; border-radius: 8px; cursor: pointer; margin-bottom: 2px;
}
.sd-projet:hover { background: #f3f5f8; }
.sd-projet.sd-projet-actif { background: #eef3fb; box-shadow: inset 3px 0 0 var(--main-bg-color); }
.sd-projet-tous { justify-content: space-between; align-items: center; font-weight: 600; }
.sd-projet-pastille { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; margin-top: 4px; }
.sd-projet-corps { flex: 1; min-width: 0; }
.sd-projet-ligne { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sd-projet-titre { font-size: 9.5pt; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-projet-nb { font-size: 8pt; color: var(--sd-muted); background: #eef0f3; border-radius: 10px; padding: 1px 7px; flex: 0 0 auto; }
.sd-projet-sous { display: flex; align-items: center; gap: 6px; font-size: 8pt; color: var(--sd-muted); margin-top: 2px; }
.sd-projet-sous .sd-icon-btn { margin-left: auto; opacity: 0; }
.sd-projet:hover .sd-projet-sous .sd-icon-btn, .sd-projet.sd-projet-actif .sd-projet-sous .sd-icon-btn { opacity: 1; }
.sd-projet-brouillon .sd-projet-titre { color: var(--sd-muted); }
.sd-projet-clos .sd-projet-titre { color: var(--sd-muted); text-decoration: line-through; font-weight: normal; }
.sd-barre { height: 4px; background: #e9ecef; border-radius: 2px; margin-top: 6px; overflow: hidden; }
.sd-barre-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.sd-vide-gauche { color: var(--sd-muted); font-size: 9pt; padding: 10px 8px; line-height: 1.4; }
.sd-clos { margin-top: 8px; border-top: 1px solid var(--sd-line); padding-top: 4px; }

/* ---- Barre d'outils ---- */
.sd-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sd-toolbar-titre { display: flex; align-items: center; gap: 8px; font-size: 11pt; min-width: 0; }
.sd-toolbar-titre strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-toolbar-titre .sd-projet-pastille { margin-top: 0; }
.sd-toolbar-filtres { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sd-select-projet-mobile { display: none; }
.sd-search { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #ccc; border-radius: 6px; padding: 0 8px; }
.sd-search .fa { color: var(--sd-muted); font-size: 9pt; }
.sd-search input[type="text"] { border: none; width: 160px; padding: 5px 2px; }
.sd-search input[type="text"]:focus { box-shadow: none; }
.page_suivi_dev select.sd-select { width: auto; max-width: 190px; padding: 5px 8px; }
.page_suivi_dev select.sd-select-mini { max-width: 120px; font-size: 8pt; padding: 2px 4px; }

/* ---- Onglets de colonnes (mobile seulement) ---- */
.sd-onglets { display: none; }

/* ---- Kanban ---- */
.sd-kanban { display: flex; gap: 10px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; flex: 1; }
.sd-col {
  flex: 1 1 0; min-width: 230px; background: #ECEFF3; border-radius: 10px; padding: 8px; display: flex; flex-direction: column;
  max-height: calc(100vh - 150px); border: 2px solid transparent; transition: border-color 0.15s, background 0.15s;
}
.sd-col.sd-col-over { border-color: var(--main-bg-color); background: #e4ebf5; }
.sd-col-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px; }
.sd-col-titre { font-weight: 700; font-size: 9.5pt; text-transform: uppercase; letter-spacing: 0.3px; color: #444; }
.sd-col-termine .sd-col-titre { color: var(--sd-green); }
.sd-col-nb { font-size: 8.5pt; color: var(--sd-muted); background: #fff; border-radius: 10px; padding: 1px 8px; }
.sd-col .sd-ajout { margin-bottom: 8px; flex-wrap: wrap; }
.sd-col .sd-ajout input[type="text"] { flex: 1 1 120px; min-width: 0; }
.page_suivi_dev .sd-col select.sd-select-mini { flex: 1 1 100%; max-width: none; margin: 2px 0 2px 0; }
.sd-col-corps { overflow-y: auto; flex: 1; min-height: 60px; display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.sd-col-vide { color: #aab; font-size: 8.5pt; text-align: center; padding: 18px 4px; border: 1px dashed #d0d4db; border-radius: 8px; }

/* ---- Cartes ---- */
.sd-card {
  background: #fff; border-radius: 8px; padding: 8px 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); cursor: grab;
  border-left: 3px solid transparent; user-select: none; -webkit-user-select: none;
}
.sd-card:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12); }
.sd-card:active { cursor: grabbing; }
.sd-card.sd-card-drag { opacity: 0.5; }
.sd-card.sd-card-p2 { border-left-color: var(--sd-orange); }
.sd-card.sd-card-p3 { border-left-color: var(--sd-red); }
.sd-card.sd-card-retard .sd-card-titre { color: var(--sd-red); }
.sd-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.sd-card-projet { display: inline-block; color: #fff; font-size: 7.5pt; font-weight: 600; border-radius: 10px; padding: 1px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-prio { font-size: 7.5pt; font-weight: 700; white-space: nowrap; }
.sd-prio-3 { color: var(--sd-red); }
.sd-prio-2 { color: var(--sd-orange); }
.sd-prio-1 { color: var(--sd-muted); }
.sd-card-titre { font-size: 9.5pt; font-weight: 600; line-height: 1.3; word-break: break-word; }
.sd-card-barre { height: 3px; background: #eef0f3; border-radius: 2px; margin: 6px 0; overflow: hidden; }
.sd-card-barre-fill { height: 100%; background: var(--main-bg-color); border-radius: 2px; }
.sd-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sd-card-infos { display: flex; align-items: center; gap: 8px; font-size: 8pt; color: var(--sd-muted); flex-wrap: wrap; justify-content: flex-end; }
.sd-card-infos .sd-retard { color: var(--sd-red); font-weight: 600; }
.sd-avatars { display: flex; align-items: center; }
.sd-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #dfe4ec;
  color: #445; font-size: 7.5pt; font-weight: 700; overflow: hidden; border: 2px solid #fff; margin-left: -6px; flex: 0 0 auto;
}
.sd-avatar:first-child { margin-left: 0; }
.sd-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sd-avatar-plus { background: #c9d0db; }
.sd-avatar-mini { width: 20px; height: 20px; margin: 0; border-width: 1px; font-size: 7pt; }

/* ---- Puces (priorité, assignés) ---- */
.sd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.page_suivi_dev .sd-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 14px; border: 1px solid #ccc; background: #fff;
  font-size: 8.5pt; color: var(--sd-txt); cursor: pointer;
}
.page_suivi_dev .sd-chip:hover { background: #f0f4f8; }
.page_suivi_dev .sd-chip:disabled { opacity: 0.5; cursor: default; }
.page_suivi_dev .sd-chip.sd-chip-actif { background: var(--main-bg-color); border-color: var(--main-bg-color); color: #fff; }
.page_suivi_dev .sd-chip.sd-chip-p3.sd-chip-actif { background: var(--sd-red); border-color: var(--sd-red); }
.page_suivi_dev .sd-chip.sd-chip-p2.sd-chip-actif { background: var(--sd-orange); border-color: var(--sd-orange); }
.page_suivi_dev .sd-chip.sd-chip-p1.sd-chip-actif { background: #7a8491; border-color: #7a8491; }

/* ---- Panneau latéral ---- */
.sd-panneau-fond { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.25); z-index: 9000; }
.sd-panneau {
  position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 100%; background: #fff; z-index: 9001;
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; animation: sdSlideIn 0.18s ease-out; text-align: left;
}
@keyframes sdSlideIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.sd-panneau-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--sd-line); background: #f8f9fa; }
.sd-panneau-mode { font-weight: 700; font-size: 9pt; text-transform: uppercase; letter-spacing: 0.3px; color: #555; }
.sd-panneau-espace { flex: 1; }
.sd-panneau-retour { display: none; }
.sd-panneau .sd-alerte { margin: 10px 12px 0; }
.sd-panneau-corps { padding: 12px 14px 20px; overflow-y: auto; flex: 1; }
.page_suivi_dev .sd-input-titre { font-size: 13pt; font-weight: 700; border-color: transparent; padding: 4px 6px; margin-left: -6px; width: calc(100% + 6px); }
.page_suivi_dev .sd-input-titre:hover { border-color: #ddd; }
.page_suivi_dev .sd-input-titre:focus { border-color: var(--main-bg-color); }
.sd-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.sd-champ { margin-bottom: 14px; }
.sd-champ-2 { display: flex; gap: 10px; }
.sd-champ-2 > div { flex: 1; }
.page_suivi_dev input[type="range"] { width: 100%; margin: 4px 0; accent-color: var(--main-bg-color); }
.sd-sous-tache { display: flex; align-items: center; gap: 8px; padding: 4px 2px; border-bottom: 1px solid #f0f0f0; font-size: 9.5pt; }
.sd-sous-tache-label { flex: 1; }
.sd-sous-tache-faite .sd-sous-tache-label { text-decoration: line-through; color: var(--sd-muted); }
.sd-sous-tache .sd-icon-btn { opacity: 0; }
.sd-sous-tache:hover .sd-icon-btn { opacity: 1; }
.sd-champ .sd-ajout { margin-top: 6px; }
.sd-commentaire { background: #f8f9fa; border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; font-size: 9pt; }
.sd-commentaire-meta { font-size: 8pt; color: var(--sd-muted); margin-bottom: 2px; }
.sd-commentaire-texte { white-space: pre-wrap; word-break: break-word; }
.sd-panneau-pied { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--sd-line); display: flex; gap: 8px; justify-content: flex-end; }

/* ---- Menu contextuel ---- */
.sd-ctx-menu {
  position: fixed; z-index: 9100; min-width: 220px; background: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 6px; text-align: left; animation: navDropdownFadeIn 0.12s ease-out;
}
.sd-ctx-title { font-size: 8.5pt; font-weight: 600; color: #777; padding: 4px 10px 6px; border-bottom: 1px solid #eee; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.page_suivi_dev .sd-ctx-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; border-radius: 6px;
  padding: 7px 10px; font-size: 9.5pt; color: #333; text-align: left; cursor: pointer;
}
.page_suivi_dev .sd-ctx-menu button:hover { background: #f0f4f8; }
.page_suivi_dev .sd-ctx-menu button:disabled { opacity: 0.4; cursor: default; }
.page_suivi_dev .sd-ctx-menu button .fa { width: 16px; text-align: center; color: var(--main-bg-color); }
.page_suivi_dev .sd-ctx-menu button.sd-ctx-danger, .page_suivi_dev .sd-ctx-menu button.sd-ctx-danger .fa { color: var(--sd-red); }

/* ==================== RESPONSIVE (rien hors @media ne change le PC) ==================== */
@media (max-width: 992px) {
  .page_suivi_dev { padding: 8px 10px 16px; }
  .sd-layout { flex-direction: column; min-height: 0; }
  .sd-gauche { position: static; width: auto; flex-basis: auto; max-height: none; }
  .sd-gauche-corps { max-height: 220px; }
  .sd-layout.sd-gauche-replie .sd-gauche { width: auto; flex-basis: auto; }
  .sd-layout.sd-gauche-replie .sd-gauche-head { justify-content: space-between; padding: 10px 10px 8px 14px; }
  .sd-layout.sd-gauche-replie .sd-gauche-titre, .sd-layout.sd-gauche-replie .sd-gauche-head h1 .fa { display: inline; }
  .sd-select-projet-mobile { display: inline-block; }
  .sd-col { max-height: none; min-width: 210px; }
  .sd-panneau { width: 100%; }
  .sd-panneau-retour { display: inline-block; }
}
@media (max-width: 768px) {
  .sd-gauche { display: none; }
  .sd-toolbar { flex-direction: column; align-items: stretch; gap: 6px; }
  .sd-toolbar-filtres { gap: 4px; }
  .sd-toolbar-filtres .sd-select-projet-mobile { width: 100%; max-width: none; }
  .sd-search { flex: 1; }
  .sd-search input[type="text"] { width: 100%; }
  .sd-onglets { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 8px; padding-bottom: 2px; }
  .page_suivi_dev .sd-onglet {
    flex: 1 0 auto; border: 1px solid #ccc; background: #fff; border-radius: 16px; padding: 5px 12px; font-size: 8.5pt; white-space: nowrap; cursor: pointer;
  }
  .page_suivi_dev .sd-onglet.sd-onglet-actif { background: var(--main-bg-color); border-color: var(--main-bg-color); color: #fff; }
  .sd-onglet-nb { opacity: 0.8; }
  .sd-kanban { overflow-x: visible; }
  .sd-col { display: none; min-width: 0; width: 100%; }
  .sd-col.sd-col-active { display: flex; }
  .sd-card { padding: 10px 12px; }
  .sd-panneau-head { padding: 8px 10px; }
  .sd-panneau-corps { padding: 10px 12px 24px; }
  .sd-champ-2 { flex-direction: column; gap: 6px; }
  .sd-sous-tache .sd-icon-btn, .sd-projet-sous .sd-icon-btn { opacity: 1; }
}

/* ---- Confirmation de création d'un développement (projet, pas tâche) ---- */
.sd-modal-mask { z-index: 9999; display: flex; align-items: center; justify-content: center; }
.sd-modal { background: #fff; border-radius: 12px; width: 520px; max-width: calc(100% - 24px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); text-align: left; overflow: hidden; }
.sd-modal-head { background: #fff4e5; color: #9a5b00; font-weight: 700; font-size: 12pt; padding: 14px 18px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f5d6a8; }
.sd-modal-corps { padding: 14px 18px 4px; font-size: 10pt; line-height: 1.5; }
.sd-modal-corps p { margin: 0 0 10px; }
.sd-modal-titre { font-size: 12pt; font-weight: 700; padding: 8px 12px; background: #f3f5f8; border-left: 4px solid var(--main-bg-color); border-radius: 6px; margin: 0 0 12px; word-break: break-word; }
.sd-modal-aide { color: #555; font-size: 9pt; }
.sd-modal-pied { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 18px 16px; flex-wrap: wrap; }
.page_suivi_dev .sd-btn.sd-btn-primaire { background: var(--main-bg-color); border-color: var(--main-bg-color); color: #fff; font-weight: 600; }
.page_suivi_dev .sd-btn.sd-btn-tache { border-color: #9a5b00; color: #9a5b00; background: #fff8ee; }
@media (max-width: 768px) {
  .sd-modal-pied { flex-direction: column-reverse; }
  .sd-modal-pied .sd-btn { justify-content: center; }
}