/* Kuma — tableau de bord et portefeuille (« kc- »)
 *
 * S'appuie sur les jetons et composants de `kc-admin.css` (cartes, grilles, badges,
 * tableaux, les cinq balises `{% anneau %}`/`{% barres_horizontales %}`/`{% barres_empilees %}`
 * et leurs classes `.kc-chart-*`). Cette feuille n'ajoute que ce qui est propre au tableau de
 * bord et au portefeuille : `kc-admin.css` possède déjà ses propres teintes de graphique
 * (`ok`/`warn`/`danger`/`info`/`neutral`/`attente`), l'anneau, les barres horizontales et
 * empilées — les redéfinir ici les aurait fait gagner sur la cascade (cette feuille se charge
 * après `kc-admin.css`) et aurait ramené leurs bugs déjà corrigés (anneau qui ne montrait plus
 * que son fond gris, teinte « neutre » en français jamais reconnue par `kc-admin.css`, qui ne
 * connaît que « neutral »). `missions/tableaux_de_bord.py` et
 * `missions/templatetags/graphiques.py` ont été alignés sur ce même vocabulaire anglais.
 *
 * CSP stricte : aucun style en ligne.
 */

/* ====================== Cartes indicateurs ====================== */

/* Compactes, toute la carte cliquable, libellé doux en haut, valeur en grand sans
   soulignement, ligne d'aide en petit, pastille de ton à droite. `kc-admin.css` donne déjà
   `.kc-card` (fond, bordure, ombre), `.kc-kpi-tete` et `.kc-kpi-pastille--*` (ton, y compris
   `attente`) ; cette couche n'ajoute que le comportement de lien discret, propre à la carte
   indicateur du tableau de bord. */
a.kc-card.kc-kpi-carte {
  color: inherit;
  text-decoration: none;
}

/* Le survol/focus de `.kc-card` (ombre, décalage) suffit déjà au retour visuel — pas de
   bordure propre à cette variante (règle 2 du système de surfaces). */

a.kc-card.kc-kpi-carte:focus-visible {
  outline: 3px solid var(--kc-color-primary);
  outline-offset: 2px;
}

/* Le nombre de cartes indicateurs varie avec les capacités déclarées du cadre (7 cartes sans
   `applicabilite` — loi fictive #108, ISO 9001 — contre 8 pour ISO 27001, qui ajoute la carte
   SoA) : le système de grille partagé (`.kc-grid--kpi`, `kc-admin.css`, repris par d'autres
   écrans à nombre de cartes fixe) laissait alors un vide en dernière rangée. Le gabarit
   (`tableau_de_bord.html`) répartit donc les 7 cartes sans SoA en deux grilles complètes — 3
   puis 4 — plutôt qu'une grille de 7 sur 4 colonnes ; `.kc-tdb-kpi-3`, posée en plus de
   `.kc-grid--kpi` sur la première, remplace son palier de 2/4 colonnes par une seule rangée
   de 3 cartes égales dès 1024 px (empilées en dessous, comme `.kc-grid--kpi` sous 360 px). */
.kc-tdb-kpi-3 {
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 1024px) {
  .kc-tdb-kpi-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ====================== Mise en page du tableau de bord ====================== */

/* `kc-admin.css` pose déjà `.kc-grid--graphiques` (fluide) et `.kc-grid--todo` (2fr/1fr, une
   colonne sous 768 px) ; cette feuille n'ajoute que le sous-regroupement propre à ce tableau
   de bord : « À faire maintenant » et « Preuves qui expirent » empilées dans la première
   colonne de `.kc-grid--todo`, à côté de « Activité récente ». */
.kc-tdb-listes-principales {
  display: flex;
  flex-direction: column;
  gap: var(--kc-space-4);
}

.kc-grid--todo > * {
  /* Les éléments d'une grille gardent `min-width: auto` par défaut : sans ce reset, une
     liste de libellés longs impose sa largeur intrinsèque et déborde l'écran au lieu de se
     faire tronquer par les règles de `.kc-list` ci-dessous — y compris quand l'élément est
     lui-même un conteneur flex (`.kc-tdb-listes-principales`), qui hérite du même défaut. */
  min-width: 0;
}

.kc-tdb-listes-principales > .kc-card {
  min-width: 0;
}

/* ====================== Listes (à faire, preuves, activité) ====================== */

.kc-liste-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kc-space-2);
}

.kc-liste-voir-tout {
  font-size: var(--kc-font-size-xs);
  /* Cible >= 24px de haut (WCAG 2.2, 2.5.8) sans déplacer le texte dans la ligne de titre
     (`align-items: baseline`) : la marge négative annule l'empreinte visuelle du padding
     ajouté, seule la zone cliquable grandit. */
  padding-block: var(--kc-space-1);
  margin-block: calc(var(--kc-space-1) * -1);
}

/* Une ligne de texte, jamais deux : au-delà, l'excédent est tronqué proprement (`…`) plutôt
   que de pousser la hauteur de la carte ou de déborder sur la pastille de droite. */
.kc-list > li > a,
.kc-list > li > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: anywhere;
  flex: 1 1 auto;
  min-width: 0;
}

.kc-list a {
  text-decoration: none;
  color: var(--kc-color-text);
}

.kc-list a:hover,
.kc-list a:focus-visible {
  text-decoration: underline;
}

.kc-activite-date {
  color: var(--kc-color-text-soft);
  font-size: var(--kc-font-size-xs);
  white-space: nowrap;
}

table.kc-table a {
  text-decoration: none;
}

table.kc-table a:hover,
table.kc-table a:focus-visible {
  text-decoration: underline;
}