/* ---- Tableau de bord des statistiques (voir stats.js) ----------------------
   Feuille a part pour ne pas toucher styles.css. Reprend les jetons de l'app
   (--paper, --paper-card, --hairline, --brand-blue, --ui).

   REGLE DU CANEVAS : l'ecran recouvre le haut de la page, contre la barre
   d'etat. Son en-tete est donc de la couleur de marque, comme .app-header,
   sinon une bande d'une autre teinte apparaitrait en app installee. */
:root{
  --stats-bar: var(--brand-blue-light);
  --stats-bar-selected: var(--gold);
  --stats-good: #4cd49a;
  --stats-warn: #ffb84d;
  --stats-crit: #ff7070;
}

.stats-open[hidden]{ display:none; }

.stats-sheet{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  flex-direction:column;
  background: var(--paper);
  color: var(--text);
}
.stats-sheet[hidden]{ display:none; }

.stats-sheet__bar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
  padding: max(calc(10px * var(--ui)), env(safe-area-inset-top))
           calc(8px * var(--ui)) calc(10px * var(--ui));
  background: var(--brand-blue);
  color:#fff;
}
.stats-sheet__title{
  flex:1 1 auto;
  margin:0;
  font-size: calc(18px * var(--ui));
  font-weight:800;
  letter-spacing:0.01em;
}
.stats-sheet__close,
.stats-sheet__refresh{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:none;
  border-radius:12px;
  background:transparent;
  color:#fff;
  cursor:pointer;
}
.stats-sheet__close:active,
.stats-sheet__refresh:active{ background: rgba(255,255,255,0.14); }
.stats-sheet__close:focus-visible,
.stats-sheet__refresh:focus-visible{ outline:2px solid #fff; outline-offset:-2px; }
.stats-sheet.is-loading .stats-sheet__refresh svg{ animation: stats-spin 0.9s linear infinite; }
@keyframes stats-spin{ to{ transform: rotate(360deg); } }

.stats-sheet__body{
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding: calc(14px * var(--ui)) calc(16px * var(--ui))
           max(calc(28px * var(--ui)), env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:12px;
}
.stats-sheet__body:focus{ outline:none; }
.stats-direct{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.stats-direct:empty{ display:none; }
.stats-content{
  display:flex;
  flex-direction:column;
  gap:12px;
  transition: opacity 0.2s ease;
}
.stats-sheet.is-loading .stats-content{ opacity:0.5; }

/* periode */
.stats-period{
  display:flex;
  gap:4px;
  padding:4px;
  border-radius:14px;
  background: var(--paper-card);
  border:1px solid var(--hairline);
}
.stats-period button{
  flex:1 1 0;
  padding:9px 4px;
  border:none;
  border-radius:10px;
  background:transparent;
  color: var(--text-dim);
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.stats-period button.is-active{ background: var(--brand-blue); color:#fff; }
.stats-period button:focus-visible{ outline:2px solid var(--brand-blue-light); outline-offset:2px; }

.stats-updated{
  margin:-4px 0 0;
  min-height:1em;
  font-size:11.5px;
  color: var(--text-dim);
  text-align:right;
}

/* en direct */
.stats-live{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1px;
  border-radius:16px;
  overflow:hidden;
  background: var(--hairline);
  border:1px solid var(--hairline);
}
.stats-live div{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:12px 8px;
  background: var(--paper-card);
  text-align:center;
}
.stats-live strong{
  font-size:24px;
  font-weight:800;
  font-variant-numeric: tabular-nums;
  line-height:1.1;
}
.stats-live span{
  font-size:11px;
  line-height:1.3;
  color: var(--text-dim);
}
.stats-live__hint{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:-4px 0 0;
  font-size:11.5px;
  color: var(--text-dim);
}
.stats-live__dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background: var(--stats-good);
  animation: stats-pulse 2s ease-in-out infinite;
}
@keyframes stats-pulse{ 50%{ opacity:0.35; } }

/* etat de sante */
.stats-health{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--hairline);
  background: var(--paper-card);
  color: var(--text);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.stats-health__icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:24px;
  height:24px;
  border-radius:50%;
  font-size:13px;
  font-weight:900;
  color: var(--paper);
}
.stats-health__text{ flex:1 1 auto; font-size:14.5px; font-weight:800; }
.stats-health__more{ font-size:12px; color: var(--text-dim); }
.stats-health--ok .stats-health__icon{ background: var(--stats-good); }
.stats-health--attention .stats-health__icon{ background: var(--stats-warn); }
.stats-health--critique .stats-health__icon{ background: var(--stats-crit); }
.stats-health--attention{ border-color: rgba(255,184,77,0.45); }
.stats-health--critique{ border-color: rgba(255,112,112,0.55); }

/* cartes */
.stats-card{
  background: var(--paper-card);
  border:1px solid var(--hairline);
  border-radius:16px;
  padding:16px;
  scroll-margin-top:12px;
}
.stats-card__title{
  margin:0;
  font-size:16px;
  font-weight:800;
}
.stats-card__hint{
  margin:4px 0 0;
  font-size:12px;
  line-height:1.45;
  color: var(--text-dim);
}
.stats-subtitle{
  margin:18px 0 8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--text-dim);
}
.stats-subtitle--first{ margin-top:14px; }

.stats-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px 12px;
  margin-top:14px;
}
.stats-tile__value{
  margin:0;
  font-size:26px;
  font-weight:800;
  line-height:1.1;
  font-variant-numeric: tabular-nums;
}
.stats-tile__label{
  margin:2px 0 0;
  font-size:13px;
  font-weight:700;
}
.stats-tile__note{
  margin:2px 0 0;
  font-size:11.5px;
  line-height:1.35;
  color: var(--text-dim);
}

/* histogramme */
.stats-chart__readout{
  margin:0 0 8px;
  min-height:1.4em;
  font-size:13px;
  font-weight:700;
  font-variant-numeric: tabular-nums;
}
.stats-chart__plot{
  position:relative;
  height:120px;
  border-top:1px dashed var(--hairline);
  border-bottom:1px solid rgba(238,243,255,0.28);
}
.stats-chart__max{
  position:absolute;
  top:-8px;
  right:0;
  padding-left:6px;
  background: var(--paper-card);
  font-size:10.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.stats-chart__bars{
  position:absolute;
  inset:0;
  display:flex;
  align-items:stretch;
  gap:2px;
  touch-action: pan-y;
  cursor:crosshair;
}
.stats-chart__bar{
  flex:1 1 0;
  min-width:0;
  display:flex;
  align-items:flex-end;
}
.stats-chart__bar span{
  display:block;
  width:100%;
  min-height:0;
  border-radius:4px 4px 0 0;
  background: var(--stats-bar);
  opacity:0.75;
}
.stats-chart__bar.is-selected span{ background: var(--stats-bar-selected); opacity:1; }
.stats-chart__bar.is-missing span{ opacity:0; }
.stats-chart__axis{
  display:flex;
  justify-content:space-between;
  margin-top:6px;
  font-size:10.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.stats-details{ margin-top:10px; font-size:12px; color: var(--text-dim); }
.stats-details summary{ cursor:pointer; font-weight:700; }
.stats-details table{
  width:100%;
  margin-top:8px;
  border-collapse:collapse;
  font-variant-numeric: tabular-nums;
}
.stats-details th,
.stats-details td{
  padding:5px 0;
  border-bottom:1px solid var(--hairline);
  text-align:left;
  font-weight:400;
}
.stats-details td{ text-align:right; color: var(--text); }

/* listes a barres */
.stats-bars{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.stats-subtitle + .stats-bars{ margin-top:0; }
.stats-bars__row{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap:4px 10px;
  align-items:baseline;
}
.stats-bars__label{
  font-size:13px;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.stats-bars__value{
  font-size:13px;
  font-weight:800;
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}
.stats-bars__value small{
  margin-left:6px;
  font-size:11px;
  font-weight:600;
  color: var(--text-dim);
}
.stats-bars__track{
  grid-column: 1 / -1;
  height:4px;
  border-radius:4px;
  background: rgba(238,243,255,0.07);
  overflow:hidden;
}
.stats-bars__fill{
  display:block;
  height:100%;
  border-radius:4px;
  background: var(--stats-bar);
}
.stats-bars__row.is-failure .stats-bars__label::after{
  content:" ⚠";
  color: var(--stats-warn);
}

/* incidents */
.stats-alerts{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.stats-alerts__item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:13px;
  line-height:1.4;
}
.stats-alerts__item span{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-top:1px;
  border-radius:50%;
  font-size:11px;
  font-weight:900;
  color: var(--paper);
}
.stats-alerts__item--attention span{ background: var(--stats-warn); }
.stats-alerts__item--critique span{ background: var(--stats-crit); }

.stats-empty{
  margin:10px 0 0;
  font-size:13px;
  color: var(--text-dim);
}
.stats-error{
  margin:0;
  padding:16px;
  border-radius:14px;
  background: var(--paper-card);
  border:1px solid rgba(255,112,112,0.55);
  font-size:14px;
  line-height:1.45;
}

@media (prefers-reduced-motion: reduce){
  .stats-live__dot,
  .stats-sheet.is-loading .stats-sheet__refresh svg{ animation:none; }
  .stats-content{ transition:none; }
}