/* ============================================================
   egzaminylotnicze.pl — tryb nocny i przełącznik dzień/noc
   (logika: app/includes/tresci/theme.php, assets/js/theme.js)

   Jak to działa: arkusze app.css / landing.css / tools.css / auth.css mają
   w miejscach zależnych od trybu var(--token, jasny kolor). W trybie dziennym
   tokenów nikt nie ustawia, więc działają jasne kolory jak dotąd. Tu, pod
   [data-theme="dark"], ustawiamy tokeny na ciemne + nadpisujemy kilka
   zmiennych z palety (tekst, linie). Granatowe paski, hero i stopki
   zostają bez zmian w obu trybach.
   ============================================================ */

/* ---------- przycisk dzień/noc ---------- */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 6px;
	border: 1px solid #3a4c60;
	background: transparent;
	color: #dedbce;
	cursor: pointer;
}
.theme-toggle:hover {
	color: #fff;
	border-color: var(--amber);
}
.theme-toggle svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.theme-toggle .i-sun,
[data-theme="dark"] .theme-toggle .i-moon {
	display: none;
}
[data-theme="dark"] .theme-toggle .i-sun {
	display: block;
}
/* w pasku panelu - nie może podwyższać paska (awatar ma 30 px) */
.user-menu .theme-toggle {
	width: 30px;
	height: 30px;
	margin: -6px 0;
}
/* wariant na jasnym tle strony (np. logowanie) */
.theme-toggle--page {
	border-color: var(--paper-line);
	background: var(--surface, #fff);
	color: var(--ink-soft);
}
.theme-toggle--page:hover {
	color: var(--ink);
}
.theme-toggle--corner {
	position: absolute;
	top: 18px;
	right: 18px;
}
.auth-right {
	position: relative;
}

/* ---------- ciemna paleta ---------- */
:root[data-theme="dark"] {
	color-scheme: dark;

	/* tła */
	--bg: #101c2d;
	--surface: #15243a;
	--surface-2: #1a2b43;
	--hover-row: rgba(255, 255, 255, 0.04);
	--solid: #2a4466;
	--solid-hover: #345279;

	/* tekst i linie (nadpisane zmienne z palety) */
	--ink: #e6e3d8;
	--ink-soft: #9fb0c1;
	--ink-mute: #8a9bad;
	--strong: #e6e3d8;
	--paper-line: #2a3f5a;
	--paper-dim: #1e3049;

	/* akcenty - jaśniejsze, żeby tekst był czytelny na ciemnym */
	--amber-dark: #e39b3d;
	--danger: #e8675d;
	--ink-teal: #6fd3bf;
	--ink-red: #f08b82;

	/* delikatne podbarwienia (dobra/zła odpowiedź, ostrzeżenia) */
	--tint-amber: #2a2314;
	--tint-amber-2: #332810;
	--tint-teal: #12302b;
	--tint-teal-2: #143a33;
	--tint-red: #33191b;
	--tint-red-2: #3a1c1c;
}

/* strona główna: jasne sekcje przedzielone cienką linią, żeby nie zlewały się w jedną ścianę */
[data-theme="dark"] .section,
[data-theme="dark"] .final-cta {
	border-top: 1px solid #1f3149;
}

/* strona główna: duże numery kroków ("01"-"04") - ozdobne, ale mają być widoczne */
[data-theme="dark"] .step .step-num {
	color: #3a5578;
}

/* pola formularzy bez własnego koloru tła - bez tego przeglądarka dałaby im systemowy szary.
   :where() ma zerową "siłę", więc każdy styl z app.css/tools.css, który ustawia tło, i tak wygrywa. */
:where([data-theme="dark"]) :where(input:not([type="radio"], [type="checkbox"], [type="range"], [type="submit"], [type="button"]), select, textarea) {
	background-color: var(--surface);
	color: var(--ink);
	border-color: var(--paper-line);
}
[data-theme="dark"] .answer-input-row input[type="text"] {
	border: 1px solid var(--paper-line);
}

/* "Zdane przedmioty" korzysta z tabeli z admin.css (reszta panelu admina zostaje jasna) */
[data-theme="dark"] body {
	background: var(--bg);
}
[data-theme="dark"] .card,
[data-theme="dark"] table.admin-table,
[data-theme="dark"] .card .btn-outline,
[data-theme="dark"] table.admin-table .btn-outline {
	background: var(--surface);
}
[data-theme="dark"] table.admin-table th {
	background: var(--bg);
}
[data-theme="dark"] table.admin-table tr:hover td {
	background: var(--hover-row);
}
[data-theme="dark"] .status-tag.active {
	background: var(--tint-teal-2);
	color: var(--ink-teal);
}
[data-theme="dark"] .status-tag.given {
	background: var(--tint-amber);
}

/* obrazki w pytaniach i artykułach (mapy, wykresy) - na jasnej podkładce, bo po ciemku byłyby nieczytelne */
[data-theme="dark"] .question-card img,
[data-theme="dark"] .explanation-box img,
[data-theme="dark"] .guide-body img {
	background: #fff;
	border-radius: 6px;
}

/* druk zawsze na jasno */
@media print {
	:root[data-theme="dark"] {
		color-scheme: light;
		--bg: #fff;
		--surface: #fff;
		--surface-2: #f6f4ee;
		--ink: #14202c;
		--ink-soft: #4b5a68;
		--strong: #0b1420;
		--paper-line: #c9c6b8;
		--paper-dim: #dedbce;
		--amber-dark: #b87418;
		--danger: #c1443b;
		--ink-teal: #1f5b4e;
		--ink-red: #8a2e27;
		--tint-amber: #fbf6ec;
		--tint-teal: #f1faf7;
		--tint-red: #fcf1f0;
	}
}

/* ikony liniowe icon(): baza dla stron bez app.css/landing.css */
.ico { vertical-align: -0.2em; flex: none; }