/* ============ motywy ============ */
/* Paleta zgodna ze stroną zst.bytom.pl:
   butelkowa zieleń #164231, limonka #85c226, font Roboto */
:root {
	--tlo: #f0f3f0;
	--karta: #ffffff;
	--tekst: #1a231d;
	--tekst-slaby: #5d6b61;
	--akcent: #1c6b43;
	--akcent-tlo: #e9f2ea;
	--limonka: #85c226;
	--pasek: #164231;
	--pasek-tekst: #ffffff;
	--pasek-tekst-slaby: #a9c6b6;
	--ramka: #dde4dd;
	--wiersz-parzysty: #f6f9f5;
	--naglowek-grupy: #eef4ee;
	--dzis-tlo: #eef7e2;
	--cien: 0 1px 3px rgba(22, 66, 49, .1);
}
[data-motyw="ciemny"] {
	--tlo: #101713;
	--karta: #18211b;
	--tekst: #e4ebe5;
	--tekst-slaby: #96a89b;
	--akcent: #58c189;
	--akcent-tlo: #1c3226;
	--limonka: #8fd12f;
	--pasek: #0d2a1e;
	--pasek-tekst: #eef5ef;
	--pasek-tekst-slaby: #7fa38f;
	--ramka: #29352c;
	--wiersz-parzysty: #1c261f;
	--naglowek-grupy: #202b23;
	--dzis-tlo: #22331f;
	--cien: 0 1px 3px rgba(0, 0, 0, .4);
}

/* ============ szkielet ============ */
* { box-sizing: border-box; }
html { color-scheme: light; }
[data-motyw="ciemny"] { color-scheme: dark; }
body {
	margin: 0; min-height: 100vh; display: flex; flex-direction: column;
	background: var(--tlo); color: var(--tekst);
	font-family: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif;
	font-size: 15px; line-height: 1.4;
}

/* ============ nagłówek ============ */
.naglowek { position: sticky; top: 0; z-index: 10; box-shadow: var(--cien); }

.pasekGorny {
	display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
	padding: .7rem 1.25rem; background: var(--pasek); color: var(--pasek-tekst);
	border-bottom: 4px solid var(--limonka); /* limonkowy pas jak na zst.bytom.pl */
}
.logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.logo img { width: 38px; height: 38px; }
.logoTekst { display: flex; flex-direction: column; line-height: 1.2; }
.logoTekst strong { font-size: 1.15rem; letter-spacing: .02em; }
.logoTekst small { font-size: .74rem; color: var(--pasek-tekst-slaby); text-transform: uppercase; letter-spacing: .08em; }

.narzedzia { display: flex; gap: .5rem; align-items: center; margin-left: auto; }
.szukajBox { position: relative; }
#szukaj {
	width: 17rem; max-width: 60vw; padding: .45rem .65rem; font-size: .88rem;
	color: var(--pasek-tekst); background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .22); border-radius: 4px;
}
#szukaj::placeholder { color: var(--pasek-tekst-slaby); }
#podpowiedzi {
	position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
	max-height: 19rem; overflow-y: auto;
	background: var(--karta); color: var(--tekst);
	border: 1px solid var(--ramka); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
#podpowiedzi button {
	display: flex; justify-content: space-between; gap: 1rem; width: 100%;
	padding: .5rem .75rem; font-size: .88rem; text-align: left; cursor: pointer;
	color: var(--tekst); background: transparent; border: 0; border-bottom: 1px solid var(--ramka);
}
#podpowiedzi button:last-child { border-bottom: 0; }
#podpowiedzi button:hover, #podpowiedzi button.podswietlona { background: var(--akcent-tlo); }
#podpowiedzi .typEncji { font-size: .72rem; color: var(--tekst-slaby); text-transform: uppercase; letter-spacing: .05em; align-self: center; }
#motyw {
	width: 2.25rem; height: 2.25rem; font-size: 1.05rem; cursor: pointer; flex-shrink: 0;
	color: var(--pasek-tekst); background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .22); border-radius: 4px;
}
#motyw:hover, #szukaj:hover { background: rgba(255, 255, 255, .14); }

/* ============ treść ============ */
main { flex: 1; width: min(75rem, 100%); margin: 0 auto; padding: 1.5rem 1.25rem 2.5rem; }
.info { text-align: center; color: var(--tekst-slaby); }

.naglowekPlanu {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.25rem;
	margin: 0 0 1rem; padding-bottom: .75rem; border-bottom: 3px solid var(--limonka);
}
.naglowekPlanu h1 { margin: 0; font-size: 1.35rem; font-weight: 600; }
.naglowekPlanu .typ { font-size: .85rem; color: var(--tekst-slaby); text-transform: uppercase; letter-spacing: .06em; }
.naglowekPlanu .aktualizacja { margin-left: auto; font-size: .78rem; color: var(--tekst-slaby); }

.siatkaBox {
	background: var(--karta); border: 1px solid var(--ramka); border-radius: 6px;
	box-shadow: var(--cien); overflow-x: auto;
}
table.siatka { width: 100%; border-collapse: collapse; font-size: .85rem; }
.siatka th, .siatka td { border: 1px solid var(--ramka); padding: .4rem .5rem; vertical-align: top; }
.siatka thead th {
	background: var(--naglowek-grupy); font-size: .74rem; text-transform: uppercase;
	letter-spacing: .07em; color: var(--tekst-slaby); padding: .55rem .5rem;
}
.siatka thead th.dzis { background: var(--pasek); color: #ffffff; }
.siatka thead th.dzis .znacznikDzis {
	display: block; margin-top: .1rem; font-size: .6rem; font-weight: 700;
	color: var(--limonka); letter-spacing: .18em; text-transform: uppercase;
}
.siatka td.godzina, .siatka th.godzina { width: 5.5rem; min-width: 5.5rem; }
.siatka td.godzina {
	background: var(--naglowek-grupy); text-align: center; white-space: nowrap;
	color: var(--tekst-slaby); font-size: .78rem;
}
.siatka td.godzina b { display: block; font-size: 1rem; color: var(--tekst); }
.siatka tbody tr:nth-child(even) td:not(.godzina):not(.dzis) { background: var(--wiersz-parzysty); }
.siatka td.dzis { background: var(--dzis-tlo); }

.zajecie { padding: .1rem 0; }
.zajecie + .zajecie { border-top: 1px dashed var(--ramka); margin-top: .25rem; padding-top: .35rem; }
.zajecie .przedmiot { font-weight: 600; display: block; }
.zajecie .szczegoly { display: block; color: var(--tekst-slaby); font-size: .78rem; }

.siatka td.teraz:not(.godzina) {
	outline: 2px solid var(--limonka); outline-offset: -2px;
	background: var(--akcent-tlo) !important;
}
.siatka td.teraz:not(.godzina)::before {
	content: "teraz"; display: inline-block; margin-bottom: .25rem;
	padding: .05rem .45rem; border-radius: 999px;
	font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: #163a17; background: var(--limonka);
}
.siatka td.godzina.teraz {
	box-shadow: inset 4px 0 0 var(--limonka);
	color: var(--akcent); font-weight: 600;
}
.siatka td.godzina.teraz b { color: var(--akcent); }

/* ============ telefony ============ */
.dniMobilne { display: flex; gap: .4rem; margin: 0 0 .8rem; }
.dniMobilne button {
	flex: 1; padding: .5rem 0; font-size: .88rem; font-weight: 600; cursor: pointer;
	color: var(--tekst-slaby); background: var(--karta);
	border: 1px solid var(--ramka); border-radius: 6px;
}
.dniMobilne button.dzisDzien:not(.aktywny) { color: var(--akcent); border-color: var(--limonka); }
.dniMobilne button.aktywny { color: #fff; background: var(--pasek); border-color: var(--pasek); }

@media (max-width: 900px) {
	.pasekGorny { justify-content: center; text-align: center; }
	.narzedzia { margin-left: 0; flex-wrap: wrap; justify-content: center; }
	.naglowekPlanu .aktualizacja { margin-left: 0; }
	.siatka { font-size: .78rem; min-width: 640px; }
}
@media (max-width: 640px) {
	/* jeden dzień naraz — tabela mieści się bez przewijania */
	.siatka { min-width: 0; font-size: .85rem; }
}

/* ============ druk ============ */
@media print {
	.naglowek, #motyw { display: none !important; }
	body { background: #fff; color: #000; font-size: 11px; }
	main { padding: 0; width: 100%; }
	.siatkaBox { border: 0; box-shadow: none; overflow: visible; }
	.siatka th, .siatka td { border-color: #999; }
	.siatka td.teraz:not(.godzina) { outline: none; background: transparent !important; }
	.siatka td.teraz:not(.godzina)::before { display: none; }
	.siatka td.godzina.teraz { box-shadow: none; }
	.siatka td.dzis { background: transparent; }
	.siatka thead th.dzis { background: transparent; color: #000; }
	.naglowekPlanu { border-bottom-color: #000; }
}