/* Cartes du kanban et fiche carte (2026-10-15) : priorité native, assignation unique, familles
   Module / Work items, sections secondaires discrètes. Chargé après style.css. */

/* ---- priorité : un pictogramme compact, rien si aucune ------------------------------------ */
.prio { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.prio-ic { width: 14px; height: 14px; display: block; }
.prio-ic rect { fill: var(--ink-14); }
.prio-ic rect.on { fill: currentColor; }
.prio-urgent { color: var(--danger); }
.prio-urgent .prio-ic rect { fill: currentColor; }
.prio-urgent .prio-ic path { stroke: #fff; stroke-width: 2.2; stroke-linecap: round; fill: none; }
.prio-high { color: #e56910; }
.prio-medium { color: #b38600; }
.prio-low { color: var(--muted); }
.prio-none { color: var(--muted); }

/* ---- carte du kanban : famille ------------------------------------------------------------ */
/* Repère de famille : un liseré à gauche, de la couleur du Module racine, partagé par ses descendants. */
.card.has-fam { box-shadow: inset 3px 0 0 var(--fam), var(--card-shadow); }
.card-parent { display: flex; align-items: baseline; gap: 4px; max-width: 100%; margin: 0 0 2px; font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.card-parent .arrow { flex: none; color: var(--fam, var(--muted)); font-weight: 700; }
.card-parent .cnum { margin-right: 0; flex: none; }
.card-parent .pname { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.card-parent:hover { color: var(--primary); text-decoration: none; } .card-parent:hover .pname { text-decoration: underline; }
/* Compteur des sous-éléments, avec leur avancement ; un clic épingle la famille. */
.card .meta .kids { display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px; margin: -1px 0; border-radius: 3px; color: inherit; font-size: 12px; line-height: 16px; }
.card .meta .kids:hover, .card .meta .kids[aria-pressed="true"] { background: var(--hover); color: var(--text); }
.card .meta .kids[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--fam, var(--primary)); }
.kbar { display: inline-block; width: 28px; height: 4px; border-radius: 2px; background: var(--ink-14); overflow: hidden; }
.kbar i { display: block; height: 100%; background: var(--primary); border-radius: 2px; }
.kids.full .kbar i { background: var(--success); }
/* Mise en évidence d'une famille : les autres cartes s'atténuent, la famille ressort. */
.lists .card { transition: opacity .15s ease; }
.lists.fam-focus .card:not(.fam-on) { opacity: .38; }
.lists.fam-focus .card.fam-on { outline-color: var(--fam, var(--primary)); }
@media (prefers-reduced-motion: reduce) { .lists .card { transition: none; } }

/* ---- fiche : puces « Assigné à » et « Priorité », sélecteurs -------------------------------- */
.cm-chips .assign-chip, .cm-chips .prio-chip { gap: 6px; max-width: 100%; }
.cm-chips .assign-chip .who { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-chips .assign-chip .who + .avatar { margin-left: 4px; }
.cm-chips .assign-chip > .icon { color: var(--muted); }
.cm-chips .prio-chip .prio { margin-right: 0; }
.cm-chips .ro { cursor: default; }
.cm-chips [role="button"]:hover { background: var(--surface-4); }
.cm-chips [role="button"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.pick-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.pick { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 3px; text-align: left; }
.pick:hover { background: var(--hover); }
.pick.on { background: var(--tint-blue); font-weight: 600; }
.pick > span:not(.avatar):not(.prio) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick .prio { margin-right: 0; }
.pick > .icon { color: var(--primary); }

/* ---- fiche : sections secondaires plus légères, ligne d'actions compacte ------------------- */
.section.light { margin-bottom: 14px; gap: 12px; }
.section.light > .icon { width: 18px; height: 18px; margin: 2px 3px 0; stroke-width: 1.8; }
.section.light .head { margin-bottom: 4px; min-height: 26px; }
.section.light .head h3 { font-size: 13px; font-weight: 600; color: var(--subtle); }
.section.light .head .btn.sm { padding: 2px 8px; font-size: 12px; color: var(--subtle); }
.section.light .head .btn.sm:hover { color: var(--text); }
.cm-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: -4px 0 16px 30px; font-size: 13px; color: var(--muted); }
.cm-quick .dot { margin: 0 2px; color: var(--line); }
.quick-add { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 3px; color: var(--muted); font-size: 13px; line-height: 18px; }
.quick-add .icon { width: 13px; height: 13px; }
.quick-add:hover { background: var(--hover); color: var(--text); text-decoration: none; }

@media (max-width: 720px) {
  .cm-quick { margin-left: 22px; }
  .cm-chips .assign-chip .who { max-width: 120px; }
}

/* Mobile : les sections légères gardent l'alignement des autres (pictogramme 20 px + 8 px). */
@media (max-width: 720px) {
  .section.light { gap: 8px; }
  .section.light > .icon { margin: 2px 1px 0; }
}

/* Le filtre « Prioritaires » allonge la barre des filtres : sous 1600 px, le mot « Afficher »
   laisse la place aux onglets du tableau. */
@media (max-width: 1600px) { .board-tabs .filter-caption { display: none; } }