/*
 * DWO Czas Pracy — style ekranu pracownika.
 * DWO Production Terminal Design System v1.0 — etap UX 2a (jeden ciemny motyw + pasek
 * terminala), etap UX 2.1 "Terminal Polish" (komponent Avatar współdzielony przez
 * siatkę i PIN, hierarchia informacji na START/WORKING/COMPLETED/SUCCESS, ujednolicona
 * typografia — nic mniejszego niż 16px), etap UX 2.2 "Terminal PIN" (kropki PIN +
 * ekranowa klawiatura numeryczna zamiast natywnego pola/klawiatury systemowej) i
 * Sprint 3C "Terminal nadgodzin" (akcent pomarańczowy --dwo-orange — token istniał od
 * etapu UX 2a, dotąd nieużywany — dla ekranów working-overtime/overtime-reason/
 * completed-overtime; bez żadnej zmiany tokenów, typografii ani pozostałych ekranów).
 * Wszystkie kolory pochodzą z tokenów (custom properties) zdefiniowanych niżej na
 * .dwo-cp — żadna reguła nie wpisuje koloru motywu wprost (jedyny świadomy wyjątek:
 * biały tekst/spinner na kolorowych przyciskach i awatarach, patrz komentarze przy
 * tych regułach).
 *
 * Sprint "Tablet UX 1.0" — globalne dostosowanie do tabletów (Apple i Android, od ok. 768px
 * wzwyż, priorytet: tablet poziomo → tablet pionowo → desktop → telefon jako fallback).
 * Wyłącznie CSS — bez zmiany logiki, przepływów, kolejności ekranów ani znaczników HTML/JS.
 * Dodano wspólny system tokenów rozmiaru (--dwo-space-*, --dwo-card-width, --dwo-button-height,
 * --dwo-touch-min, --dwo-grid-gap, --dwo-font-*), oparty w większości o clamp()/min(), żeby
 * jedna zmiana tokenu skalowała całą aplikację terminala, zamiast osobnych, rozjeżdżających się
 * wartości px w każdej regule. Wszystkie nowe reguły pozostają ograniczone do kontenera
 * .dwo-cp / jego własnego szablonu — żadna reguła nie wycieka do reszty motywu WordPressa.
 */

.dwo-cp {
	/* --- Tokeny Design Systemu — kolory i podstawy (bez zmian od etapu UX 2a) -------- */
	--dwo-bg: #0b1220;
	--dwo-surface: #16213a;
	--dwo-text: #f8fafc;
	--dwo-text-muted: #94a3b8;
	--dwo-green: #22c55e;
	--dwo-red: #ef4444;
	--dwo-orange: #f97316;
	--dwo-blue: #3b82f6;
	--dwo-border: #263349;
	--dwo-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
	--dwo-radius: 20px;
	--dwo-motion-fast: 150ms;
	--dwo-motion-base: 180ms;

	/* --- Tokeny Sprintu "Tablet UX 1.0" — wspólny system rozmiaru/odstępów ----------
	 * Skala oparta o clamp(min, preferowana wartość zależna od vw/vh, max) — rośnie płynnie
	 * między telefonem a szerokim tabletem/desktopem, bez sztywnych "skoków" na breakpointach
	 * i bez nieograniczonego skalowania (każda wartość ma jawny sufit). */
	--dwo-space-xs: clamp(6px, 1vw, 10px);
	--dwo-space-sm: clamp(10px, 1.6vw, 16px);
	--dwo-space-md: clamp(16px, 2.2vw, 24px);
	--dwo-space-lg: clamp(24px, 3.4vw, 40px);
	--dwo-space-xl: clamp(32px, 5vw, 56px);

	/* Szerokość karty (PIN/START/WORKING/COMPLETED/sukces/błędy) — węższa na telefonie,
	 * wyraźnie szersza na tablecie, z rozsądnym sufitem, żeby nie "rozjechać się" na desktopie. */
	--dwo-card-width: min(560px, 92vw);
	--dwo-card-padding: clamp(24px, 4vw, 48px);

	/* Cele dotykowe — patrz sekcja 3 briefu: min. 48px, preferowane 56–64px dla głównych akcji. */
	--dwo-touch-min: 48px;
	--dwo-button-height: clamp(52px, 6vw, 64px);

	/* Siatka wyboru pracownika. */
	--dwo-grid-gap: clamp(14px, 2.2vw, 28px);

	/* Skala typografii — nigdy poniżej 16px efektywnie (istniejąca zasada Design Systemu),
	 * ale responsywna zamiast sztywnych rem-ów dla najważniejszych elementów. */
	--dwo-font-eyebrow: clamp(0.85rem, 1.4vw, 1rem);
	--dwo-font-body: clamp(1rem, 1.3vw, 1.1rem);
	--dwo-font-name-sm: clamp(1rem, 1.6vw, 1.2rem);
	--dwo-font-name-lg: clamp(1.3rem, 2.6vw, 1.7rem);
	--dwo-font-title: clamp(1.5rem, 2.6vw, 2.1rem);
	--dwo-font-subtitle: clamp(1.25rem, 2vw, 1.5rem);
	--dwo-font-clock: clamp(2rem, 5vw, 3.25rem);
	--dwo-font-display-sm: clamp(1.8rem, 3.4vw, 2.5rem);
	--dwo-font-display-md: clamp(2rem, 4.2vw, 2.75rem);
	--dwo-font-display-lg: clamp(2.6rem, 6.2vw, 4.25rem);
	--dwo-font-keypad: clamp(1.5rem, 3vw, 2rem);

	/* Poziomy padding kontenera jako tokeny (a nie tylko właściwości padding-left/right
	   bezpośrednio) — .dwo-cp__topbar poniżej musi "wybrzuszyć się" o dokładnie tę samą
	   wartość (ujemny margines), żeby pasek terminala nadal sięgał do krawędzi kontenera
	   mimo że wartość jest teraz responsywna (clamp) i zależna od safe-area, nie stałym 16px. */
	--dwo-pad-x-left: max(var(--dwo-space-md), env(safe-area-inset-left));
	--dwo-pad-x-right: max(var(--dwo-space-md), env(safe-area-inset-right));

	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	box-sizing: border-box;
	/* 100dvh (dynamiczna wysokość widoku — uwzględnia chowające się paski adresu na tablecie/
	 * telefonie) z fallbackiem 100vh dla przeglądarek bez obsługi dvh (starsze WebView Android). */
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	background: var(--dwo-bg);
	color: var(--dwo-text);
	border-radius: var(--dwo-radius);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	/* safe-area-inset: odstęp nigdy mniejszy niż nasz bazowy padding, ale rosnący, gdy
	 * urządzenie (np. tablet z zaokrąglonymi rogami/notchem) tego wymaga. */
	padding-top: max(0px, env(safe-area-inset-top));
	padding-right: var(--dwo-pad-x-right);
	padding-bottom: max(var(--dwo-space-lg), env(safe-area-inset-bottom));
	padding-left: var(--dwo-pad-x-left);
}

.dwo-cp *,
.dwo-cp *::before,
.dwo-cp *::after {
	box-sizing: border-box;
}

/* Tylko widok aktualnie aktywny (bez [hidden]) uczestniczy w układzie flex — pozostałe widoki
 * mają natywny atrybut HTML "hidden" (display: none), więc nie zajmują miejsca. Karta NIE jest
 * rozciągana na całą wysokość (align/justify: center, nie stretch) — wyśrodkowana w dostępnej
 * przestrzeni, żeby uniknąć sztucznego "rozciągania kart tylko po to, by wypełnić ekran". */
.dwo-cp__view:not([hidden]) {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	width: 100%;
	gap: var(--dwo-space-md);
	animation: dwo-cp-view-in var(--dwo-motion-base) ease;
}

/* Widok siatki pracowników: wyrównany do góry (nie centrowany pionowo) — zapobiega dużej,
 * pustej przestrzeni nad/pod siatką przy niewielkiej liczbie pracowników (patrz sekcja 4 briefu:
 * "zmniejsz nadmierną pustą przestrzeń pod siatką"). */
.dwo-cp__view--grid:not([hidden]) {
	justify-content: flex-start;
}

/* --- Pasek terminala — wspólny dla wszystkich widoków -------------------- */

.dwo-cp__topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 20px;
	padding: var(--dwo-space-sm) var(--dwo-space-md);
	/* Ujemny margines musi dokładnie znosić padding kontenera (teraz responsywny/safe-area,
	   nie stałe 16px), żeby pasek terminala nadal sięgał do krawędzi .dwo-cp na każdej
	   szerokości ekranu (Sprint "Tablet UX 1.0"). */
	margin: 0 calc(-1 * var(--dwo-pad-x-right)) var(--dwo-space-lg) calc(-1 * var(--dwo-pad-x-left));
	background: var(--dwo-surface);
	border-bottom: 1px solid var(--dwo-border);
	border-top-left-radius: var(--dwo-radius);
	border-top-right-radius: var(--dwo-radius);
}

.dwo-cp__topbar-name {
	font-size: var(--dwo-font-eyebrow);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dwo-text-muted);
}

.dwo-cp__topbar-clock {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-variant-numeric: tabular-nums;
}

.dwo-cp__topbar-day {
	font-size: var(--dwo-font-eyebrow);
	font-weight: 600;
	color: var(--dwo-text-muted);
	text-transform: capitalize;
}

.dwo-cp__topbar-time {
	font-size: clamp(1.05rem, 1.8vw, 1.3rem);
	font-weight: 800;
	color: var(--dwo-text);
	letter-spacing: 0.02em;
}

.dwo-cp__topbar-status {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--dwo-font-eyebrow);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--dwo-text-muted);
}

.dwo-cp__topbar-status-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--dwo-green);
	flex-shrink: 0;
}

.dwo-cp__title {
	font-size: var(--dwo-font-title);
	margin: 0 0 var(--dwo-space-md);
	text-align: center;
	color: var(--dwo-text);
}

.dwo-cp__empty {
	text-align: center;
	color: var(--dwo-text-muted);
}

/* --- Typografia współdzielona: "eyebrow" (Meta — małe etykiety) i "display"
   (duże liczby/zegary/liczniki) — DWO Production Terminal Design System, etap 2.1. --- */

.dwo-cp__eyebrow {
	margin: 0 0 6px;
	font-size: var(--dwo-font-eyebrow);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dwo-text-muted);
}

.dwo-cp__display-value {
	margin: 0;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1.1;
	color: var(--dwo-text);
	font-size: var(--dwo-font-display-md);
}

.dwo-cp__display-value--md {
	font-size: var(--dwo-font-display-sm);
}

.dwo-cp__display-value--lg {
	font-size: var(--dwo-font-display-lg);
}

.dwo-cp__display-name {
	margin: 0 0 4px;
	/* Sprint "Tablet UX 1.0": imię na ekranie START jest celowo większe niż standardowe
	   --dwo-font-name-lg (hierarchia najważniejszego elementu ekranu) — zachowane z etapu
	   UX 2.1, przeniesione na skalę responsywną zamiast sztywnego 2.25rem. */
	font-size: clamp(1.8rem, 3.6vw, 2.75rem);
	font-weight: 800;
	color: var(--dwo-text);
	word-break: break-word;
}

/* --- Animacje wspólne (zmiana widoku / pojawienie karty) ----------------- */
/* Uwaga: reguła .dwo-cp__view:not([hidden]) (widoczność/układ flex/wyśrodkowanie) jest
   zdefiniowana wyżej, razem z resztą tokenów kontenera (Sprint "Tablet UX 1.0") — tutaj
   pozostaje wyłącznie definicja @keyframes, używana przez tamtą regułę (kolejność definicji
   @keyframes w arkuszu nie ma znaczenia dla przeglądarki). */

@keyframes dwo-cp-view-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes dwo-cp-card-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.dwo-cp__card {
	animation: dwo-cp-card-in var(--dwo-motion-base) ease;
}

/* --- Widok 1: siatka wyboru pracownika (ekran terminala) ---------------- */
/* Zaprojektowane pod tablet: duże, jednoznaczne kafelki, obsługa w rękawiczkach,
 * minimum tekstu. Liczba kolumn sterowana klasą .dwo-cp__grid--* nadawaną w PHP
 * wg liczby aktywnych pracowników (1–4 / 5–8 / 9–12 / 13–16 / 17+):
 * - poniżej ok. 900px szerokości ekranu siatka jest w pełni płynna (auto-fit +
 *   minmax), żeby nigdy nie było poziomego przewijania ani zbyt małych kafelków,
 * - od ok. 900px (desktop / szeroki tablet): dokładnie 4 kolumny dla 5–8, 9–12
 *   i (do 1300px) 13–16 osób; od ok. 1300px — 5 kolumn dla 13–16 osób,
 * - 17+ osób: analogicznie, nieco bardziej zwarte kafelki, żeby lista mieściła
 *   się bez nadmiernego przewijania pionowego,
 * - dodanie/usunięcie pracownika w obrębie tego samego przedziału nigdy nie
 *   wymaga ręcznej poprawki CSS.
 *
 * Sprint "Tablet UX 1.0": powyższe reguły oparte o SZEROKOŚĆ pozostają jako baza/fallback
 * (m.in. dla desktopu i telefonu), ale priorytetowy przypadek — tablet — jest dodatkowo
 * jawnie sterowany ORIENTACJĄ (sekcja 7 briefu: nie opieraj layoutu wyłącznie na szerokości):
 * poziomo od 768px szerokości → 4 kolumny (typowy tablet w landscape, także węższe tablety
 * Android, które nie zawsze osiągają próg 900px); pionowo → 2 kolumny (1 kolumna poniżej
 * 480px jako fallback telefonu, przez bazową regułę auto-fit powyżej). Kafelki mają też jawny
 * max-width (i .dwo-cp__grid jest wyśrodkowane przez justify-content), żeby przy niewielkiej
 * liczbie pracowników na bardzo szerokim ekranie nie stawały się nieproporcjonalnie duże. */

.dwo-cp__clock {
	text-align: center;
	margin-bottom: 4px;
}

.dwo-cp__clock-day {
	font-size: clamp(0.95rem, 1.4vw, 1.15rem);
	font-weight: 600;
	color: var(--dwo-text-muted);
	text-transform: capitalize;
	letter-spacing: 0.02em;
}

.dwo-cp__clock-time {
	font-size: var(--dwo-font-clock);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--dwo-text);
	letter-spacing: 0.02em;
	line-height: 1.15;
}

.dwo-cp__title--grid {
	margin: 4px 0 var(--dwo-space-lg);
}

.dwo-cp__grid {
	display: grid;
	gap: var(--dwo-grid-gap);
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	/* Wyśrodkowuje każdy kafelek w jego kolumnie, gdy kafelek (patrz max-width niżej) jest węższy
	   niż sama kolumna — zapobiega "rozciąganiu" kafelków na ogromną szerokość, gdy pracowników
	   jest niewiele na bardzo szerokim ekranie. */
	justify-content: center;
	justify-items: center;
}

/* 1–4 osoby: kafelki mają zawsze wypełnić dostępny rząd (auto-fit — bez pustych,
   "widmowych" kolumn, gdy pracowników jest mniej niż zmieściłoby się kolumn). */
.dwo-cp__grid--xl {
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

/* 5–8 i 9–12 osób: płynnie poniżej ok. 900px, dokładnie 4 kolumny od 900px w górę
   (desktop / szeroki tablet) — patrz media query niżej. */
.dwo-cp__grid--lg,
.dwo-cp__grid--md {
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

/* 13–16 osób: płynnie poniżej 900px, 4 kolumny od 900px, 5 kolumn od ok. 1300px
   (zależnie od dostępnej szerokości — patrz media query niżej). Kafelki pozostają
   pełnej wielkości — bez zmniejszania w tym przedziale. */
.dwo-cp__grid--sm {
	grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}

/* 17+ osób: przedział spoza jawnych wymagań sprintu — analogiczne, nieco bardziej
   zwarte kafelki (patrz też .dwo-cp__grid--xs .dwo-cp__avatar niżej), żeby lista
   nie rosła w nieskończoność w pionie. */
.dwo-cp__grid--xs {
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	gap: var(--dwo-space-md);
}

@media (min-width: 900px) {
	.dwo-cp__grid--lg,
	.dwo-cp__grid--md,
	.dwo-cp__grid--sm,
	.dwo-cp__grid--xs {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1300px) {
	.dwo-cp__grid--sm,
	.dwo-cp__grid--xs {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* Tablet w poziomie (priorytet #1 briefu) — od 768px, niżej niż ogólny próg 900px wyżej,
   żeby węższe tablety Android w landscape też dostały docelowe 4 kolumny w jednym rzędzie. */
@media (orientation: landscape) and (min-width: 768px) {
	.dwo-cp__grid--lg,
	.dwo-cp__grid--md,
	.dwo-cp__grid--sm,
	.dwo-cp__grid--xs {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Tablet w pionie (priorytet #2) — 2 kolumny niezależnie od klasy wielkości siatki; poniżej
   480px (telefon) reguła się nie włącza i obowiązuje bazowa, płynna reguła auto-fit powyżej
   (1 kolumna jako fallback — sekcja 4 i 9 briefu). Umieszczona po regułach szerokościowych
   powyżej, żeby wygrać na wąskich/średnich tabletach w pionie, które spełniają też próg 900px. */
@media (orientation: portrait) and (min-width: 480px) {
	.dwo-cp__grid--xl,
	.dwo-cp__grid--lg,
	.dwo-cp__grid--md,
	.dwo-cp__grid--sm,
	.dwo-cp__grid--xs {
		grid-template-columns: repeat(2, 1fr);
	}
}

.dwo-cp__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--dwo-space-sm);
	width: 100%;
	max-width: 260px;
	/* Wysokość powiązana też z wysokością widoku (vh) — na niskich ekranach (tablet w
	   poziomie o ograniczonej wysokości) kafelki nie zostają "za wysokie", co redukuje
	   nadmierną pustą przestrzeń pod siatką (sekcja 4 briefu). */
	min-height: clamp(150px, 22vh, 220px);
	padding: clamp(16px, 2.4vw, 22px) clamp(12px, 2vw, 16px);
	background: var(--dwo-surface);
	border: 1px solid var(--dwo-border);
	border-radius: var(--dwo-radius);
	box-shadow: var(--dwo-shadow);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: transform var(--dwo-motion-fast) ease, box-shadow var(--dwo-motion-fast) ease, border-color var(--dwo-motion-fast) ease;
}

.dwo-cp__grid--xl .dwo-cp__tile {
	max-width: 300px;
	min-height: clamp(170px, 26vh, 260px);
	padding: clamp(20px, 3vw, 28px) clamp(16px, 2.4vw, 20px);
}

.dwo-cp__grid--xs .dwo-cp__tile {
	max-width: 220px;
	min-height: clamp(130px, 18vh, 190px);
	padding: clamp(12px, 1.8vw, 18px) clamp(8px, 1.4vw, 12px);
	gap: var(--dwo-space-xs);
}

.dwo-cp__tile:hover {
	border-color: var(--dwo-blue);
}

.dwo-cp__tile:active {
	transform: scale(0.96);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* --- Komponent Avatar — współdzielony przez kafelek siatki i ekran PIN --------- */
/* Jedna definicja wyglądu, używana w dwóch miejscach: PHP renderuje ją na siatce
 * (zdjęcie albo inicjały, wg photo_url), JS renderuje dokładnie tę samą strukturę
 * na ekranie PIN (renderAvatar() w assets/js/public.js) na podstawie danych
 * przepisanych z klikniętego kafelka — bez ponownego liczenia inicjałów w JS. */

.dwo-cp__avatar {
	width: clamp(72px, 9vw, 104px);
	height: clamp(72px, 9vw, 104px);
	flex-shrink: 0;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--dwo-blue);
	margin: 0 auto;
}

.dwo-cp__avatar--lg {
	width: clamp(96px, 11vw, 136px);
	height: clamp(96px, 11vw, 136px);
	margin-bottom: var(--dwo-space-md);
}

.dwo-cp__grid--xs .dwo-cp__avatar {
	width: clamp(56px, 7vw, 80px);
	height: clamp(56px, 7vw, 80px);
}

.dwo-cp__avatar-photo {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* Biały tekst na kolorowym (niebieskim) awatarze — jak w przyciskach, to nie jest
   kolor motywu tylko stały, poprawny kontrast na nasyconym tle. */
.dwo-cp__avatar-initials {
	color: #fff;
	font-size: clamp(1.4rem, 2.2vw, 1.9rem);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.dwo-cp__avatar--lg .dwo-cp__avatar-initials {
	font-size: clamp(1.8rem, 2.6vw, 2.4rem);
}

/* --- Komponent "imię i nazwisko" — współdzielony przez kafelek siatki i PIN --- */

.dwo-cp__person-name {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	line-height: 1.25;
	word-break: break-word;
}

.dwo-cp__person-name--pin {
	margin-bottom: var(--dwo-space-lg);
}

.dwo-cp__person-first-name {
	font-size: var(--dwo-font-name-sm);
	font-weight: 600;
	color: var(--dwo-text-muted);
}

.dwo-cp__person-last-name {
	font-size: var(--dwo-font-name-lg);
	font-weight: 800;
	color: var(--dwo-text);
}

.dwo-cp__grid-hint {
	margin: var(--dwo-space-lg) 0 0;
	text-align: center;
	color: var(--dwo-text-muted);
	font-size: var(--dwo-font-body);
}

/* --- Ekran PIN: kropki + klawiatura ekranowa (etap UX 2.2 "Terminal PIN") --- */
/* Jedyny sposób wpisywania PIN-u — bez natywnego pola/klawiatury systemowej.
   Techniczny input (patrz .dwo-cp__form--hidden-technical) jest wizualnie i
   funkcjonalnie niedostępny dla użytkownika — służy wyłącznie jako nośnik
   wartości dla istniejącej logiki AJAX logowania. */

.dwo-cp__form--hidden-technical {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.dwo-cp__pin-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(16px, 2.4vw, 24px);
	margin: 0 0 var(--dwo-space-lg);
}

.dwo-cp__pin-dot {
	width: clamp(20px, 2.4vw, 26px);
	height: clamp(20px, 2.4vw, 26px);
	flex-shrink: 0;
	border-radius: 50%;
	border: 2px solid var(--dwo-border);
	background: transparent;
	transition: background var(--dwo-motion-fast) ease, border-color var(--dwo-motion-fast) ease, transform var(--dwo-motion-fast) ease;
}

.dwo-cp__pin-dot.is-filled {
	background: var(--dwo-blue);
	border-color: var(--dwo-blue);
	transform: scale(1.1);
}

.dwo-cp__pin-dot.is-error {
	background: var(--dwo-red);
	border-color: var(--dwo-red);
}

/* Krótkie potrząśnięcie kartą przy błędnym PIN-ie — czysto wizualna informacja
   zwrotna, treść komunikatu błędu (#dwo-cp-pin-error) pochodzi z niezmienionej
   odpowiedzi backendu. */
@keyframes dwo-cp-shake {
	10%, 90% { transform: translateX(-2px); }
	20%, 80% { transform: translateX(3px); }
	30%, 50%, 70% { transform: translateX(-5px); }
	40%, 60% { transform: translateX(5px); }
}

.dwo-cp__card.is-shaking {
	animation: dwo-cp-shake 380ms ease;
}

.dwo-cp__keypad {
	/* Sprint "Tablet UX 1.0": zawsze dokładnie 3 równe kolumny (sekcja 5 briefu) — z jawnie
	   większymi przerwami niż wcześniej, żeby ograniczyć przypadkowe pomyłki na tablecie. */
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, 2.2vw, 20px);
	margin-top: 4px;
}

.dwo-cp__keypad-key {
	/* Główny cel dotykowy terminala — preferowane 56–64px (sekcja 3 briefu), tu celowo jeszcze
	   większy zakres (64–92px), bo klawiatura PIN jest najczęściej używanym elementem terminala. */
	min-height: clamp(64px, 9vw, 92px);
	font-size: var(--dwo-font-keypad);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--dwo-text);
	background: var(--dwo-bg);
	border: 1px solid var(--dwo-border);
	border-radius: var(--dwo-radius);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: transform var(--dwo-motion-fast) ease, border-color var(--dwo-motion-fast) ease, background var(--dwo-motion-fast) ease, opacity var(--dwo-motion-fast) ease;
}

.dwo-cp__keypad-key:hover {
	border-color: var(--dwo-blue);
}

.dwo-cp__keypad-key:active {
	transform: scale(0.94);
	background: var(--dwo-surface);
}

.dwo-cp__keypad-key:disabled {
	opacity: 0.5;
	cursor: default;
	transform: none;
}

.dwo-cp__keypad-key--backspace {
	font-size: 1.4rem;
	color: var(--dwo-text-muted);
}

.dwo-cp__keypad-spacer {
	pointer-events: none;
}

/* --- Karta (PIN, START, zgłoszenie, WORKING, COMPLETED, SUCCESS) --------- */

.dwo-cp__card {
	width: 100%;
	/* Sprint "Tablet UX 1.0": karta jest teraz wyraźnie szersza na tablecie (płynnie, przez
	   min()), z rozsądnym sufitem, żeby nie "rozjechać się" na bardzo szerokim desktopie
	   (sekcja 6 briefu). Poprzednia sztywna wartość: 420px. */
	max-width: var(--dwo-card-width);
	margin: 0 auto;
	background: var(--dwo-surface);
	border: 1px solid var(--dwo-border);
	border-radius: var(--dwo-radius);
	padding: var(--dwo-card-padding);
	text-align: center;
	box-shadow: var(--dwo-shadow);
}

.dwo-cp__subtitle {
	font-size: var(--dwo-font-subtitle);
	margin: 0 0 var(--dwo-space-md);
	color: var(--dwo-text);
}

.dwo-cp__notice {
	font-size: var(--dwo-font-subtitle);
	font-weight: 700;
	color: var(--dwo-green);
	margin: 0 0 var(--dwo-space-lg);
}

.dwo-cp__form {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.dwo-cp__label {
	font-weight: 600;
	margin: var(--dwo-space-md) 0 6px;
	color: var(--dwo-text);
}

.dwo-cp__button {
	position: relative;
	margin-top: var(--dwo-space-md);
	width: 100%;
	font-size: var(--dwo-font-body);
	/* Główny cel dotykowy (START/STOP/nadgodziny/GOTOWE itd.) — preferowane 56–64px
	   (sekcja 3 briefu). min-height (nie height) — przycisk może urosnąć, gdy tekst
	   się zawinie, nigdy nie ucina treści. */
	min-height: var(--dwo-button-height);
	padding: 14px;
	border: none;
	border-radius: var(--dwo-radius);
	background: var(--dwo-blue);
	/* Biały tekst na kolorowym przycisku — stały, poprawny kontrast niezależny od
	   wariantu koloru (niebieski/zielony/czerwony/szary), nie jest kolorem motywu. */
	color: #fff;
	cursor: pointer;
	transition: transform var(--dwo-motion-fast) ease, box-shadow var(--dwo-motion-fast) ease, filter var(--dwo-motion-fast) ease;
}

.dwo-cp__button:hover {
	filter: brightness(1.08);
}

.dwo-cp__button:active {
	opacity: 0.85;
	transform: scale(0.98);
}

.dwo-cp__button:disabled {
	opacity: 0.7;
	cursor: default;
}

.dwo-cp__button--secondary {
	background: var(--dwo-text-muted);
}

/* Wskaźnik ładowania na przycisku — zawsze gaszony po zakończeniu żądania (sukces/błąd/timeout). */
.dwo-cp__button.is-loading::after {
	content: '';
	position: absolute;
	right: 14px;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-top-color: #fff;
	border-radius: 50%;
	animation: dwo-cp-spin 0.7s linear infinite;
}

@keyframes dwo-cp-spin {
	to {
		transform: rotate(360deg);
	}
}

.dwo-cp__error {
	background: var(--dwo-surface);
	color: var(--dwo-red);
	border: 1px solid var(--dwo-red);
	border-radius: var(--dwo-radius);
	padding: 10px 12px;
	margin-bottom: var(--dwo-space-md);
	font-size: var(--dwo-font-body);
}

/* --- Widoki akcji czasu pracy (start / zapomniałem / working / completed) --- */

.dwo-cp__meta {
	font-size: var(--dwo-font-body);
	color: var(--dwo-text-muted);
	margin-bottom: var(--dwo-space-lg);
}

.dwo-cp__button--start {
	background: var(--dwo-green);
}

.dwo-cp__button--stop {
	background: var(--dwo-red);
}

/* Nadgodziny (Sprint 3C) — jedyny nowy akcent koloru w tym sprincie, wyłącznie z istniejącego
   tokenu --dwo-orange (zdefiniowany od etapu UX 2a, dotąd nieużywany w żadnym komponencie). */
.dwo-cp__button--overtime {
	background: var(--dwo-orange);
}

/* Dwa równorzędne przyciski obok siebie (ekran "zmiana zakończona": GOTOWE + Rozpocznij
   nadgodziny) — jedyne miejsce w aplikacji z dwoma przyciskami w jednym rzędzie, dlatego
   osobna, jawnie nazwana klasa układu zamiast rozszerzania .dwo-cp__button o nowy wariant. */
.dwo-cp__button-row {
	display: flex;
	gap: var(--dwo-space-md);
	margin-top: var(--dwo-space-md);
}

.dwo-cp__button-row .dwo-cp__button {
	margin-top: 0;
	flex: 1 1 0;
	min-width: 0;
	font-size: var(--dwo-font-body);
	padding: 14px 8px;
}

.dwo-cp__link {
	margin-top: var(--dwo-space-md);
	background: none;
	border: none;
	color: var(--dwo-blue);
	font-size: var(--dwo-font-body);
	text-decoration: underline;
	cursor: pointer;
	/* Cel dotykowy min. 48px (sekcja 3 briefu) — nawet dla drugorzędnych linków ("Wróć",
	   "Wyloguj"); padding poziomy dodatkowo ułatwia trafienie kciukiem bez zwiększania
	   wizualnej dominacji nad głównymi przyciskami (pozostaje tekstowy, podkreślony link). */
	min-height: var(--dwo-touch-min);
	padding: 8px 12px;
	transition: color var(--dwo-motion-fast) ease;
}

.dwo-cp__link--muted {
	color: var(--dwo-text-muted);
}

.dwo-cp__textarea {
	width: 100%;
	font-size: var(--dwo-font-body);
	min-height: var(--dwo-touch-min);
	padding: 12px;
	background: var(--dwo-bg);
	color: var(--dwo-text);
	border: 1px solid var(--dwo-border);
	border-radius: var(--dwo-radius);
	font-family: inherit;
	resize: vertical;
}

.dwo-cp__time {
	width: 100%;
	font-size: 1.1rem;
	min-height: var(--dwo-touch-min);
	padding: 12px;
	background: var(--dwo-bg);
	color: var(--dwo-text);
	border: 1px solid var(--dwo-border);
	border-radius: var(--dwo-radius);
}

/* --- Ekran "praca w toku" — duży licznik czasu pracy (etap UX 2.1) ----------- */

.dwo-cp__timer {
	margin: 8px 0 var(--dwo-space-lg);
}

/* --- Ekran "zmiana zakończona" — start/koniec + wyeksponowany łączny czas --- */
/* Sprint "Tablet UX 1.0" (sekcja 6 briefu): Start/Koniec w dwóch równych kolumnach (flex 1 1 0
   na oba bloki — bez zmian od poprzedniego etapu, już spełniało ten wymóg), Łączny czas jako
   główny wynik (już największy .dwo-cp__display-value w tej karcie), odstępy responsywne. */

.dwo-cp__completed-times {
	display: flex;
	justify-content: center;
	gap: var(--dwo-space-xl);
	margin: 8px 0 var(--dwo-space-lg);
}

.dwo-cp__completed-time-block {
	flex: 1 1 0;
	min-width: 0;
}

.dwo-cp__completed-total {
	padding-top: 20px;
	margin-bottom: 8px;
	border-top: 1px solid var(--dwo-border);
}

.dwo-cp__completed-total .dwo-cp__display-value {
	color: var(--dwo-green);
}

/* --- Ekran "nadgodziny zakończone" — jak wyżej, akcent pomarańczowy + powód (Sprint 3C) --- */

.dwo-cp__completed-total--overtime .dwo-cp__display-value {
	color: var(--dwo-orange);
}

.dwo-cp__completed-reason {
	margin-bottom: 8px;
}

.dwo-cp__completed-reason-value {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--dwo-text);
}

/* --- Ekran wyboru powodu nadgodzin (Sprint 3C) --------------------------- */
/* Lista renderowana w JS z config.overtimeReasons — pojedynczy wybór (radiogroup),
   zaznaczenie wyłącznie zmianą obramowania/tła, bez nowych tokenów kolorów. */

.dwo-cp__reason-list {
	display: flex;
	flex-direction: column;
	/* Odstęp między opcjami zwiększony (Sprint "Tablet UX 1.0", sekcja 3 briefu: "zachowaj
	   odpowiednie odstępy między przyciskami, żeby ograniczyć pomyłki"). */
	gap: var(--dwo-space-sm);
	margin-bottom: var(--dwo-space-lg);
	text-align: left;
}

.dwo-cp__reason-option {
	width: 100%;
	text-align: left;
	font-size: var(--dwo-font-body);
	font-weight: 600;
	padding: 14px 16px;
	min-height: var(--dwo-button-height);
	background: var(--dwo-bg);
	color: var(--dwo-text);
	border: 1px solid var(--dwo-border);
	border-radius: var(--dwo-radius);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: border-color var(--dwo-motion-fast) ease, background var(--dwo-motion-fast) ease, transform var(--dwo-motion-fast) ease;
}

.dwo-cp__reason-option:hover {
	border-color: var(--dwo-orange);
}

.dwo-cp__reason-option:active {
	transform: scale(0.98);
}

.dwo-cp__reason-option.is-selected {
	border-color: var(--dwo-orange);
	background: var(--dwo-surface);
	box-shadow: inset 0 0 0 1px var(--dwo-orange);
}

.dwo-cp__field {
	text-align: left;
	margin-bottom: 4px;
}

/* --- Ekran sukcesu ------------------------------------------------------- */

.dwo-cp__view--success .dwo-cp__card {
	text-align: center;
}

@keyframes dwo-cp-success-pop {
	from {
		opacity: 0;
		transform: scale(0.8);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.dwo-cp__success-icon {
	width: clamp(80px, 10vw, 112px);
	height: clamp(80px, 10vw, 112px);
	line-height: clamp(80px, 10vw, 112px);
	margin: 0 auto var(--dwo-space-md);
	border-radius: 50%;
	background: var(--dwo-surface);
	border: 2px solid var(--dwo-green);
	color: var(--dwo-green);
	font-size: var(--dwo-font-display-sm);
	font-weight: 700;
	animation: dwo-cp-success-pop var(--dwo-motion-base) ease;
}

/* Sprint "Tablet UX 1.0" — sekcja 7 briefu (orientacja) i 8 (desktop bez regresji):
 * poprzedni sztywny breakpoint @media (min-width: 600px) został zastąpiony przez tokeny
 * clamp() na .dwo-cp__card/.dwo-cp__title powyżej (skalują się płynnie zamiast "skoku" na
 * jednym breakpoincie) — usunięcie tamtej reguły nie zmienia zachowania na desktopie ani na
 * telefonie, ponieważ clamp() już obejmuje ten sam zakres wartości.
 *
 * Landscape o ograniczonej wysokości (typowe dla mniejszych tabletów Android w poziomie,
 * gdzie szerokość jest duża, ale wysokość ograniczona) — celowo zmniejsza pionowy "oddech",
 * żeby karta i tak zmieściła się bez przewijania w typowej wysokości paska adresu. */
@media (orientation: landscape) and (max-height: 520px) {
	.dwo-cp__card {
		padding: clamp(16px, 3vh, 28px) clamp(20px, 4vw, 40px);
	}

	.dwo-cp__timer {
		margin: 4px 0 clamp(12px, 2.4vh, 20px);
	}

	.dwo-cp__completed-times {
		margin: 4px 0 clamp(12px, 2.4vh, 20px);
	}
}

/* Bardzo wąski ekran (telefon w pionie, sekcja 9 briefu — "tryb awaryjny", nie główne
 * urządzenie): siatka i tak spada do 1 kolumny przez bazową regułę auto-fit (patrz wyżej),
 * a karta wypełnia niemal całą szerokość dzięki min(560px, 92vw) — reguła poniżej wyłącznie
 * lekko zwęża padding karty, żeby przy 320–360px szerokości nic się nie ścieśniało. */
@media (max-width: 380px) {
	.dwo-cp__card {
		padding: clamp(20px, 6vw, 28px) clamp(14px, 4vw, 20px);
	}
}

/* --- Tryb Pełnoekranowy (Kiosk) — Sprint "Tryb terminala pełnoekranowego (Kiosk)" --------
 * Aktywne WYŁĄCZNIE, gdy strona jest wyrenderowana przez dedykowany, minimalny szablon
 * templates/public-kiosk-page.php (patrz DWO_CP_Shortcode::maybe_serve_kiosk_page()) —
 * rozpoznawalne po klasach .dwo-cp-kiosk-html/.dwo-cp-kiosk-body, których Tryb Standardowy
 * nigdy nie dodaje. Wyłącznie usuwa górny margines/max-width/zaokrąglenie górnego paska, żeby
 * terminal wypełniał całe okno przeglądarki (100% szerokości i wysokości) — cała reszta
 * stylów, tokenów i logiki terminala jest w 100% współdzielona z Trybem Standardowym, bez
 * żadnego drugiego, równoległego zestawu reguł. */
html.dwo-cp-kiosk-html,
body.dwo-cp-kiosk-body {
	margin: 0;
	padding: 0;
	height: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	background: #0b1220;
}

body.dwo-cp-kiosk-body .dwo-cp {
	max-width: none;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
	border-radius: 0;
}

body.dwo-cp-kiosk-body .dwo-cp__topbar {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}