/* ============ 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;
	--limonka: #85c226;
	--pasek: #164231;
	--pasek-tekst: #ffffff;
	--pasek-tekst-slaby: #a9c6b6;
	--ramka: #dde4dd;
	--wiersz-parzysty: #f6f9f5;
	--naglowek-grupy: #eef4ee;
	--odwolane: #a92e24;
	--odwolane-tlo: #f9e9e7;
	--cien: 0 1px 3px rgba(22, 66, 49, .1);
}
[data-motyw="ciemny"] {
	--tlo: #101713;
	--karta: #18211b;
	--tekst: #e4ebe5;
	--tekst-slaby: #96a89b;
	--akcent: #58c189;
	--limonka: #8fd12f;
	--pasek: #0d2a1e;
	--pasek-tekst: #eef5ef;
	--pasek-tekst-slaby: #7fa38f;
	--ramka: #29352c;
	--wiersz-parzysty: #1c261f;
	--naglowek-grupy: #202b23;
	--odwolane: #e2867e;
	--odwolane-tlo: #372220;
	--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.45;
}

/* ============ 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; }
#wyborDaty {
	padding: .45rem .65rem; font-size: .88rem; max-width: 16rem;
	color: var(--pasek-tekst); background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .22); border-radius: 4px;
}
#wyborDaty option { color: var(--tekst); background: var(--karta); }
#motyw {
	width: 2.25rem; height: 2.25rem; font-size: 1.05rem; cursor: pointer;
	color: var(--pasek-tekst); background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .22); border-radius: 4px;
}
#motyw:hover, #wyborDaty:hover { background: rgba(255, 255, 255, .14); }

.widoki {
	display: flex; gap: .25rem; padding: 0 1.25rem;
	background: var(--karta); border-bottom: 1px solid var(--ramka);
}
.widoki button {
	padding: .65rem 1.1rem; font-size: .88rem; font-weight: 600; cursor: pointer;
	color: var(--tekst-slaby); background: transparent;
	border: 0; border-bottom: 3px solid transparent;
	text-transform: uppercase; letter-spacing: .05em;
}
.widoki button:hover { color: var(--tekst); }
.widoki button.aktywny { color: var(--akcent); border-bottom-color: var(--limonka); }

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

.naglowekDnia {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.25rem;
	margin: 0 0 .5rem; padding-bottom: .75rem; border-bottom: 3px solid var(--limonka);
}
.naglowekDnia h1 { margin: 0; font-size: 1.35rem; font-weight: 600; }
.naglowekDnia .aktualizacja { margin-left: auto; font-size: .78rem; color: var(--tekst-slaby); }
.nieobecniDnia { margin: .35rem 0 1.25rem; font-size: .9rem; color: var(--tekst-slaby); }
.nieobecniDnia b { color: var(--tekst); font-weight: 600; }

.brak {
	margin: 3.5rem auto; text-align: center; font-size: 1.05rem; font-weight: 600;
	color: var(--tekst-slaby);
}

.grupa {
	background: var(--karta); border: 1px solid var(--ramka); border-radius: 6px;
	margin-bottom: 1rem; overflow: hidden; box-shadow: var(--cien);
}
.grupa > h2 {
	margin: 0; padding: .55rem .9rem; font-size: .92rem; font-weight: 600;
	background: var(--naglowek-grupy); border-bottom: 1px solid var(--ramka);
	border-left: 3px solid var(--limonka);
}
.grupa.grupaOdwolane > h2 { color: var(--odwolane); border-left-color: var(--odwolane); }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .5rem .9rem; text-align: left; border-bottom: 1px solid var(--ramka); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--wiersz-parzysty); }
th {
	font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
	color: var(--tekst-slaby); font-weight: 700;
}
td small { display: block; color: var(--tekst-slaby); font-size: .8rem; }
.odwolane {
	display: inline-block; padding: .1rem .5rem; border-radius: 3px;
	font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	color: var(--odwolane); background: var(--odwolane-tlo);
}

/* ============ telefony: tabela -> karty ============ */
@media (max-width: 640px) {
	.pasekGorny { justify-content: center; text-align: center; }
	.narzedzia { margin-left: 0; }
	.widoki { justify-content: center; }
	.naglowekDnia .aktualizacja { margin-left: 0; }

	table, tbody, tr, td { display: block; width: 100%; }
	thead { display: none; }
	tr { border-bottom: 1px solid var(--ramka); padding: .4rem 0; }
	tr:last-child { border-bottom: 0; }
	td { border: 0; padding: .15rem .9rem; text-align: left; }
	td:empty { display: none; }
	td::before {
		content: attr(data-etykieta) ": ";
		font-weight: 700; color: var(--tekst-slaby); font-size: .78rem;
	}
	td[data-etykieta=""]::before { content: none; }
}