/* 1.2.0 — Page Vitesse : Core Web Vitals (terrain), tableau des gabarits
   (labo), courbes SVG, liste des diagnostics de l'audit technique. Chargée
   après admin.css (Essiow_Admin::enqueue_assets → assets/css/pages/speed.css). */

/* ── Core Web Vitals (onglet Field) ───────────────────────────────────── */
.essiow-sp-vitals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--essiow-space-3); }
.essiow-sp-vital { display: flex; flex-direction: column; gap: 4px; padding: var(--essiow-space-3) var(--essiow-space-4); border: 1px solid var(--essiow-border); border-radius: var(--essiow-radius-lg); background: var(--essiow-surface-2); }
.essiow-sp-vital__label { font-size: var(--essiow-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--essiow-text-3); }
.essiow-sp-vital__value { font-size: var(--essiow-fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--essiow-text); }
.essiow-sp-vital__bar { position: relative; display: block; height: 6px; margin-top: 2px; border-radius: var(--essiow-radius-pill); background: var(--essiow-surface-3); }
.essiow-sp-vital__fill { display: block; height: 100%; width: 100%; border-radius: var(--essiow-radius-pill); background: var(--essiow-border-strong); }
.essiow-sp-vital__goal { position: absolute; top: -2px; bottom: -2px; width: 2px; border-radius: 1px; background: var(--essiow-text-3); }
.essiow-sp-vital__goal-label { font-size: 11px; color: var(--essiow-text-3); }
.essiow-sp-vital__goal-label::before { content: "≤ "; }
.essiow-sp-vital--good .essiow-sp-vital__value { color: var(--essiow-success-text); }
.essiow-sp-vital--good .essiow-sp-vital__fill { background: var(--essiow-success); }
.essiow-sp-vital--mid .essiow-sp-vital__value { color: var(--essiow-warning-text); }
.essiow-sp-vital--mid .essiow-sp-vital__fill { background: var(--essiow-warning); }
.essiow-sp-vital--low .essiow-sp-vital__value { color: var(--essiow-danger-text); }
.essiow-sp-vital--low .essiow-sp-vital__fill { background: var(--essiow-danger); }

/* ── Courbes ──────────────────────────────────────────────────────────── */
.essiow-sp-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--essiow-space-4); }
.essiow-sp-chart { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.essiow-sp-chart__title { font-size: var(--essiow-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--essiow-text-3); display: flex; align-items: baseline; gap: 6px; }
.essiow-sp-chart__title .essiow-num { font-size: var(--essiow-fs-md); font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--essiow-text); }
.essiow-sp-chart__foot { font-size: 11px; color: var(--essiow-text-3); display: flex; justify-content: space-between; }
.essiow-sp-spark { width: 100%; height: 60px; display: block; overflow: visible; }
.essiow-sp-spark__line { fill: none; stroke: var(--essiow-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.essiow-sp-spark__goal { stroke: var(--essiow-border-strong); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.essiow-sp-spark--good .essiow-sp-spark__line { stroke: var(--essiow-success); }
.essiow-sp-spark--mid .essiow-sp-spark__line { stroke: var(--essiow-warning); }
.essiow-sp-spark--low .essiow-sp-spark__line { stroke: var(--essiow-danger); }

/* ── Tableau des gabarits (onglet Lab) ────────────────────────────────── */
#essiow-sp-lab-table { table-layout: fixed; }
/* Tableau court (un gabarit par ligne) : pas d'en-tête collant. */
#essiow-sp-lab-table thead th { position: static; }
#essiow-sp-lab-table th:first-child, #essiow-sp-lab-table td:first-child { width: 34%; }
#essiow-sp-lab-table td:last-child { width: 130px; }
#essiow-sp-lab-table .essiow-td-sub { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#essiow-sp-lab-table tr.is-running td { background: var(--essiow-primary-soft); }
.essiow-sp-m--good { color: var(--essiow-success-text); }
.essiow-sp-m--mid  { color: var(--essiow-warning-text); }
.essiow-sp-m--low  { color: var(--essiow-danger-text); }

/* ── Opportunités ─────────────────────────────────────────────────────── */
.essiow-sp-opps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--essiow-space-2); }
.essiow-sp-opp { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--essiow-space-3); padding: var(--essiow-space-2) 0; border-bottom: 1px solid var(--essiow-border); }
.essiow-sp-opp:last-child { border-bottom: 0; }
.essiow-sp-opp__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.essiow-sp-opp__body strong { font-weight: 600; }

/* ── Audit technique ──────────────────────────────────────────────────── */
.essiow-sp-group + .essiow-sp-group { margin-top: var(--essiow-space-4); }
.essiow-sp-items { list-style: none; margin: 0; padding: 0; }
.essiow-sp-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: start; gap: var(--essiow-space-3); padding: var(--essiow-space-3) var(--essiow-space-5); border-top: 1px solid var(--essiow-border); }
.essiow-sp-item:first-child { border-top: 0; }
.essiow-sp-item.is-running { background: var(--essiow-primary-soft); }
.essiow-sp-item__icon { display: flex; align-items: center; justify-content: center; padding-top: 2px; }
.essiow-sp-item--ok .essiow-sp-item__icon { color: var(--essiow-success); }
.essiow-sp-item--warn .essiow-sp-item__icon { color: var(--essiow-warning); }
.essiow-sp-item--crit .essiow-sp-item__icon { color: var(--essiow-danger); }
.essiow-sp-item--unknown .essiow-sp-item__icon { color: var(--essiow-text-3); }
.essiow-sp-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.essiow-sp-item__head { display: flex; align-items: center; gap: 4px; }
.essiow-sp-item__head strong { font-weight: 600; }
.essiow-sp-item__value { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--essiow-text-2); white-space: nowrap; padding-top: 1px; }
.essiow-sp-item--crit .essiow-sp-item__value { color: var(--essiow-danger-text); }
.essiow-sp-item--warn .essiow-sp-item__value { color: var(--essiow-warning-text); }
.essiow-sp-item__actions { display: flex; align-items: center; gap: var(--essiow-space-2); flex-wrap: nowrap; }
.essiow-sp-item__rows { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.essiow-sp-row { display: flex; align-items: center; gap: 6px; font-size: var(--essiow-fs-xs); color: var(--essiow-text-2); font-family: SFMono-Regular, Menlo, Consolas, monospace; }
.essiow-sp-tip { min-width: 24px; width: 24px; height: 24px; color: var(--essiow-text-3); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media screen and (max-width: 1024px) {
    .essiow-sp-item { grid-template-columns: 24px minmax(0, 1fr) auto; }
    .essiow-sp-item__actions { grid-column: 2 / -1; margin-top: 6px; flex-wrap: wrap; }
}
@media screen and (max-width: 782px) {
    .essiow-sp-item { padding-left: var(--essiow-space-4); padding-right: var(--essiow-space-4); }
    .essiow-sp-vitals { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
    #essiow-sp-lab-table { min-width: 720px; }
}