/* Appels Voice — écran d'observation (DESIGN-11).

   Ce fichier n'ajoute QUE ce qui manque. Les primitives partagées ne sont pas
   dupliquées : `.v2-panel`, `.v2-table`, `.v2-badge`, `.v2-inline-state`,
   `.v2-skel`, `.v2-rep-metrics`, `.v2-rep-caveat`, `.v2-timeline`,
   `.v2-empty-cell`, `.v2-select`, `.v2-back` vivent ailleurs.

   Aucun style d'action : cet écran n'en porte pas. Pas de bouton primaire,
   pas de bouton de danger — leur absence est une propriété visuelle. */

/* Grille du détail. `minmax(0, 1fr)` n'est pas décoratif : une piste `auto`
   implicite est plancherée par son contenu min-content, et un tableau large
   dans un panneau élargit alors la PAGE ENTIÈRE — le défaut trouvé en
   DESIGN-09 à 390 px. */
.v2-vk-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

/* ── Barre de filtres ─────────────────────────────────────────────────── */
.v2-vk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.v2-vk-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  max-width: 100%;
  flex-wrap: wrap;
}
.v2-vk-chip code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-faint);
  overflow-wrap: anywhere;
}
.v2-vk-readonly {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ── Liste ────────────────────────────────────────────────────────────── */
.v2-vk-table tbody th[scope="row"] { text-align: left; font-weight: 500; }
.v2-vk-open {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--text-primary); text-align: left;
}
.v2-vk-open:hover { text-decoration: underline; }
.v2-vk-open:focus-visible, .v2-vk-link:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.v2-vk-company {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.v2-vk-link { color: var(--text-primary); text-decoration: underline; }
.v2-vk-scenario, .v2-vk-mode, .v2-vk-reason, .v2-vk-amd, .v2-vk-qual {
  font-size: var(--text-sm);
  color: var(--text-primary);
}
/* La classification du décroché n'est NI un succès NI une panne : elle reste
   dans la tonalité neutre du texte, quelle que soit sa valeur. */
.v2-vk-amd { font-variant: none; }
.v2-vk-filter { font-size: var(--text-xs); white-space: nowrap; }

/* Famille de statut : lue en toutes lettres, jamais réduite à une couleur. */
.v2-vk-family {
  display: inline-block;
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Pagination ───────────────────────────────────────────────────────── */
.v2-vk-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.v2-vk-range { font-size: var(--text-xs); color: var(--text-muted); }
.v2-vk-pager button[disabled] { opacity: .45; cursor: default; }

/* ── En-tête du détail ────────────────────────────────────────────────── */
.v2-vk-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.v2-vk-head-main {
  display: flex; align-items: center; gap: var(--space-3); min-width: 0;
  flex-wrap: wrap;
}
.v2-vk-name {
  margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--text-primary);
}
.v2-vk-head-note { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }

/* ── Sections du détail ───────────────────────────────────────────────── */
.v2-vk-status { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.v2-vk-status-explain {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.v2-vk-code, .v2-vk-uuid code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-faint);
  overflow-wrap: anywhere;
}
.v2-vk-uuid { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--text-muted); }
/* Texte libre du domaine : affiché tel quel, sans mise en forme qui
   suggérerait une catégorie qu'il n'a pas. */
.v2-vk-free { color: var(--text-primary); overflow-wrap: anywhere; }
.v2-vk-summary {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.v2-vk-facts { margin: 0 0 var(--space-3); padding-left: var(--space-4); }
.v2-vk-facts li { font-size: var(--text-sm); color: var(--text-secondary); }
.v2-vk-missing { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.v2-vk-actor code { font-family: var(--font-mono); font-size: var(--text-xs); }

/* Les panneaux défilent SEULS : un tableau large ne pousse jamais la page.
   Encore faut-il que le panneau soit le bloc conteneur de ce qu'il contient —
   c'est déclaré une seule fois, avec la classe (voir `prospect-360.css`). */
.v2-panel-body { overflow-x: auto; }

@media (max-width: 720px) {
  .v2-vk-toolbar { flex-direction: column; align-items: stretch; }
  .v2-vk-head { flex-direction: column; align-items: flex-start; }
}