/* =============================================================================
   Bilan (dashboard) — fidélité maquette Claude Design
   =============================================================================
   Source de vérité visuelle : "TerraTrack - Refonte App.dc.html" (section
   data-view="bilan"). Ce fichier est chargé APRÈS design_v2.css : les règles
   ci-dessous surchargent la couche partagée pour aérer l'écran sans toucher
   aux fichiers partagés (design_v2.css / redesign.css).

   Cibles : mêmes classes que le template JS (renderDashboardV2). Aucun
   sélecteur (id/classe-JS) renommé. Tokens uniquement.

   Valeurs reportées de la maquette :
   - sections espacées de 18px
   - cartes : surface + bordure + radius r-3 + shadow-1, padding interne 18px
   - KPI : valeur mono 26px, libellé 11px uppercase, delta 12px
   - grille chart : 1.5fr / 1fr, gap 18px
   - barres de progression : piste 7px, radius pill
   - objectifs : barres 8px
   ========================================================================= */

/* -----------------------------------------------------------------------------
   1. Rythme général — aération entre les sections (maquette : ~18px)
   -------------------------------------------------------------------------- */
.dash-v2 {
  gap: 18px;
  padding: 24px 24px 40px;
}

/* En-tête : titre + sous-titre aérés comme la maquette (h1 22px / sub 13px) */
.dash-v2 .dash-hero h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.dash-v2 .dash-eyebrow {
  margin-bottom: 4px;
}

.dash-v2 .dash-hero p {
  margin-top: 4px;
  color: var(--tt-fg-3);
  font-size: 13px;
}

.dash-v2 .dash-hero {
  align-items: flex-start;
}

.dash-v2 .dash-actions {
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dash-v2 .dash-periods {
  height: 30px;
}

.dash-v2 .dash-periods button {
  min-width: 54px;
  padding: 0 12px;
}

/* -----------------------------------------------------------------------------
   2. Cartes KPI — maquette : 4 cartes mono 26px, libellés discrets
   La grille reste une carte unique à colonnes divisées ; on aère le padding
   interne et on cale la typo sur la maquette.
   -------------------------------------------------------------------------- */
.dash-v2 .dash-kpi-grid {
  border-radius: var(--tt-r-3);
  box-shadow: var(--tt-shadow-1);
}

.dash-v2 .dash-kpi-cell {
  padding: 16px 18px;
}

.dash-v2 .dash-kpi-cell em {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.dash-v2 .dash-kpi-cell strong {
  margin-top: 6px;
  margin-bottom: 0;
  font-family: var(--tt-font-mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
}

.dash-v2 .dash-kpi-cell small {
  margin-top: 4px;
  font-size: 12px;
}

/* Mini-graphe d'activité : net, pas écrasé (la maquette respire) */
.dash-v2 .dash-spark {
  width: 100%;
  height: 40px;
  margin-top: 12px;
  opacity: 0.9;
}

/* -----------------------------------------------------------------------------
   3. Cartes de contenu — neutralise le padding partagé .card !important
   pour que l'espacement vienne du header + body (comme la maquette : la carte
   n'est qu'un cadre, le padding vit dans les sections internes à 18px).
   -------------------------------------------------------------------------- */
.dash-v2 .dash-card {
  padding: 0 !important;
  border-radius: var(--tt-r-3);
  box-shadow: var(--tt-shadow-1);
}

.dash-v2 .dash-card .card-header {
  padding: 16px 18px;
}

.dash-v2 .dash-card .card-title {
  font-size: 14px;
  font-weight: 600;
}

.dash-v2 .dash-card .card-body {
  padding: 18px;
}

/* -----------------------------------------------------------------------------
   4. Grilles 2 colonnes — proportions maquette (1.5fr / 1fr) + gap 18px
   -------------------------------------------------------------------------- */
.dash-v2 .dash-main-grid {
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
}

.dash-v2 .dash-table tr {
  cursor: pointer;
}

.dash-v2 .dash-table td {
  padding-block: 12px;
}

.dash-v2 .dash-table td:first-child span {
  display: block;
  margin-top: 3px;
  color: var(--tt-fg-3);
  font-size: 12px;
}

.dash-critical-list {
  display: grid;
  gap: 6px;
}

.dash-critical-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  gap: 11px;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 10px 8px;
  border: 0;
  border-radius: var(--tt-r-2);
  background: transparent;
  color: var(--tt-fg);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.dash-critical-row:hover,
.dash-critical-row:focus-visible {
  background: var(--tt-surface-2);
  outline: none;
}

.dash-critical-row > span:first-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--tt-r-2);
  background: var(--tt-info-soft);
  color: var(--tt-info);
}

.dash-critical-row.is-warn > span:first-child {
  background: var(--tt-warn-soft);
  color: var(--tt-warn);
}

.dash-critical-row.is-danger > span:first-child {
  background: var(--tt-danger-soft);
  color: var(--tt-danger);
}

.dash-critical-row strong,
.dash-critical-row em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-critical-row strong {
  font-size: 13px;
  font-weight: 600;
}

.dash-critical-row em {
  margin-top: 2px;
  color: var(--tt-fg-3);
  font-size: 12px;
  font-style: normal;
}

/* -----------------------------------------------------------------------------
   5. Barres de progression (pipeline + répartition secteurs)
   Maquette : piste 7px, radius pill, pastilles rondes, rythme aéré.
   -------------------------------------------------------------------------- */
.dash-v2 .dash-pipeline,
.dash-v2 .dash-sector-list {
  gap: 14px;
}

.dash-v2 .dash-progress-row > div:first-child {
  margin-bottom: 6px;
  font-size: 12px;
}

.dash-v2 .dash-progress-row i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.dash-v2 .dash-progress-row .progress {
  height: 7px;
  border-radius: var(--tt-r-pill);
  background: var(--tt-surface-3);
  overflow: hidden;
}

.dash-v2 .dash-progress-row .progress-fill {
  height: 100%;
  border-radius: var(--tt-r-pill);
}

.dash-v2 .dash-conversion {
  margin-top: 18px;
}

/* -----------------------------------------------------------------------------
   6. Graphe d'activité 12 semaines — respiration verticale
   -------------------------------------------------------------------------- */
.dash-v2 .dash-trend-chart {
  min-height: 200px;
}

.dash-v2 .dash-legend {
  font-size: 12px;
}

/* Activité par jour : barres un peu plus généreuses */
.dash-v2 .dash-day-bars {
  min-height: 150px;
  gap: 14px;
}

/* -----------------------------------------------------------------------------
   7. Agenda critique + signaux faibles — tuiles aérées
   -------------------------------------------------------------------------- */
.dash-v2 .dash-agenda-grid {
  gap: 14px;
}

.dash-v2 .dash-agenda-tile {
  padding: 14px 16px;
  border-radius: var(--tt-r-3);
}

.dash-v2 .dash-agenda-tile strong {
  font-family: var(--tt-font-mono);
  font-size: 24px;
}

.dash-v2 .dash-signal-list {
  gap: 4px;
}

.dash-v2 .dash-signal-list button {
  padding: 12px 0;
}

/* -----------------------------------------------------------------------------
   8. Widget "Potentiel à capter" — résumé en 3 cellules
   -------------------------------------------------------------------------- */
.dash-v2 .dash-gap-summary {
  gap: 14px;
  margin-bottom: 18px;
}

.dash-v2 .dash-gap-summary-cell {
  padding: 14px 16px;
  border-radius: var(--tt-r-3);
}

.dash-v2 .dash-gap-summary-cell strong {
  font-size: 24px;
}

/* -----------------------------------------------------------------------------
   9. Bloc Objectifs & conversions (composant TerraTrack — conservé)
   Aéré pour s'aligner sur le reste de l'écran.
   -------------------------------------------------------------------------- */
.dash-objectives {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-3);
  background: var(--tt-surface);
  box-shadow: var(--tt-shadow-1);
}

.dash-objectives > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.dash-objectives > header strong {
  display: block;
  margin-top: 4px;
  color: var(--tt-fg);
  font-size: 14px;
  font-weight: 600;
}

.dash-objectives > header em {
  color: var(--tt-fg-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.dash-objective-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.dash-objective-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-3);
  background: var(--tt-surface-2);
}

.dash-objective-card span,
.dash-objective-card em,
.dash-objective-card small {
  display: block;
}

.dash-objective-card span {
  color: var(--tt-fg-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dash-objective-card strong {
  display: block;
  margin-top: 4px;
  color: var(--tt-fg);
  font-family: var(--tt-font-mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.dash-objective-card em {
  margin-top: 4px;
  color: var(--tt-fg-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.dash-objective-card small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--tt-fg-3);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-objective-ring {
  width: 54px;
  height: 54px;
  transform: rotate(-90deg);
}

.dash-objective-ring text {
  transform: rotate(90deg);
  transform-origin: center;
  fill: var(--tt-fg);
  font-family: var(--tt-font-mono, ui-monospace);
  font-size: 11px;
  font-weight: 700;
}

.dash-ring-track,
.dash-ring-value {
  fill: none;
  stroke-width: 5;
}

.dash-ring-track {
  stroke: var(--tt-surface-3);
}

.dash-ring-value {
  stroke: var(--tt-accent);
  stroke-linecap: round;
}

.dash-objective-card.is-success .dash-ring-value { stroke: var(--tt-success); }
.dash-objective-card.is-warn .dash-ring-value { stroke: var(--tt-warn); }
.dash-objective-card.is-danger .dash-ring-value { stroke: var(--tt-danger); }

/* -----------------------------------------------------------------------------
   10. Responsive — l'app gère déjà les breakpoints dans design_v2.css.
   On aligne seulement les grilles propres à cet écran.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .dash-v2 .dash-main-grid {
    grid-template-columns: 1fr;
  }
  .dash-objective-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .dash-v2 {
    padding: 16px 12px 88px;
    gap: 14px;
  }
  .dash-v2 .dash-card .card-body {
    padding: 16px;
  }
}

@media (max-width: 620px) {
  .dash-objectives > header {
    align-items: flex-start;
    flex-direction: column;
  }
  .dash-objective-grid {
    grid-template-columns: 1fr;
  }
}