/* Wygenerowano automatycznie: 2026-02-05 00:44:55 */

/* --- File: 1.fonts.css --- */
/* 1. FONTS.CSS - Ładowanie fontów. */

/* Dosis - Regular (400) - Treść główna */
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dosis-v34-latin_latin-ext-regular.woff2') format('woff2');
}

/* Dosis - SemiBold (600) - Pogrubienia i przyciski */
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/dosis-v34-latin_latin-ext-600.woff2') format('woff2');
}

/* Dosis - ExtraBold (800) - Nagłówki */
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/dosis-v34-latin_latin-ext-800.woff2') format('woff2');
}

/* --- File: 2.colors.css --- */
/* 2. COLORS.CSS - Definicje kolorów - Dark Mode Default & Light Theme. */

       :root {
            /* --- DARK MODE (Teraz Domyślny) --- */
            
            /* Primary */
            --primary-main: #FFCC00;
			--primary-main2: #FFCC00;
			--primary-main-ext: #3E320E;
            --primary-hover: #FFD633; 
            --primary-content: #000000;
			
            /* Secondary: W dark mode nieco jaśniejszy, bardziej "neonowy" */
            --secondary-brand: #6366F1;
            --secondary-brand-hover: #818CF8;
            --secondary-brand-content: #FFFFFF;
            --secondary-brand-bg: rgba(99, 102, 241, 0.15); /* Transparentny */
            --secondary-brand-text: #A5B4FC;
			
			--secondary-main:#6D7BFF;
			--secondary-main-ext:#24243E;

            /* Status */
            --success-main: #34D399;
            --success-bg: rgba(16, 185, 129, 0.15);
			--success-bg2: #122B23;
            --success-text: #6EE7B7;
            
            --error-main: #F87171;
            --error-bg: rgba(239, 68, 68, 0.15);
			--error-bg2: #331A1A;
            --error-text: #FCA5A5;
			
			/* App bar */
			--bg-appbar: #0C0C0C;

            /* Tła */
            --bg-body: #121212; 
            --bg-surface: #1E1E1E; 
            --bg-surface-2: #2C2C2C;

            /* Tekst */
            --text-main: #F9FAFB; 
            --text-secondary: #D1D5DB; 
            --text-muted: #6B7280;
			
			--text-icon: #B0B0B0; 

            /* Obramowania */
            --border-color: #373737; /* #333333 */
            --border-focus: #FFCC00;
			--border2:      #B0B0B0; 
            
            --shadow-sm: 0 0.0625em 0.125em 0 rgb(0 0 0 / 0.5);
            --shadow-md: 0 0.5em 0.375em -0.0625em rgb(0 0 0 / 0.5);
			
			/* Select */
			--select-bg: 	#0c4a6e; /* Ciemny, głęboki niebieski (Sky-900) */
			--select-border: 	#38bdf8; /* Jasny, "świecący" niebieski (Sky-400) */
			--select-text:	#e0f2fe; /* Bardzo jasny błękit (Twój oryginalny BG) */
        }

        /* --- LIGHT MODE (Jako opcja) --- */
        [data-theme="light"] {
            /* PRIMARY: Yellow #FFCC00 */
            --primary-main: #FFCC00; /* #E6B800*/
			--primary-main2: #C69C09;
			--primary-main-ext: #FFF6D4;
            --primary-hover: #E6B800;  /* #CC9900 */
            --primary-content: #111827; 

            /* SECONDARY: Indigo */
            --secondary-brand: #4F46E5;
            --secondary-brand-hover: #4338CA;
            --secondary-brand-content: #FFFFFF; 
            --secondary-brand-bg: #E0E7FF; 
            --secondary-brand-text: #3730A3;
			
			--secondary-main:#5D5CFF;
			--secondary-main-ext:#EBEBFA;
			
            /* STATUS COLORS */
            --success-main: #10B981;
            --success-bg: #D1FAE5; 
            --success-text: #065F46; 
            
            --error-main: #EF4444;
            --error-bg: #FEE2E2;
            --error-text: #991B1B;

			/* App bar */
			--bg-appbar: #ededed;

            /* Tła */
            --bg-body: #F9FAFB; 
            --bg-surface: #FFFFFF; 
            --bg-surface-2: #F3F4F6; 

            /* Tekst */
            --text-main: #111827; 
            --text-secondary: #4B5563; 
            --text-muted: #9CA3AF;
			
			--text-icon: #B0B0B0; 

            /* Obramowania */
            --border-color: #E0E0E0;
            --border-focus: #FFCC00;
			--border2:      #B0B0B0; 

            /* Dodatki */
            --shadow-sm: 0 0.0625em 0.125em 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 0.5em 0.375em -0.0625em rgb(0 0 0 / 0.1);
			
			/* Select */
			--select-bg: 		#e0f2fe;
			--select-border: 	#0284c7;
			--select-text:		#0369a1;
        }
		
		

/* --- File: 3.base.css --- */
/* 3. BASE.CSS - Normalizacja, Reset i Zmienne strukturalne. */

:root {
  /* Definicja modułu bazowego (szerokość kolumny mobile) */
  --module-base: 22.5rem;
}

/* --- NOWA NORMALIZACJA --- */

html {
	box-sizing: border-box;
    /* Zapobiega systemowym gestom nawigacji na poziomie HTML */
    overscroll-behavior: none; 
}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	margin: 0;
	width: 100vw;
	width: 100dvw;
	overflow: hidden; /* Pamiętaj, aby mieć wewnątrz kontener z overflow-y: auto */

	/* Style globalne aplikacji (fonty i kolory) */
	font-family: 'Dosis', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: 400; 
	line-height: 1.6;
	background-color: var(--bg-body);
	color: var(--text-main);

    /* Wyłączenie zaznaczania tekstu w całej aplikacji */
    /*-webkit-user-select: none; /* Safari/Chrome */
    /*user-select: none;         /* Standard */

    /* NOWOŚĆ: BLOKADA GESTÓW SYSTEMOWYCH */
    /* 1. Zapobiega "odbijaniu" strony i gestom nawigacji wstecz/dalej */
    overscroll-behavior: none;
    /* 2. Pozwala przeglądarce obsługiwać TYLKO przewijanie pionowe (pan-y).
          Wszelkie gesty poziome (pan-x) są ignorowane przez przeglądarkę,
          dzięki czemu Twój JS może je obsłużyć bez wywoływania "wstecz". */
    touch-action: pan-y;
}

/* Wyjątek dla pól formularzy - tam zaznaczanie musi działać */
input, textarea, select, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
    /* W polach tekstowych chcemy domyślne zachowanie dotyku */
    touch-action: manipulation; 
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
	overflow: hidden;
}

button,
select {
	text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	font-size: 1em;
	font-weight: 400;
}

b {
	font-weight: 600;
}

strong {
	font-weight: 800;
}

button {
	font-weight: 600;
}

a {
	text-decoration: none;
  color: inherit;
}

img, video, iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

:active {
  -webkit-tap-highlight-color: transparent;
}

button, input {
    background-color: transparent;
    border: none;
}

:hover, :active {
    border: none;
    outline: none;
}

:focus-visible {
    outline: 0.125em solid currentColor;
    outline-offset: 0.125em;
}

[data-column] {
	display: flex;
	flex-direction: column;
	position: relative;
}

[data-row] {
	display: flex;
	flex-direction: row;
	position: relative;
  align-items: center;
}

/* --- EKRAN BLOKADY (Orientation Lock) --- 
 * Jest to warstwa nakładana na całą stronę, 
 * aktywowana przez odpowiednie Media Queries w 4.desktop.css
 */
body::after {
  content: "Obróć urządzenie";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  background-color: black;
  color: white;
  z-index: 9999;
  
  display: flex; /* Flexbox do wycentrowania komunikatu */
  justify-content: center;
  align-items: center;
  
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25rem;
  
  /* Domyślnie ukryte */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Klasa pomocnicza, gdybyśmy chcieli wymusić blokadę z JS, 
   ale główna logika opiera się na CSS Media Queries */
body.orientation-locked::after {
  opacity: 1;
  pointer-events: all;
}

/* --- File: 4.forms.css --- */
/* 4. FORM.CSS - Ustawienia UI. */

/* ======================== */
/* ===      KARTY       === */
/* ======================== */
	.card {
		background-color: var(--bg-surface-2);
		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);
	}


/* ======================== */
/* ===      BUTTON      === */
/* ======================== */
	.btn {
		display: inline-block;
		padding: 0.75em 1.5em;
		border-radius: 0.5em;
		font-weight: 800;
		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);
		opacity: 0.75;
	}
	.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;
		width: calc(100% - 2em);
	}
	
	.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: 2.4em;
		padding: 0em 1em 0.1em 2.25em;
		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 input iconify-icon {font-size: 1.5em }
	
	.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;
		font-weight: 400;
	}

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

/* READONLY Nie wykorzystywane w CRM	
	.input-text input:read-only::placeholder,
	.input-text input:disabled::placeholder {
		color: transparent;
	}

	.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;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0.25em; 
		top: 48%;
		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;
		font-size: 1.5em;
	}
	
	.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.85rem; 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 */
	
	html[data-theme="dark"] .input-text:focus-within .input-label {
		color: var(--primary-main);
	}
	
	/* --- POPRAWKA: Licznik znaków nie dziedziczy koloru focusa --- */
	.input-text:focus-within .input-label #smsCounter {
		color: var(--text-secondary) !important;
	}
/*	Nie używane w CRM
	.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.25em;
	}

	/* === 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;
		position: relative;
		width: calc(100% - 2em);
		margin: 1.5em 1em 0 1em;
	}

	.radio-group .radio-options {
		display: flex;
		flex-direction: column;
		position: relative;
	}
	/* Rysujemy linię na kontenerze, a nie na poszczególnych elementach.
	   Dzięki temu jest ona niezależna od wysokości tekstów. */
	.radio-group .radio-options::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 */
	}
	
	.radio-group .radio-main-label{
		font-size: 0.85em; font-weight: 600; text-transform: uppercase; color: var(--text-secondary);
	}

	/* === 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: 49em;
		max-height: calc(100dvh - 6em);
		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;
	}
	.modal-header {
		display: flex;
		width: 100%; height: 4em;
		padding: 1em; 
		border-bottom: 0.0625em solid var(--border-color); 
		background: var(--secondary-brand-bg); 
		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 */
	}
	
	.modal-header h3 {
		font-weight: 800; /* Pogrubienie */
		text-transform: uppercase; /* Capitaliki */
		margin: 0;
		font-size: 1.2em;
		color: var(--text-main);
	}

	.modal-body {
		display: flex; flex-direction: row; flex: 1;
		max-height: calc(100dvh - 16em);
		justify-content: space-between;
		
		/* --- 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-column-left,
	.modal-column-right,
	.sms-column-left,
	.sms-column-right	{
		display: flex; flex-direction: column;
		width: 24.5em;
		max-height: calc(100dvh - 14em);
		padding: 0 1em 2em 1em;
		
		/* MODYFIKACJA SCROLLOWANIA KOLUMN */
		overflow-y: auto; /* Włącza scrollowanie pionowe */
		
		min-height: 0; /* Kluczowe dla flexboxa */
		scrollbar-width: thin; /* Cienki pasek (Firefox) */
		scrollbar-color: var(--border-color) transparent;
	}
	
	.modal-column-right,
	.sms-column-right	{
		border-left: solid 0.0625em var(--border-color);
	}
	
	
	/* Stylizacja paska przewijania dla kolumn (Webkit) */
	.modal-column-left::-webkit-scrollbar,
	.modal-column-right::-webkit-scrollbar,
	.sms-column-left::-webkit-scrollbar,
	.sms-column-right::-webkit-scrollbar {
		width: 0.35em;
	}

	.modal-column-left::-webkit-scrollbar-thumb,
	.modal-column-right::-webkit-scrollbar-thumb,
	.sms-column-left::-webkit-scrollbar-thumb,
	.sms-column-right::-webkit-scrollbar-thumb {
		background-color: var(--border-color);
		border-radius: 0.25em;
	}
	
	.scrollable-column {
		overflow: auto;
	}
	
	
	
	.modal-footer {
		display: flex; flex-direction: row;
		justify-content: flex-end;
		width: 100%; height: 6em;		
		gap: 1em; 		
		padding: 1.5em; 
		border-top: 0.0625em solid var(--border-color); 
		background: var(--bg-surface-2); 
		border-radius: 0 0 0.75em 0.75em; 
	}

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

/* =========================== */
/* ===  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; 
            min-height: 4em; /* Dodano min-height */
        }
        
        /* 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;
			display: flex;
			align-items: center;
			width: 100%;
			justify-content: space-between;
		}
		
		.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; }
		
/* ==================================== */
/* ===      MODAL RESPONSIVENESS    === */
/* ==================================== */

/* 1. Mniej niż 3 panele (ekrany mniejsze niż 67.5rem) -> Skala 91% */
@media (max-width: 67.5rem) {
    .modal-container {
        transform: scale(0.91);
        transform-origin: center center;
    }
}

/* 2. Tylko 1 panel (Mobile, ekrany mniejsze niż 45rem) */
@media (max-width: 45rem) {
    .modal-container {
        width: 24.5em !important; /* Sztywna szerokość dla telefonu */
        height: auto;
        max-height: 90dvh;        /* Ograniczenie wysokości do okna */
        display: flex;
        flex-direction: column;
    }

    .modal-body {
        flex-direction: column !important; /* Układ kolumnowy */
        overflow-y: auto !important;      /* Scrollowanie treści na poziomie body */
        flex: 1;
        height: auto;                     /* Pozwól treści rosnąć */
    }

    /* Dostosowanie kolumn wewnątrz modala, aby zajmowały 100% szerokości */
    .modal-column-left,
    .modal-column-right {
        width: 100% !important;
        height: auto !important;          /* Wyłączamy sztywną wysokość (pokaż wszystko) */
        max-height: none !important;      
        flex: none !important;            /* Wyłączamy skalowanie flex */
        overflow: visible !important;     /* Wyłączamy scroll wewnątrz kolumn */
        border-right: none !important;
        border-bottom: 0.0625em solid var(--border-color); /* Separator poziomy zamiast pionowego */
        padding-bottom: 1em;
        margin-bottom: 1em;
    }

    .modal-column-right {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    /* Wyłączenie scrolla w kolumnach, scrolluje cały modal-body */
    .scrollable-column {
        overflow-y: visible !important;
        height: auto !important;
        max-height: none !important;
    }
}

/* --- File: 5.1.topmenugenerator.css --- */
/* --- CSS MENU START --- */

        /* Główny kontener paska */
        .app-navbar {
			height: 4em; width: 100vw;
			flex: 0 0 4rem;
			color: var(--text-main);
            /* USUNIĘTO background-color i box-shadow stąd, aby nie wpływały na tekst/logo */
            /* background-color: var(--bg-appbar); */
			/* box-shadow: 0 0.125em 0.625em rgba(0,0,0,0.1); */
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 0.5em;
			z-index: 10;
			position: fixed; left:0; top:0 ;
			border-bottom: 0.0625em solid var(--border-color);
        }
		
		html:not([data-theme="light"]) .app-navbar {
			border-bottom: 0.0625em solid #000000;
		}

        /* NOWOŚĆ: Pseudoelement obsługujący tło i jego przezroczystość */
        .app-navbar::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--bg-appbar);
            box-shadow: 0 0.125em 0.625em rgba(0,0,0,0.1);
            /* Tutaj odbieramy zmienną ustawianą przez JS */
            opacity: var(--navbar-opacity, 0.5); 
            z-index: -1; /* Tło musi być pod treścią */
            transition: opacity 0.1s linear; /* Delikatne wygładzenie zmiany */
        }

        /* Sekcja Lewa: Logo */
        .navbar-left {
            flex: 0 0 auto;
        }
        .brand-logo{
            display: flex;
        }
        .brand-logo svg {
            height: 3em; /* lub 3.5 */
        }

        /* Sekcja Środkowa: Menu */
        .navbar-center {
            flex: 1 1 auto;
            display: flex;
            justify-content: center; /* Wymóg 4: Wycentrowane menu */
            height: 100%;
			text-transform:	uppercase;
        }

        /* Nadpisania przez JS (Ustawienia -> Liczba paneli) */
        /* Wymuszenie ukrycia dla 1, 2, 3 paneli niezależnie od szerokości */
        html[data-panels="1"] .topMenu,
        html[data-panels="2"] .topMenu,
        html[data-panels="3"] .topMenu {
            display: none;
        }

        /* Wymuszenie pokazania dla 4, 5 paneli niezależnie od szerokości */
        html[data-panels="4"] .topMenu,
        html[data-panels="5"] .topMenu {
            display: block;
        }
		
		html[data-panels="4"] .bottomMenu,
        html[data-panels="5"] .bottomMenu {
            display: none;
        }
		
		html[data-panels="3"] .user-name { display: block; }
		html[data-panels="4"] .user-name { display: block; }
		html[data-panels="5"] .user-name { display: block; }
		

        /* ---------------------------------- */

        .main-menu {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            height: 100%;
        }

        .main-menu li {
            position: relative;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .main-menu a {
            text-decoration: none;
            color: var(--text-main);
            font-weight: 600;
            padding: 0 1.2em;
            display: flex;
            align-items: center;
            height: 100%;
            transition: background-color 0.2s, color 0.2s;
            cursor: pointer;
        }

        .main-menu a:hover {
            background-color: var(--primary-main);
            color: #000000;
        }

        .arrow {
            font-size: 0.7em;
            margin-left: 5px;
            color: var(--text-main);
        }

        /* Submenu Logic (CSS Only) */
        .submenu {
            display: none; /* Domyślnie ukryte */
            position: absolute;
            top: 100%; /* Poniżej paska */
            left: 0;
            background-color: var(--bg-appbar);
            box-shadow: 0 0.25em 0.75em rgba(0,0,0,0.15);
            min-width: 20em;
            list-style: none;
            padding: 0.5em 0;
            border-radius: 0 0 0.25em 0.25em;
        }

        /* Submenu poziomu 2 (zagnieżdżone) */
        .submenu .submenu {
            top: 0;
            left: 100%; /* Obok rodzica */
            border-radius: 0 0.25em 0.25em 0.25em;
        }

        .submenu li {
            height: auto;
            display: block;
        }

        .submenu a {
            padding: 0.8em 1.2em;
            height: auto;
            display: block;
        }

        /* Wymóg 6: Logika oparta o CSS (Hover + Focus) */
        /* Po najechaniu myszką (Desktop) */
        .has-submenu:hover > .submenu {
            display: block;
            animation: fadeIn 0.2s ease-in-out;
        }

        /* Po kliknięciu/focusie (Dostępność + prosta obsługa dotyku) */
        .has-submenu:focus-within > .submenu {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(5px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Sekcja Prawa: User / Przycisk */
        .navbar-right {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        /* --- STYLIZACJA PRZYCISKU USTAWIEŃ --- */
        .btn-settings {
            width: 3em;
            height: 3em;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            cursor: pointer;
            color: var(--text-secondary);
            border-radius: 50%;
            transition: all 0.2s;
        }
        
        .btn-settings:hover, .btn-settings.active {
            background-color: var(--bg-surface-2);
            color: var(--text-main);
        }

        /* --- STYLIZACJA MENU ROZWIJANEGO USTAWIEŃ --- */
        .settings-dropdown {
            display: none; /* Domyślnie ukryte */
            position: absolute;
            top: 3.5em; /* Pod przyciskiem */
            right: 0;
            width: 16em;
            background-color: var(--bg-surface);
            border: 0.0625em solid var(--border-color);
            border-radius: 0.5em;
            box-shadow: var(--shadow-md);
            padding: 1em;
            z-index: 100;
        }

        .settings-dropdown.show {
            display: block;
            animation: fadeIn 0.2s ease-in-out;
        }

        /* Sekcja wewnątrz menu */
        .settings-section {
            margin-bottom: 1em;
        }
        .settings-section:last-child {
            margin-bottom: 0;
        }

        .settings-section h4 {
            font-size: 0.8em;
            text-transform: uppercase;
            color: var(--text-secondary);
            margin: 0 0 0.5em 0;
            font-weight: 600;
        }

        /* Grupa przycisków opcji */
        .settings-options-group {
            display: flex;
            background-color: var(--bg-surface-2);
            border-radius: 0.5em;
            padding: 0.25em;
            gap: 0.25em;
        }

        /* Pojedynczy przycisk opcji */
        .setting-opt-btn {
            flex: 1;
            border: none;
            background: transparent;
            padding: 0.5em;
            font-size: 0.9em;
            color: var(--text-secondary);
            border-radius: 0.25em;
            cursor: pointer;
            transition: all 0.2s;
            font-weight: 600;
        }

        .setting-opt-btn:hover {
            color: var(--text-main);
        }

        .setting-opt-btn.active {
            background-color: var(--bg-surface);
            color: var(--primary-main);
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }


        /* Styl przycisku */
        .btn-course-zone {
            background-color:  var(--primary-main);
            color: black;
            padding: 0.6em 1.2em;
            border-radius: 0.25em;
            text-decoration: none;
            font-weight: bold;
            font-size: 0.9em;
            transition: background-color 0.3s;
            white-space: nowrap;
        }
        .btn-course-zone:hover {
            background-color: var(--primary-main2);
        }

        /* Styl avatara */
        .user-profile {
            display: flex;
            align-items: center;
            gap: 0.625em;
        }
        .user-name {
            font-size: 0.9em;
            color: var(--text-main); /* ZMIANA: Zamiast "white", używamy zmiennej (Czarny w Light, Biały w Dark) */
            display: none; /* Ukryj imię na małych ekranach jeśli trzeba */
        }

        .avatar-img {
            width: 3em;
            height: 3em;
            border-radius: 50%;
            object-fit: cover;
            border: 0.125em solid #ddd;
        }
		
		
		
/* --- Bottom Menu Styles --- */

/* Reset/Base for menu components */
.bottomMenu * {
    box-sizing: border-box;
}

.bottomMenu div {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Main Container */
.bottomMenu {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1500;
    justify-content: center;
    width: 100%;
    min-width: 100vw;
    background-color: #202020;
    border-top: 0.0625rem solid #303030;
    color: rgba(255, 255, 255, 0.87);
    box-shadow: 0 -0.1rem 0.6rem rgba(0,0,0,0.3);
    font-family: inherit; /* Inherit font from app */
}

/* --- Bar Menu (The visible strip) --- */
.bottomMenu .barMenu {
    flex-direction: row;
    width: 100%;
    max-width: 25rem; /* Slightly wider for better spacing */
    padding: 0 0.5rem;
    justify-content: space-between;
    position: relative;
    background-color: #202020; /* Ensure bg covers flyout origin */
    z-index: 1502;
}

/* Standard Button Tool */
.bottomMenu .button-tool {
    display: flex;
    flex-direction: column;
    width: 4rem;
    height: 3.75rem;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 0.87);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
    border-radius: 0.5rem;
}

.bottomMenu .button-tool:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.05);
}

.bottomMenu .button-tool-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    margin-bottom: 0.2rem;
}

.bottomMenu .button-tool-text {
    font-size: 0.65rem;
    text-align: center;
    line-height: 1.1;
    max-width: 100%;
}

/* Big Central Button (Grafik/Aktualnosci) */
.bottomMenu .button-tool-icon-big {
    position: absolute;
    top: -2rem;
    background-color: #FFCC00;
    width: 4rem;
    height: 4rem;
    color: black;
    border-radius: 50%;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.4);
    transition: transform 0.2s;
    z-index: 1503;
}

.bottomMenu .button-tool:active .button-tool-icon-big {
    transform: scale(0.95);
}

/* --- Flyout Menu (Fitness/Taniec) --- */
.flyButtonWrapper {
    position: absolute;
    bottom: 4.5rem; /* Just above the bar */
    left: 0.5%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    z-index: 1490;
    /* CSS Variables for positions */
    --fly-origin-top: 1rem;
    --fly-origin-left: 0rem;
}

.bottomMenu .button-fly-tool {
    display: flex;
    flex-direction: column;
    width: 4rem;
    height: 4rem;
    justify-content: flex-end;
    align-items: center;
    color: rgba(255, 255, 255, 0.87);
    text-decoration: none;
    position: absolute;
    
    /* Default Closed State */
    left: -2rem; 
    top: 0; 
    opacity: 0;
    pointer-events: none;
    transform: scale(0.5);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy effect */
}

.bottomMenu .button-tool-icon-mini {
    background-color: #FFCC00;
    width: 2.5rem;
    height: 2.5rem;
    color: black;
    border-radius: 50%;
    font-size: 1.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0.2rem 0.4rem rgba(0,0,0,0.3);
    margin-bottom: 0.25rem;
}

/* Active State for Flyout (triggered by JS class on parent) */
.bottomMenu.fly-active .button-fly-tool {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.bottomMenu.fly-active .grafikSubMenu_1 {
    left: -6.5rem;
    top: -4.5rem;
}

.bottomMenu.fly-active .grafikSubMenu_2 {
    left: 2.5rem;
    top: -4.5rem;
}

/* Optional 3rd item if needed */
.bottomMenu.fly-active .grafikSubMenu_3 {
    left: -2rem;
    top: -7rem;
}


/* --- Full Menu Overlay --- */
.bottomMenu .fullMenu {
    width: 100%;
    background-color: #202020;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease-in-out, padding 0.4s;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.bottomMenu.menu-open .fullMenu {
    max-height: 80vh; /* Allow enough space */
    padding-bottom: 1rem;
    overflow-y: auto;
}

.bottomMenu .fullMenu a {
    height: 3.5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 1.5rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.87);
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.bottomMenu .fullMenu a:active {
    background-color: rgba(255,255,255,0.1);
}

.bottomMenu .fullMenu a iconify-icon {
    font-size: 1.5rem;
    margin-right: 1rem;
}

.bottomMenu .divider {
    border-top: solid 0.0625rem rgba(255, 255, 255, 0.27);
    margin: 0.5rem 0;
}

.bottomMenu hr {
    width: 100%;
    border: 0;
    border-top: 1px solid #404040;
    margin: 0;
}

/* --- Hamburger Icon Swap --- */
/* Fix: Zwiekszona specyficznosc selektorow, aby nadpisac defaultowe display: flex */
.bottomMenu .button-tool-icon.fullMenu-close { display: none; }

.bottomMenu.menu-open .button-tool-icon.fullMenu-show { display: none; }
.bottomMenu.menu-open .button-tool-icon.fullMenu-close { display: flex; }


/* --- Backdrop (Zaslonka) --- */
.bottomMenuZaslonka {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    opacity: 0;
    pointer-events: none;
    z-index: 1400;
    transition: opacity 0.3s ease;
}

.bottomMenuZaslonka.visible {
    opacity: 0.75;
    pointer-events: auto;
}

/* --- File: 5.layout-www.css --- */
/* --- ZMIENNE LAYOUTU --- */
:root {
    --panel-width: 22.5rem; 
    --visible-panels: 1; /* Domyślnie 1 (mobile) */
	--scale: 1;
}

/* --- LOGIKA SKALOWANIA I RESPNSYWNOŚĆ --- */
html {
    font-size: calc(100dvw / (var(--visible-panels) * 22.5));
}

/* 1. Zabezpieczenie dla orientacji poziomej (Landscape) */
@media (orientation: landscape) { 
    :root { --visible-panels: 2; --scale: 2;} 
}

/* 2. Breakpointy szerokości */
@media (min-width: 45rem)		{ :root { --visible-panels: 2; --scale: 2;} }
@media (min-width: 67.5rem) 	{ :root { --visible-panels: 3; --scale: 2;} }
@media (min-width: 90rem) 		{ :root { --visible-panels: 4; --scale: 2;} }
@media (min-width: 112.5rem) 	{ :root { --visible-panels: 5; --scale: 2;} }

:root {
	--w1to2: calc(22.5em * min(var(--visible-panels), 2));
	--w1to3: calc(22.5em * min(var(--visible-panels), 3));
	--w1to4: calc(22.5em * min(var(--visible-panels), 4));

	--topMenuHeightREM: 	4rem;
	--topMenuHeight:    	4;
	--bottomMenuHeightREM:	4rem;
	--bottomMenuMenuHeight:	4;
}

body {
	font-family: 'Dosis', sans-serif;
	color: var(--text-main);
	background-color: var(--bg-body);
	display: flex; 
    justify-content: center;
	align-content: center;
    flex-wrap: wrap;
    /* ZMIANA: Sztywna wysokość dla body, aby zablokować jego scrollowanie */
    height: 100vh;
    height: 100dvh;
    overflow: hidden; /* Scroll tylko wewnątrz #viewport */
	align-items: flex-start;
	scrollbar-width: none;  
    -ms-overflow-style: none;
	margin: 0;
}

body::-webkit-scrollbar {
	display: none;
}

.click { cursor: pointer; }
.click:hover { filter: brightness(110%); }
.click-disabled, .click:disabled { cursor: not-allowed; }

.flex-col {
    display: flex;
    flex-direction: column;
    position: relative;
	width: 100%;
}

.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	width: 100%;
}

/* ZMIANA: Przeniesienie logiki scrollowania tutaj */
#viewport {
	width: 100vw;
    /* Viewport zajmuje całą wysokość body */
    height: 100%; 
    
    /* Włączenie przewijania */
    overflow-y: auto; 
    overscroll-behavior: contain; /* Separacja gestów */

    /* Padding górny równy wysokości menu, aby treść nie była ucięta */
    padding-top: var(--topMenuHeightREM);
	padding-bottom: var(--bottomMenuHeightREM);
    box-sizing: border-box;

	display: flex; 
    justify-content: center; 
    flex-direction: row; 
    align-content: flex-start;
	background-color: var(--bg-surface);
	flex-wrap: wrap;
	scrollbar-width: none;
}

/* Ukrycie scrollbara w Webkit (Chrome/Safari) dla viewportu, jeśli taki jest wymóg designu */
#viewport::-webkit-scrollbar {
    display: none;
}

.viewport-w-1		{display:flex; flex-direction: row; flex-wrap: wrap; min-width:22.5em;	width:22.5em;	max-width:22.5em;}
.viewport-w-1to2	{display:flex; flex-direction: row; flex-wrap: wrap; min-width:var(--w1to2);	width:var(--w1to2); max-width:var(--w1to2);}
.viewport-w-1to3	{display:flex; flex-direction: row; flex-wrap: wrap; min-width:var(--w1to3);	width:var(--w1to3); max-width:var(--w1to3);}
.viewport-w-1to4	{display:flex; flex-direction: row; flex-wrap: wrap; min-width:var(--w1to4);	width:var(--w1to4); max-width:var(--w1to4);}

.w-1of6			{display:flex; flex-direction: row; flex-wrap: wrap; min-width:3.75em; width:3.75em;	max-width:3.75em;}
.w-1of5			{display:flex; flex-direction: row; flex-wrap: wrap; min-width:4.5em; width:4.5em;	max-width:4.5em;}
.w-1of4			{display:flex; flex-direction: row; flex-wrap: wrap; min-width:5.625em; width:5.625em;	max-width:5.625em;}
.w-1of3			{display:flex; flex-direction: row; flex-wrap: wrap; min-width:7.5em;   width:7.5em;	max-width:7.5em;}
.w-1of2			{display:flex; flex-direction: row; flex-wrap: wrap; min-width:11.25em;	width:11.25em;	max-width:11.25em;}
.w-1			{display:flex; flex-direction: row; flex-wrap: wrap; min-width:22.5em;	width:22.5em;	max-width:22.5em;}
.w-2			{display:flex; flex-direction: row; flex-wrap: wrap; min-width:45em;	width:45em;		max-width:45em;} /* prawdopodobnie do skasowania */
.w-1to2			{display:flex; flex-direction: row; flex-wrap: wrap; min-width:min(var(--w1to2), 100%);	width:var(--w1to2); max-width:100%;}
.w-1to3			{display:flex; flex-direction: row; flex-wrap: wrap; min-width:min(var(--w1to2), 100%);	width:var(--w1to3); max-width:100%;}
.w-1to4			{display:flex; flex-direction: row; flex-wrap: wrap; min-width:min(var(--w1to2), 100%);	width:var(--w1to4); max-width:100%;}

.scale {
  zoom:var(--scale); /* skaluje w obu osiach */
}

/* --- File: 6.prose.css --- */
/* 6. PROSE.CSS - Typografia artykułów (PROSE). */

/* Klasa .prose służy do stylowania "czystego tekstu" np. z CMS/Markdown */
	.prose {
		max-width: 22.5rem; /* Zmiana z 65ch na 22.5rem */
		color: var(--text-main);
		line-height: 1.6;
		margin-left: auto; /* Opcjonalne centrowanie kontentu wewnątrz karty */
		margin-right: auto;
	}

	.prose h1, .prose h2, .prose h3, .prose h4 {
		color: var(--text-main);
		margin-top: 1.5em;
		margin-bottom: 0.6em;
		line-height: 1.3;
	}

	.prose h1 {
		font-size: 2.2em;
		letter-spacing: -0.02em;
		font-weight: 800;}
	
	/* H2 z delikatnym podkreśleniem */
	.prose h2 { 
		font-size: 1.7em; 
		padding-bottom: 0.3em;
		font-weight: 800;
		width: 100%;
	}
	
	.prose h3 {
		font-size: 1.35em;
		font-weight: 800;
		width: 100%;
	}

	.prose p {
		font-weight: 400;
		margin-bottom: 1.25em;
	}

	/* Linki w tekście */
	.prose a {
		color: var(--secondary-brand);
		text-decoration: underline;
		text-decoration-thickness: 0.125em;
		text-underline-offset: 0.125em;
		font-weight: 600;
	}
	.prose a:hover {
		color: var(--secondary-brand-hover);
		background-color: var(--secondary-brand-bg);
		text-decoration: none;
	}

	/* Listy z akcentem Primary (#FFCC00) */
	.prose ul, .prose ol {
		margin-bottom: 1.25em;
		padding-left: 1.5em;
		font-weight: 400;
	}
	.prose li { margin-bottom: 0.5em; font-weight: 400;}
	
	.prose ul li::marker {
		color: var(--primary-main); /* Żółte kropki */
		font-size: 1.2em;
	}
	.prose ol li::marker {
		color: var(--text-secondary);
		font-weight: bold;
	}

	/* Cytaty */
	.prose blockquote {
		border-left: 0.25em solid var(--primary-main); /* Żółta linia */
		margin: 1.5em 0;
		padding: 1rem 1.5rem;
		background-color: var(--bg-surface-2);
		border-radius: 0 0.5em 0.5em 0;
		font-style: italic;
		font-weight: 400;
		color: var(--text-secondary);
	}

	/* Kod śródliniowy */
	.prose code {
		font-family: monospace;
		background-color: var(--bg-surface-2);
		padding: 0.2em 0.4em;
		border-radius: 0.25em;
		font-size: 0.9em;
		color: var(--secondary-brand);
		border: 0.0625em solid var(--border-color);
	}

	/* Strong */
	.prose strong {
		color: var(--text-main);
		font-weight: 800;
	}
	
	.prose hr {width: inherit;}
	
	
/* ========================================= */
/* === 2. KARTA SZCZEGÓŁÓW               === */
/* ========================================= */

.detail-card {
    width: 22.5em; /* Sztywna szerokość */
    display: flex;
    flex-direction: column;
    background-color: var(--bg-surface);
    border: 0.0625em solid var(--border-color);
    border-radius: 0; /* Narożniki proste */
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* --- Zdjęcie --- */
.detail-photo-wrapper {
    width: 100%;
    height: 20em;
    background-color: var(--bg-surface-2);
    position: relative;
    border-bottom: 0.0625em solid var(--border-color);
}

.detail-photo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Header (Meta pod zdjęciem) --- */
.detail-header {
    padding: 1.5em;
    text-align: center;
    position: relative;
	border-bottom: 0.0625em solid var(--border-color);
}

.detail-id {
    position: absolute;
    top: 1em;
    right: 1em;
    font-size: 0.75em;
    color: var(--text-muted);
    font-family: monospace;
}

.detail-title {
    display: block;
    font-size: 0.8em;
    color: var(--primary-main2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5em;
	margin-top: 0.5em;
}

.detail-name {
    font-size: 1.75em;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.1;
    margin-bottom: 0.75em;
}

/* --- Kontakt --- */
.detail-shortcuts {
    background-color: var(--bg-surface-2);
    padding: 1em 1.5em;
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    border-bottom: 0.0625em solid var(--border-color);
}

.shortcuts-row {
    display: flex;
    align-items: center;
    gap: 0.75em;
    color: var(--text-secondary);
    font-size: 0.9em;
    text-decoration: none;
    transition: color 0.2s;
}

.shortcuts-row iconify-icon{
    font-size: 1.5em;
}




/* --- Opis HTML (Prose - override dla karty) --- */
.detail-body {
    padding: 1.5em;
}

/* Zawężamy style .prose tylko do .detail-body, aby nie psuć globalnego .prose */
.detail-body .prose {
    color: var(--text-main);
    font-size: 0.95em;
    line-height: 1.6;
}

.detail-body .prose p { margin-bottom: 1em; margin-top: 0; }
.detail-body .prose strong { font-weight: 600; color: var(--text-main); }
.detail-body .prose ul { margin-bottom: 1em; padding-left: 1.2em; }
.detail-body .prose li { margin-bottom: 0.25em; list-style-type: disc; }
.detail-body .prose li::marker { color: var(--primary-main); }
.detail-body .prose h3 { 
    font-size: 1.1em; 
    font-weight: 800; 
    margin-top: 1.5em; 
    margin-bottom: 0.5em; 
    color: var(--text-main);
}
.detail-body .prose a { color: var(--secondary-brand); text-decoration: underline; }

/* --- File: 7.bulk-edit.css --- */
/* 7. BULK-EDIT.CSS - Style dla formularzy masowej edycji */

/* --- Tag stanu (Bez zmian / Cofnij zmiany) --- */
.bulk-tag {   
    font-weight: 600;          
    text-transform: none;      
    padding: 0.15em 0.6em;
    border-radius: 0.25em; 
    transition: all 0.2s;
    line-height: normal;
}

/* Stan: Domyślny / Pusty input */
.bulk-tag.no-change {
    background: transparent;
    color: var(--text-secondary); 
    border: 0.0625em solid transparent; 
    pointer-events: none;
    box-shadow: none;
    opacity: 0.8; 
}

/* Stan: Zmieniony / Wypełniony input */
.bulk-tag.changed {
    background: var(--primary-main);
    color: var(--primary-content);
    cursor: pointer;
    pointer-events: auto;
    box-shadow: var(--shadow-sm);
}

/* --- Przycisk resetu (tekstowy) --- */
.btn-reset-small {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.8em;
    text-transform: none;
    font-weight: 400;
    background: none;
    border: none;
    padding: 0;
}

.btn-reset-small:hover {
    color: var(--primary-main);
    text-decoration: underline;
}

/* Wariant pozycjonowany absolutnie (nad inputem) */
.btn-reset-abs {
    position: absolute;
    top: -1.5em;
    right: 0;
}

/* Ukrywanie standardowego krzyżyka (X) w inputach w trybie edycji grupowej,
   ponieważ mamy własny mechanizm "Cofnij zmiany" */
.input-text.bulk-mode .input-clear {
    display: none !important;
}

/* Stylowanie placeholdera dla trybu bulk (pochylony font) */
.input-text.bulk-mode input::placeholder {
    font-style: italic;
}

/* --- NOWE STYLE (UNIFIKACJA) --- */

/* Unifikacja etykiet (Labeli) w formularzu masowej edycji */
.bulk-edit-form .theme-label,
.bulk-edit-form .input-label {
    font-family: inherit;
    font-size: 0.75em !important;     
    font-weight: 700 !important;      
    text-transform: uppercase !important; 
    letter-spacing: 0.05em !important; 
    color: var(--text-secondary);     
}

/* Style pozycjonujące dla input-text, aby tag był przy prawej krawędzi */
.bulk-edit-form .input-text .input-label {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none; 
}

/* Ale sam tag wewnątrz labela musi być klikalny */
.bulk-edit-form .input-text .input-label .bulk-tag {
    pointer-events: auto;
}

/* --- NAGŁÓWEK CUSTOM MODAL (wstrzykiwany jako tytuł modala) --- */
.bulk-modal-title {
    /* Kontener tytułu, może wymagać resetu stylów rodzica (np. h3 w modal header) */
    line-height: 1.2;
}

.bulk-modal-title h1 {
    font-size: 1.5rem; /* Większy font dla tytułu */
    margin: 0;
    color: var(--text-main);
    text-transform: uppercase;
    font-weight: 800;
}

.bulk-modal-title .subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 400; /* Reset wagi, jeśli rodzic h3 ma bold */
    text-transform: none;
    margin-top: 0.2em;
}

/* --- OSTRZEŻENIE (WARNING / ERROR) --- */
.bulk-warning {
    background-color: var(--error-bg);
    color: var(--error-text);
    border: 0.125em solid var(--error-main);
    border-radius: 0em;
    padding: 0.75em;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
	margin-top: 1em;
}

.modal-container:has(.bulk-edit-form){
	width:24.5em;
}




/* --- File: 8.reward.css --- */
/* 8. REWARDS.CSS - Style specyficzne dla kart nagród */


/* --- WIDOK 1: KARTA (CARD) --- */
.reward-card-wrapper {
	display: flex;
	flex-wrap: wrap;
	padding: 1em;
	gap:1em;
	justify-content: center;
}

.reward-card {
    display: flex;
    flex-direction: column; 
	flex: 0 0 auto;
	width: 9.75em;
    align-items: center; 
    position: relative;
	padding:0em;
}

/* Styl dla kontenera/obrazka w karcie */
.reward-card-image {
    width: 9.75em; 
    height: 7.8em;
	background-color: var(--bg-surface-2);
	border-radius: 0.75em 0.75em 0 0;	
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Specyficzne dla tagu IMG - używamy object-fit: cover dla ładnego dopasowania */
.reward-card-image img{
	width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
	border-radius: 0.75em 0.75em 0 0;
    transition: transform 0.3s ease;
}

.reward-card-image:hover img {
    transform: scale(1.05);
}

.reward-card-title {
	width: 9.75em; 
    height: 7.8em;
    display: flex; 
    align-items: center; 
    justify-content: center;
	padding:0.5em;
}

.reward-card-title h3 {font-size: 1em ; font-weight: 600;line-height: 1.3;text-align: center; } 

.reward-card-points {
	position: absolute; left:0.5em; top:7em;
	flex: 0 0 auto;
	height: 1.75em; justify-content: center; align-items: center;
    font-weight: 800;
	background-color: var(--primary-main-ext); /* Bardzo jasny złoty */
    color: var(--primary-main2); /* Ciemny złoty */
    padding: 0.25em 0.75em;
    border-radius: 99em;
    font-size: 0.85em;
    border: 0.0125em solid var(--primary-main);
}

.reward-card-btn {
    margin:0.25em;
	padding: 0.75em 1em;
}



/* --- WIDOK 2: WIERSZ LISTY (LIST ROW) --- */
.reward-list-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.75em;
    margin-bottom: 0.5em;
    width: 100%;
}

.reward-list-left {
    display: flex;
    align-items: center;
    gap: 1em;
}

.reward-list-img {
    width: 3em; height: 3em;
    object-fit: cover;
    border-radius: 0.5em;
    border: 1px solid var(--border-color);
}

.reward-list-placeholder {
    width: 3em; height: 3em;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--bg-surface-2);
    border-radius: 0.5em;
    font-size: 1.5em;
    color: var(--text-muted);
}

.reward-list-info {
    display: flex; flex-direction: column;
}

.reward-list-name {
    font-weight: 700;
    color: var(--text-main);
    font-size: 1em;
}

.reward-list-type {
    font-size: 0.75em;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.reward-list-right {
    display: flex;
    align-items: center;
    gap: 1em;
}

.reward-points-badge {
    font-size: 0.85em;
    font-weight: 700;
    background-color: var(--bg-surface-2);
    padding: 0.25em 0.5em;
    border-radius: 0.5em;
    color: var(--text-secondary);
}

/* --- WIDOK 3: BADGE (PIGUŁKA) --- */
.reward-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    background-color: var(--primary-main-ext); /* Bardzo jasny złoty */
    color: var(--primary-main2); /* Ciemny złoty */
    padding: 0.25em 0.75em;
    border-radius: 99em;
    font-size: 0.85em;
    font-weight: 700;
    border: 1px solid var(--primary-main);
}

.section-header {
	display: flex; flex-direction: row; 
	border-bottom: 0.0625em solid var(--border-color); padding-bottom: 0.25em;
	margin: 0 1em; 
}

.section-header iconify-icon {
	font-size: 1.8em; margin-right: 0.5em;
	display: flex; align-items: center;
	
}

.section-header h2 {
	margin:0;padding:0; font-size:1.5em; font-weight: 600; border:none; 
}

.section {
	flex-direction:column;
	padding: 0 0 2em 0;
}

.section p{
	margin: 1em 1em; 
	font-size:1em; font-weight:400;
}


/* --- WIDOK 4: SZCZEGÓŁY (NAGRODA) --- */

.reward-detail-hero {
    width: 100%;
    max-height: 20em;
    overflow: hidden;
    position: relative;
    border-radius: 0 0 1.5em 1.5em;
    margin-bottom: 2em;
}

.reward-detail-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reward-detail-content {
    padding: 0 1.5em;
    margin-bottom: 2em;
}

.reward-stats-container {
    display: flex;
    gap: 2em;
    margin: 2em 1.5em;
    padding: 1.5em;
    background-color: var(--bg-surface-2);
    border-radius: 1em;
    justify-content: space-around;
    flex-wrap: wrap;
}

.reward-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.reward-stat-val {
    font-size: 2em;
    font-weight: 800;
    color: var(--primary-main);
    line-height: 1.2;
}

.reward-stat-label {
    font-size: 0.85em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
}

/* LISTA ODBIORCÓW (CLAIMERS) */
.claimers-list {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 0 1.5em 2em 1.5em;
}

.claimer-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1em;
    padding: 0.75em;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 3em; /* Pigułka */
}

.claimer-avatar {
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-surface-2);
    flex-shrink: 0;
}

.claimer-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.claimer-name {
    font-weight: 700;
    font-size: 1.1em;
    color: var(--text-main);
}

.claimer-status {
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Statusy kolorystyczne */
.status-CLAIMED { color: var(--primary-main); }
.status-USED { color: var(--success-main); }
.status-EXPIRED { color: var(--error-main); }


/* Stylizacja Kuponu (UserReward) */
.reward-coupon-card {
    display: flex; flex-direction: row;
    justify-content: center; align-items:center;
    overflow: hidden;
    width: 20.5em; height: 4em;
    border-radius: 0;
    padding:0;
    position: relative;
}
.reward-coupon-image img {
    width: 5em; height: 4em; object-fit: cover;
}
.reward-coupon-content {
    padding:0.5em;
    width: 15.5em;
}
.reward-coupon-content h3 {
    margin: 0; font-size: 1em; line-height: 1.3; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.reward-code-box {
    background: rgba(0,0,0,0.3); padding: 0.4em 0.8em; border-radius: 4px;
    display: inline-flex; align-items: center; margin-top: 0.5em; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.1);
}
.code-label { font-size: 0.7em; text-transform: uppercase; margin-right: 0.5em; opacity: 0.7; }
.code-value { font-family: monospace; font-size: 1.1em; font-weight: bold; color: var(--primary-main); letter-spacing: 1px; }
.reward-meta { margin-top: 0.4em; font-size: 0.8em; color: #888; }

/* Stylizacja Historii */
.reward-history-row {
    display: flex; align-items: center; gap: 1em;
    width: 20.5em; height: 4em;
    border-radius: 0;
    padding:0; opacity: 0.7;
    overflow: hidden;
    margin: 0 1em 0.25em 1em;
}
.history-icon { position: absolute; font-size: 1.5em; bottom:0; right: 0; max-height: 2em;
display: flex; }
.status-used .history-icon { color: var(--success-main); }
.status-expired .history-icon { color: var(--error-main); }
.history-info { display: flex; flex-direction: column; }
.history-name { font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.history-date { font-size: 0.8em; opacity: 0.6; }

/* --- File: tondance.instruktor.css --- */
/* INSTRUKTOR.CSS - Style specyficzne dla modułu instruktorów (Lista i Szczegóły) */

/* ========================================= */
/* === 1. LISTA INSTRUKTORÓW             === */
/* ========================================= */

.instructor-list {
    display: flex;
    flex-direction: column;
    gap: 0; /* było 0.75em; */ 
}

.instructor-row {
    width: 22.5em;   
    height: 4em;     
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;     
    padding: 0 0.75em 0 0.75em;
    background-color: var(--bg-surface-2); /*var(--bg-surface);*/
	border-bottom: 0.0625em solid var(--border-color);
    border-radius: 0; /* Narożniki proste */
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.instructor-row:hover {
   filter: brightness(0.85);
}

/* --- Avatar (Lista) --- */
.inst-avatar {
    width: 3em;
    height: 3em;
    background-color: var(--text-muted);
    border-radius: 50%; 
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--text-secondary);
    border: 0.0625em solid var(--border-color);
}
.inst-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* --- Dane (Lista) --- */
.inst-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.3; 
    overflow: hidden; 
}

.inst-title {
    font-size: 0.7em; 
    color: var(--text-muted); 
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 0.1em;
}

.inst-name {
    font-size: 1.1em; 
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    padding-bottom: 0.1em;
}

/* --- Status (Lista) --- */
.inst-status-wrapper {
	display: flex; align-items: center;
	border-radius: 999px;	}

.inst-status-tag {
    display: inline-block;
    padding: 0.15em 0.6em; 
    border-radius: 999px;
    font-size: 0.7em;      
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Kolory Statusów */
.status-obecny .inst-status-wrapper { background-color: var(--success-bg); color: var(--success-text); }
.status-byly   .inst-status-wrapper{ background-color: var(--bg-surface); color: var(--text-muted); border: 0.0625em solid var(--border-color); }
.status-przyjezdny .inst-status-wrapper{ background-color: var(--secondary-brand-bg); color: var(--secondary-brand-text); }

/* --- Paski Stanu (Lista) --- */


/* Stan: ON */
/*.row-on {} */

/* Stan: OFF */
.row-off { opacity: 0.4; }


/* ========================================= */
/* === 2. KARTA SZCZEGÓŁÓW               === */
/* ========================================= */

.detail-card {
    width: 22.5em; /* Sztywna szerokość */
    display: flex;
    flex-direction: column;
    background-color: var(--bg-surface);
    border: 0.0625em solid var(--border-color);
    border-radius: 0; /* Narożniki proste */
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* --- Zdjęcie --- */
.detail-photo-wrapper {
    width: 100%;
    height: 20em;
    background-color: var(--bg-surface-2);
    position: relative;
    border-bottom: 0.0625em solid var(--border-color);
}

.detail-photo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Header (Meta pod zdjęciem) --- */
.detail-header {
    padding: 1.5em;
    text-align: center;
    position: relative;
	border-bottom: 0.0625em solid var(--border-color);
}

.detail-id {
    position: absolute;
    top: 1em;
    right: 1em;
    font-size: 0.75em;
    color: var(--text-muted);
    font-family: monospace;
}

.detail-title {
    display: block;
    font-size: 0.8em;
    color: var(--primary-main2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5em;
	margin-top: 0.5em;
}

.detail-name {
    font-size: 1.75em;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.1;
    margin-bottom: 0.75em;
}

/* --- Kontakt --- */
.detail-contact {
    background-color: var(--bg-surface-2);
    padding: 1em 1.5em;
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    border-bottom: 0.0625em solid var(--border-color);
}

.contact-row {
    display: flex;
    align-items: center;
    gap: 0.75em;
    color: var(--text-secondary);
    font-size: 0.9em;
    text-decoration: none;
    transition: color 0.2s;
}

.contact-row:hover {
    color: var(--primary-main2);
}

.contact-row svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: var(--text-icon);
}


/* --- Opis HTML (Prose - override dla karty) --- */
.detail-body {
    padding: 1.5em;
}

/* Zawężamy style .prose tylko do .detail-body, aby nie psuć globalnego .prose */
.detail-body .prose {
    color: var(--text-main);
    font-size: 0.95em;
    line-height: 1.6;
}

.detail-body .prose p { margin-bottom: 1em; margin-top: 0; }
.detail-body .prose strong { font-weight: 800; color: var(--text-main); }
.detail-body .prose ul { margin-bottom: 1em; padding-left: 1.2em; }
.detail-body .prose li { margin-bottom: 0.25em; list-style-type: disc; }
.detail-body .prose li::marker { color: var(--primary-main); }
.detail-body .prose h3 { 
    font-size: 1.1em; 
    font-weight: 800; 
    margin-top: 1.5em; 
    margin-bottom: 0.5em; 
    color: var(--text-main);
}
.detail-body .prose a { color: var(--secondary-brand); text-decoration: underline; }

/* ========================================= */
/* === 3. MODALE (SMS i Usuwanie)        === */
/* ========================================= */

/* --- SMS Modal Summary --- */
.sms-summary {
    background-color: var(--bg-surface-2);
    padding: 0;
    border-radius: 0.5em;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border: 0.0625em solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.sms-summary::-webkit-scrollbar {
    width: 0.5em;
}

.sms-summary::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 0.25em;
}

/* --- Delete Modal Summary --- */
.modal-container:has(.delete-summary){
	width:24.5em;
}

.modal-body:has(.custom-delete-footer) {
	max-height: calc(100dvh - 10em)
}

.delete-summary {
    background-color: var(--bg-surface-2);
    padding: 0;
    border-radius: 0.5em;
    margin-bottom: 2em;
    overflow-y: auto;
    overflow-x: hidden;
    border: 0.625empx solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.delete-summary::-webkit-scrollbar {
    width: 0.5em;
}

.delete-summary::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 0.25em;
}

/* --- Custom Delete Footer --- */
.custom-delete-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    background-color: var(--bg-surface-2);
    border-top: 0.0625em solid var(--border-color);
    gap: 1em;
    margin-left: -1em;
    margin-right: -1em;
    margin-bottom: -2em;
    width: calc(100% + 1.85em);
    border-radius: 0 0 0.75em 0.75em;
}

/* --- Button Hold Animation --- */
.btn-hold {
    position: relative;
    overflow: hidden;
    transition: transform 0.1s;
    user-select: none;
    -webkit-user-select: none;
}

.btn-hold:active {
    transform: scale(0.98);
}

.btn-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 0;
    transition: width 0s linear;
}

.btn-hold.holding .btn-progress-bar {
    width: 100%;
    transition: width 5s linear;
}

.btn-text {
    position: relative;
    z-index: 1;
}

/* --- LOGIKA DYNAMICZNA MODALA (Zastępuje style inline z JS) --- */
/* Jeśli modal zawiera customowy footer usuwania, ukrywamy standardowy footer i zmieniamy padding */
.modal-container:has(.custom-delete-footer) .modal-footer {
    display: none !important;
}


/* --- File: tondance.reward.css --- */
/* REWARD.CSS - Style dla modułu nagród */

/* === 1. LISTA NAGRÓD === */

.reward-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.reward-row {
    width: 22.5em;   
    height: 4em; 
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;     
    padding: 0 0.75em 0 0; 
    background-color: var(--bg-surface-2);
	border-bottom: 0.0625em solid var(--border-color);
    border-radius: 0;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; /* Zaktualizowane tranzycje zgodnie z instruktorami */
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* ZMIANA 1: Hover taki sam jak w instruktorach */
.reward-row:hover {
   filter: brightness(0.85);
   /* Usunięto zmianę tła, aby zachować spójność */
}

.reward-row.row-inactive {
    opacity: 0.5;
    filter: grayscale(0.8);
}

/* --- Avatar (Ikona / Zdjęcie) --- */
.reward-avatar {
    width: 5em;
    height: 4em; 
    background-color: var(--bg-surface);
    border-radius: 0; 
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-right: 0.0625em solid var(--border-color);
    
    /* ZMIANA 2: Domyślna ikona (gdy brak zdjęcia) jest teraz szara */
    color: var(--text-muted); 
}
.reward-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* --- Dane --- */
.reward-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.3; 
    overflow: hidden; 
}

.reward-title {
    font-size: 0.7em; 
    color: var(--text-muted); 
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.1em;
}

.reward-name {
    font-size: 1.05em; 
    font-weight: 600; /* ZMIANA: Z 700 na 600 (lżejsza czcionka) */
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Punkty / Stan --- */
.reward-points-wrapper {
	display: flex; 
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.reward-points-val {
    display: none; /* ZMIANA: Ukrycie liczby punktów na liście */
    color: var(--primary-main);
    font-weight: 800;
    font-size: 1.1em;
}

.reward-stock {
    font-size: 0.7em;
    color: var(--text-secondary);
    background: var(--bg-surface);
    padding: 0.1em 0.4em;
    border-radius: 0.25em;
    margin-top: 0.2em;
    border: 1px solid var(--border-color);
}

/* === MODAL / FORMULARZ === */

/* Wyłączenie ::after dla inputów typu upload (żeby nie było ikony/podkreślenia) */
.input-text.no-icon::after {
    content: none !important;
    display: none !important;
    border: none !important;
}