/* Vue court terme (To-do) — porté à l'identique du mockup « Vue Court Terme ».
   Namespace .ct sur les composants DS existants (ds-table, ds-badge, task-list).
   Rendu par dashboard-todo.js (données via notre JS, structure/style ci-dessous). */

.ct__pagehead { margin-bottom: 0; }
.ct__eyebrow { letter-spacing: var(--letter-spacing-label); }

/* Barre des jalons : onglets scrollables, pastille sur l'actif + compteur tâches. */
.ct__jalons {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;          /* sinon la barre s'élargit à la somme des onglets → scroll de PAGE */
  overflow-x: auto;      /* les onglets scrollent en interne, pas la page */
  scrollbar-width: none;
}
/* La colonne de grille et le root doivent pouvoir rétrécir, sinon min-width:auto laisse la
   barre d'onglets élargir la page sur tablette (scroll horizontal). */
.dashboard-final__page--todo { grid-template-columns: minmax(0, 1fr); }
.dashboard-final__todo { min-width: 0; }
.ct__jalons::-webkit-scrollbar { display: none; }
.ct__jalon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  font: inherit;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--motion-transition-default);
}
.ct__jalon:hover { color: var(--color-text-secondary); background: var(--button-ghost-background-hover); }
.ct__jalon:focus-visible { outline: var(--border-focus); outline-offset: 0; }
.ct__jalon.is-active { color: var(--color-text-primary); background: var(--color-surface-raised); }
.ct__jalon-count { color: var(--color-text-muted); }
.ct__jalon-dot {
  width: var(--timeline-dot-size);
  height: var(--timeline-dot-size);
  border-radius: var(--radius-full);
  background: var(--color-text-primary);
  flex-shrink: 0;
}
/* Jalon validé : pastille compacte (dot seul), verte, poussée à droite de la barre. */
.ct__jalon--done { padding: var(--space-8); gap: 0; }
.ct__jalon--done.is-first-done { margin-left: auto; }
.ct__jalon-dot--done { background: var(--color-success); }

/* Bloc critère de validation + bouton Valider (droite). */
.ct__validation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-8) 0;
}
.ct__validation-copy { display: grid; gap: var(--space-8); min-width: 0; }
.ct__validation-label { color: var(--color-text-muted); letter-spacing: var(--letter-spacing-label); }

/* Board : cartes de statut empilées. */
.ct__board { display: grid; gap: var(--grid-gutter); }
/* Le fond/bordure pleine largeur des lignes déborde par --table-cell-padding-inline hors de la
   table (pseudo-éléments) → sur tablette ça créait un scroll horizontal dans la carte. On clippe
   ce débordement au bord de la carte (le plein-cadre reste, plus de scroll). */
.ct__stage { max-width: none; overflow-x: clip; }

/* En-tête de groupe secondaire (À faire) dans une carte partagée (via 2 tables). */
.ct__group-head td { padding-top: var(--space-24); border-bottom: none; }
.ct .ds-table__status-heading { margin-left: 0; gap: var(--space-8); }
.ct .ds-table__status-heading .ds-disclosure { width: var(--space-16); }
.ct__group-head .ds-badge { color: var(--color-text-primary); }

/* Alignements du composant task-list (identiques au mockup). */
.ct .nested-group__add-task { padding-left: calc(var(--space-16) + var(--space-8)); }
.ct .ds-empty-inline { gap: var(--space-8); padding: 0; }
.ct .ds-empty-inline__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--checkbox-size); }
.ct .nested-group__subtask--action .ds-empty-inline { gap: var(--space-12); }
.ct .nested-group__subtask--action .ds-empty-inline__icon { width: var(--checkbox-size-round); }
.ct .ds-table__row--inline-action td { padding-block: var(--space-8); border-bottom: none; }
.ct .ds-table tbody tr.ds-table__row--inline-action:hover td { background: none; }
.ct tbody tr:last-child .nested-group__task::after { border-bottom: none; }
.ct .ds-table__row--nested-group td { padding-block: 0; }
.ct .nested-group__task { padding-top: var(--table-cell-padding-block); }
.ct .nested-group__task:hover::before { top: 0; }

/* Tâches terminées : barrées + atténuées. */
.ct__done .ds-row-title { text-decoration: line-through; color: var(--color-text-muted); }
.ct__done .ds-row-copy .type-caption { color: var(--color-text-muted); }

/* Deux tables dans la carte En cours + À faire : espace entre les groupes. */
.ct__stage table + table { margin-top: var(--space-24); }

/* Icônes d'action (⋯ ✕) : l'offset négatif du composant les collait au bord droit de la
   carte (calé sur un ds-container autonome). Ici on les rentre à l'intérieur du padding. */
.ct .nested-group__task .ds-row-actions,
.ct .nested-group__subtask .ds-row-actions { right: var(--space-8); }

/* Le titre remplit la ligne → l'édition inline (double-clic) dispose de toute la largeur.
   Avant : le champ était calé sur la largeur du titre (~166px) → texte clippé/scrollé. */
.ct .nested-group__task .ds-row-copy { flex: 1; min-width: 0; }
/* Titre de sous-tâche sorti du label (le dot seul coche) : le label ne contient plus que le
   dot → il ne doit plus s'étirer ; le titre prend le reste (texte collé au dot, à gauche). */
.ct .nested-group__subtask .ds-checkbox { flex: 0 0 auto; }
.ct .ds-row-title--sub { flex: 1; min-width: 0; }
/* Glisser-déposer des sous-tâches : élément tiré atténué + trait d'insertion sur la cible. */
.ct .ds-row-grip { cursor: grab; }
.ct .nested-group__subtask.is-dragging { opacity: var(--opacity-dragging); }
.ct .nested-group__subtask.is-sub-drop .disclosure-subrow {
  box-shadow: inset 0 var(--border-width-default) 0 0 var(--color-text-primary);
}

/* Réordonnancement des tâches : élément tiré atténué + trait d'insertion avant/après la cible. */
.ct .nested-group__task.is-dragging { opacity: var(--opacity-dragging); }
.ct .nested-group__task.insert-before { box-shadow: inset 0 var(--border-width-default) 0 0 var(--color-text-primary); }
.ct .nested-group__task.insert-after { box-shadow: inset 0 calc(-1 * var(--border-width-default)) 0 0 var(--color-text-primary); }

/* Croix de suppression : rentrée du bord dans la checklist (elle collait au bord). */
.ct .nested-group__subtask .ds-row-actions { right: var(--space-16); }
/* Dans le panneau, la ligne déborde du padding → on rentre davantage la croix. */
.dashboard-final__taskpanel .nested-group__subtask .ds-row-actions { right: var(--space-32); }