/* stats : écrans « Statistiques AO » et « Statistiques centres » (lot 4.6, session B).
   Tout est préfixé .stats-view ; couleurs uniquement via les jetons de tokens.css. */

.stats-view { display: grid; gap: var(--space-4); min-width: 0; }
.stats-view > * { min-width: 0; }

/* En-tête de page */
.stats-view .stats-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); }
.stats-view .stats-head h1 { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--text); }
.stats-view .stats-head h1:focus { outline: none; }
.stats-view .stats-sub { margin: var(--space-1) 0 0; color: var(--text-2); font-size: var(--text-md); }

/* Période : segmented + navigation */
.stats-view .stats-period { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.stats-view .segmented { display: inline-flex; padding: 2px; gap: 2px; background: var(--bg-muted); border-radius: var(--radius-md); }
.stats-view .segmented > button { height: calc(var(--control-h) - 4px); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-2); font: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; }
.stats-view .segmented > button:hover { color: var(--text); }
.stats-view .segmented > button[aria-pressed="true"] { background: var(--bg); color: var(--text); box-shadow: var(--shadow-1); }
.stats-view .segmented > button:focus-visible,
.stats-view .stats-nav-btn:focus-visible,
.stats-view .chart-data summary:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.stats-view .stats-stepper { display: inline-flex; align-items: center; gap: var(--space-1); }
.stats-view .stats-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--control-h); height: var(--control-h); padding: 0; border: var(--border-width) solid var(--border-control); border-radius: var(--radius-md); background: var(--bg); color: var(--text); cursor: pointer; }
.stats-view .stats-nav-btn:hover { background: var(--bg-subtle); }
.stats-view .stats-nav-btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stats-view .stats-period-label { min-width: 7.5rem; text-align: center; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.stats-view .stats-export { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h); padding: 0 var(--space-3); border: var(--border-width) solid var(--border-control); border-radius: var(--radius-md); background: var(--bg); color: var(--text); font-size: var(--text-md); font-weight: var(--weight-medium); text-decoration: none; }
.stats-view .stats-export:hover { background: var(--bg-subtle); text-decoration: none; }

/* Grille de KPI (unique) */
.stats-view .stats-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.stats-view .stats-kpi { display: grid; align-content: start; gap: var(--space-1); min-width: 0; padding: var(--space-4); color: inherit; text-decoration: none; background: var(--bg); border: var(--border-width) solid var(--border); border-radius: var(--radius-md); }
.stats-view a.stats-kpi:hover { background: var(--bg-subtle); border-color: var(--border-strong); text-decoration: none; }
.stats-view a.stats-kpi:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.stats-view .stats-kpi-label { font-size: var(--text-sm); color: var(--text-2); }
.stats-view .stats-kpi-value { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stats-view .stats-kpi-value .unit { font-size: var(--text-lg); font-weight: var(--weight-medium); margin-left: 2px; }
.stats-view .stats-kpi-note { font-size: var(--text-xs); color: var(--text-2); }
.stats-view .stats-kpis > .state-error,
.stats-view .stats-kpis > .state-loading { grid-column: 1 / -1; }

/* Cartes et grille de graphiques */
.stats-view .stats-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.stats-view .stats-card { min-width: 0; background: var(--bg-elevated); border: var(--border-width) solid var(--border); border-radius: var(--radius-md); }
.stats-view .stats-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--border); }
.stats-view .stats-card-title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text); }
.stats-view .stats-card-note { font-size: var(--text-sm); color: var(--text-2); }
.stats-view .stats-card-body { padding: var(--space-4); min-width: 0; }
.stats-view .stats-card-body > .table-wrapper { border: 0; border-radius: 0; margin: calc(var(--space-4) * -1); width: calc(100% + var(--space-4) * 2); max-width: none; }
.stats-view .stats-card-body > .stats-muted { margin: 0; }

/* Graphique : hauteur fixe, message d'état à la place du canevas */
.stats-view .stats-chart { position: relative; height: 15rem; }
.stats-view .stats-chart canvas { max-width: 100%; }
.stats-view .stats-muted { color: var(--text-2); font-size: var(--text-md); }
.stats-view .stats-chart .chart-message { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: var(--space-4); text-align: center; color: var(--text-2); font-size: var(--text-md); background: var(--bg-subtle); border-radius: var(--radius-sm); }

/* Graphique vide ou indisponible : bloc compact, texte discret, sans cadre */
.stats-view .stats-chart.is-empty { height: auto; min-height: 6rem; }
.stats-view .stats-chart.is-empty .chart-message { position: static; min-height: 6rem; padding: var(--space-3); background: none; border-radius: 0; color: var(--text-3); font-size: var(--text-sm); }
.stats-view .stats-card-body:has(> .stats-chart.is-empty) { padding-block: var(--space-2); }

/* KPI à zéro : valeur atténuée */
.stats-view .stats-kpi.is-zero .stats-kpi-value { color: var(--text-2); font-weight: var(--weight-medium); }

/* Tableau de données associé à un graphique */
.stats-view .chart-data { margin-top: var(--space-3); font-size: var(--text-sm); }
.stats-view .chart-data summary { cursor: pointer; color: var(--accent-text); display: inline-flex; align-items: center; min-height: 1.5rem; }
.stats-view .chart-data .table-wrapper { margin-top: var(--space-2); }

/* Tables : neutralise le style global des éléments table/th/td */
.stats-view .table-wrapper { max-width: 100%; overflow-x: auto; background: var(--bg); border: var(--border-width) solid var(--border); border-radius: var(--radius-md); box-shadow: none; }
.stats-view .table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.stats-view .table caption { text-align: left; }
.stats-view .table thead th { position: static; padding: 0 var(--space-3); height: var(--row-h-compact); text-align: left; text-transform: none; letter-spacing: normal; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-2); background: var(--bg-subtle); border-bottom: var(--border-width) solid var(--border); white-space: nowrap; }
.stats-view .table tbody tr { border-bottom: 0; }
.stats-view .table tbody tr:hover { background: var(--bg-subtle); }
.stats-view .table tbody th,
.stats-view .table tbody td { height: var(--row-h-compact); padding: var(--space-1) var(--space-3); text-align: left; font-weight: var(--weight-regular); color: var(--text); background: none; vertical-align: middle; border-bottom: var(--border-width) solid var(--border); font-variant-numeric: tabular-nums; }
.stats-view .table tbody tr:last-child th,
.stats-view .table tbody tr:last-child td { border-bottom: 0; }
.stats-view .table thead th.num,
.stats-view .table td.num { text-align: right; white-space: nowrap; }
.stats-view .table td.strong { font-weight: var(--weight-semibold); }

/* 768 px et plus */
@media (min-width: 640px) {
    .stats-view .stats-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
}
@media (min-width: 1024px) {
    .stats-view .stats-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .stats-view .stats-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile et tablette : cibles tactiles >= 44 px */
@media (max-width: 768px) {
    .stats-view .segmented { padding: 0; }
    .stats-view .segmented > button { height: 44px; padding: 0 var(--space-4); }
    .stats-view .stats-nav-btn { width: 44px; height: 44px; }
    .stats-view .stats-export { min-height: 44px; }
    .stats-view .chart-data summary { min-height: 44px; }
    .stats-view .stats-kpi { padding: var(--space-3); }
    .stats-view a.stats-kpi { min-height: 44px; }
}
@media (max-width: 480px) {
    .stats-view .stats-period { width: 100%; }
    .stats-view .stats-period-label { min-width: 0; flex: 1; }
    .stats-view .stats-stepper { flex: 1 1 100%; justify-content: space-between; }
    .stats-view .stats-head > .stats-export { width: 100%; }
}

/* Grille de 6 KPI (centres) : 2, 3 puis 6 colonnes */
@media (min-width: 1280px) {
    .stats-view .stats-kpis.is-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    .stats-view .stats-kpis.is-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}