/* styles.css */

/* RESET / BAZA */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.iconify {
	font-size: 24px; /* Ujednolicony rozmiar ikon */
	width: 24px;
	height: 24px;
}

/* Cała strona w trybie flex-column, by stopka była zawsze na dole. */
html,
body {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	font-family: Arial, sans-serif;
	transition: background-color 0.3s, color 0.3s;
	background-color: var(--background-color);
	color: var(--text-color);
	min-height: 100vh;
}

/* Motyw jasny i ciemny (oparte o data-theme) */
html[data-theme="light"] {
	/* Kolory Główne */
	--background-color: #ffffff;
	--text-color: #333333;
	--header-bg: #f5f5f5;
	--footer-bg: #f5f5f5;
	--button-bg: #e2c0b3; /* Jasny brąz */
	--button-bg-hover: #9c786d; /* Średni brąz */
	--highlight-bg: #ffffff;
	--highlight-text-color: #2b2b2b; /* Biały tekst na podświetleniu */
	--table-header-bg: #887066; /* Średni brąz */
	--table-header-text: #ffffff; /* Biały tekst nagłówków */
	--tooltip-bg: rgba(0, 0, 0, 0.8);
	--tooltip-text: #ffffff;
	--status-silence: #ff9800; /* Pomarańczowy dla 'silence' */
	--status-off: #f44336; /* Czerwony dla 'off' */
	--status-normal: #249907; /* Brązowy dla 'normal' */
	--table-row-bg: #f8f3f3b7; /* Jasne tło dla wierszy tabeli */
	--table-row-text: #333333; /* Ciemny tekst dla wierszy tabeli */
	--icon-color: #333333;
	--popup-color: rgba(233, 230, 230, 0.8);
	--page-content-bg: rgba(233, 230, 230, 0.8);
	--page-content-text: #333333;
	--main-color: rgba(189, 179, 169, 0.6);
	--accent-color: #d2691e; /* Brązowy akcent */
	--highlight-color: var(--highlight-bg);
}

html[data-theme="dark"] {
	/* Kolory Główne */
	--background-color: rgba(73, 73, 73, 0.8);
	--text-color: #f0f0f0;
	--header-bg: #1e1e1e;
	--footer-bg: #1e1e1e;
	--button-bg: #5d4037; /* Ciemny brąz */
	--button-bg-hover: rgba(30, 30, 30, 0.7); /* Średni brąz */
	--highlight-bg: #4b4b4b; /* Średni brąz */
	--highlight-text-color: #ffffcc; /* Jasny tekst na podświetleniu */
	--table-header-bg: #5d4037; /* Ciemny brąz */
	--table-header-text: #ffffff; /* Biały tekst nagłówków */
	--tooltip-bg: rgba(255, 255, 255, 0.9);
	--tooltip-text: #000000;
	--status-silence: #ff9800; /* Pomarańczowy dla 'silence' */
	--status-off: #e57373; /* Ciemniejszy czerwony dla 'off' */
	--status-normal: #00cc2c; /* Ciemny brąz dla 'normal' */
	--table-row-bg: #2a2a2a; /* Ciemne tło dla wierszy tabeli */
	--table-row-text: #f0f0f0; /* Jasny tekst dla wierszy tabeli */
	--main-color: var(--background-color);
	--icon-color: #f0f0f0;
	--popup-color: rgba(110, 108, 108, 0.9);
	--page-content-bg: rgba(30, 30, 30, 0.7);
	--page-content-text: #f0f0f0;

	/* Nowe zmienne dla akcentów */
	--accent-color: #d2691e; /* Brązowy akcent */
	--highlight-color: var(--highlight-bg);
}

/* ========== NAGŁÓWEK ========== */
header {
	background-color: var(--header-bg);
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

header .logo h1 {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
	font-size: 1.5rem;
	color: var(--text-color);
}

/* Nawigacja */
.header-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

/* Linki Nawigacyjne */
.header-nav a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 4px;
	color: var(--text-color);
	text-decoration: none;
	font-weight: bold;
	transition: background-color 0.3s, color 0.3s, transform 0.3s;
}

/* Hover na Linkach Nawigacyjnych */
.header-nav a:hover {
	background-color: var(--highlight-bg);
	color: var(--highlight-text-color);
	transform: translateY(-2px); /* Lekki ruch w górę podczas hover */
}

/* Ikony w Linkach Nawigacyjnych */
.header-nav a .iconify {
	font-size: 20px;
	transition: color 0.3s;
}

/* Hover na Ikonach w Linkach */
.header-nav a:hover .iconify {
	color: var(--highlight-text-color);
}

/* Aktywny Link Nawigacyjny */
.header-nav a.active {
	background-color: var(--button-bg-hover);
	color: var(--highlight-text-color);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.header-nav a.active .iconify {
	color: var(--highlight-text-color);
}

/* Responsywność Nawigacji */
@media (max-width: 768px) {
	.header-nav {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}

	.header-nav a {
		width: 100%;
		padding: 0.75rem 1rem;
		font-size: 1.1rem;
	}
}

/* ========== PRZYCISK ZMIANY UKŁADU ========== */
.toggle-layout-btn {
	background-color: var(--button-bg);
	color: var(--text-color);
	border: none;
	padding: 0.3rem;
	cursor: pointer;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s, transform 0.3s;
}

.toggle-layout-btn:hover {
	background-color: var(--button-bg-hover);
	transform: scale(1.1);
}

header.vertical-layout .toggle-layout-btn {
	margin-top: 1rem;
}

/* Animacja obrotu ikony */
.toggle-layout-btn .iconify.rotated {
	transform: rotate(90deg);
	transition: transform 0.3s;
}

/* ========== WYSZUKIWARKA ========== */
.search-container {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	max-width: 300px;
}

.search-container .search-icon {
	font-size: 20px;
	flex-shrink: 0;
}

.search-container .iconify {
	flex-shrink: 0; /* Zapobiega zmniejszaniu się ikony */
	font-size: 20px;
}

.search-container input {
	flex: 1;
	padding: 0.5rem;
	border: 1px solid #ccc;
	background-color: var(--background-color);
	color: var(--text-color);
	border-radius: 4px;
	min-width: 0; /* Zapobiega przekraczaniu szerokości */
}

.search-container button {
	background-color: var(--button-bg);
	border: none;
	padding: 0 0.5rem;
	cursor: pointer;
	color: var(--text-color);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0; /* Zapobiega zmniejszaniu się przycisku */
}

.search-container button .iconify {
	font-size: 20px;
}

/* ========== PRZYCISK TRYBU JASNY/CIEMNY ========== */
button.theme-toggle {
	background-color: var(--button-bg);
	color: var(--text-color);
	border: none;
	padding: 0.5rem 1rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 4px;
	transition: background-color 0.3s;
	height: 2.5rem;
}

button.theme-toggle:hover {
	background-color: var(--button-bg-hover);
}

button.theme-toggle .iconify {
	font-size: 20px;
}

/* ====== UKŁAD PIONOWY NAGŁÓWEK ====== */
header.vertical-layout {
	flex-direction: column;
	align-items: center;
	width: 200px;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	padding: 1rem 1rem 5rem 1rem;
	box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	background-color: var(--header-bg);
	z-index: 1000; /* Zapewnia, że nagłówek jest nad innymi elementami */
}

/* Stylowanie nawigacji w pionowym układzie */
header.vertical-layout .header-nav {
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
	flex-grow: 1;
}

/* Stylowanie sekcji prawej w pionowym układzie */
header.vertical-layout .header-right {
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
}

/* Stylowanie wyszukiwarki w pionowym układzie */
header.vertical-layout .search-container {
	width: 100%;
	margin-top: 1rem;
}

header.vertical-layout .search-container input,
header.vertical-layout .search-container button {
	width: 100%;
}

header.vertical-layout .toggle-layout-btn .iconify {
	transform: rotate(90deg);
}

/* Styl dla body w pionowym układzie */
body.vertical-layout {
	margin-left: 200px; /* Szerokość pionowego menu */
	transition: margin-left 0.3s ease;
}

/* Responsywność dla pionowego układu */
@media (max-width: 768px) {
	header.vertical-layout {
		width: 100%;
		height: auto;
		position: relative;
	}

	body.vertical-layout {
		margin-left: 0;
	}

	/* Dostosowanie wyszukiwarki w pionowym układzie */
	header.vertical-layout .search-container input {
		width: 100%;
		padding: 0.5rem;
		border: 1px solid #ccc;
		background-color: var(--background-color);
		color: var(--text-color);
		border-radius: 4px;
	}

	header.vertical-layout .search-container button {
		width: 100%;
		margin-top: 0.5rem;
	}
}

/* Stopka */
#footer {
	background-color: var(--footer-bg);
	padding: 1rem;
	text-align: center;
	position: relative;
	/* Opcjonalnie dodaj cienie lub inne style */
	box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

/* Main */
main {
	background-color: var(--main-color);
	flex: 1; /* Pozwala na rozciąganie w pionie */
	display: flex;
	flex-direction: column; /* Zmiana kierunku Flex na kolumnowy */
	padding: 1rem;
}

/* Stylizacja nagłówków */
h1,
h2,
h3,
h4 {
	color: var(--text-color);
}

h4 {
	margin-left: 50px;
}

/* Stylizacja linków */
a {
	color: var(--highlight-bg); /* Zmieniono na --highlight-bg */
	text-decoration: none;
	transition: color 0.2s;
}

a:hover {
	color: var(--accent-color);
}
.header-right {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: nowrap; /* Zmieniono z wrap na nowrap */
}