/* 4. FORM.CSS - Ustawienia UI. */

/* ======================== */
/* ===      KARTY       === */
/* ======================== */
	.card {
		background-color: var(--bg-surface);
		padding: 1.5em;
		border-radius: 0.75em;
		border: 0.0625em solid var(--border-color);
		box-shadow: var(--shadow-md);
	}

	.card h3 { color: var(--text-main); }
	.card p { color: var(--text-secondary); line-height: 1.5; }
	
	.card2 {
		border-radius: 0.375em;
		border: 0.0625em solid var(--border-color);
		background: var(--bg-surface-2);
	}


/* ======================== */
/* ===      BUTTON      === */
/* ======================== */
	.btn {
		display: inline-block;
		padding: 0.75em 1.5em;
		border-radius: 0.5em;
		font-weight: 600;
		text-decoration: none;
		cursor: pointer;
		border: none;
		font-size: 0.95em;
		text-align: center;
	}

	.btn-primary {
		background-color: var(--primary-main);
		color: var(--primary-content); 
	}
	.btn-primary:hover {
		background-color: var(--primary-hover);
	}

	/* Przycisk Secondary (Brand) */
	.btn-brand-secondary {
		background-color: var(--secondary-brand);
		color: var(--secondary-brand-content);
	}
	.btn-brand-secondary:hover {
		background-color: var(--secondary-brand-hover);
	}

	/* Przycisk outline */
	.btn-outline {
		background-color: transparent;
		border: 0.125em solid var(--border-color);
		color: var(--text-main);
	}
	.btn-outline:hover {
		border-color: var(--text-secondary);
		background-color: var(--bg-surface-2);
	}
	
	.btn-danger { background-color: var(--error-bg); color: var(--error-text); border: 1px solid var(--error-main); }
    .btn-danger:hover { background-color: var(--error-main); color: white; }


/* ======================== */
/* ===  TOOLBAR BUTTON  === */
/* ======================== */

/* 1. BAZA PRZYCISKU (IconButton) */
	.btn-toolbar {
		/* Wymiary domyślne: 3em x 3em */
		width: 3em;
		height: 3em;
		
		/* Layout */
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		/* Wygląd bazowy */
		background-color: transparent; /* Przezroczyste tło domyślnie */
		border: 0.0625em solid transparent; /* Rezerwacja miejsca na border */
		border-radius: 0.5em; /* Spójne z .btn z Twojego pliku */
		cursor: pointer;
		transition: all 0.2s ease-in-out;
		
		/* Kolor ikony i tekstu */
		color: var(--text-secondary);
		fill: var(--text-secondary);
		
		/* Reset stylów buttona */
		padding: 0;
		outline: none;
		text-decoration: none;
	}

	/* Stylizacja Ikony */
	.btn-toolbar svg, 
	.btn-toolbar i {
		width: 1.5em; /* Zgodnie z wytycznymi */
		height: 1.5em;
		flex-shrink: 0;
		transition: fill 0.2s, transform 0.2s;
		fill: currentColor;
	}

/* 2. BUTTON Z TEKSTEM (TextButton modifier) */
	.btn-toolbar.btn-toolbar-label {
		/* Wymiary domyślne: 4em x 4em */
		width: 4em;
		height: 4em;
		
		/* Nieco większy odstęp między ikoną a tekstem */
		gap: 0.25em; 
		padding-top: 0;
	}

	/* Stylizacja tekstu */
	.btn-toolbar-label span {
		font-size: 0.65em; /* Mały font, żeby się zmieścił */
		line-height: 1;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.02em;
	}

/* 3. STANY

	/* --- HOVER --- */
	.btn-toolbar:not(:disabled):hover {
		background-color: var(--bg-surface-2); /* Tło jak w inputach */
		color: var(--text-main); /* Ikona ciemnieje */
		border-color: var(--border-color); /* Delikatna ramka */
	}

	/* --- FOCUS / ACTIVE --- */
	.btn-toolbar:focus-visible,
	.btn-toolbar:active {
		border-color: var(--primary-main); /* Złota ramka (focus) */
		color: var(--text-main);
		background-color: var(--bg-surface);
		box-shadow: 0 0 0 0.125em rgba(255, 204, 0, 0.2); /* Glow effect */
	}

	/* --- DISABLED --- */
	.btn-toolbar:disabled {
		opacity: 0.5;
		cursor: not-allowed;
		pointer-events: none;
		filter: grayscale(100%);
	}

/* 4. DODATKOWE STYLE */
	.toolbar-container {
		display: flex;
		justify-content:center;
		align-content:center;
		background-color: var(--bg-surface);
		border: 0.0625em solid var(--border-color);
		border-radius: 0.75em;
		box-shadow: var(--shadow-sm);
	}

	
/* ======================== */
/* ===       TAG        === */
/* ======================== */
	.tag { display: inline-block; padding: 0.25em 0.75em; border-radius: 999px; font-size: 0.75em; font-weight: 700; text-transform: uppercase; }
	.tag-success { background-color: var(--success-bg); color: var(--success-text); }
	.tag-error { background-color: var(--error-bg); color: var(--error-text); }
	.tag-info { background-color: var(--secondary-brand-bg); color: var(--secondary-brand-text); }
	

	
	
/* ======================== */
/* ===      ALERTY      === */
/* ======================== */
	.alert {
		padding: 1em;
		border-radius: 0.5em;
		margin-bottom: 1em;
		border-left: 0.5em solid;
		font-size: 0.95em;
	}

	.alert-success {
		background-color: var(--success-bg);
		color: var(--success-text);
		border-color: var(--success-main);
	}

	.alert-error {
		background-color: var(--error-bg);
		color: var(--error-text);
		border-color: var(--error-main);
	}

	.alert-info {
		background-color: var(--secondary-brand-bg);
		color: var(--secondary-brand-text);
		border-color: var(--secondary-brand);
	}	
	
 
/* ======================== */
/* ===    INPUT TEKST   === */
/* ======================== */
 
	/* === 1. WRAPPER === */
	.input-text {
		position: relative;
		height: 3em;
		margin: 3em 1em 0 1em;
	}
	
	.input-text:has(textarea) {
		position: relative;
		height: 100%;
		margin: 3em 1em 0 1em;
	}

	/* === 2. SAM INPUT === */
	.input-text input, .input-text textarea {
		resize: vertical;
		display: block;
		width: 100%;
		height: 100%;
		padding: 0em 1em 0.1em 2.5em;
		font-family: 'Dosis', sans-serif;
		font-weight: 600;
		font-size: 1.25em;
		
		background-color: var(--bg-surface-2);
		color: var(--text-main);
		border: 0.0625em solid var(--border-color);
		
		border-radius: 0.25em;
		box-sizing: border-box;
		outline: none;
		transition: border-color 0.3s, background-color 0.3s;
	}
	
	.input-text textarea {
	    padding-top: 0.75em;
		font-size: 1em;
		padding-left: 3.2rem;
	}
	
	.input-text textarea::-webkit-resizer {
		background-color: var(--primary-main);
		background-size: 0.5em 0.5em; 
		background-position: bottom right;
		background-repeat: no-repeat;
	}

	.input-text input::placeholder {
		color: var(--text-muted); /*#b0b3b8;*/
		opacity: 1;
	}
	
	.input-text input:read-only::placeholder,
	.input-text input:disabled::placeholder {
		color: transparent;
	}

	.input-text input:focus, .input-text textarea:focus {
		border-color: var(--text-muted); /*#555;*/
		background-color: var(--border-color);/*#2a2b2c;*/
	}
	
	.input-text input:read-only, .input-text textarea:read-only {
		border-color: transparent;
		background-color: transparent;
	}
	
	.input-text input:read-only:focus, .input-text textarea:read-only:focus {
		border-color: transparent;
		background-color: transparent;
	}

	/* === 3. IKONA === */
	.input-text .input-icon {
		display: flex;
		position: absolute;
		left: 0.75em; 
		top: 50%;
		transform: translateY(-50%);
		width: 1.5em;
		height: 1.5em;
		fill: var(--text-secondary); /*#b0b3b8;*/
		pointer-events: none; /* Kliknięcie w ikonę przechodzi do inputa */
		z-index: 2;
		transition: fill 0.3s;
	}
	
	.input-text:has(textarea) .input-icon {
		top: 0.75em;
		transform: translateY(0%);
	}
	
	.input-text input:focus + .input-text .input-icon {
		fill: var(--text-secondary); /* Ikona jaśnieje przy aktywnym inpucie - aktualnie bez zmian */
	}
	

	/* === 4. NAKŁADKA "WĄSY" === */
	.input-text::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		
		/* Wysokość 1/8 (12.5%) - tworzy "wąsy" po bokach */
		height: 0.375em;
		
		/* Domyślny kolor ramki (taki jak ikony) */
		border-left: 0.125em solid var(--border2);
		border-right: 0.125em solid var(--border2);
		border-bottom: 0.125em solid var(--border2);
		
		border-radius: 0;
		box-sizing: border-box;
		
		/* KLUCZOWE: Przepuszczanie kliknięć */
		pointer-events: none;
		z-index: 3;
		
		/* Dodano płynne przejście koloru */
		transition: border-color 0.3s;
	}

	/* Nowa reguła: Zmiana koloru ramki, gdy cokolwiek wewnątrz wrappera (czyli input) ma focus */
	.input-text:focus-within::after {
		border-color: var(--primary-main);;
	}

	/* === 5. OPIS POLA (ETYKIETA) === */
	.input-text .input-label {
		position: absolute;
		top: -2em; /* Pozycjonowanie nad inputem */
		left: 0;
		font-size: 0.75rem; text-transform: uppercase; color: var(--text-secondary);
		font-weight: 600;
		pointer-events: none;
		transition: color 0.3s;
		font-family: 'Dosis', sans-serif;
	}

	/* Etykieta też zmienia kolor na złoty przy focusie */
	.input-text:focus-within .input-label {
		color: var(--primary-main);
	}
	
	.input-text:has(input:read-only) .input-label {
		top: -1.1em;
	}
	
	.input-text:has(input:read-only)::after {
		border-color: var(--border-color);;
	}
	
	.input-text:has(input:read-only) .input-icon {
		fill: var(--text-secondary);
	}

	/* === 6. PRZYCISK CZYSZCZENIA (X) === */
	.input-text .input-clear {
		display: none; /* Domyślnie ukryty, pokazywany CSSem gdy input ma treść */
		position: absolute;
		right: 0.75em;
		top: 50%;
		transform: translateY(-50%);
		width: 1.5em;
		height: 1.5em;
		cursor: pointer;
		color: var(--text-muted);
		z-index: 4; /* Powyżej innych elementów */
		align-items: center;
		justify-content: center;
		transition: color 0.2s;
	}

	.input-text .input-clear:hover {
		color: var(--text-main);
	}
	
	.input-text .input-clear svg {
		width: 1.25em;
		height: 1.25em;
	}

	/* Pokazuj X tylko gdy input nie pokazuje placeholdera (czyli ma wpisany tekst) 
	   Działa to dzięki temu, że inputy mają placeholder=" " (spację) */
	.input-text input:not(:placeholder-shown) ~ .input-clear {
		display: flex;
	}

	/* Dodajemy padding z prawej strony inputa, gdy jest w nim tekst, 
	   aby litery nie wchodziły pod ikonkę X */
	.input-text input:not(:placeholder-shown) {
		padding-right: 2.5em;
	}

	/* === MODYFIKATOR: PEŁNA SZEROKOŚĆ (np. w modalach) === */
	.input-text.full {
		width: 100%;
		margin: 1em 0 0 0;
	}


/* ======================== */
/* ===      RADIO       === */
/* ======================== */	
	
	/* Kontener dla grupy radio buttonów */
	.radio-group {
		display: flex;
		flex-direction: column;
		gap: 1em; /* 15px / 16 */
		position: relative;
		width: 20.5em;
		margin: 1.5em 1em 0 1em;
	}

	/* Rysujemy linię na kontenerze, a nie na poszczególnych elementach.
	   Dzięki temu jest ona niezależna od wysokości tekstów. */
	.radio-group::before {
		content: '';
		position: absolute;
		
		/* Pozycja pozioma: Padding labela (0.625em) + Połowa szerokości kółka (0.6875em) - Połowa grubości linii (0.0625em) = 1.25em */
		/* 20px / 16 */
		left: 1.25em; 
		
		/* Pozycja pionowa: Środek pierwszego i ostatniego kółka.
		   Label padding (10px) + połowa kółka (11px) = 21px */
		/* 21px / 16 */
		top: 1.3125em; 
		bottom: 1.3125em;
		
		width: 0;
		border-left: 0.125em dashed var(--text-muted); /*#555; 2px / 16 */
		z-index: 0; /* Linia jest pod spodem */
	}

	/* === STYLIZACJA ETYKIETY (WRAPPERA) === */
	.custom-radio-label {
		display: flex;
		align-items: flex-start; /*center;*/
		cursor: pointer;
		padding: 0.625em; /* 10px / 16 */
		border-radius: 0.5em; /* 8px / 16 */
		transition: background-color 0.2s;
		position: relative;
		z-index: 1; /* Etykiety muszą być nad linią */
	}

	/* Efekt hover na całym wierszu */
	.custom-radio-label:hover {
		/*background-color: var(--bg-surface-2); /* #242526; */
	}

	/* === UKRYWANIE DOMYŚLNEGO INPUTA === */
	.custom-radio-input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}

	/* === WŁASNY ZNACZNIK (KÓŁKO) === */
	.checkmark {
		position: relative;
		height: 1.375em; /* 22px / 16 */
		width: 1.375em;  /* 22px / 16 */
		
		/* ZMIANA: Dodajemy tło, żeby przykryć linię biegnącą pod spodem */
		background-color: var(--bg-surface); /* #18191a; */ 
		
		border: 0.125em solid var(--border2); /* #b0b3b8;  2px / 16 */
		border-radius: 50%;
		margin-top: 0.13em;
		margin-right: 1em; /* 15px / 16 */
		transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
		flex-shrink: 0;
		box-sizing: border-box; /* Ważne dla precyzyjnych wymiarów */
		z-index: 2; /* Kółko musi być nad linią */
	}

	/* ZMIANA: Gdy najeżdżamy na wiersz, kółko musi zmienić tło na takie samo jak wiersz,
	   żeby nie wyglądało jak "wycięte" */
	.custom-radio-label:hover .checkmark {
		background-color: var(--bg-surface-2); /* #242526; */ 
	}

	/* === WEWNĘTRZNA KROPKA === */
	.checkmark::after {
		content: "";
		position: absolute;
		display: none;
		
		/* Pozycjonowanie kropki na środku */
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0);
		
		width: 0.625em; /* 10px / 16 */
		height: 0.625em; /* 10px / 16 */
		border-radius: 50%;
		background-color: var(--text-main); /* #ffffff; */
		
		transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
	}

	/* === STANY AKTYWNE I ZAZNACZONE === */

	/* Kiedy input jest zaznaczony -> pokaż kropkę */
	.custom-radio-input:checked ~ .checkmark::after {
		display: block;
		animation: popIn 0.3s forwards;
	}

	/* Kiedy input jest zaznaczony -> zmień ramkę na złotą */
	.custom-radio-input:checked ~ .checkmark {
		border-color: var(--primary-main); /* #ffcc00; */
		/* 5px / 16 = 0.3125em */
		box-shadow: 0 0 0.3125em rgba(255, 204, 0, 0.2);
		/* Utrzymujemy tło przy zaznaczeniu (nadal przykrywa linię) */
		/* Uwaga: tło dziedziczy z hovera lub normalnego stanu */
	}

	/* Hover na kółku (gdy najeżdżamy na wiersz) */
	.custom-radio-label:hover .custom-radio-input:not(:checked) ~ .checkmark {
		/*border-color: var(--primary-hover); /* #e4e6eb; */
	}

	/* === FOCUS (Dostępność klawiaturą) === */
	.custom-radio-input:focus ~ .checkmark {
		/* 4px / 16 = 0.25em */
		box-shadow: 0 0 0 0.25em rgba(255, 204, 0, 0.2);
	}

	/* === TEKST === */
	.label-text {
		font-size: 1.125em; /* 18px / 16 */
		font-weight: 400;
		color: var(--text-secondary); /* #b0b3b8; */
		transition: color 0.3s;
		/* Zapewnia ładne łamanie tekstu */
		line-height: 1.4;
	}

	/* Tekst wybrany zmienia się na biały */
	.custom-radio-input:checked ~ .label-text {
		color: var(--text-main); /* #ffffff; */
		font-weight: 600;
		/* 8px / 16 = 0.5em */
		text-shadow: 0 0 0.5em rgba(255, 255, 255, 0.2);
	}
	
	@keyframes popIn {
		0% { transform: translate(-50%, -50%) scale(0); }
		70% { transform: translate(-50%, -50%) scale(1.2); }
		100% { transform: translate(-50%, -50%) scale(1); }
	}
	
	.radio-group.readonly label:has(input[type="radio"]:not(:checked)),
	.radio-group[readonly] label:has(input[type="radio"]:not(:checked)) {
		display: none;
	}


/* ======================== */
/* ===    CHECKBOXY     === */
/* ======================== */

	/* Kontener dla grupy checkboxów */
	.checkbox-group {
		display: flex;
		flex-direction: column;
		gap: 1em;
		position: relative;
		width: 20.5em;
		margin: 1.5em 1em 0 1em;
	}

	/* Wrapper etykiety */
	.custom-checkbox-label {
		display: flex;
		align-items: flex-start;
		cursor: pointer;
		padding: 0.625em;
		border-radius: 0.5em;
		transition: background-color 0.2s;
		position: relative;
		z-index: 1;
	}

	/* Ukrycie domyślnego inputa */
	.custom-checkbox-input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}

	/* === WŁASNY ZNACZNIK (KWADRAT) === */
	.checkbox-mark {
		position: relative;
		height: 1.25em; 
		width: 1.25em;
		
		background-color: var(--bg-surface);
		border: 0.125em solid var(--border2);
		
		/* OSTRE NAROŻNIKI */
		border-radius: 0; 
		margin-top: 0.17em;
		margin-right: 1em;
		transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
		flex-shrink: 0;
		box-sizing: border-box;
		z-index: 2;
	}

	/* Hover na wierszu zmienia tło checkboxa */
	.custom-checkbox-label:hover .checkbox-mark {
		background-color: var(--bg-surface-2);
	}

	/* === "PTASZEK" (TICK) WEWNĄTRZ === */
	.checkbox-mark::after {
		content: "";
		position: absolute;
		display: none;
		
		/* POZYCJONOWANIE I GRUBOŚĆ */
		left: 0.5em;   /* Wyśrodkowanie w poziomie */
		top: -0.2em;   /* Przesunięcie w górę, aby wystawał poza ramkę */
		
		width: 0.4em;   
		height: 1em;  
		
		border: solid var(--text-main); /* Kolor ptaszka */
		
		/* Grubsze linie (0.2em) */
		border-width: 0 0.2em 0.2em 0; 
		
		/* Startowa transformacja */
		transform: rotate(45deg) scale(0);
		transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
	}

	/* === STANY AKTYWNE I ZAZNACZONE === */

	/* Pokazanie ptaszka po zaznaczeniu */
	.custom-checkbox-input:checked ~ .checkbox-mark::after {
		display: block;
		animation: checkPopIn 0.3s forwards;
	}

	/* Zmiana ramki na złotą po zaznaczeniu */
	.custom-checkbox-input:checked ~ .checkbox-mark {
		border-color: var(--primary-main);
		background-color: var(--bg-surface);
		box-shadow: 0 0 0.3125em rgba(255, 204, 0, 0.2);
	}

	/* Focus klawiaturą */
	.custom-checkbox-input:focus ~ .checkbox-mark {
		box-shadow: 0 0 0 0.25em rgba(255, 204, 0, 0.2);
	}

	/* === TEKST ETYKIETY === */
	.checkbox-label-text {
		font-size: 1.125em;
		font-weight: 400;
		color: var(--text-secondary);
		transition: color 0.3s;
		line-height: 1.4;
	}

	/* Tekst po zaznaczeniu */
	.custom-checkbox-input:checked ~ .checkbox-label-text {
		color: var(--text-main);
		font-weight: 600;
		text-shadow: 0 0 0.5em rgba(255, 255, 255, 0.2);
	}

	/* Animacja dla ptaszka */
	@keyframes checkPopIn {
		0% { transform: rotate(45deg) scale(0); }
		70% { transform: rotate(45deg) scale(1.2); }
		100% { transform: rotate(45deg) scale(1); }
	}
	
/* ======================== */
/* ===   MODAL WINDOW   === */
/* ======================== */
	.modal-overlay {
		position: fixed; top: 0; left: 0; width: 100%; height: 100%;
		background: rgba(0, 0, 0, 0.6);
		backdrop-filter: blur(2px);
		z-index: 2000;
		display: none;
		align-items: center; justify-content: center;
	}
	.modal-container {
		width: 90%; 
		max-width: 22.5em;
		background: var(--bg-surface);
		border-radius: 0.75em;
		box-shadow: var(--shadow-md);
		border: 0.0625em solid var(--border-color);
		display: flex; flex-direction: column;
		max-height: 90vh;
	}
	.modal-header { 
		padding: 1em; 
		border-bottom: 0.0625em solid var(--border-color); 
		background: var(--secondary-brand-bg); 
		display: flex; 
		justify-content: space-between; 
		align-items: center; 
		border-radius: 0.75em 0.75em 0 0; /* Zaokrąglenie tylko u góry, bo jest teraz tło */
	}
	
	/* ZMIANA: Styl dla tytułu */
	.modal-header h3 {
		font-weight: 800; /* Pogrubienie */
		margin: 0;
		font-size: 1.2em;
		color: var(--text-main);
	}

	.modal-body { 
		padding: 0; 
		overflow-y: auto;
		width: 100%;
		
		/* --- UKRYWANIE PASEKA PRZEWIJANIA (Scrollbar) --- */
		scrollbar-width: none;  /* Firefox */
		-ms-overflow-style: none;  /* IE and Edge */
	}
	
	/* Ukrywanie paska przewijania dla Chrome/Safari/Webkit */
	.modal-body::-webkit-scrollbar {
		display: none;
	}
	
	.modal-footer { 
		padding: 1.5em; 
		border-top: 0.0625em solid var(--border-color); 
		display: flex; 
		justify-content: flex-end; 
		gap: 1em; 
		background: var(--bg-surface-2); 
		border-radius: 0 0 0.75em 0.75em; 
	}

	/* ZMIANA: Styl dla przycisków w stopce */
	.modal-footer .btn {
		text-transform: uppercase; /* Capitaliki */
		letter-spacing: 0.05em;
		font-size: 0.85em;
		font-weight: 800;
		width: 8.5em; min-width: 8.5em; max-width: 8.5em;
	}
    
    .modal-footer .btn-outline {
		display: flex;
        justify-content: center;
        text-align: center;
		width: 6em; min-width: 6em; max-width: 6em;
    }

/* =========================== */
/* ===  SELECT NA LISCIE   === */
/* =========================== */
        /* Klasa bazowa dla każdego elementu listy, który ma być zaznaczalny */
        .selectable-item {
            user-select: none; /* Zapobiega zaznaczaniu tekstu przy Shift+Click */
            cursor: pointer;
            transition: background-color 0.1s ease, border-left-color 0.1s ease;
            /* Gwarantuje, że border nie przesuwa treści (jeśli element go nie miał) */
            border-left: 0.25em solid transparent; 
        }
        
        /* Styl dla zaznaczonego wiersza (ala Windows Explorer) */
        .selectable-item.selected {
            background-color: var(--select-bg) !important;
            border-left-color: var(--select-border) !important;
            position: relative;
        }
        
        /* Zmiana koloru tekstu w zaznaczeniu dla różnych typów nagłówków */
        .selectable-item.selected .inst-name,
        .selectable-item.selected h4 {
            color: var(--select-text);
            font-weight: 600;
        }

        /* Poprawka dla panel-link, aby border wyglądał spójnie */
        .panel-link.selectable-item {
            border-left-width: 0.25em; /* Wymuszenie szerokości bordera */
        }

/* ============================= */
/* ===  THEME SWITCH GROUP   === */
/* ============================= */		
		.theme-switch-group {
			position: relative;
			height: 3em;
			margin: 3em 1em 0 1em;
		}
		
		.theme-label {
			position: absolute;
			top: -2em; /* Pozycjonowanie nad inputem */
			left: 0;
			font-size: 0.75rem; text-transform: uppercase; color: var(--text-secondary);
			font-weight: 600;
			pointer-events: none;
			transition: color 0.3s;
			font-family: 'Dosis', sans-serif;
		}
		
		.theme-options {
			display: flex;
			width: 100%; height: 100%;
			background-color: var(--bg-surface-2);
			border-radius: 1.5em; padding: 0.25em; gap: 0em; }

		.theme-btn {
			flex: 1; border: none; background: transparent; padding: 0.4em 0.4em 0.5em 0.4em; border-radius: 1.25em;
			cursor: pointer; color: var(--text-secondary); display: flex; justify-content: center; align-items: center; transition: all 0.2s;
		}
		.theme-btn:hover { color: var(--text-main); }
		.theme-btn.active { background-color: var(--bg-surface); color: var(--primary-main); box-shadow: 0 1px 3px rgba(0,0,0,0.1); font-weight: 600; }
		.panel-options .theme-btn { padding: 0.4rem 0.2rem; font-size: 0.9em; min-width: 1.5em; }