/* Accueil (vue d'ensemble des sociétés choisies), façon iOS : widgets, actions rapides, graphiques sobres, listes groupées. */

/* Widgets (quatre au plus) */
.g-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .g-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.g-kpi .s { font-size: 13px; color: var(--muted); letter-spacing: 0; margin-top: 2px; }
.g-kpi.bad .v { color: var(--red); }
.g-up { color: var(--green); font-weight: 600; } .g-down { color: var(--red); font-weight: 600; }

/* Deux colonnes sur grand écran, une sur téléphone */
.g-dash { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.g-dash > .col { gap: 16px; min-width: 0; }
@media (max-width: 1199px) { .g-dash { grid-template-columns: minmax(0, 1fr); } }
.g-sh { margin: 0 16px 6px; gap: 8px; }
.g-sh .section-title { margin: 0; }
.g-act { font-size: 15px; }


.ctip { position: absolute; z-index: 5; min-width: 190px; padding: 10px 12px; border-radius: 14px; background: var(--material); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 6px; font-size: 13px; pointer-events: none; }
.ctip .tt { border-top: .5px solid var(--line-2); padding-top: 6px; }
.ctip[hidden] { display: none; }

/* Repères encore utilisés par d'autres écrans (Clients, Stands) — à retirer quand ils seront convertis. */
.late-t { color: var(--red) !important; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; flex: 1; justify-content: flex-end; font-size: 12px; font-weight: 500; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; } .legend i { width: 10px; height: 10px; border-radius: 3px; }
.gstat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--surface); }
.gstat .gi { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--fill); color: var(--muted); flex: none; }
.gstat .v { font-family: var(--rounded); font-size: 22px; font-weight: 700; line-height: 1; } .gstat .l { font-size: 13px; color: var(--muted); margin-top: 3px; }
.gstat.red .gi { background: var(--red-soft); color: var(--red); } .gstat.red .v { color: var(--red); }
.gstat.accent .gi { background: var(--accent-soft); color: var(--accent-text); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.pill.ok { color: var(--green); } .pill.ok i { background: var(--green); }
.pill.warn { color: var(--orange); } .pill.warn i { background: var(--orange); }
.pill.off i { background: var(--orange); }

/* ---------- Accueil : vue d'ensemble (views/home.js) ---------- */
.g-kpi .v { font-family: var(--rounded); font-variant-numeric: normal; }
.g-kpi .s b { font-weight: 600; white-space: nowrap; }
/* Actions rapides : une rangée de tuiles (PC), 4 par ligne (téléphone), comme le Centre de contrôle. */
.qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; }
.qa-b { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; min-height: 92px; border-radius: var(--radius-lg); background: var(--surface); text-align: left; transition: transform .2s var(--spring), background .15s; }
.qa-b:active { transform: scale(.96); background: var(--pressed); }
@media (hover: hover) { .qa-b:hover { background: color-mix(in srgb, var(--surface) 94%, var(--text)); } }
.qa-i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--c); color: #fff; }
.qa-i svg.i { width: 20px; height: 20px; stroke-width: 2; }
.qa-l { font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.qa-s { font-size: 12px; color: var(--muted); margin-top: -8px; }
@media (max-width: 640px) {
  .qa { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .qa-b { align-items: center; text-align: center; padding: 10px 4px; min-height: 0; gap: 6px; background: transparent; }
  .qa-i { width: 52px; height: 52px; border-radius: 14px; }
  .qa-i svg.i { width: 26px; height: 26px; }
  .qa-l { font-size: 12px; font-weight: 500; }
  .qa-s { margin-top: -4px; }
}
/* Graphiques */
.hc-card { padding: 14px 12px 12px; }
.hc-head { display: flex; align-items: baseline; gap: 10px; padding: 0 4px 6px; }
.hc-big { font-family: var(--rounded); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.hc-box { position: relative; width: 100%; min-height: 120px; touch-action: pan-y; }
.hc { display: block; }
.hc .grid { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.hc .ax { fill: var(--muted); font: 400 11px var(--font); letter-spacing: 0; }
.hc .lbl { fill: var(--text); font: 600 12px var(--font); letter-spacing: 0; }
.hc .xh { stroke: var(--line-2); stroke-width: 1; }
.hc .hit { cursor: crosshair; }
.hc .col:hover { fill: var(--hover); }
.hc-tip { min-width: 170px; }
.hc-tk { display: inline-flex; align-items: center; gap: 6px; }
.hc-tk i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.hc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; padding: 8px 4px 0; font-size: 12px; font-weight: 500; color: var(--muted); }
.hc-legend span { display: inline-flex; align-items: center; gap: 6px; } .hc-legend i { width: 10px; height: 10px; border-radius: 3px; }
.hc-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 16px; color: var(--muted); font-size: 15px; }
.hc-empty svg.i { width: 36px; height: 36px; color: var(--faint); stroke-width: 1.4; }
/* Par société : barres horizontales (épaisseur 8 px, bout arrondi, base carrée) */
.hb { padding: 4px 0; }
.hb-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; text-align: left; transition: background .15s; }
.hb-row:active { background: var(--pressed); }
@media (hover: hover) { .hb-row:hover { background: var(--hover); } }
.hb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.hb-name { font-size: 15px; font-weight: 500; }
.hb-val { font-size: 15px; font-weight: 600; }
.hb-track { height: 8px; border-radius: 0 4px 4px 0; background: var(--fill); overflow: hidden; }
.hb-track i { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.hb-sub { margin-top: -1px; }
/* Listes de l'accueil */
.hd-v { font-size: 17px; font-weight: 600; flex: none; }
.hd-rank { width: 16px; flex: none; text-align: center; color: var(--muted); font-size: 15px; }
.list > .item.hd-top { --sep-left: 92px; }
.hd-lv { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--gray); vertical-align: 1px; }
.hd-lv.alert { background: var(--red); } .hd-lv.warn { background: var(--orange); } .hd-lv.info { background: var(--blue); }
.hd-foot { text-align: center; padding: 4px 8px 0; }
/* Une colonne (téléphone, iPad portrait) : ce qui demande une action d'abord, puis les graphiques. */
@media (max-width: 1199px) {
  .g-dash.hd { display: flex; flex-direction: column; gap: 16px; }
  .g-dash.hd > .col { display: contents; }
  .hd .o-todo { order: 1; } .hd .o-trend { order: 2; } .hd .o-biz { order: 3; } .hd .o-hours { order: 4; } .hd .o-fig { order: 5; } .hd .o-top { order: 6; } .hd .o-foot { order: 7; }
}
.g-dash.hd .sect { min-width: 0; max-width: 100%; }
.hd-top .grow > .small { display: flex; align-items: center; gap: 6px; min-width: 0; }
@media (max-width: 640px) { .g-kpi .s.ellipsis { white-space: normal; } }