/* Testy wydajności Windows (win-stress).

   Arkusz jest GLOBALNY, nie scoped: wykresy wchodzą do strony jako MarkupString,
   a treść wstawiona w ten sposób nie dostaje atrybutu zakresu i scoped .razor.css
   by jej nie dosięgnął. Tak samo rozwiązane jest porownanie-testow.css.

   Kolor nie jest jedynym nośnikiem: zmiana niesie też znak liczby, a serie
   przed/po mają podpisaną legendę. */

.tw-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: .5rem 0;

    --tw-przed: #8b8f98;
    --tw-po: #2f6fd0;
    --tw-dobrze: #1f9254;
    --tw-zle: #d03b3b;
    --tw-ink: var(--rz-text-color, #2b2b2b);
    --tw-ink-2: var(--rz-text-secondary-color, #6b7280);
    --tw-linia-siatki: var(--rz-base-300, #e3e5e8);
    --tw-tlo: var(--rz-base-100, #fafafa);
    --tw-ramka: var(--rz-base-300, #e3e5e8);
}

.tw-pusto {
    padding: 2rem;
    text-align: center;
    color: var(--rz-text-tertiary-color, #888);
}

/* ── Ostrzeżenie o raportach z błędnej wersji narzędzia ───────────────── */

.tw-alarm {
    padding: .75rem 1rem;
    border-left: 3px solid var(--tw-zle);
    border-radius: 4px;
    background: color-mix(in srgb, var(--tw-zle) 8%, transparent);
    font-size: .85rem;
    line-height: 1.55;
    color: var(--tw-ink);
}

/* ── Porównanie jednego scenariusza ──────────────────────────────────── */

.tw-porownanie,
.tw-lista {
    padding: 1rem 1.15rem;
    border: 1px solid var(--tw-ramka);
    border-radius: 8px;
    background: var(--tw-tlo);
}

.tw-naglowek {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.tw-tytul {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--tw-ink);
}

.tw-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .9rem;
    margin-top: .2rem;
    font-size: .78rem;
    color: var(--tw-ink-2);
}

.tw-profil {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .72rem;
}

.tw-legenda {
    display: flex;
    gap: .9rem;
    font-size: .76rem;
    color: var(--tw-ink-2);
}

.tw-klucz {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.tw-kropka {
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    display: inline-block;
}

.tw-tlo-przed { background: var(--tw-przed); }
.tw-tlo-po { background: var(--tw-po); }

/* ── Kafelki KPI ─────────────────────────────────────────────────────── */

.tw-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .6rem;
    margin-bottom: 1rem;
}

.tw-kafel {
    padding: .6rem .7rem;
    border: 1px solid var(--tw-ramka);
    border-radius: 6px;
    background: var(--rz-base-background-color, #fff);
}

.tw-kafel-etykieta {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--tw-ink-2);
    margin-bottom: .3rem;
}

.tw-kafel-wartosc {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem;
    font-size: .92rem;
    font-weight: 600;
    color: var(--tw-ink);
}

.tw-slabo { color: var(--tw-ink-2); font-weight: 400; }
.tw-strzalka { color: var(--tw-ink-2); }

.tw-kafel-zmiana {
    margin-top: .25rem;
    font-size: .78rem;
    color: var(--tw-ink-2);
}

.tw-lepiej { color: var(--tw-dobrze); font-weight: 600; }
.tw-gorzej { color: var(--tw-zle); font-weight: 600; }

.tw-wniosek {
    padding: .6rem .75rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--tw-po);
    border-radius: 4px;
    background: color-mix(in srgb, var(--tw-po) 6%, transparent);
    font-size: .85rem;
    line-height: 1.5;
    color: var(--tw-ink);
}

/* ── Wykresy ─────────────────────────────────────────────────────────── */

.tw-blok { margin-bottom: 1rem; }

.tw-blok-tytul {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--tw-ink-2);
    margin-bottom: .45rem;
}

.tw-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.tw-siatka {
    stroke: var(--tw-linia-siatki);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.tw-os {
    stroke: var(--tw-ink-2);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.tw-tick,
.tw-podpis-fazy {
    font-size: 9px;
    fill: var(--tw-ink-2);
}

.tw-linia {
    fill: none;
    stroke: var(--tw-po);
    stroke-width: 1.6;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.tw-linia.tw-przed { stroke: var(--tw-przed); }
.tw-linia.tw-po { stroke: var(--tw-po); }

/* Pasy faz: spoczynek i stygnięcie neutralne, obciążenie wyraźniejsze —
   to w nim dzieje się wszystko, co test ma pokazać. */
.tw-faza { fill: transparent; }
.tw-faza-idle { fill: color-mix(in srgb, var(--tw-ink-2) 7%, transparent); }
.tw-faza-load { fill: color-mix(in srgb, var(--tw-po) 7%, transparent); }
.tw-faza-cool { fill: color-mix(in srgb, var(--tw-dobrze) 7%, transparent); }

/* ── Lista pojedynczych przebiegów ───────────────────────────────────── */

.tw-przebieg {
    padding: .8rem 0;
    border-top: 1px solid var(--tw-ramka);
}

.tw-przebieg:first-of-type { border-top: 0; }

.tw-przebieg-niewazny { opacity: .72; }

.tw-przebieg-naglowek {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1rem;
    align-items: baseline;
    justify-content: space-between;
}

.tw-przebieg-tytul {
    font-weight: 600;
    color: var(--tw-ink);
}

.tw-znacznik {
    margin-left: .5rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--rz-base-200, #f0f0f0);
    font-size: .72rem;
    color: var(--tw-ink-2);
}

.tw-przebieg-data {
    font-size: .78rem;
    color: var(--tw-ink-2);
}

.tw-uwaga {
    margin-top: .4rem;
    font-size: .8rem;
    color: var(--tw-zle);
}

.tw-werdykt {
    margin: .5rem 0 .4rem;
    padding-left: 1.1rem;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--tw-ink);
}

.tw-liczby {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .25rem .9rem;
    margin: .5rem 0 .75rem;
    font-size: .82rem;
}

.tw-liczba {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .15rem 0;
}

.tw-liczba-etykieta { color: var(--tw-ink-2); }
.tw-liczba-wartosc { font-weight: 600; color: var(--tw-ink); }