/* OI - Tabele we wpisach (BACKLOG #180, 21.10.2026). Działa tylko na tabelach z klasą .oi-t,
   którą nadaje oi-tabele.js; bez JS tabela ma wygląd motywu. Kolory: turkus #1B9C85 (seria 1),
   bursztyn #B57A00 (seria 2, od 22.10.2026 zamiast #EDA100 o kontraście 2,17:1), niebieski #3E63DD, śliwka #B4479B,
   tekst #0F172A, tekst pomocniczy #475569/#64748B (styl-wizualny.md). Paleta sprawdzona walidatorem skilla dataviz. */

.oi-t-blok{margin:24px 0 28px;display:flex;flex-direction:column;gap:10px}
.oi-t-pasek{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.oi-t-tytul{font-size:15px;font-weight:600;color:#0F172A;line-height:1.4}
.oi-t-seg{display:inline-flex;border:1px solid #CBD5E1;border-radius:999px;padding:3px;gap:2px;background:#FFFFFF}
.oi-t-seg button{font:inherit;font-size:14px;font-weight:500;line-height:1;letter-spacing:normal;text-transform:none;border:0;background:transparent;color:#475569;min-height:36px;padding:0 16px;border-radius:999px;cursor:pointer;box-shadow:none}
.oi-t-seg button:hover{background:#F1F5F9;color:#0F172A}
.oi-t-seg button[aria-pressed="true"]:hover{background:#0F172A;color:#FFFFFF}
.oi-t-legenda{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:#475569}
.oi-t-legenda li{display:flex;align-items:center;gap:7px;margin:0}
.oi-t-kropka{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.oi-t-kreska{width:16px;height:3px;border-radius:2px;flex:0 0 auto}
.oi-t-seg button[aria-pressed="true"]{background:#0F172A;color:#FFFFFF}
.oi-t-seg button:focus-visible{outline:2px solid #1B9C85;outline-offset:2px}

.oi-t-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.entry-content table.oi-t{border-collapse:collapse;width:100%;margin:0;border:0;font-size:15px;line-height:1.45;color:#0F172A;font-variant-numeric:tabular-nums;background:#FFFFFF}
.entry-content table.oi-t th,.entry-content table.oi-t td{background:#FFFFFF;border:0;border-bottom:1px solid #E2E8F0;padding:11px 12px;text-align:left;vertical-align:top}
.entry-content table.oi-t th{border-bottom:2px solid #0F172A;color:#475569;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;vertical-align:bottom;padding:0}
.entry-content table.oi-t th .oi-t-sort{all:unset;box-sizing:border-box;display:flex;align-items:flex-end;gap:4px;width:100%;min-height:44px;padding:8px 12px;cursor:pointer;color:inherit}
.entry-content table.oi-t th .oi-t-sort:hover{color:#0F172A}
.entry-content table.oi-t th .oi-t-sort:focus-visible{outline:2px solid #1B9C85;outline-offset:-2px}
.entry-content table.oi-t th .oi-t-str{font-size:11px;opacity:.55}
.entry-content table.oi-t th.oi-t-n .oi-t-sort{justify-content:flex-end;text-align:right}
.entry-content table.oi-t td.oi-t-n{text-align:right}
.entry-content table.oi-t tbody tr:hover td{background:#F8FAFC}
.entry-content table.oi-t td:first-child{font-weight:500}
.entry-content table.oi-t.oi-t-krotka1 td:first-child{min-width:9.6em}
.entry-content table.oi-t td.oi-t-brak{color:#64748B;font-size:13px}
.entry-content table.oi-t th{word-break:normal;overflow-wrap:normal;hyphens:manual}
.oi-t-legenda[hidden],.oi-t-zrodlo[hidden],.oi-t-wykres[hidden]{display:none}
.entry-content table.oi-t .oi-t-w{white-space:nowrap;font-weight:600}
.entry-content table.oi-t .oi-t-zm{display:block;font-size:13px;font-weight:500;color:#64748B}
.entry-content table.oi-t .oi-t-zm.oi-t-up{color:#0E6E5C}
.entry-content table.oi-t .oi-t-zm.oi-t-dn{color:#B45309}
.entry-content table.oi-t .oi-t-bar{display:block;height:6px;border-radius:3px;margin:6px 0 0 auto;background:#1B9C85;max-width:100%}
.entry-content table.oi-t .oi-t-bar.oi-t-s2{background:#B57A00}
.entry-content table.oi-t .oi-t-bar.oi-t-s3{background:#3E63DD}
.entry-content table.oi-t .oi-t-bar.oi-t-s4{background:#B4479B}
/* Wartość ujemna: kreskowanie (nie tylko kolor), bo pomarańcz jest bliski bursztynowi serii 2 */
.entry-content table.oi-t .oi-t-bar.oi-t-ujemny{background:repeating-linear-gradient(135deg,#B45309 0 3px,#F8D9BF 3px 5px)}

.oi-t-zrodlo,.oi-t-uwaga{font-size:13px;color:#64748B;line-height:1.5;margin:0}
.oi-t-zrodlo{border-top:1px solid #E2E8F0;padding-top:8px}
.oi-t-zrodlo a{color:#475569}
.oi-t-podtytul{font-size:14px;color:#475569;margin:0}
/* Motyw daje akapitom w treści margines 1,6em (.entry-content p), a w bloku tabeli odstępy robi tylko gap */
.entry-content .oi-t-blok p.oi-t-podtytul,.entry-content .oi-t-blok p.oi-t-zrodlo,.entry-content .oi-t-blok p.oi-t-uwaga,.entry-content .oi-t-blok p.oi-t-podpowiedz,.entry-content .oi-t-karta p{margin:0}
.entry-content .oi-t-karta p.oi-t-karta-zr{margin-top:8px}
.oi-t-podtytul[hidden],.oi-t-uwaga[hidden]{display:none}
.oi-t-legenda .oi-t-kropka{border-radius:2px;width:12px;height:12px}
.oi-t-wykres{height:360px;width:100%}
.oi-t-wykres.oi-t-z-panelem{height:480px}

/* Karta przy newsie (makieta C): liczba nagłówkowa, zmiana r/r, mini-wykres z tej samej tabeli */
.oi-t-karta{background:#F1F5F9;border-left:4px solid #1B9C85;border-radius:10px;padding:14px 16px}
.oi-t-karta-gora{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:4px 16px}
.oi-t-karta p{margin:0}
.oi-t-karta .oi-t-karta-et{font-size:13px;font-weight:600;color:#475569}
.oi-t-karta .oi-t-karta-l{font-size:28px;font-weight:700;line-height:1.15;color:#0F172A;white-space:nowrap;font-variant-numeric:tabular-nums}
.oi-t-karta-zm{font-size:14px;font-weight:600;color:#0E5E50;background:#DCFCE7;border-radius:999px;padding:2px 10px;white-space:nowrap}
.oi-t-karta-zm.oi-t-karta-dn{color:#8A3B06;background:#FDE8D7}
.oi-t-spark{display:flex;align-items:stretch;gap:10px;height:112px;margin:12px 0 0}
.oi-t-spark-k{flex:1 1 0;max-width:72px;display:flex;flex-direction:column;min-width:0}
.oi-t-spark-pole{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;min-height:0}
.oi-t-spark-w{font-size:12px;font-weight:600;color:#0F172A;text-align:center;white-space:nowrap;line-height:1.3;font-variant-numeric:tabular-nums}
.oi-t-spark-s{display:block;background:#CBD5E1;border-radius:3px 3px 0 0;min-height:4px}
.oi-t-spark-ost .oi-t-spark-s{background:#1B9C85}
.oi-t-spark-s.oi-t-spark-ujemny{background:repeating-linear-gradient(135deg,#B45309 0 3px,#F8D9BF 3px 5px)}
.oi-t-spark-o{font-size:11px;color:#475569;text-align:center;border-top:1px solid #94A3B8;padding-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oi-t-karta .oi-t-karta-zr{font-size:12px;color:#64748B;margin-top:8px;line-height:1.5}
.oi-t-ladowanie{font-size:14px;color:#64748B;padding:24px 0}

/* Telefon: pierwsza kolumna przyklejona przy przewijaniu w bok */
.entry-content table.oi-t.oi-t-szeroka td:first-child,.entry-content table.oi-t.oi-t-szeroka th:first-child{position:sticky;left:0;z-index:1;box-shadow:1px 0 0 #E2E8F0}
.oi-t-podpowiedz{display:none;font-size:13px;color:#64748B}

@media (max-width:600px){
	.oi-t-wykres{height:300px}
	.oi-t-wykres.oi-t-z-panelem{height:430px}
	.oi-t-karta .oi-t-karta-l{font-size:24px}
	.oi-t-spark{gap:6px}
	.oi-t-szeroka-blok .oi-t-podpowiedz{display:block}
	.entry-content table.oi-t.oi-t-szeroka{width:max-content;min-width:100%}
	/* Karty: każdy wiersz osobno, etykieta z nagłówka kolumny (data-l) */
	.entry-content table.oi-t.oi-t-karty,.entry-content table.oi-t.oi-t-karty tbody{display:block}
	.entry-content table.oi-t.oi-t-karty thead{display:none}
	.entry-content table.oi-t.oi-t-karty tr{display:block;border:1px solid #E2E8F0;border-radius:10px;padding:4px 14px 8px;margin:0 0 10px}
	.entry-content table.oi-t.oi-t-karty td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;border-bottom:1px solid #F1F5F9;padding:8px 0;text-align:right}
	.entry-content table.oi-t.oi-t-karty td:last-child{border-bottom:0}
	.entry-content table.oi-t.oi-t-karty td::before{content:attr(data-l);flex:0 0 42%;text-align:left;font-size:13px;font-weight:500;color:#475569}
	.entry-content table.oi-t.oi-t-karty td:first-child{display:block;font-size:15px;font-weight:600;text-align:left;border-bottom:2px solid #0F172A;padding:8px 0}
	.entry-content table.oi-t.oi-t-karty td:first-child::before{content:none}
	.entry-content table.oi-t.oi-t-karty td>.oi-t-tresc{flex:1 1 0;text-align:right;min-width:0}
	.entry-content table.oi-t.oi-t-karty .oi-t-bar{width:auto}
	.entry-content table.oi-t.oi-t-karty tbody tr:hover td{background:transparent}
}
@media (prefers-reduced-motion:reduce){.oi-t-seg button{transition:none}}